WordPress JetPack MarkdownでSyntaxHighlightする3つの方法
- 2014 11/2
- カテゴリー : JetPack Markdown . plugin . WordPress
- jetpack markdown . markdown . wordpress
- 投稿者 : flied_onion
- コメントを書く
Markdown大好き flied onionです。
Markdown使ってテキストだけで文書を綺麗に作成できるのはうれしいですよね。
標準化にあたってはすったもんだしているようで、CommonMarkはどうなることやら心配ですがあちらもシンプルで便利になるといいですね。
そんなわけでWordPressでMarkdownがJetPackにて公式サポートされた時には小躍りしていたわけですが、
コードブロックのハイライト表示はサポートされておらず、いろんなSyntaxHighlighterプラグインを試してみたもののなかなかちゃんと使えるものがみつかりませんでした。いくつか問題なく使えると思われるプラグインも見つけましたので今回はそれを紹介します。
なお、確認に使ったバージョンは
- WordPress 4.0
- JetPack
- Jetpack by WordPress.com なら 3.2
- JP Markdown なら 3.1
です。
また、個人的にバッククォート 3連のコードブロックを使っているので、インデント方式のコードブロックでどうなるかは確認していません。
ためしてみて問題があったプラグイン
私がためしてみてダメだったのは以下の3つです
- Crayon Syntax Highlighter 2.6.8
不等号などがエスケープされますがそれはオプションでなんとかなります。
問題はハイライトはされますが、言語を指定しても認識されませんでした。
（ですが自前で修正して、現在はこれを使っています。詳しくは後述。）
また設定によっては複数行コードが 1行化されて表示されてしまうようです（どの設定か忘れました）。 - SyntaxHighlighter Evolved 3.1.10
不等号やアンド記号がエスケープされてしまい、HTMLなどが書けません。 - wp-markdown-syntaxhighlighter 0.4
Codeのショートブロックになるだけで一番だめでした。
利用可能な3つのプラグイン
細かい確認まではしていませんが、以下のプラグインは使えそうでした。
- Syntax Highlighter for WordPress 3.0.83.3
とくに問題なく使えそうでした。
更新が長期間ないのが気にはなりますが、単にバージョンアップの影響を受けていないからその必要がないだけなのかもしれませんね。 - SmartSyntax 1.0.1
Google prettify syntax highlighting を自動的に適用すると説明にはあります。
Jetpack Markdownで使えることを公言しているだけあって利用可能です。見た目もシンプルで動作も軽い様に思います。
stackoverflow風にしたい場合もこちらを利用すればいいと思います（設定でカスタムのCSSをオフにすればstackoverflow風になるんですかね？） - Crayon Syntax Highlighter 2.6.8
そのままでは「最後に空行が追加される」「不等号がエスケープされてしまいHTMLなどが書けない」「言語を指定しても認識してくれない」という問題があります。
HTMLに関しては設定(*1)でなんとかなるのですが、言語の認識は設定ではどうにもなりません。
しかしカスタマイズの豊富さに惹かれてなんとか使えないかとパッチを書いてみました。次のセクションで紹介します。
前述の 2つで問題なければそちらを利用するといいと思います。
*1 コード内のHTMLエンティティを出力 にチェックをつける
Crayon Syntax Highlighterを使用するためにパッチを当てる
Crayon SyntaxHighlighterはそのままではコードブロックに言語を指定してもそのまま表示されてしまいます。
言語を指定というのは以下でいえばjavaにあたる部分です。
|
1 2 3 4 5 |
```java public void hello(){ } ``` |
この問題はどうやらスタイルシートのクラスが挿入されるタグが、Crayonが期待するタグじゃないために起きているようで、
その部分が上手く動作するように修正します。
修正にあたっての注意点。
1. 必ずバックアップを取っておきましょう。
2. プラグインが更新された場合は再度反映する必要があります。本体のコードが変わる場合もありますので同じようにはできない場合もあるためご了承ください。
3. Crayon SyntaxHighlighterを使用するためのパッチなので他のSyntaxHighlighterではうまく反映されなくなる可能性があります。
4. なにがあっても自己責任でよろしくお願いします。サポート・質問に対する回答などは期待しないでください。
対象となるファイルは
フルセットのJetPackなら
\wp-content\plugins\jetpack\_inc\lib\markdown\extra.php
マークダウンのみのJP Markdownなら
\wp-content\plugins\jetpack-markdown\lib\markdown\extra.php
になります。環境に合わせて修正してください。修正内容はどちらでも同じです。
定数を定義する
Crayon まずはこれから行う修正を無効化しやすくしておくために定数を作成します。
この値を falseから trueに切り替えれば一時的に無効化できるように実装していきます。
43行目にMARKDOWN_CODE_ATTR_ON_PREの定義がありその下あたりに以下を追加します。
|
1 2 3 |
@define( 'MARKDOWN_CODE_ATTR_ON_PRE', false ); @define( 'FO_SUPPORT_CRAYON_SYNTAX_HIGHLIGHT', true ); /* この行を追加 */ |
コードを追加する
続いて_doFencedCodeBlocks_callbackの以下の部分を書き換えます。
大体 2815行目からです。
量は多いですが、元のコードはインデント変えただけで全部残っているので実際には10行程度追加しただけです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
if ($classname != "") { if ($classname{0} == '.') $classname = substr($classname, 1); $attr_str = ' class="'.$this->code_class_prefix.$classname.'"'; } else { $attr_str = $this->doExtraAttributes($this->code_attr_on_pre ? "pre" : "code", $attrs); } $pre_attr_str = $this->code_attr_on_pre ? $attr_str : ''; $code_attr_str = $this->code_attr_on_pre ? '' : $attr_str; $codeblock = "<pre$pre_attr_str><code>$codeblock</code></pre>"; return "nn".$this->hashBlock($codeblock)."nn"; } |
↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$fo_support_crayon_syntax_highlight_ex = ""; if(FO_SUPPORT_CRAYON_SYNTAX_HIGHLIGHT){ $this->code_class_prefix = "lang:"; $fo_support_crayon_syntax_highlight_ex = " decode:true "; } if ($classname != "") { if ($classname{0} == '.') $classname = substr($classname, 1); $attr_str = ' class="'.$this->code_class_prefix.$classname.$fo_support_crayon_syntax_highlight_ex.'"'; } else { $attr_str = $this->doExtraAttributes($this->code_attr_on_pre ? "pre" : "code", $attrs); } if(FO_SUPPORT_CRAYON_SYNTAX_HIGHLIGHT){ $pre_attr_str = $attr_str; $code_attr_str = ""; $codeblock = "<pre$pre_attr_str><code>".rtrim($codeblock,"n")."</code></pre>"; } else{ $pre_attr_str = $this->code_attr_on_pre ? $attr_str : ''; $code_attr_str = $this->code_attr_on_pre ? '' : $attr_str; $codeblock = "<pre$pre_attr_str><code>$codeblock</code></pre>"; } return "nn".$this->hashBlock($codeblock)."nn"; } |
追加している 定数・変数 の名前 FO_SUPPORT_CRAYON_SYNTAX_HIGHLIGHT, $fo_support_crayon_syntax_highlight_exは適当です。ユニーク(一意)な名前であれば変えても構いません。変えるときは全箇所変えてください。
簡単な動作説明
FO_SUPPORT_CRAYON_SYNTAX_HIGHLIGHT がtrueならば preタグのclass属性にlang:NAMEといった値を追加しているだけのチープなコードです。
これによって
|
1 |
<pre><code class="java"> |
と出力されていたのが
|
1 |
<pre class="lang:java decode "><code> |
と出力されるようになり、Crayonが言語名を拾ってくれるようになります。
なおクラス名の区切りは : と決め打ちとしてしまっているので crayonの設定でも : を選択するか上記のコードの $this->code_class_prefix = "lang:"; の コロンを設定したものに変更してください。
ついでに最後に空行が追加される問題も rtrimでチープに対処してます。
これで一応動作していると思いますが、何かあればお知らせください。
素敵なMarkdownライフをお送りください。
コメントはまだありません。