livedoor blog にて、google-code-prettify を使ってソースコードを色付けて表示させる設定方法を調べたのでメモ。

今まで、ソースコードをブログに載せる機会が少なかったのですが、これから載せていく機会を増やそうと思い、ソースコードを簡単かつ綺麗に表示させる方法を探してみました。調べてみると、結構たくさんありますね。
・参考：あなたのソースコードを彩る、Syntax Highlighterまとめ | Blog.37to.net

syntaxhighlighterでソースコードを表示させているのをよく見かけるので、これを使おうと思って調べたところライブドアブログでは .js 形式のファイルは無料プランだとアップロードできないので使えません…
・参考：livedoor-blogでSyntaxHighlighterを使う方法 : Everyday FunkiEE!!

google-code-prettify ならライブドアブログの無料版でも使えるように設定できるみたいなので、これを使うことにしました。
・参考：google-code-prettifyでソースコードの色分けをしてみる [livedoor Blog カスタマイズ] : ずっと工事中

上記ブログの著者がサイドバーに表示させておくだけで動作するようなコードを書いてます。ブログパーツのフリーエリアに下記のコードを記載するだけで使えるようになります。

<script type="text/javascript"> <!-- (function() { // headタグエレメント var elHead = document.getElementsByTagName('head')[0]; // prettify.jsをインクルード var elScrip = document.createElement('script'); elScrip.type = 'text/javascript'; elScrip.src = 'https://parts.blog.livedoor.jp/js/prettify.js'; elHead.appendChild(elScrip); // prettify.cssをインクルード var elLink = document.createElement('link'); elLink.rel = 'stylesheet'; elLink.type = 'text/css'; elLink.href = 'https://parts.blog.livedoor.jp/css/prettify.css'; elHead.appendChild(elLink); // 全てのpreタグにクラス名「prettyprint」を付ける var elPre = document.getElementsByTagName('pre'); for(var i = 0; i < elPre.length; i++) elPre[i].className = 'prettyprint'; })(); //--> </script> <script type="text/javascript"> <!-- prettyPrint(); //--> </script>

これで、preタグを使うだけでソースコードを色付けて表示できるようになりました。