このBlogは、Bloggerを利用しています。
プログラムのソースコードをキレイに表示する方法を調べてみたところ、いろいろ方法はあるようですが、「Google-code-prettify」が一番簡単そうです。
Bloggerでの設定方法
検索すると、直接テーマのHTMLを編集する方法を解説したページが多いのですが、テーマを変更するたびに設定するのは面倒そうなので、ガジェットを利用して設定する方法で対応することにしました。
「メニュー」の「レイアウト」を選択し、「＋ガジェットを追加」をクリックします。
表示された「ガジェット」の一覧の中から「HTML/JavaScript」をクリックします。
「HTML/JavaScriptの設定」ウィンドウの「コンテンツ」に以下を入力し、保存します。
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian'/>
私は、１行毎に行番号が表示されるスキン「sons-of-obsidian」を指定しましたが、他にも以下サイトにあるようなスキンが選択できるようです。
https://cdn.rawgit.com/google/code-prettify/master/styles/index.html
ソースコードの記述方法
HTML編集モードで、以下のようにpreタグ内にソースコードを記述します。
<pre class="prettyprint lang-py linenums"> import time i = 0 while True: i = i + 1 print(str(i) + ' Hello world') time.sleep(1) </pre>
lang-pyの部分は、プログラミング言語に応じて指定することができます。
"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl".
※以下のサイトを参考にさせてもらいました。
Google Code PrettifyをBloggerに導入してみる
https://blog.interstellar.co.jp/2018/01/google-code-prettifyblogger/
Google-code-prettifyでBloggerにソースコードを綺麗に載せる
https://8oclockis.blogspot.com/2018/04/google-code-prettifyblogger.html
Bloggerにソースコードを埋め込む方法
https://qiita.com/piro_erdes/items/f133e170a8cf6c10b449
