[ブログ][CSS] ブログのテーマ変更 and シンタックスハイライター prettify の導入

先日、2年ぶりくらい(?)にブログを更新して、せっかくなので気分を変えてブログテーマも変更してみた。このブログをご覧になってくださっている方が使いやすい・見やすいテーマを基準としながらも、部屋の模様替えと同じで、どんなブログだと良い気持ちか考えながら。とりあえず運用しつつ、必要に応じて修正を加えていくつもり。

連動して、これまで利用していた highlight.js というシンタックスハイライターから、code-prettify へと変更してみた。昨日の記事は、新しく導入した code-prettify を利用している。こちらも可愛いので気に入っている。

code-prettify の導入及び使用方法について、こちらのページがとてもわかりやすかった: Bloggerでソースコードをきれいに表示する方法 | まあうさブラザーズ

事前準備としては: Theme -> オレンジのCustomizeボタン右の三角をクリック -> Edit html -> </html>の直前にコードを挿入。このブログでは:

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>
<style type='text/css'>
pre.prettyprint.linenums li{
list-style-type: decimal;
} 

にしている。linenums の li 要素に対するCSSの記述の部分は、毎行に行数を表示するためのもの (デフォルトでは5の倍数行に行数が表示される)。各ブログ記事内においては:

<pre class="prettyprint linenums">
コードコードコード
</pre>

でOK。