Regen Techlog

Web・プログラミングの技術メモ

Jetpack Markdown + highlight.jsで簡単シンタックスハイライト

   

ブログサービスのWordPress.comの機能をインストール型のWordPress.orgでも使えるようにするプラグインJetpackには、Markdownで記事やコメントが書ける機能があります。XHTMLは冗長で可読性も低く記事を直接XHTMLで書くと無駄が多くなるので、Markdownのようなマークアップ言語を挟むことで書きやすくて読みやすい記事をすばやく書くことができます。

また、プログラミングの話題を扱う場合にはコードを記事に載せたくなる場面が多くなります。そこでただコードを載せるだけではなく、キーワードに色をつけるなどして見やすくすること(シンタックスハイライト)が一般に行われています。

以上の2つを合わせて、Markdownで簡単にコードを載せる方法を紹介します。

Markdownで簡単マークアップ

JetpackのMarkdownはMarkdown Extraで、オリジナルのMarkdownに拡張が加えられているバージョンを使っているので、コード用の拡張記述が使用できます1

Markdownで以下のように書くと、

```css
.button {
    border: none;
}
```

XHTMLで次のように出力されます。<&のようなエスケープしなければならない文字がコード中に含まれている場合は自動でエスケープしてくれます。

<pre><code class="css">.button {
    border: none;
}
</code></pre>

今回はコード関係しか紹介しませんが、Markdown ExtraにはテーブルなどオリジナルのMarkdownにはない機能もあるので是非チェックしてみてください。

シンタックスハイライト

Markdownが出力したコードを見てみると、コードブロックが<pre><code>で囲まれていますがこれだけではただの整形済みコードです。ここに、シンタックスハイライトライブラリを組み合わせると威力を発揮します。シンタックスハイライトライブラリには色々なものがありますが、現在使っていておすすめなのはhighlight.jsです。

highlight.jsはクライアントサイドで<pre><code>をシンタックスハイライトしてくれます。対応言語112種類・テーマ49種類と豊富なのであらゆるコードをハイライトすることができます。行番号や一部の行を強調するといった機能はありませんが、その分シンプルで軽いのが特徴です。GLSLやMatlab、CMakeなどといった他のライブラリでは見かけることのない言語も対応しています。

どの言語のコードかは自動で判断してくれますが、<code>classに言語を指定することもできます。Markdownでは~~~html~~~.cssといったように最初の行に続けてclassを指定できます。

対応言語やテーマはデモclassで指定できるクラス一覧はドキュメントを見てみてください。

WordPressにhighlight.jsを組み込むためのプラグインもあり、

などがよく使われているようです。


  1. ~または`3個以上からなる2ラインに挟まれたブロック。最初の行にclassidの情報を加えることもできます。 

 - ツール ,

コメントを残す

  関連記事

モニタを接続しないPCでNvidiaドライバを動かす

依頼されてNvidiaのGPUを積んだ計算用マシンにUbuntuとグラフィックボ …

VirtualBoxでUbuntuゲストの初期設定メモ

複数のマシンでUbuntu on VirtualBoxのセットアップをする機会が …

Dockerとバックアップソフト併用時の注意

ある日突然、Ubuntuマシンのパス補完が効かなくなりました。 原因を探ってみる …

InkscapeコマンドラインでSVG処理

以前、ImageMagickを使ったマルチアイコン作成方法を紹介しましたが、In …

ImageMagickでマルチアイコンを簡単に作る

Windows実行ファイルのアイコンやWebサイトのFaviconを作るときなど …