wordpressのソース表示をPrism.jsとプラグインで改善する

wordpressでPrism.jsとプラグインでソースコードなどを少し綺麗に表示する。

codepenに書いたmdtohtml変換器、というかmarked.jsはCommonMarkをサポートしているので、コードブロックの先頭に、言語名を追加することでシンタックスハイライトが行いやすくなっていることに気づいた。

目標
markdownでの記法
Prismと連携

目標

markdownで記述し、htmlに変換し、wordpressの投稿画面にコピペ、の流れでソースコードなどにシンタックスハイライトが有効になるようにする。

markdownでの記法

CommonMark Specを参考に、


```python
if __name__ == '__main__':
    print('Hello World!')
    a = 5
    if a > 3:
        print('a is greater than 3')
```

とすると、次の出力が得られる:

<pre><code class="language-python">if __name__ == '__main__':
    print('Hello World!')
    a = 5
    if a &gt; 3:
        print('a is greater than 3')</code></pre>

上でも述べてあるが、``` のコードブロックの開始時に言語を指定しておけば良い。

Prismと連携

Prismを使うことで付加されたクラス名に基づいてシンタックスハイライトを追加できる。

これの使用については、wordpressのプラグインPrism Syntax Highlighter(またの名をPrism For WP)も併用する。プラグインのページGitHub - ankurk91/wp-prism-js: Prism Syntax Highlighter Plugin for WordPressを見ると更新が止まっているのが気になるが、使えていればまあ良いだろう。

Prism Syntax Highlighterの設定事項はインストール後に設定画面からハイライトしたい言語にチェックを入れるだけのようだ。

Prismでのハイライトのデザイン指定も行う。と思ったが、テーマの選択しかできない。ファイルを取り出して編集するのも面倒なので、wordpressのテーマに合いそうなのを既存のものから選ぶことにした。