Bloggerにソースコードを奇麗に載せたい(2)

※ 参考：Blooger #1：ソースコードを綺麗に載せたい

Bloggerにソースコードを載せるため、これまで SyntaxHighlighter というのを使っていたが、かなり前に開発が止まっているようなので、別の手段に変更することにした。
代替として Prism.js というのが良さそうである。

1. CDN

https://cdnjs.com/libraries/prism より、Versionに "1.30.0" を指定、

Style="Styling" を選択、候補の中から好きなテーマのcssを使用。今回は先頭の
"https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/themes/prism-coy.css" を使うことにする。(minと付くファイルの方がコンパクトで良いかも)

ファイル名横のコピーHTMLリンクボタン(以下赤枠のアイコン)クリックでURLをコピーできるのでメモしておく。

Style="JavaScript" を選択、とりあえず先頭の
"https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/prism.min.js"
および、
"https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/plugins/autoloader/prism-autoloader.min.js"
というのも使用すると必要な言語を自動的に読み込んでくれるらしいのでこれも使用。
autoloaderは一覧のだいぶ下の方にある。

HTMLへの貼り付け

<> 1.でコピーした3つのURLをBloggerのHTML([テーマ] → [カスタマイズ]横の[▼] → [HTMLを編集])の </headの直前にコードを挿入する。

(2026.09.22)
★ linkタグの末尾に </link> を付けないとエラーになるかもしれない。自分の場合はエラーになったのでlinkの終了タグを追加した。

(2026.09.22)
テンプレートにQooQを使う場合、QooQの既存スタイルと衝突して背景色や余白が崩れないよう、追加CSSの末尾(`]]></b:skin>` の直前)に以下のコードを追記した方が良いかも、とのこと。

/* Prism.js のデザイン調整 */
#single-content pre[class*="language-"] {
  border-radius: 8px !important;
  margin: 1.5em 0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1.4rem !important;
  line-height: 1.6 !important;
}

2. 使い方

preタグ→codeタグを作って、codeタグのclass属性で言語を"lang-言語名" の書式で指定
指定可能な言語名は https://prismjs.com/ の "Supported languages" のところに書いてある。
主な言語だと "css"、"javascript"または"js"、"html"または"markup"、といったところか。

使用例：

<pre><code class="lang-html">
：
</code></pre>

---