wizaman's blog (legacy) 困った。
Jetpackの機能でMarkdown記法を利用して記事を書いています。ちょっとしたコードを載せるのに外部サービスを利用したり、いちいち文字参照変換してから投稿するのはナンセンスなので、Markdownのfenced-blockでコードを記述したものをそのまま貼り付けて、シンタックスハイライトが効いてくれると嬉しいわけです。
ただ、コードのシンタックスハイライトはJetpackとは別で用意する必要がありました。これがなかなか上手くいく方法がないみたいです。試したこと書きます。
要求は下記の通り。
- JetpackのMarkdownと組み合わせて使いたい。
- できれば、コメント欄でショートコード使いたい。
基本的にはトラブルを極力避けるために、保守されている（更新放置されていない）プラグインのみ信用する方針でいますので、あんまりマイナーなものを使う気はありません。
SyntaxHighlighter Evolved
これまで使ってきて、特に問題なく使えていたのですが、「メモリ配置とキャスト」という長ったらしい記事を書いたときに不等号やアンパサンドがHTMLエンティティ（文字参照）にエスケープされて表示されてしまいました。その辺の挙動を確認するために、Sandboxに表示確認用のコードを書いていて、そっちは問題ないんですよね。
上記の対応を試みても、先程の長い記事のみ表示がおかしくなることには変わりなく。どこで余計な変換がされているのかわかりません。ちょっと今はWordPressのコードを調べる時間の余裕はない・・・。
SyntaxHighlighter Evolved側の問題かはわかりませんが、調べてみるとこのプラグインはWordPressのアプデで同じように表示がおかしくなる問題とか多発しているようなので、動作が不安定そうです。今後のことも考えると乗り換えるのが吉か。
Crayon Syntax Highlighter
「SyntaxHighlighter Evolved」よりこっちがいいよ、Markdownと簡単に併用できるよ、という話を聞き、実績がありそうなので試してみました。エスケープ問題は設定項目で解決っぽい。
- crayon syntax highlighterに乗り換えて、SyntaxHighlighter Evolvedは利用停止する | デフよん
- ぼくがかんがえたさいきょうのWordPress Markdownかんきょう - HiLoTECH
結果、ダメでした。最新版だとこの組み合わせはうまくいかないのかもしれません。
[cpp]～[cpp]のように言語名を直接指定するタイプのミニタグなら変換されるのですが、Markdownから出力された結果が[code lang="cpp"]～[/code]という形式でして、これにCrayonが対応してないようです。Markdown側の出力をいじる設定もありません。
上の記事では、Jetpackからの出力部分を改造する方法が紹介されていますが、Jetpackを更新する度に修正がリセットされるので、その都度、修正を繰り返す、という保守作業が発生します。Jetpack改造の保守はしんどいので採用したくないです。
他にも細かい問題あるっぽい。
Enlighter - Customizable Syntax Highlighter
国内ではあまり情報ありませんが、利用者の多いシンタックスハイライトプラグインです。ビジュアルエディタでの使いやすさをアピールしてますが、ショートコードでも使えます。
ショートコードは[cpp]～[cpp]形式のミニタグに対応しますが、[code lang="cpp"]～[/code]形式には非対応なので、Jetpack Markdownと組み合わせられませんでした。また、コメント欄で使用できません。
WP Code Highlight.js
highlight.jsを適用するプラグインです。同様のものの中では、これが一番更新が活発で利用されているようです。
[code lang="cpp"]～[/code]形式のミニタグに対応しているため、Jetpack Markdownと組み合わせて使えますが、別の問題があります。
- 余計な改行が追加されてスタイルがおかしくなることがある。
- おそらく改行コードの問題で、該当部分を何らかのテキストエディタに貼り付けて、そこから改めてコピペすると直ったりする。
- highlight.jsが行番号に対応していない。
- highlightjs-line-numbers.jsを導入すればよさそうではあるが、WordPressプラグインとして提供されていないようなので気軽にオンオフできない。（参考：highlight.js で行番号を表示 | C#.NET vs VB.NET）
[cpp]～[cpp]形式のミニタグに非対応。- 文字参照変換をしてやる必要がある。（Jetpack Markdownは勝手にやる）
- ショートコードで記述すると余計な
<br />タグが挿入されて改行が増える。インラインじゃないと使いものにならない？ - コメント欄でショートコードが使用できない。
<pre><code>～</code></pre>形式で書くのはいける。 - 言語指定を省略すると自動で判断され、プレーンテキスト貼り付けたいだけなのに勝手にシンタックスハイライトされたりする（そもそもhighlight.jsがそういう機能を持っている）。**シンタックスハイライトを無効にするにはクラス名にnohighlightを指定する。**plainとかもっと単純な名前つけてほしい・・・。
コメント欄で自由なHTMLタグを許すわけにもいかないので、EvolvedとCrayonはミニタグで対応できるのが魅力だったんですが、その機能がこちらにないのが痛い。
個人的には、選択テーマにSublime Textがあるのが嬉しいところ。
wp-highlight.js
同じくhighlight.jsを適用するプラグインです。現時点で2年以上更新されていませんが、利用者は多く実績があるようです。
こちらも試してみましたが、「WP Code Highlight.js」と同じ問題を抱えています。どちらかを選べと言われたら、保守されていてかつ設定項目の多い「WP Code Highlight.js」のほうが良いと思います。
Smart Syntax
- WordPress › Smart Syntax « WordPress Plugins
- Smart Syntax - Jetpack Markdown Syntax Highlighting Plugin
現時点で1年以上更新がありませんが、Jetpack Markdownの対応をアピールしています。
ただ、<pre><code>～</code></pre>の対応であって、ショートコードは使えなさそうなので試してません。
結論
「WP Code Highlight.js」を採用し、下記の妥協をすることとして折れました。ショートコードは挙動が怪しいので設定で無効化してます。
<pre>タグ内の<code>タグにスタイルが適用されて、その周囲に<pre>タグに設定していた背景色など表示されて見た目がおかしくなったので、イイカンジにスタイルを修正。<code>タグを勝手にブロックスタイルにされるの困る・・・。
- Markdown対応する前に書いてた古い記事のシンタックスハイライトはすべて
<pre><code>～</code></pre>形式あるいはMarkdownに直す。 - コメント欄でのシンタックスハイライトはショートコードは諦め、文字参照変換したコードを
<pre><code>～</code></pre>形式で記述するように直す。- 変換ツールを使うと多少は楽→HTML実体参照変換 - akiyan.com
- コメント欄のシンタックスハイライトのテストはSandboxでやってます。
- プレーンテキスト表示したいものはクラス名にnohighlightを指定する。
- 言語名として使えるものは公式ドキュメント参照→CSS classes reference — highlight.js 9.0.0 documentation
ルールが増えてめんどくせー。
私の休暇1日が潰れてしまった。