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を使って表示しているという…。
中々のメタ風味になっています。というのに今気づきましたっ!

コメント

タイトルとURLをコピーしました