Google code-prettifyでソースコードをブログにキレイに貼りたいっ!

先日の書いた記事の「GAS(Google Apps Script)でGoogleスプレッドシートのマクロ的処理を試みた」では小生には似つかわしくもなくスクリプトのソースコードをブログに貼る、なんて偉業を成し遂げて?しまったのですが?

最初は適当にソース貼り付けてblockquoteとかpreタグで括れば読めるっしょ、と思いきや...。
全然読みづらいのね。当たり前〜♪

やっぱ良くあるソースコード読みやすくするCSS的なもの導入しないとかな?
でも面倒ね...。
CDNで一行貼り付ければCSSの本体はどっかの安全なサーバ?に固定で存在して。
自分はCSSのパスとか気にしないでいい...というのがあったっけかな?という記憶を辿りググり辿り着きました!

Google code-prettifyってやつです。
https://github.com/google/code-prettify
ほほぉgithubで公開されてるのね。

ほんでギャラリーはコチラ

ほんで導入してみました!
が、下記のGoogle code-prettifyにHTML貼り付けると見えないので記号はエンティティ化して...。

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian'/></script>

上記のソース見て分かるように「Sons-Of-Obsidian」という上記ギャラリーにあった見栄え?skinで導入。

上記のタグをhtmlのhead内に入れます。

さらにクラスの中に
prettyprint
linenums
という2つを指定。linenumsは行番号ね。

下記の様にbody内には書きます。

<pre class="prettyprint linenums">hogehoge</pre>

これは簡単で便利でした!
だがcode-prettyfyの実体ファイルがいつなくなるかは...。無くなったら多分トタンに見た目へんてこになります。
googleだから大丈夫?ってわけにはいきません。
まぁ気にしない...。

--

あと本記事はGoogle code-prettifyを記述するためにGoogle code-prettifyを使ってGoogle code-prettifyのソースを埋め込んでいて。
Google code-prettifyをHTMLでどう記述するのかのHTMLのサンプルコードをGoogle code-prettifyを使って表示しているという...。

中々のメタ風味になっています。というのに今気づきましたっ!