google/code-prettifyを導入してみた。
例は
こちら
外部ファイルを持てないBloggerでは、別のサーバなりからCSSファイルをもらう方法もとれるらしいが、Google内部で済ませたいからBlogger選んだのにヨソも使うぐらいなら引っ越すわ!ぐらいにめんどちいので、なんとかならんか?と本気で調べてみたら、code-prettifyなるものがあるとゆーこと、CDN…コンテンツデリバリーネットワークだっけ?…から、CSSをもってこれるとゆーことがわかったのでやってみた。
…いろいろハマったわっ!orz
ボクのHTMLの知識ってのは、ウチにある本…最新版!Ver.1.1!とうたってる本の範囲。
CSSって聞いたことあるぞ。スタイルシートってのとは違うのか?( ゚-゚)~゚
ってレベル(笑
でも、実際やることは、2手順。
しかも、一つは、一回設定すりゃソレで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=…には、全て小文字で入れてやらないと正しく動作しませんでした。
ボクの2時間を返せ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&lang=basic&lang=css&lang=sql&lang=wiki&skin=sunburst"></ script >
こんな感じ(だんだん適当になってきた。
ボク環境では、公式の記述じゃうまく書けず、
&を&と書き換え…エスケープ?する必要がありました。
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作ろうかとか、
時代を逆行した考えがよぎってしまいました(*゚-゚)
もちっとカスタマイズできた(*゚-゚)