2017年8月7日

ソースコードのハイライト表示をGoogle Code Prettifyに変えてみる。


このブログなんですが、GoogleのBloggerを使わせてもらっています。

シンプルでとても使いやすいんですが、最近記事に載せているソースコードがときどきハイライト表示されないことがあるんです。

最初は、たまたまJavascriptが上手く読み込めてないのかなぁ~ぐらいにしか思っていなかったんですが、だんだん頻発するようになってこれはおかしいな思うようになりました。

それで今日、いろいろと試していたら原因が分かりました。

どうやら記事に対してhttpsのURLでアクセスすると、ハイライト表示されないようです。
Bloggerはhttpとhttps両方アクセスできるようになっているのですが、httpsからだとダメなようです。

原因はソースコードのハイライト表示に使っているSyntaxHighLighterの公開サーバーがhttpsに対応していないからのようです。

この対策として、スクリプトをダウンロードしてどこかのhttpsに対応しているサーバーに置ければいいのですが、無料で使えるようなサーバーはなかなかありません。

そこで仕方ないので、違うハイライトツールを使ってみることにしました。

Google Code Prettify

というわけで、ネットで検索してみると、Googleで提供しているGoogle Code Prettifyというものが見つかりました。

使い方はとても簡単です。

まず、<head></head>の間に下記のコードを挿入します。
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian'></script>

そして、あとはハイライト表示したいソースコードを次のように記述します。
<pre class="prettyprint">
Sub GetWareki()

    Range("D3").Value = Format(Range("B3"), "ggge年m月d日")
    
End Sub
</pre>


また、行番号を表示するにはオプションでlinenumsを付けるようです。
<pre class="prettyprint linenums">
Sub GetWareki()

    Range("D3").Value = Format(Range("B3"), "ggge年m月d日")
    
End Sub
</pre>

この1行おきに番号が振られるのは、skinがsons-of-obsidianの場合だけのようで、さらに<head></head>の間に下記のコードを入れないといけないようです。
<style>li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:decimal}</style>


実際の表示はこのようになります。
Sub GetWareki()

    Range("D3").Value = Format(Range("B3"), "ggge年m月d日")
    
End Sub
上記はVBAのコードですが、言語は自動的に判断されハイライト表示されるようです。



細かい設定とかはまだよく分かりませんが、とりあえずこれを使ってみたいと思います。



<参考サイト>
google-code-prettifyでコードをハイライトしてみる


スポンサーリンク