Google Code PrettifyからPrism.jsへ移行（Blogger）

Google Code Prettifyは、2020年4月22日にメンテされていないのでアーカイブしますというメッセージが残され、更新が止まっている。また、プログラムコードではないことを指すlanguate-noneの設定ができないので、何でもかんでも色付けされてしまうこともあり、Prism.jsを利用することにした。

Google Code Prettifyでは、<pre>タグを以下のように書いていた。なお、<code>タグはあっても、なくても良かった。書くなら<pre>の内側かな。コードの言語の指定はしなくても自動的に判断してくれる。なお、lang-noneというものは存在しない。

<pre class="prettyprint linenums=1 lang-html">
ここにコードを書く
</pre>

Prism.jsではこのように変わる。<code>タグを使ってコードの言語を指定するので<pre>と両方が必須。コードの言語の自動判定はないらしい。指定できるコード言語の一覧は、Prism.jsのホームページを参照。

<pre class="line-numbers" data-start="1" data-line="4,7" style="white-space: pre-wrap;"><code class="language-html">
ここにコードを書く
</code></pre>

 気をつけないといけないのは、Code Prettifyでは<pre>タグの後に改行を入れてコードを書いていても、1行目は空行にならないように処理されていたが（Bloggerのおかげ？）、Prism.jsでは<code>の後に改行を入れてコードを書くと、1行目が空行として表示されてしまうこと。

data-startは行番号の開始番号を、data-lineはハイライトしたい行の行番号を指定している。

 

導入方法は、↓のページを参考にしました。

https://p--q.blogspot.com/2020/07/bloggerprismjscdn.html

現時点では、これまでのCode PrettifyとPrism.jsを両方読み込ませているので、古い記事でも正しく表示されるけど、Prism.jsだけにするとなるとどう置き換えていくかが問題だ。

メモ

Code Prettifyのときは、手書きCSSで下記を入れていたのだが、「padding: 0.5em !important;」の部分がPrism.jsとバッティングを起こすようで、行番号が表示されなくなってしまう。原因がわからず、試行錯誤して発見した。

pre {
    border: 1px solid #cccccc !important;
    line-height: 1.5em;
    padding: 0.5em !important;
    white-space: pre-wrap ;
}