[wordpress] markdown+Prismaticでコードをイケてる感じに表示する

markdownで書きたかったので調べたところJetpackの設定でmarkdownを有効にできるらしい、ということでJetpack-設定-執筆-プレーンテキストの Markdown 構文で投稿やページに書き込みを有効。

markdownで書いても効かない。

要素を見るとPタグとかが生成されていて、どうやらビジュアルエディタが勝手にHTMLに変換してくれているのが原因。

プロフィールからビジュアルリッチエディタを使用しないにチェックをいれると投稿画面からビジュアルのタグが消えてテキスト入力だけになる。

この状態でmarkdownを試したら期待した表示がされていた。

デフォルトだとコードを書いたときのスタイルがシンプルなのでPluginを探す。
SyntaxHighlighter Evolvedを使った情報が結構あったけど、エスケープ対応が面倒なので別のを探す。
Prismaticというものがmarkdownでも使えるし、Prism.jsとHighlight.jsが選択可能で見た目もよさげ。
自分の環境だとSettingのEnable Line Numberがうまく動いていないけど期待するclass名をmarkdownで入れたら表示できた。
言語を指定する場合はlanguage-のprefixをつける必要がある。

``` {.line-numbers .language-javascript}

という感じすればこんな感じで行番号がつく

const hoge = {};
const fuga = () => 1234;