ブログでソースコードを表示する。｜Bloggerカスタマイズ【備忘録】

　実はこのカスタマイズはテーマ（テンプレート）をVaster2に変更したころに既に導入していたもので、発端は記述したコードをそのまま打ち込むと表示されなかったりするので、あちこちのテック系のブログさんでよく見るコードをハイライト表示するようにしたくて色々調べていたものです。でもその頃のメモがあちこちいってしまって、細かいところがヌケてしまったので残ったメモから再構成して書いておりますので多少の間違いはご勘弁ください。

画像はイメージです。｜Gerd AltmannによるPixabayからの画像

　ただ、だいたい『Blogger　ソースコード表示』ググると『Google-code-prettify』ってのが出てきます。それをいつもの通りにテーマの編集からHTMLに埋め込む作業をするだけなんですが、今回はその辺りの事も含め今後の備忘録も兼ねて書いておきたいと思います。

Google-code-prettify

導入当時参考にさせて頂いたエントリ。
ソースコードのハイライト表示をGoogle Code Prettifyに変えてみる。 | ほそぼそプログラミング日記
　ここで「Google-code-prettify」を知り、そのコードを埋め込んだだけですが、そもそもそれをしようと思ったのがVaster2のカスタマイズをした時に自分なりに数値を変えたのでその部分だけを投稿するために記述しようと思ったらエントリに反映されなかったからです。HTMLをエントリに記述すると、普通にHTMLと誤認してその部分が空白として表示またはないものとしてしまうようなのです。実はHTMLのソースコードをエントリ（投稿）に表示させるにはHTMLソースコードに使われている特殊文字というのをブラウザで表示させるための文字の記述法があるんですが、それでは他のブログで見るような枠で括ってハイライト表示するという風にはなりません。

　それを行えるのが「Google-code-prettify」というコードで、これを使って他のエントリで出てくる枠でくくるってソース見やすくするための表示法なんですが、これはCDNというものを使ってウェブ上のサーバーにあるスクリプトやCSSを利用できるというもののようです。こちら側で何かを用意する事なく、また重くなるようなスクリプトを書く必要もないというものでコードをテーマのHTML編集で加えるだけで利用できます。せっかくコードを記述するならああいう風にしてみたいと思い、このソースコードを自分のブログに導入することにしたのです。

その時のコードは

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

またコードのスキンも変更することができます。スキンの種類はこちらにありますので好きなものを選んでください。
Prettify Themes Gallery
※記述の場合は小文字で。（実はtonbori堂はこれを間違えて大文字で記述して上手く表示されなかったことが何回かありました）

エントリに記述する際の注意点

　Google-code-prettifyはただ導入しただけではHTMLをハイライト表示するようには出来ません。前後にあるタグを記述しコードを括る必要があります。Google-code-prettifyはあくまでもHTMLの表示をハイライト表示したり囲んだりするもので、TMLのソースコードをタグで前後を括ってはじめて表示されるようになります。

　またエントリをアップする際にソースコードにはHTMLにならないようにソースコードをある文字で包まなければなりません。先にも書きましたがそれでソースコードを括るとハイライト表示抜きでエントリに表示させることは可能です。ベタに言えば＜は＆ｌｔ；（表示させるために全角英数にしています。）＞は＆ｇｔ；にする必要があります。すると下のように表示されます。（分かりやすいように囲みと引用で括りました）
　一応これでも事足りるんですが、せっかくのGoogle-code-prettify、そのためハイライト表示をするには表示させるためのタグを書き加える必要があります。まずBloggerのエントリを書くときに通常の編集画面では左上端に「作成」と「HTML」がありますがソースコードを書き込むときはHTMLで作成することが必須になってきます。通常のエントリのテキストは作成で文章を作成し、ソースコードのみをHTML画面で作成してもOKです。

Google-code-prettifyでハイライト表示するには以下のようにソースコードの始めと終わりを次のタグでくくってください。

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

上で記述したコードの上にあるpreから始まるタグとスラッシュのpreのタグで閉じればコードがハイライト表示されているはずです。

Google-code-prettifyの変更点。

その後気になるエントリを見つけたので。
Google Code-Prettify シンタックスハイライト/ Web Design Leaves
WordPressでのWeb制作に関するTipsをあげてらっしゃるようです。
で、こちらのエントリによるとCDNの参照元サーバーが’19年の10月までということであたらしいサーバーへ参照するようにコードの書き換えが必要との事。新サーバーは3月から可動しているとの事なので気になる方はお早めに手当された方がよろしいかと思います。