色分けしたコードで投稿する方法

コードを投稿する際、色付けとかされているブロがあっていいな〜と思ってたので、早速調べて導入してみました。

SyntaxHighlighterって機能みたいなのでこちらをBloggerに導入することにしました。

参考にしたサイト
BloggerにおけるSyntaxHighlighterの使い方
BloggerにソースコードをハイライトするSyntaxHighlighterを導入する
ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす

やることは、

1. htmlのhead部分に外部css読み込みをさせる
2. クラスを指定した<pre>タグで囲む

この2つです。

以下、実際に導入した手順です。

１，htmlのhead部分に外部css読み込みをさせる

ブログ編集TOP -> テンプレート -> HTMLを編集 でテンプレートのhead部分に以下のコードを追加しました。

 <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
 <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
 <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> 
 <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> 
 <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> 
 <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> 
 <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
 <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'>
 <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> 
 <script language='javascript'> 
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.defaults['toolbar'] = false;
  SyntaxHighlighter.all();
 </script>

自分はwebアプリ作っているのでCSS,JavaScript,php,html,SQLあたりが使えればいいのでこれらをインポートしました。

11行目はbloggerで使うため？

12行目は右側に？マークが出るのでそれを消すための設定です。

２，クラスを指定した<pre>タグor<script>タグで囲む

<pre class='brush: ***'>
コードの内容(<をエスケープ済)
</pre>

ちなみに、今回はhtmlを指定して埋め込んでます。
注意点としては

• "<" がタグとして認識されてしまうので "&lt;" でエスケープすること。
• scriptタグ使う場合でも、埋め込むコードに</script>タグがあった場合、ここだけ "&lt;/script>" としなくてはいけないことに注意してください。

ここで30分ぐらいつまりましたね。

こんなかんじです。綺麗にコードが見れるし行数もわかるので使う価値はあるかと思います。
プレビュー表示させるとscriptタグの方法は認識してくれないくて表示されないので、結局<pre>タグ使う方法で書いていくことになりそうです。