技術ブログを書くにはソースコードを綺麗に表示することが必要なので、今回は準備として、その方法を調べました。
SyntaxHighlighterを使います。
（こちらのブログを参考にさせてもらいました！）
1. 基本的な準備
最初に流れを書くと下記のような感じです。
- Syntax Highlighter Scripts Generator で、タグを取得
- 上のタグをテンプレートのHeaderにコピペ
Generator では、ソースを表示する際のDesign Themeの選択と、利用予定の言語を選択します。
「Generate」ボタンを押すと、タグが発行されます。
例えば、Python、Java、JavaScript、HTMLを選択したときのタグは下記のとおりです。
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link> <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script>
あとはこのタグをテンプレートのHeaderにコピペすれば準備完了です。
2. 使い方
<pre>タグで囲むだけです。<pre>タグの書式は、
<pre class="brush: alias"></pre>
上の"alias"の部分を言語に合わせて、java、html等を代入してください。
またこのpreタグには色々な拡張があり、たとえばインデントためのTab幅を設定するtab-sizeなんかがあります。詳しくはSyntaxHighlighter.configを御覧ください。
3. カスタマイズ・注意点
デフォルトだと右上にソースコード領域に"?"ボタンがでるので、これを消します。公式サイトへのリンクなのですが、申し訳ないですが邪魔なので。。
消し方は簡単で、下記のコードをGeneratorで発行したタグに追加するだけです。
SyntaxHighlighter.defaults['toolbar'] = false;
最後に、注意点が2つ。
まず、これはBloggerのプレビューには反映されません。投稿して確かめるしか無いです。
あと、ソースはHTMLとして直接書くので、HTMLなどのコードを表示しようとすると"<"を書く場合は"<"と書く必要があります。この変換は何かのエディタでやっても良いですが、下記の技を使うと便利です。
- 投稿画面の普通のリッチテキストモードにHTMLコードを貼る
- HTML作成モードに移ると"<"が"<"に変換されているので、それを<pre>タグで囲む
せっかく準備したので、これからどしどしブログ更新します。