markdown環境にWP Editor.mdを利用

このwordpressでのブログの記述にはmarseditを使っているのですが、諸々記述するのにmarkdown記法を使っています。

wordpressでmarkdown記法を使うには色々選択肢があるとは思うのですが、私の求めていた条件と諸々テストした結果を記載しておこうと思います。

求めていた条件と妥協点
1. 条件
2. 妥協点
結論
1. marsedit側の設定
2. wordpress側の設定
試行錯誤の歴史

求めていた条件と妥協点

条件

marseditでmarkdown記法で記載できること
シンタックスハイライトできること
シンタックスハイライトには行番号が付与できること
シンタックスハイライトには言語指定ができ、あえてハイライトしない指定ができること
エスケープ処理しなくても良いこと

妥協点

marseditでのプレビューはできなくても良い(サイトで確認するから)
シンタックスハイライトの言語の種類はメジャーなものだけでじゅうぶん

結論

結論から言うと、wordpressにプラグイン「WP Editor.md」をインストールするだけでした。

marsedit側の設定

marseditでのmarkdownは元々対応できているので問題はありませんでした。PreferencesのEditingのPreview Text Filterでmarkdownを選択するだけです。

marseditはカスタマイズすればもっと便利にできますが、markdownを最低限使えれば良いというのであればこれだけです。

強いてmarseditに注文をつけるとすれば、編集画面で画像を表示して欲しいというところですが、それは欲張りというものでしょう。プレビューがリアルタイムで反映されますので全然問題無いと思います。

wordpress側の設定

wordpressにはプラグイン「WP Editor.md」を入れました。

WP Editor.mdはmarkdownエディタとシンタックスハイライターのPrism.jsを統合しているもので、このプラグインだけでmarkdownとシンタックスハイライトが実現できます。

wordpressの投稿画面のエディタをmarkdown用エディタに置き換えますが、私は使わないので問題ありません。

Prism.jsではハイライト処理したく無い場合はmarkdownで”textile”と指定すれば”language-textile”となってハイライト処理されません。後述するhighlight.jsと違って便利に使える面です。

参考までに行番号付きでtextileの時は次のようになります。

<pre><code class="language-textile line-numbers">

試行錯誤の歴史

この環境に至るまでに色々試行錯誤したのですが、そのうち主なものを記録しておきます。

wordpress 5.5のmarkdown

wordpressには標準でmarkdown機能がついていて、ブロックエディタではmarkdownでの記載ができます。

しかし、marseditのような外部からの書き込みではmarkdownが有効になりませんでした。

marseditや一般的なエディタでmarkdownで下書きを行なってからwordpressにペーストする事も考えましたが、シンタックスハイライトを行うにあたって言語の指定をする余地がありませんでしたので、利用を見送りました。

言語の設定をブロックエディタで行えるプラグインもありそうですが、画像に関する調整も制限があったためブロックエディタの使用そのものを見送ることにしました。

余談ですが、markdownとして入力してもHTMLに変換してから保存されるようで、ブロックエディタでmarkdownで入力してもmarseditで読み出すとHTMLになっていました。別に問題にはならないのですが、できればmarkdownで保存していてほしかったです。

Jetpackのmarkdown

Jetpackはwordpressの標準ともいえるプラグインで、その執筆設定にmarkdownがあります。

Jetpackのmarkdown機能で良ければほぼ標準的な環境で済んでしまうため期待していました。

marseditからの投稿でもmarkdownとして処理されるので理想的でした。

しかし、codeの言語指定のクラスで必ず”language-“が先頭についてしまうため、シンタックスハイライターでハイライト処理しない時の指定ができないと言う問題が発生しました。例えば”nohighlight”と指定すると”language-nohighlight”になってしまいます。

また、行番号を付けたい時に”line-numbers”といったしても行う術がありませんでした。

色々なプラグインとの組み合わせも検討したのですが、シンタックスハイライトと行番号の問題は解決できませんでした。

cocoonのシンタックスハイライト

このブログで使用しているテーマのcocoonにはシンタックスハイライト機能がついています。

シンタックスハイライトにはhighlight.jsを使っていて、さらに行番号機能もあります。

highlight.jsは少々地味なハイライターですが、cocoonのシンタックスハイライトが使えれば簡単に実現できるため期待していました。

残念ながら行番号機能で1行余計にカウントされることがあり、そのため行番号とcodeで表示がずれてしまいます。何が原因になっているのかわからなかったため行番号機能を見送らざるをえませんでした。

highlight.jsではハイライト処理したく無い時は”nohighlight”の指定をするのですが、Jetpackでは”language-nohighlight”となってしまうため、自動設定になってしまうようで不明な言語のハイライト処理がされてしまって都合が悪いという事もありました。

その他のmarkdownプラグイン

wordpressの投稿画面のエディタをmarkdownエディタにするものばかりで外部からの投稿をmarkdownとして処理するものがありませんでした。wordpress内部で投稿をどのように処理しているのかがわかればプラグインの選択が効率的にできたのかもしれませんが、今のところ私にはわかりません。