Google Code Prettify

ソースコードをブログに貼るのは難しい。

エンジニアをしていて後で見やすいように掲載しておきたいのだけど、どうしたものだかと悩んでいました。

調べてみるとGoogleがGoogle Code Prettifyという名称でJavascriptの整形ライブラリを公開していることがわかりました。

早速利用してみることにしました。

まずはライブラリを読み込みます。

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>

ついでに既定でイマイチな部分を補正

長くなったときにスクロールする

.prettyprint ol{ overflow: auto; }

行番号を毎行表示する（既定は5行ごと）

.prettyprint ol.linenums > li {list-style-type: decimal; }

あとはpreタグでソースを囲む

<pre class="prettyprint linenums lang-html"></pre>

言語は自動判定もしてくれるけど、指定したほうが無難

c#もこの通り

using System;
namespace Lutheta
{
    static class Program
    {
        [STAThread]
        static void Main()
        {
        }
    }
}

bloggerだとpreタグはHTMLビューでないと指定できないことと、HTMLなのでソースをエスケープしないと駄目な点が面倒です。

しかし、これで見やすい感じにソースが掲載できるようになりました。