ブログプラットフォーム「Ghost」で、syntax highlightを導入する

このブログでコードをいろいろ書くこともあるので、syntax highlightを導入しないと見難いかなと思ったので、Prismを使って導入してみました。

やり方は下記の通り。

1. Prismにアクセスし、いくつか必要なオプションを選んで、prism.jsとprism.cssをダウンロードする
2. prism.jsは、ghost/content/themes/casper/assets/jsに保存
3. prism.cssは、ghost/content/themes/casper/assets/cssに保存
4. default.hbsを編集

default.hbsの編集方法

prism.cssは、linkタグで上のほうに挿入しましょう。

<link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic|Open+Sans:700,400" />
<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />

prism.jsは、scriptタグで下のほうに挿入します。

<script type="text/javascript" src="{{asset "js/index.js"}}"></script>
<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>

使い方

こんな感じで使います。

```language-markup
  <h1>Hello World!</h1>```

下記のような感じで言語を選びます。デフォルトは下記の3つですが、サイトからのダウンロード時にいろいろ含めているなら、他のものも使えます。

• language-markupで HTML/XML
• language-javascriptでJavaScriptとJSON
• language-cssでCSS