Crayon Syntax Highlighterの設定と使い方:記事中にソースコードを表示

Crayon Syntax Highlighterの設定と使い方

プラグイン「Crayon Syntax Highlighter」を追加すると、記事中に見やすいソースコードを表示させることができます。Webサイト上で「HTML」「CSS」「PHP」の解説をする時に使うと便利です。

設定

Crayon Syntax Highlighterを追加&有効化し、ダッシュボードの設定「Crayon」から各種設定を行います(細かい設定もできますが初期設定のままで問題なく使えます)。

Crayon Syntax Highlighterの設定

Crayon Syntax Highlighterの設定

僕は6箇所変更していますが、分からない方は特に変更する必要はありません。

Theme

全体のデザインやカラーを変更することができます(プレビューで確認)。

Crayon Syntax Highlighter(Theme)

Crayon Syntax Highlighter(Theme)

Font

フォントの「種類」「大きさ」「行の高さ」を調整することができます(プレビューで確認)。

Crayon Syntax Highlighter(Font)

Crayon Syntax Highlighter(Font)

Metrics

上下の余白を調整することができます。

Crayon Syntax Highlighter(Metrics)

Crayon Syntax Highlighter(Metrics)

Toolbar

「Display the Toolbar」で「Always」を選択すると、ツールバーを常に表示させることができます。

Crayon Syntax Highlighter(Toolbar)

Crayon Syntax Highlighter(Toolbar)

Lines

「Wrap lines by default」にチェックを入れると、行の折り返しが有効になります。

Crayon Syntax Highlighter(Lines)

Crayon Syntax Highlighter(Lines)

Misc

「Attempt to load Crayon’s CSS and JavaScript only when needed」にチェックを入れると、必要な時だけCrayonのCSSとJavaScriptが読み込まれます(ページの表示速度スコアが改善されます)。

Crayon Syntax Highlighter(Misc)

Crayon Syntax Highlighter(Misc)

最後に「変更を保存」をクリックして設定完了です。

使い方

基本

コードを「preタグ」で囲むだけで機能します。

応用

更に細かい調整が必要な時は、記事編集画面の「Crayon」タグからコードを追加します(ビジュアルエディタは「<>」タグから追加)。

記事編集画面のCrayonタグ

記事編集画面のCrayonタグ

必要な項目を入力します(ソースコード以外は全て任意)。

Crayon Syntax Highlighterの詳細設定

Crayon Syntax Highlighterの詳細設定

Title ツールバーにタイトルを表示する
Inline 行数表示を消してコードを一列で表示する
Don’t Highlight 全て黒文字で表示する
Language ツールバーに言語を表示する
Line Range 入力した数字の行のみ表示する
Marked Lines 入力した数字の行をハイライト表示する
URL リンク先のソースコードを全文表示する

設定できたら、「Add」ボタンで記事にコードを挿入します。

Crayon Syntax Highlighterを使う理由

一部の特殊文字は、文字実体参照に置き換えなければコードを表示できないからです。

特殊文字 文字実体参照
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

また、WordPressは一部の特殊文字「“(引用符)」等をコピーした際に自動で全角変換されます(文字実体参照やpreタグ内を除く)。詳細は関数リファレンス/wptexturizeで確認できます。

PHPを編集して自動変換させている関数を止めることもできますが、ソースをのまま表示させるプラグイン「Crayon Syntax Highlighter」を使った方が簡単かつ見やすいと思います。

最後に

同じ機能を持ったプラグインSyntaxHighlighter Evolvedも使ってみたのですが、個人的にはCrayon Syntax Highlighterの方が使いやすかったです。

ブログでソースコードを表示させたい時には必須のプラグインだと思います。

スポンサーリンク
スポンサーリンク