prism.js（1.23.0）を WordPress で利用する
前回 の導入から４年。
prism.js も成長しただろうし
私の言語も広がってきたので
再度導入してみる。
公式：Prism
【環境】
PrismJS: 1.23.0
WordPress: 5.7
PrismJS: 1.23.0
WordPress: 5.7
導入
設定
公式サイトの ダウンロードページ にて設定。
（）内は、<code class=”language-xxxxx”> の xxxxx に設定すべき値。
公式：Supported languages
- Compression level:
- カスタマイズをしたいので、[Development version] を選択
- Core
- Themes
- ダークテーマが好きなので、[Okaidia]
- Languages
- ☑ Select/unselect all
- Plugins
- 次項参照
プラグイン
せっかく Diff を導入したので、そちらで記述してみる。
Line Highlight
Line Numbers
Autolinker
+ Custom Class
Show Language
JSONP Highlight
Highlight Keywords
Remove initial line feed
+ Inline color
+ Keep Markup
Command Line
Unescaped Markup
+ Data-URI Highlight
Toolbar
+ Copy to Clipboard Button
+ Match braces
+ Diff Highlight
+ Treeview
参考サイト
Blogger.comにPrism.jsをCDNで導入する（2020-11-20）
容量
言語追加の方法がわからないので
今回はフル選択してみた。
時代は、5G だしね！
Total filesize: 768.93KB (98% JavaScript + 2% CSS)
ぎゃー！重い・・・
ちなみに前回は
Total filesize: 146.01KB (96% JavaScript + 4% CSS)
でも、読み込み速度はあんまり気にならない。
ラッキー♪
DL、配置、WordPress へ組み込み
prism.js（1.9.0）を WordPress で利用する 参照。
利用
prism.js（1.9.0）を WordPress で利用する 利用 参照。
Keep Markup
（おそらく）今回 Keep Markup プラグインを追加したおかげで
HTML コードを表現する際に < > をエスケープする必要がなくなった。
今まで
< > をエスケープする必要があった。
<pre class="line-numbers" data-language="HTML" data-start="" data-line="">
<code class="language-markup">
<p>Example</p>
</code>
</pre>
これから
<pre class="line-numbers" data-language="HTML" data-start="" data-line="">
<code class="language-markup">
<p>Example</p>
</code>
</pre>
で！
過去記事の表示が崩れてるんだろうな・・・。