2025-01-01

Blogger に Syntax Highlight ツール Prism.js を入れてみた

Blog を書き始めて早 20 年。世のテック系ブログでは、コードのシンタックス・ハイライト (Syntax Highlight) など当たり前になっているのに、当ブログはまだシンタックス・ハイライトに対応していない。遅まきながら、シンタックス・ハイライトに対応させてみた。

使ったツールは Prism.js。下記ブログ記事を参考にした。

シンタックス・ハイライトとは...

シンタックス・ハイライトは、プログラム言語のソースコードに色を付ける仕組み。例えば、次のようなソースコードが

// Swift のソースコード
struct Book {
  let id: UUID = .init()
  let name: String
}
let book = Book(name: "Foundation")
Plain text

シンタックス・ハイライトを付けると次のように表示される。

// Swift のソースコード
struct Book {
  let id: UUID = .init()
  let name: String
}
let book = Book(name: "Foundation")
Swift

ソースコードに色が付いていると、読みやすいし、書き手の気分も上がる。

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"/>
HTML

Blogger にコードを埋める

次に Blogger の説明画面を開き、テーマから「カスタマイズ > HTML を編集」を選択する。

下記サンプルコードを参考に、上記 JavaScript と CSS のコードを挿入する。

<!-- HTML を編集 -->
<html>
<head>
...
<!-- ここに CSS のコードを挿入する -->
</head>
<body>
...
<!-- ここに JavaScript のコードを挿入する -->
</body>
HTML

これで準備は終了。

コードをハイライトさせる

コードのハイライトをするためには次の書式で HTML を書く。

<pre><code class="language-XXX">
プログラミング言語 XXX のソースコード  
</code></pre>
HTML

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>
HTML

プラグイン

今回、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")
Swift

ソースコードは次の通り:

<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>
HTML

オプションとして、data-start="数字"を追加することで、行番号を開始する行を指定することもできる。

// Swift のソースコード
struct Book {
  let id: UUID = .init()
  let name: String
}
let book = Book(name: "Foundation")
Swift

ソースコードは次の通り:

<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>
HTML
line-highlight

行をハイライト表示する

ハイライト表示したい行を data-line="N" で指定する。下に示す通り line-numbers プラグインと一緒に使うことも可能。

// Swift のソースコード
struct Book {
  let id: UUID = .init()
  let name: String
}
let book = Book(name: "Foundation")
Swift

ソースコードは次の通り:

<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>
HTML
copy-to-clipboard

「クリップボードへコピー」ボタンを表示する

show-language

言語名を表示する

ディレクトリー構成の表示をサポートする

tree -F で出力したディレクトリー構成を良い感じに表示する。

時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)