google/code-prettify導入

google/code-prettifyを導入してみた。
例はこちら
外部ファイルを持てないBloggerでは、別のサーバなりからCSSファイルをもらう方法もとれるらしいが、Google内部で済ませたいからBlogger選んだのにヨソも使うぐらいなら引っ越すわ！ぐらいにめんどちいので、なんとかならんか？と本気で調べてみたら、code-prettifyなるものがあるとゆーこと、CDN…コンテンツデリバリーネットワークだっけ？…から、CSSをもってこれるとゆーことがわかったのでやってみた。

…いろいろハマったわっ！orz

ボクのHTMLの知識ってのは、ウチにある本…最新版！Ver.1.1！とうたってる本の範囲。
CSSって聞いたことあるぞ。スタイルシートってのとは違うのか？( ﾟ-ﾟ)~ﾟ
ってレベル(笑

でも、実際やることは、２手順。
しかも、一つは、一回設定すりゃソレでOK。

そんなわけで、やること。
まず、新しい投稿で、test用の記事を作ります。
そこでHTMLモードで、

<pre class="prettyprint linenums">
source code here
</pre>

と、書きます。(公式からコピペしたらなんかキレイに(*ﾟ-ﾟ)
source code hereのトコロに、適当な言語を…まぁそのままでもいいけど( ﾟ-ﾟ)~ﾟ
投稿したら、別ウィンドウででも、そのページを表示しておいてください。

次は、Auto-Loaderの設置
Bloggerのテーマ→HTMLの編集を開き、</head>を探します。
（[Ctrl]+[F]で検索ウィンドウが出せます。/headで検索すればOK）

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

その直前に、この行を追加します。

[テーマの保存]をポチったら、先程のtest用記事をリロード[F5]します。
コレで表示が変わり、行番号が追加されれば成功。
もし表示が変わらなければ、どっか間違ってます。一旦、[変更を元に戻す]をポチって
見直し、やり直しをオススメします。
ボクは敢行したため、テーマを新規に選び直すハメになりました(*ﾟ-ﾟ)ﾃﾍ

ちなみに、この変更は、Blogger的最適化が行われるらしく、記述順や、
なんてゆーの？</>この閉じる方の…タグ？の書式が簡略化されたりするけど気にしない。


次はカスタマイズ。といっても、簡易にいじれる範囲は大したコトはできないけど。

●テーマの設定方法。
ココ( skin gallery)から、好みのテーマを選びます。
Auto-Loader(テーマの変更で追加した行)に、skinの設定をします。

< script  src = " https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></ script >

ここで大きな罠。
skin galleryではskin名が大文字混じりで書かれています。
でも、skin=…には、全て小文字で入れてやらないと正しく動作しませんでした。
ボクの２時間を返せorz

次に、test用記事の部分。
linenumsオプションを、判別しやすいように入れました。
コレは行番号を表示するオプション。不要なら外してください。
skinによっては、しましまになります。しましまっていいよね(*ﾟ-ﾟ)（なにが？

こちらは記事毎に毎回書く（ボクはひな形をtextでつくってコピペするコトにした）ので、
簡単にTPOに応じて使い分けられると思います。

あとは、一応、自動的に言語の判断はしてくれるらしいのだけど、明示する方法。
Auto-Loaderに、lang=を追加します。

< script  src = " https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=vb&amp;lang=basic&amp;lang=css&amp;lang=sql&amp;lang=wiki&amp;skin=sunburst"></ script >

こんな感じ（だんだん適当になってきた。
ボク環境では、公式の記述じゃうまく書けず、
&を&ampと書き換え…エスケープ？する必要がありました。

index of language handlersで、対応している言語を確認できます。
基本的にはSouce Fileの拡張子と同じだそうです。
…CとかHtmlとかどこいった( ﾟ-ﾟ)~ﾟ

ちなみに、記事の側で、

<pre class="prettyprint lang-vb">
source code here
</pre>

と、（自動判断の？）ヒントを書くコトもできます。
…でも、Auto-LoaderでLoadしてない言語はどーなるんだろう( ﾟ-ﾟ)~ﾟ（調べろよ

そんなわけで、公式な書式はココから。

ホントなら、VBEと同じ色にできたら最高なんだけど、
がっつりCSSとかいじって外部ファイルとしてuploadできないとだめぽ。

いっそそれなら、Sourceコピペしたら、色指定したHTML吐き出すようなtool作ろうかとか、
時代を逆行した考えがよぎってしまいました(*ﾟ-ﾟ)

もちっとカスタマイズできた(*ﾟ-ﾟ)