[WordPress] Markdownで記述した記事内のソースコード部分をハイライトする方法

WordPress

この辺は至る所で既に書かれた話題だと思いますが、自分にあった方法の備忘録という事でご紹介します!
WordPressで楽しく記事を書くにあたって、僕の要件は下記の通りです:

  • Markdownで書きたい
  • 記事内で紹介したプログラムのソースコードのシンタックスをハイライトしたい
  • ハイライトのカラースキーマにSolarized-darkを使いたい

Solarizedの配色は見やすいしカッコイイのでマジでおすすめです。

これらは、以下の二つのプラグインを使用する事で実現できます:

しかし、ここで一点問題があります。
highlight.jsは、記述するプログラムの言語をタグのクラス名で明示的に指定出来ます。
指定しなければ、自動で言語を検出してくれますが、その精度はイマイチです。
残念な事に、Markdownの記法ではクラス名を指定出来ません。
だからといって、HTMLを部分的に書くなんて気持ちよさが半減です!
以下のプラグインがこの悩みを解決してくれました:

このプラグインで、Markdown記法でも言語を明示できるようになります!
以下のようにして、コードの最初の行に#!に続いて言語の名前を記述すればOK。

#!ruby
class Foo < Bar
  def hello
    puts "Hello World!"
  end
end

結果:

#!ruby
class Foo < Bar
  def hello
    puts "Hello World!"
  end
end

objectivecbashjavaなどhighlight.jsで対応している言語の名前を指定できます。
快適!

蛇足

もう少し調べたら、GitHub Flavored Markdown for WordPressというのがあって、three backticksでコードブロックが使えるようになるらしい。
現状で割と満足なので、また気が向いたらトライしてみよう。

投稿者:

Takuya

Digital crafts(man|dog). Love photography. Always making otherwise sleeping. born in 1984.

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中