Google-code-prettify － Bloggerにコードを表示させる

以前から気になっていたBloggerにソースコードをきれいに表示させるやり方をまとめておく。ネット検索で少し調べたところ、Google-code-prettifyを使用してやる方法が無難そうなので、まずはあまり深く考えずに使ってみることにする。

Google-code-prettifyは、Googleが作った、BlogのHTMLで<pre class="prettyprint"></pre>の間に記述されたコードをきれいに見せるためのJavascriptのライブラリとのこと。

photo AC

準備

テーマのHTMLに入れる場合は、テーマ編集画面より

ガジェットを使う場合は、レイアウト画面より

ガジェットの追加から、HTML/JavaScriptを選択

タイトルは空白でOK

必須ではないらしいが色々オプションを付けられるらしい。多くのサイトでskinの設定はおすすめされている。Gallery of themes for code prettifyに5種類のskinの見え方が記載されている。何となくの見た目から、Sons-Of-Obsidianを選択。

使い方（コードの記述方法）

実際に使うには、Blog投稿をHTML編集モードで表示して、<pre class="prettyprint"></pre>で表示したいソースコードをくくってやる。

ーーー

ーーー

↓とりあえずお試し。

print('Hello World!')
# コメント

オプションなど

カッコの表示

行番号

<pre class="prettyprint linenums">
SOURCE CODE
</pre>

スクロール付き

<pre class="prettyprint linenums"　style="overflow:auto; overflow-y:hidden;">
#長い記述が必要な時に横スクロール
<script src="//rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian"></script>
</pre>

<pre class="prettyprint linenums lang-py" style="overflow:auto; overflow-y:hidden;">
import xxx
print('Hello World!')　
# 選択できる言語がいっぱい
# "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl".
</pre>

参考にしたサイト

• kujipedia
• Google-code-prettifyでBloggerにソースコードを綺麗に載せる
• https://8oclockis.blogspot.com/2018/04/google-code-prettifyblogger.html
• インターステラ株式会社 技術ブログ
• Google Code PrettifyをBloggerに導入してみる
• https://blog.interstellar.co.jp/2018/01/14/google-code-prettifyblogger/
• note65536
• Bloggerでソースコードを表示
• https://www.note65536.com/2020/08/blogger.html
• A SMALL CATSLE
• 【Bloggerカスタマイズ】Pythonのソースコードを綺麗に表示する
• https://www.asmallcastle.com/2020/09/blogger.html

• 公式（Github: code-prettify）
• https://github.com/googlearchive/code-prettify