Bloggerでソースコードを綺麗に表示する。

 Web系のブログなのでソースコードをブログ上に貼ることがあります。
ただテキストだと味気ないしフォーマットができない、いちいちスクショを撮って貼るのもめんどくさい。

そういえば他の人のブログでソースコードを綺麗に表示してるのを見かけたのでググってみるとあっさり見つかりました。

Google-code-prettifyというのがあるそうです。

https://www.note65536.com/2020/08/blogger.html
ここに書いてある通りです。

ブログのレイアウトでガジェットを追加して以下をコンテンツ欄に張ります。
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian'/></script>

skin=に設定することで見た目をいろいろ変えれるようです。

指定したときの見た目はここを参照して下さい。

• desert
• sunburst
• sons-of-obsidian
• doxy

全行に行番号を表示するときは、”sons-of-obsidian”じゃないとダメみたいです。

それ以外のスタイルは５行毎に行番号が表示されます。 

ソースコードが横に長い場合は以下のようにすれば横スクロールを付けれます。

style="overflow:auto; overflow-y:hidden;"

後はHTMLビューに切り替えてpreタグで書くだけ

ただし"<" ">"などは直接書けなくて&lt;とか&gt;にしないとだめらしいです。

https://web-camp.io/magazine/archives/85024

クラスはprettyprint、言語はlang-xxxx、行番号を表示するにはlinenumsで行番号を指定したいときはコロン:で区切って指定します。

使える言語指定は以下に詳細があります。
http://www.yamamo10.jp/yamamoto/internet/WEB/regulation/GCP/index.php

サンプル
<pre class="prettyprint lang-html linenums:252">
DocumentRoot "C:/xampp/htdocs"<br />&lt;Directory "C:/xampp/htdocs"&gt;
</pre>

<pre class="prettyprint lang-html linenums:252">
DocumentRoot "C:/xampp/htdocs/example-app/public"<br />&lt;Directory "C:/xampp/htdocs/example-app/public"&gt;
</pre>

実際の画面では以下のように表示されます。

もう本当はもう少し明るい色調が好きですが、変えるにはCSSをいじらないといけないようです。

とりあえずこのままでいきます。