Blog を書き始めて早 20 年。世のテック系ブログでは、コードのシンタックス・ハイライト (Syntax Highlight) など当たり前になっているのに、当ブログはまだシンタックス・ハイライトに対応していない。遅まきながら、シンタックス・ハイライトに対応させてみた。
使ったツールは Prism.js。下記ブログ記事を参考にした。
シンタックス・ハイライトとは...
シンタックス・ハイライトは、プログラム言語のソースコードに色を付ける仕組み。例えば、次のようなソースコードが
// Swift のソースコード
struct Book {
let id: UUID = .init()
let name: String
}
let book = Book(name: "Foundation")
シンタックス・ハイライトを付けると次のように表示される。
// Swift のソースコード
struct Book {
let id: UUID = .init()
let name: String
}
let book = Book(name: "Foundation")
ソースコードに色が付いていると、読みやすいし、書き手の気分も上がる。
Prism.js + jsDeliver
シンタックス・ハイライトを実現するツールには Prism.js を使う。サフィックスに js と付いていることから分かる通り JavaScript で書かれている。加えて対応する CSS が用意されている。
さて、Blogger は写真・動画以外のファイルをアップロードできない。そのため、Prism.js が用意する JavaScript/CSS ファイルを
この対処方法として、これらのファイルを別の場所に保存する方法が考えられる。候補として、Dropbox などのストレージ・サービスがあるけれども、ブログサービスのように不特定多数が頻繁にアクセスする目的で作られているわけではないので、ファイルのダウンロード速度に不満がある。
専用に作られたサービスとして CDN があるので、これを使ってみた。
jsDelivr で用意した JavaScript と CSS のソースコードが次の通り:
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/combine/npm/prismjs@1/components/prism-core.min.js,npm/prismjs@1/plugins/line-numbers/prism-line-numbers.min.js,npm/prismjs@1/plugins/line-highlight/prism-line-highlight.min.js,npm/prismjs@1/plugins/toolbar/prism-toolbar.min.js,npm/prismjs@1/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js,npm/prismjs@1/plugins/show-language/prism-show-language.min.js,npm/prismjs@1/plugins/treeview/prism-treeview.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/npm/prismjs@1/themes/prism.min.css,npm/prismjs@1/plugins/line-numbers/prism-line-numbers.min.css,npm/prismjs@1/plugins/line-highlight/prism-line-highlight.min.css,npm/prismjs@1/plugins/toolbar/prism-toolbar.min.css,npm/prismjs@1/plugins/treeview/prism-treeview.min.css"/>
Blogger にコードを埋める
次に Blogger の説明画面を開き、テーマから「カスタマイズ > HTML を編集」を選択する。
下記サンプルコードを参考に、上記 JavaScript と CSS のコードを挿入する。
<!-- HTML を編集 -->
<html>
<head>
...
<!-- ここに CSS のコードを挿入する -->
</head>
<body>
...
<!-- ここに JavaScript のコードを挿入する -->
</body>
これで準備は終了。
コードをハイライトさせる
コードのハイライトをするためには次の書式で HTML を書く。
<pre><code class="language-XXX">
プログラミング言語 XXX のソースコード
</code></pre>
XXX の部分にはプログラミング言語の名前が入る。XXX の名前は PrismJS の Supported languages から調べることができる。
例えば、上述の Swift コード。あれのハイライトは、Swift 言語のコード・ハイライトだった。Supported languages で調べると、Swift 言語は swift というキーワードを使えば良いと分かる。そこで、次のコードを書いた。
<pre><code class="language-swift">// Swift のソースコード
struct Book {
let id: UUID = .init()
let name: String
}
let book = Book(name: "Foundation")
</code></pre>
プラグイン
今回、7 つのプラグインを導入した。
autoloader
必要なシンタックス・ハイライト文法を自動ロードする
toolbar
copy-to-clipboard, show-language で必要
line-numbers
行番号を表示する。
シンプルな行番号表示には、pre 要素に class="line-numbers" を追加する。
// Swift のソースコード
struct Book {
let id: UUID = .init()
let name: String
}
let book = Book(name: "Foundation")
ソースコードは次の通り:
<pre class="line-numbers"><code class="language-swift">// Swift のソースコード
struct Book {
let id: UUID = .init()
let name: String
}
let book = Book(name: "Foundation")
</code></pre>
オプションとして、data-start="数字"を追加することで、行番号を開始する行を指定することもできる。
// Swift のソースコード
struct Book {
let id: UUID = .init()
let name: String
}
let book = Book(name: "Foundation")
ソースコードは次の通り:
<pre class="line-numbers" data-start="-3"><code class="language-swift">// Swift のソースコード
struct Book {
let id: UUID = .init()
let name: String
}
let book = Book(name: "Foundation")
</code></pre>
line-highlight
行をハイライト表示する
ハイライト表示したい行を data-line="N" で指定する。下に示す通り line-numbers プラグインと一緒に使うことも可能。
// Swift のソースコード
struct Book {
let id: UUID = .init()
let name: String
}
let book = Book(name: "Foundation")
ソースコードは次の通り:
<pre class="line-numbers" data-line="4"><code class="language-swift">// Swift のソースコード
struct Book {
let id: UUID = .init()
let name: String
}
let book = Book(name: "Foundation")
</code></pre>
copy-to-clipboard
「クリップボードへコピー」ボタンを表示する
show-language
言語名を表示する
ディレクトリー構成の表示をサポートする
tree -F で出力したディレクトリー構成を良い感じに表示する。
