プラグインUrvanov Syntax Highlighter（旧Crayon Syntax Highlighter）の設定と使い方をまとめておきます。
このプラグインを使うと、記事中にソースコードを表示させることができます。直接記述できない文字や記号を文字実態参照に置き換える必要がないので、「HTML」「CSS」「PHP」等を解説する時に使うと便利です。preタグで囲むだけで機能しますし、ブロックエディターにも対応しています。
設定と使い方
プラグインを有効化すると、管理画面の設定に「Crayon」が追加されます。
使い方
細かい設定が不要なら、コードをpreタグで囲むだけで機能します。
ブロックエディターの場合も同様、専用ブロックを追加してコードを貼り付けるだけです。
詳細設定を追加したい時は、タグの「Crayon（<>）」ボタンから追加します（ブロックエディターも同様）。
ツールバーに「タイトル」「プログラミング言語」を表示させたり、特定の行をハイライトさせることができます。コード以外は全て任意ですから、必要であればお好みでカスタマイズして下さい。
基本設定
管理画面の設定「Crayon」から、基本設定やデザインを変更することができます。
全て任意ですが、今回は個人的に気になった設定をまとめておきます（分からない項目は初期設定推奨）。
ツールバーの表示を「常に表示」にすると、マウス操作でツールバーが上下するのを防いでくれます。
行の「デフォルトで行を折り返す」にチェックを入れると、横スクロールバーが表示されなくなります。
その他の「必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる」にチェックを入れると、必要な時だけCrayonのCSSとJavaScriptが読み込まれます（ページの表示速度スコアが改善される可能性がある）。
フォントや余白の設定は、プレビューを確認しながらご自身で設定して下さい。
※が付いている項目は、ツールバーに表示されるメニューアイコンです。
カスタマイズ
更に細かくカスタマイズしたい方は、ベースとなるテーマを選択して「複製」をクリックします。
一覧に追加されたCopyテーマを選択して、「編集」をクリックします。
文字色やボーダーの色と太さを自由に変更することができます。
用意されているテーマに変更を加えたい時は、複製してから編集して下さい。
最後に
基本はプラグインを有効化してコードをpreタグで囲むだけなので使い方は簡単です。
細かい設定やデザインも変更できますから、Crayon Syntax Highlighterからの乗り換えだけでなく、これからコード表示系のプラグインの導入を検討されている方にもおすすめです。
コメント