Bloggerの記事をAtom/Markdownで作成するための準備（Syntax Highlighter編）

Bloggerの記事をAtomMarkdownで作成するための準備（Syntax Highlighter編）

この記事のまとめ

BloggerでコードブロックにSyntax Highlighterを適用させる

背景

ここで述べた通り、Bloggerの記事はAtomを使い、Markdown形式で書いて、プレビュー画面からHTMLとしてコピーして、Bloggerに貼り付けて作っております。その上で以前、Atomが出力するHTMLを維持しつつ、見栄えを良くするためにCSSを追加しましたが、今回はさらに見栄えを良くしようとコードブロック部にSyntax Highlighterを適用させたいと思います。

Syntax Highlighterとは

プログラミング言語の構文を理解して、読みやすくするために色付けをしてくれるツールのことです。Qiitaの記事などを見てみるとそのようになっているのがわかると思います。

実は前々からSyntax HighlighterをBloggerに適用できないかと画策していたのですが、なかなかAtomが出力するHTMLを触らないで適用させる方法が見つからず手を焼いていました。

例えば、highlight.jsを見てみると<pre><code>...</code></pre>で挟んだところだけ適用してくれます。ただし、これだとAtomが出力したHTMLを編集しなければならず、編集することが手間なので使い勝手がよくありません。

それでいろいろ試してたどり着いたのが、Googleが提供しているPrettifyです。結構古くて、コード認識もあまり良くないようですが、手軽に使えそうなのでこれを利用します。

Prettifyについて

Prettifyの使用方法するためには、HTMLのヘッダーでPrettifyのJavaScriptファイルを読み込むことと、 <pre class="prettyprint">...</pre>か<code class="prettyprint">...</code>のどちらかの記述形式で記述することで、後者で挟んだところの構文の色付けをしてくれます。もちろん、そのままではAtomが出力するHTMLには反応してくれません。ただし、幸いなことにクラスの指定だけで適用判断が行われているので、JavaScriptファイルを少し変更すれば使えそうかなと思い、試してみました。

PrettifyのJavaScriptの変更

今回やりたいこととしては、Atomがコードブロック部に自動的に付与するeditor-colorsクラスかlang-textクラスにPrittifyが反応するように変更します。

まずは、オリジナルのPrettifyのJavaScriptをダウンロードします。こちらからダウンロードできます。

このJavaScript内のどこでprettyprintクラスを見ているか探してみると、JavaScriptの最後の方(62行目)にあるu=/\prettyprint\b/というところのようです。今回はこれをu=/\editor-colors\b/に変更します。

おまけ：行数表示

Prittifyにはlinenumsクラスを付与すると行数表示をしてくれる機能もあります。これも便利なので同じくeditor-colorsクラスで反応するように変更します。

これも同じようにどこでlinenumsクラスを見ているか探してみると、これも最後の方(61行目)にある(y=q.match(/\blinenums\b(?::(\d+))?/)というところのようです。これを(y=q.match(/\editor-colors\b(?::(\d+))?/)に変更します。

変更したJavaScriptのアップロード

Bloggerのヘッダー部で変更したJavaScriptを読み込ませる必要がありますが、Bloggerには任意のJavaScriptをアップロードするサービスは行っておりません。そのため、私はDropboxを使いました。下記のの記事が参考になると思います。

DropboxにJavascriptファイルを置く方法

BloggerでのJavaScriptの読み込み

Bloggerの"テーマ"→"HTMLの編集"からHTMLのヘッダー部に上記でアップロードしたJavaScriptを読み込むために下記を追加します。URL部、ファイル名は各自変更してください。なお、私の場合はファイル名を"prettyprint_editor-colors.jp"としています。

<script src='https://dl.dropboxusercontent.com/s/xxx/prettyprint_editor-colors.js'/>

テーマ設定

上記まででPrettifyは適用されているはずですが、さらに見栄えを良くするために、CSSを変更します。Prettify用のテーマとして配布されているものは代表的なものとして下記のようなものがあります。

好みのCSSをダウンロードしてきて、Bloggerの"テーマ"→"カスタマイズ"→"上級者向け"→"CSSを追加"にダウンロードしてきたCSSを追加します。その際、そのままではprettyprintクラスに反応してしまうため、editor-colorsクラスかlang-textクラスに変更してください。

また私の場合、行数をリストの外側に表示させるために、以下のようにlist-style-position: outside;を指定しています。

li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9 {
  list-style-position: outside;
  list-style-type: decimal;
  background-color: #f1efee;
  margin-left: -15px;
  padding-left: 16px;
}

長くなりましたが以上で完了です。

最後まで読んでいただきありがとうございます。

　← 気に入っていただければ応援ポチをお願いします！

Search This Blog