[Blogger]SyntaxHighlighterからhighlight.jsに移行しDropboxでホスティングする

当ブログ（Blogger）ではシンタックスハイライトを実現するために、SyntaxHighlighterを使っている。「Blogger シンタックスハイライト」でググるといっぱいでてくるので、多くのBloggerユーザに使われていると思う。

しかし、最近SyntaxHighlighterに不満を覚えてきた。

• 読み込みファイルが多い
• v3でダイナミックローディングが実装されたけど詳細は不明
• httpsにするとシンタックスハイライトされない
• 長期間メンテナンスされていない
• 比較的新しい言語がサポートされていない
• TypeScript
• Golang
• など

行番号や行のハイライト、ファイル名の追加など、機能は充実しているだけにもったいない。そこで多くの言語をサポートしているhighlight.jsに移行してみた（執筆時点では順次移行中）

ちなみにCDNで提供されているライブラリはハイライトしてほしい言語が入っていなかったので、自分のDropboxでホスティングする。

必要な言語を選んでダウンロードする

公式ページのGet versionから必要な言語にチェックを付け、ページ下部にあるDownloadボタンをクリックして、zipファイルをダウンロードする。

今回選択した言語は以下のとおり。

• Bash
• C#
• CSS
• HTML, XML
• JavaScript
• Markdown
• PHP
• Python
• SQL
• Shell Session
• Excel
• Go
• SCSS
• TypeScript
• VBScript
• YAML

ダウンロードしたzipファイルを展開すると、以下のようなファイルが入っている。

.
├── CHANGES.md
├── LICENSE
├── README.md
├── README.ru.md
├── highlight.pack.js
└── styles
    ├── agate.css
    ├── androidstudio.css
    ├── arduino-light.css
    /* 中略 */
    ├── vs2015.css
    ├── xcode.css
    ├── xt256.css
    └── zenburn.css

使うファイルはhighlight.pack.jsとstyle/*.cssの2つ。
ハイライトのスタイルはstyleディレクトリの中から1つ選ぶ。私の場合は、VSやVSCodeユーザなのでvs2015.cssというスタイルにした。

ハイライトについてはデモサイトで確認できる。

Dropboxでhighlight.jsのファイルをホスティングする

Bloggerには外部ファイルを置いておく場所がない。そのためCDNや他サービス（GitHubやらGoogle Driveやら）を使うことが多い。
今回は、Dropboxを使ってホスティングする。

※ Publicフォルダは仕様がかわったらしいので、別フォルダをつくる
https://www.dropbox.com/ja/help/files-folders/public-folder

まずは、highlight.pack.jsと好きなstyle.cssをDropboxにアップロードする。

次に外部からアクセスできるように、共有リンクの作成を行う。
ファイルにマウスオーバーすると「共有」ボタンが表示されるので、クリックしリンクの作成を行う。

Bloggerでファイルを読み込む

Dropboxでリンクの作成をすると「https://www.dropbox.com/s/xxxxxxxxxx/highlight.pack.js?dl=0」というURLになるのだが、このままでは利用できない。

「www.dropbox.com」の部分を「dl.dropboxusercontent.com」に書き換える。

最終的には「https://dl.dropboxusercontent.com/s/xxxxxxxxxx/highlight.pack.js?dl=0」となる。


次に、Bloggerの「テーマ」→「HTMLの編集」に進む。
「</head>」で検索し、直前に読み込み処理を書く。

<link href='https://dl.dropboxusercontent.com/s/xxxxxxx/vs2015.css?dl=0' rel='stylesheet'/>
<script src='https://dl.dropboxusercontent.com/s/xxxxxxx/highlight.pack.js?dl=0'/>
<script>hljs.initHighlightingOnLoad();</script>

コードを追加したら「テーマを保存」をクリックする。
※ HTTPとHTTPSが混在している場合に警告が表示されますが、必要に応じて対応・無視してください

実際にhighlight.jsを使ってみる

<pre><code class="js"> // ここにコードを書く
console.log('Hello highlight.js!');</code></pre>

のように書くと

// ここにコードを書く
console.log('Hello highlight.js!');

とハイライトされる。

SyntaxHighlighterと比べると↓こんな感じ。

使ってみた感想

シンプルで最低限の機能が備わっているので、手っ取り早くキレイに見せたい人にオススメ。当ブログもちょっとずつhighlight.jsに移行する予定だ。


良いことばかり言っても仕方ないので、不便だと感じたことをまとめる

• ファイル名を指定できない（別で書かなければならない）
• 行番号が表示されないので、本文から参照しにくい

このあたりはSyntaxHighlighterでできていたところだ。
しかし、highlight.js開発者が「これはただのシンタックスハイライターだよ？そういうのは別のライブラリでサポートされるべきだ」と言っているので、改善はされないだろう。

このへんとか。

そのあたりに目をつむっても十分使えるので、シンプルなシンタックスハイライターが欲しい人にはぜひ使ってみてほしい。


以上

written by @bc_rikko