Bloggerでソースコードを表示する方法の使い分け(+数式の表示)

2019/09/16

Blogger

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

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


  • 短めのコード: Google-code-prettify
  • 長めのコード: Github Gist
  • 数式: MathJax

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


こちらのサイトを参考に進めました。
CDNからjsを読み込むコードを1行、テンプレートのheadタグ内に貼ります。

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


長めのコード: Github Gist


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

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

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

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

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

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


数式: MathJax

こちらも有名ですね。

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

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

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


今日のベストプラクティス


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

このブログを検索

QooQ