記事内でコードを成型して表示させるエリアを作りたい「Crayon Syntax Highlighter」

2018年11月7日ブログ運営, ライフハック

Crayon Syntax Highlighterを使えば、成型エリアが作れる

ブログなどのWordPress記事でPHPやHTMLなど各言語のソースコードを、見やすく成型表示したいときは「Crayon Syntax Highlighter」というプラグインを使う事をオススメします。

Excelやプログラムのソースコードを調べるときによく見かけると思います。

使った時の表示例

例えば、「Crayon Syntax Highlighter」を使ってサンプルコードを書くと、下記のような感じにできます。

行の見分けやタグにも色がついて、かなり見やすくなります。

 

Crayon Syntax Highlighterの使い方

編集画面のエディタ項目に「<>」みたいなマークがあるので、そこを選択すると下記コードエリアの追加画面がでてきます。

すべて英語ですが、細かく設定できます。「Language」の項目で、「PHP」などの言語を指定できます。

設定が終わったら上部の黒いバーの右側にある「Add」を押すと完了です。