WordpressでMarkdownとSyntaxHighlighter
はじめに
2011年頃から運用しているブログがあって、そこでは未だにプレーンなHTMLとショートコードを使ったシンタックスハイライトを行っている。HTMLはEmmetを使っているからそれほど困っていないのだが最近はMarkdownで本文を書いてHTMLにコンバートすることが多い。新しいブログの開設することもありMarkdownでシンタックスハイライトまで行える環境を作ってみた。
Markdown対応
下記の条件でプラグインを探してみた。
- 開発元が信頼できる、または容易にプラグインの差し替えが行える
- HTMLも書け、TinyMCEと併用できる
- ショートコードが使える
- Emmetに影響しない
- ビジュアルエディタ、テキストエディタに影響しない
いくつかのプラグインを試して決めたのがJetpackからMarkdownの機能だけ切り出したJP Markdown。シンプルなプラグインで開発が停止したとしても本家のJetpack導入すれば良い。
Markdownのコードに対応したSyntaxHighlighter
SyntaxHighlighter Evolvedを使うことにした。SyntaxHighlighter EvolvedはMarkdownからコンバートされた以下のようなHTMLのシンタックスハイライトにも対応しているのでショートコードやHTMLが不要になる。
<pre class="brush: plain; title: ; notranslate" title="">
</pre>
Syntax Highlighter for WordPress から SyntaxHighlighter Evolvedへの移行
2011年から運用しているブログはSyntax Highlighter for WordPressを未だに使っていてBrushの追加やファイル名を表示するためにカスタマイズを行っている。
プラグインの中で動いているSyntaxHighlighterは同じものだから、カスタマイズしているBrushも移植することが可能。過去の記事で指定しているショートコード（例[php]code[/php]）もaliasが用意されているのでほとんどそのまま動くはずだ。対応しているaliasはBundled Brushesに記載されている。
Brushの追加方法
まだ試せていないけれど、プラグインに対してBrushを追加するにはこの記事Adding A New Brush (Language)が参考になりそうだ。
課題：Markdownのショートカット
より便利にMarkdownを書くにはショートカットが欲しいが、今のところ良い物が見つけられていない。これに関しては普通にアプリやエディタを使う方が良い気もする。Byword 2のようなショートカットが使えるようになると最高なんだけど。
注意点
Markdownにほぼ対応できるけれど、テキストエディタとビジュアルエディタの切り替えによってスペースなどが削除されることがあるこれに関してはMarkdownを使って記事を書く人はビジュアルエディタの機能自体をオフ（プロフィールから設定可能）にすることで回避するしかない。ビジュアルエディタを使う場合はMarkdownで書くこともないだろう。
今回はここまで。
ではでは。