【WordPressプラグイン】Crayon Syntax Highlighterの設定と使い方

Crayon Syntax Highlighterはソースコードをブログで紹介する時に便利なプラグインです。テーマの数もたくさんあり、自分好みにカスタマイズすることも可能です。この記事では設定方法と使い方を紹介します。

 

Crayon Syntax Highlighterをインストール

早速、Crayon Syntax Highlighterをインストールしていきましょう。

まずは、管理画面を開き「プラグイン」から「新規追加」を選択します。

「Crayon Syntax Highlighter」と入力して検索します。

表示されたら「今すぐインストール」をクリック

「有効化」をクリックすると↓の「有効」になります。

これでプラグインが追加されました。

日本語化

このプラグインには翻訳ファイルが用意されていますが、その翻訳ファイルが原因で日本語化できないようです。

まずは、その翻訳ファイルを削除します。

FTPソフトを使って順番にファイルを開いていきます。

サイト名.com → public_html → wp-content → languages → plugins

その中にある↓のファイルを削除します。(※削除する前にバックアップをとってください)

  • crayon-syntax-highlighter-ja.mo
  • crayon-syntax-highlighter-ja.po

これで日本語化されます・・・・が、WordPressがアップデートする度に復活します。

ファイルが再作成されないように、強制的に自動更新を止める方法はおすすめしません。

他にも、強制的に別ファイルに読み込ませる方法があります。ファイルを削除するのが面倒な方はこちらの記事を参考にPHPファイルに記述してください。
参考サイト:nobutstyle.com

Crayon Syntax Highlighter設定

管理画面に戻り、設定から「Crayon」を選択します。

設定画面が開いたら、一般設定から設定していきましょう。

テーマ

好きなテーマを選ぶか、自分でカスタマイズします。(画像はカスタマイズ済み)

カスタマイズする場合はこちらの記事を参考にしてください。
関連記事:Crayon Syntax HighlighterのCSSカスタマイズ

プルダウンからストックされたテーマの一覧が見れます。全部で58種類あります。

全てのテーマを見てみたい方はこちらの記事をどうぞ。
関連記事:Crayon Syntax Highlighter全テーマ58種まとめ

その横にあるボタンは

  • Edit:「編集」ストックテーマの複製をすると編集できるようになります
  • Duplicate:「複製」選んだストックテーマを複製(コピー)
  • Submit:「送信」編集したテーマを開発者にメールで送り、誰でも使えるようにします
  • Delete:「削除」編集したテーマを削除

とりあえず、デフォルトのClassicを選んで次に進みます。(後から変更できます)

フォント

表示するソースコードのフォントを選びます。

プルダウンで一覧が見れます。

14種類の中から選べます。好きなフォントを選んでください。

フォントサイズ(文字の大きさ)とInline Height(行の高さ)を指定して次へ

サイズ

全体の高さや幅を指定します。何も指定しなくてもOKです。
※デフォルトでwidth(幅)は100%、height(高さ)はauto自動になっています。

余白は上下左右に付けられるので、好みで設定してみてください。

ツールバー

ツールバーを表示するかどうかを設定します。

  • ツールバーを表示:「常に表示」「マウスオーバー時(カーソルを乗せると表示する)」「表示しない」の中から選びます。
  • ソース言語を表示:「常に表示」「言語が判明した時」「表示しない」
    表示を選択すると、ツールバーの一番右に表示されます。※タイトルとは違うので注意

行の縞模様や行番号がいらない場合はチェックを外します。

日本語化しても翻訳されないところがあるので、翻訳機能を使うと

  • Enable line ranges for showing only parts of code
    コードの部分だけを表示する行範囲を有効にする
  • Wrap lines by default:デフォルトで行の折り返し
  • Enable line wrap toggling:行の折り返しトグルを有効にする

「デフォルトで行の折り返し」はスクロールバーを表示したくない時に設定しますが、基本的にはそのままでOKです。

コード

ここはデフォルトのままでOKですが、任意で変更してください。

また翻訳されてないところを日本語にしてみました。

  • プレーンコードビューを有効にする:白い背景に黒文字のコードを表示
    • ダブルクリックした時
    • マウスオーバー時
    • クリックした時
    • マウスイベント無効
  • Minimize code:クリックするまでコードを非表示にする
  • Expand code beyond page borders on mouseover:マウスオーバーでページ罫線の後ろにコードを展開
  • Enable code expanding toggling when possible:コードを展開可能な場合の切り替えを有効にする
  • Remove tags surrounding the shortcode content:ショートコードのコンテンツを囲むを削除
  • Convert tabs to spaces:タブをスペースに変換
  • Blank lines before code:コードの前に空白行
  • Blank lines after code:コードの後に空白行
    ソースコードを1行だけ表示する時に、見づらいので追加した方が見やすいと思います。

補足として、HTMLエンティティ(HTML entities)とは<をのように変換してブラウザで表示できるようにします。元に戻すときはDecode HTML

タグ

ここも特に変更するところはないので、そのままでOKです。

プログラム言語など

ここもデフォルトのままでOKです。

「ソース言語を表示する」をクリックすると

ずら~っと全ての言語一覧が表示されます。(長いので一部抜粋)
Posts の「Crayonを使ってる投稿を表示」をクリックすると

Crayonを使っている記事の一覧が見れます。表示がおかしい時は横の「更新」ボタンを押して更新します。

タグエディターはCrayon Mini Tagsや他のSyntax Highlighterを使っている場合はタグを変換できるようです。

プラグインを高速化する

Crayon Syntax Highlighterは重いと言われたりしますが、その原因は常にスクリプトを読み込んでしまうからです。そうしないように設定していきます。

その他の設定

黄色い線を引いたところが重要です。

  • 必要な時だけCrayonのCSSとJavaScriptを読み込むようにする
  • Load scripts in the page footer using wp_footer() to improve loading performance.
    読み込みパフォーマンスを向上させるためにwp_footer()を使用してページフッターにスクリプトを読み込む

この2つにチェックを入れると軽くすることができます。

最後に、変更を保存して設定は終わりです。

Crayon Syntax Highlighterの使い方

実際に、記事にCrayon Syntax Highlighterを挿入してみましょう。

管理画面に戻り、投稿から新規追加を選択して投稿画面を開きます。

まずは、テキストエディターから

「Crayon」というボタンが追加されているのでクリックします。

ビジュアルエディターの場合は<>をクリックしてください。すると次の画面が表示されます。

タイトルにHTMLやCSSなど短い文章を入力して、コードの部分にソースコードを入力、またはコピペします。

右上の「挿入」をクリックします。

すると・・・

記事に追加されました。

テキストエディターでは

このように表示されます。

プレビューボタンを押して確認します。

ちゃんと表示されました。

ツールバーの使い方

次に、ツールバーの使い方を紹介します。

画像の上の部分↓

右上にボタンが並んでいます。

左から順番に「行番号の表示/非表示」ボタン。デフォルトでは押された状態です。

次は「プレーンコードを表示/非表示」ボタン。

その隣は「全ての行を表示/非表示」」ボタン。自動で改行してくれます。コードが長いとスクロールバーが表示されますが、スマホなどでは見づらいですよね。そんな時に使うと便利です。設定で始めから表示することもできます。

ボタンを押す前

ボタンを押した後

このように改行されます。

次は「コードをコピー」ボタン。あとは貼り付けるだけです。

最後は「新しいウィンドウでコードを表示」ボタン

画像では小さくなっていますが、全画面表示されます。スクロールしたり、改行したりして見づらい時にコード全体を見られるので便利です。

以上で、Crayon Syntax Highlighterの設定と使い方の解説は終わりです。

 
カスタマイズする場合はこちらの記事を参考にしてください。
Crayon Syntax HighlighterのCSSカスタマイズ