Bloggerでhighlight.jsを使う

2019/11/29

Blogger

t f B! P L
ブログにスマートにソースコードを載せたい。
今回はこれが簡単にできるhighlight.jsについて。
(以前は別のものを使っていましたが乗り換えました)

基本設定

headで以下のscript/cssを読み込む必要がある。
Blogger設定画面の「テーマ」>「HTMLの編集」から。

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/default.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>

実際に記事を書く際はこれで。

<pre><code>
ソースコード
</code></pre>

お手軽ですね。
以上のタグで囲んだソースコードをハイライト付きでブログに表示できます。

以下のサイトを参考しました。
https://qiita.com/piro_erdes/items/f133e170a8cf6c10b449#highlightjs
http://matsup.blogspot.com/2017/03/blogger-highlighterjs.html

バグの原因はエスケープ

コードハイライト系のバグは、HTMLのケースが多いです。

ざっくりいうと
「ソースコードとしてそのまま表示したいHTMLなのか」
「マークアップとして解釈すべきHTMLなのか」
エディタやウェブブラウザ周りが期待動作にならない場合があります。

厳密にはHTMLのエスケープ周りのバグが多いです。
HTMLタグに「<」や「>」を使用しているため、これらを区別する必要があるためです。

そのため、そのまま表示したい「<」は「&lt;」、「>」は「&gt;」などのように文字コードで表記します。
これらは特殊文字と呼ばれ、特殊文字を特殊文字コードに変換することをエスケープといいます。
特殊文字はこれ以外にもありますが、ソースコードで問題になるのは上の2つと、あと「&」=「&amp;」くらいか。

<pre>タグ内であっても、これらの記号を表示したいときはエスケープが必要になります。

「<」や「>」はタグに限った話ではないので、「うちのブログはHTMLコードは載せないから」というあなたも、コードで不等式を使ってたらアウトです。

Bloggerのエディター画面

ここからはBloggerの話です。

とはいえ、いちいち不等式をエスケープして直してくのは面倒くさすぎます。
実はBloggerでは以下のようにすればエスケープ処理自体は自動でよしなにやってくれます(他のモダンなエディターでも同等の機能があるはず)。

まず、エディター画面・右カラムのオプションで「構成モード」を「HTMLコードを表示」にしておきます。

次に、原則を覚えます。
Bloggerのエディター画面を開くと、左上のあたりに「作成」「HTML」というボタンがあります。
「作成」のほうは他のエディターでいう「ビジュアルエディタ」に相当します。
なので、Wordのように見たまま文字サイズやレイアウトの調整ができます。
「HTML」はふつうにHTMLで書く「HTMLエディタ」ですね。

原則は以下の2つです。

1.「作成」で書いた特殊文字は自動でエスケープされる
2.「HTML」で書いた特殊文字はエスケープされない

これらを上手く使うことでエスケープ処理をbloggerにやってもらえます。

<pre><code>
ここにソースコード
</code></pre>

という文字列を、OSの入力メソッドの辞書機能に登録しておきます。
私は「ソースコード」と打つと上記の文字列が出るようにしています。

実際に使う際は、
1.「HTML」で、「ソースコード」と打ち込み、上記の文字列を書き込む(この時点ではブログに表示したいソースコード自体は書き込まない)。
2.「作成」に戻ると、「ここにソースコード」という文字が出ている。
3.「ここにソースコード」の末尾に、実際にブログに表示したいソースコードを貼り付ける。
4.「ここにソースコード」文字列のみを削除する。

やってみると分かりますが、「ここにソースコード」の文字列は、「作成」で入力できる文字列とは微妙に文字サイズ・書体が違っているので、すぐにわかります。
「ここにソースコード」という文字列をある種の目印として使うわけです。

このフローでは、HTMLとして解釈してほしい外側のpreタグはHTMLとして解釈され、その中に書き込んだ実際のソースコードは、「作成」に戻ってから書き込んでいるため、エスケープされます。

これで正しくブログにソースコードを表示できます。

今日のベストプラクティス

Bloggerに無駄に詳しくなってる気がする。

このブログを検索

QooQ