今回は雑記。ブログに貼り付けるコードを見やすくしてみました。

まだ過去記事すべてには反映できていませんが、この記事とかこの記事は手直ししてみました。(追記:全ての記事に反映しました!)

これまではスクリプトのコードは画像で貼り付けていたんですが、それだと再利用しにくいので、なんとか文字情報を保ったまま体裁よく載せておきたいなと。

それで、使わせてもらったのが「google-code-prettify」です。ここにあります。
https://github.com/google/code-prettify

やってみたい方は、この記事を参考にさせてもらえばだいたいうまくいくはずです。
コード表示を綺麗に:シンタックスハイライトしたい - Qiita

CSSをいじったあとはブラウザのキャッシュを一度削除しないとブログ側に反映され(たことを確認でき)ないので、注意しましょう。

見た目を変えたいときはこのサイトにいろいろなカラーテーマがあるので、まずは利用させてもらいましょう。
Color themes for Google Code Prettify

ダウンロードして、prettify.cssと差し替えればOKです。自分は「Atelier Plateau Light」のテーマを利用させてもらいました。

また、その後ブログで見た目を確認し、スクリプトのコードは文字を少しだけ小さく、行間隔も少しだけ狭くしたかったので、CSSファイルの「.prettyprint」のなかにfont-sizeとline-heightの情報を書き加えてみました。こんな感じ。

.prettyprint {
  background: #f4ecec;
  font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
  border: 0 !important;
  font-size:12px;
  line-height:normal;
}


それと、コードのなかに書いているコメントにも注目してほしいので、目立つよう緑色に変えています。CSSの変更箇所はここ。

  /* comment   default color: #7e7777 */

  .com {
    color: #22b304;
  }

あとは記事を書く際に、コード部分を<pre class="prettyprint"></pre>で囲んでやればOKです。

ただし、< や > をコードとして表示したい場合には、それぞれ &lt;、&gt; に書き換えてやる必要があります。ひとつずつ変換するのはとても面倒なので、変換ツールを使わせてもらいましょう。今回はここにあるツールを使わせていただきました。
コードをハイライトする「Code Prettify」ウィジェット | クリボウの Blogger Tips

これだけのことをやるのに思った以上に手間取ったので、ブログに残しておきます。

今回は以上です。