k5s.dmesg

Symptom

Movable Type 上の <pre> 要素をすべて自動的にprettifyしたい欲望に駆られたので、実際にやってみる。

Resolution

以下のようなコードを「記事」「ウェブページ」テンプレートの後方に追加する

        :
    </footer>

    <!-- 追加ここから -->
    <script>const preboxes = document.querySelectorAll('pre'); preboxes.forEach(pre => {pre.classList.add("prettyprint");});</script>
    <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=desert"></script>
    <!-- 追加ここまで -->
</body>

Explanation

最初の <script> で全ての <pre> 要素に class を設定している。その後で run_prettify.js を呼び出すことで、全ての pre 要素が自動的にprettifyされる。

Appendix

<pre> 要素は必ずしもプログラミング言語の記述のみで使われる訳ではなく、また言語の自動判定も完璧ではないので、あちこちでハイライトが半端に効いてしまうのがやや微妙感。