syntax highlighter の Prismjsを導入

今後プログラムを含む記事が増える予定なのでsyntax highlighter を導入しました。
色々方法があるようですが、とりあえず検索した中で比較的評判の良かったprismjsを採用します。

Prismjsの導入

WordPress用に Prism For WP というプラグインがあるようなのでこれをインストールして有効化。
設定画面で、利用予定の言語(Pythonなど)にチェックを入れました。
MarkupというのがHTMLらしいです。

行番号表示機能も使いそうなので、Select Pluginsの Line Numbers にもチェック。
また、Normalize Whitespace を有効化しておくと先頭行の不要な空白を消してくれるそうです。

ソースコードをpreタグとcodeタグで囲み、preタグのclassにline-numbers、codeタグのクラスにlanguage-x(xは言語名)を設定します。

HTMLで使用した例


<pre class="line-numbers"><code class="language-markup">
    ここにHTMLのソースコードを書く
</code></pre>

Pythonで使う場合は language-python。使ってみた例。

記事に書いたコード


<pre class="line-numbers"><code class="language-python">
a, b = 0, 1
for _ in range(10):
    a, b = b, a + b
    print(b)
</code></pre>

表示結果


a, b = 0, 1
print(b)
for _ in range(10):
    a, b = b, a + b
    print(b)

ちなみにサンプルのプログラムはフィボナッチ数列を出力します。