Blogger 設定

Bloggerでソースコードを見やすくする(Google Code Prettify)

今までソースコードを記述する際に、「syntax2html」を利用してソースコードをHTMLに変換していました。

色々調べたら「SyntaxHighlighter」というものを用いるといい感じにソースコードが記述できるみたいで「BloggerにSyntaxHighlighterを導入する手順」を参考に導入を試みましたが、うまくいきませんでした。

結論から言うとBloggerがhttps対応となったが、alexgorbatchev.comがhttpsに対応していないことが原因だったみたいです。(詳細は下記リンク)
「Blogger カスタマイズ備忘録3　SyntaxHighlighterがうまく表示されない」

別のやり方でSyntaxHighlighterが導入できそうでしたが、今回は同じようにソースコードのハイライトをしてくれる「Google Code Prettify」を導入したので、備忘録としてまとめます。

導入手順

導入するにあたって、「Google code-prettifyのBloggerへの導入方法」を参考にさせていただきました。
まず初めにBloggerへcode-prettifyのJavascriptを読み込ませます。

Bloggerの設定画面で「テーマ」を選択し、上図に示すHTMLの編集をクリックします。
HTMLのソースコードが表示されますので、その中から</head>と記述されている箇所を探します。</head>の直前に以下のコードを挿入します。

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript" >

これだけで、導入は完了です。
また、code-prettifyには5種類のテーマが用意されています。他のテーマを使用したい場合は次のようにrun_prettify.jsの後に?skin=を追加します。(例の場合はテーマとしてdesertを指定)

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert' type='text/javascript'/>

スキンの種類については「Gallery of themes for code prettify」で確認することが出来ます。気を付けなければいけないのは、skin=で指定する際に全部小文字にする必要があることです。

実際にブログで使う際はHTMLモードにし、次のようにソースコードをpreタグで括ります。

<pre class="prettyprint lang-xxx linenums">
ソースコード
</pre >

lang-xxxのxxx部分には使用する言語の拡張子を指定します。指定の出来るのは以下の通りです。 "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl".
また、classにlinenumsを指定することで行番号も表示されることが出来ます。行番号を表示させたくない場合はこのlinenumsを消してください

少し改良

このままでも十分使えるのですが、

1. 行番号が5行ごとにしか表示されない
2. ソースコートが横に長い場合、表示がおかしくなる

などの問題点がありました。

なので、先ほどのサイト「Google code-prettifyのBloggerへの導入方法」に記載されてあったCSSを追加します。

追加したCSSについては上記のサイトを参考にしてください

実際に使用してみた

中身は適当ですが、下記のような表示になります。(言語はpython)

import numpy as np
print("test")
for i in range(10):
    print("test")
def test():
    return 0

ソースコードが横に長い場合でも、スクロールバーが表示され、うまく表示できるようになりました。 CSSを追加してからなぜかskinが変わらなくなってしまったのですが、まぁこれで満足です。

(2019/3/17追記)
実際に使用してみると不等号がHTMLの開始タグと誤認されてしまい、うまく動作しないということがありました。
対策としては事前に不等号などの特殊文字をエスケープするのがよさそうです。
エスケープは下記のサイトで行うことが出来ます。
HTMLの特殊文字をエスケープする変換ツール