Bloggerでソースコードを表示する方法の使い分け（+数式の表示）-自動化モジルカ

私のブログのジャンル上、ソースコードと数式の表示は必須です。

現在、以下の構成で運用しています。

短めのコード: Google-code-prettify

こちらのサイトを参考に進めました。

CDNからjsを読み込むコードを1行、テンプレートのheadタグ内に貼ります。

数行程度のコードであれば、これを使ってブログに直接書いてしまうのがよいと思います。

ある程度長いコード、管理しておきたいコードはGistにあげて、Gistの埋め込みタグをブログの編集画面に貼り付けます。

これも1行で済みます。

ただし、Bloggerの設定で、「投稿設定」＞「オプション」＞「構成モード」で「プレビュー（HTMLを解釈）」を有効化しておく必要があります。

また、編集時はよいのですが、一旦編集画面を離れて、再度開くとGistが消えているように見えます。

編集画面の「作成モード」では、解釈済みHTMLが表示されるのですが、Gistは読み込まれないようです（公開した記事ではちゃんと表示されます）。

編集画面で「HTMLモード」にすれば、ちゃんとGistのタグが残っていることを確認できます。

ここで「え？？消えた？？」と焦って、またGistを貼ってしまうと、Gistが2つ表示されるのでご注意を。

こちらも有名ですね。

以下のサイトを参考にしました。

https://toooybooox.blogspot.com/2018/07/bloggermathjax.html

これをGoogle-code-prettifyと同じように、headタグ内に貼り付けます。

ちょっと長めのコードはGistで管理するところが気に入ってます。