最近ソースコードを公開することが多くなってきたので、ブログ上でソースコードを綺麗に表示する方法について調べてみました。色々と検討した結果、ライブドアブログの無料ユーザでも使える、google-code-prettifyを採用しました。
google-code-prettifyについてはこのページを参照してください。
http://fnya.cocolog-nifty.com/blog/2007/03/googlecodeprett_e937.html
ライブドアブログでgoogle-code-prettifyを使う方法についてはこのページ
http://blog.livedoor.jp/bakorer/archives/50555188.html
さっそくサンプルを載せてみました。
#include <stdio.h>
void main() {
printf("techseter");
}
まずはライブドアブログのブログパーツに、google-code-prettyを使うためのソースコードを入力します。ライブドアブログの管理画面にログインしたら、「ブログ設定」をクリックして、「ブログパーツの設定」を選択します。
次に
①「ブログパーツの追加」タブを押し
②「自由なカスタマイズ」を選択し
③「フリーエリア」の「追加」ボタンを押します
うまくいくと下のような画面になると思うので、テキストエリアに以下のコードを追加します。
追加するコードはこちらです。なおこのソースコードはずっと工事中様の記事からの引用となります。
<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 = 'http://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 = 'http://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 class="prettyprint">～</pre>
というタグで囲むだけで綺麗なソースコードが表示されるようになります。
追記
HTML編集モードで<pre>タグを打ち込んでもいいのですが、この場合は"<"や">"などを特殊文字に変換してやらないといけません。手動変換は面倒くさいので、以下のサイトを活用することにしました。テキストボックスにソースコードを入れると、そのままblogに貼れる形式になってものが表示されます。
ブログ投稿用ソースコード変換ツール（preタグ付き）
http://www.two-hearts.net/2010/09/sourcecodeconverter.html
追記その２
横に長いソースコードを書いた場合、画面から切れてしまうことがあります。preタグにスクロールバーを付けるには、CSSファイルを書き直してやる必要があります。livedoor blogでの設定方法は、以下のページに載っているので参考にしてみて下さい。
趣味のプログラムあれこれ
http://blog.livedoor.jp/midorityo/archives/50785966.html
コメント