SyntaxHighlighterでソースコードを綺麗に見やすく表示する方法

カスタマイズ
スポンサーリンク

どうも、KAZUです。
突然ですが、ブログにソースコードを載せたい時ってありませんか?

下の図のように本文にコードを書いて、そのまま記事を投稿するのも悪くないと思いますが、もう少しきれいに表示したいと思いませんか?

「SyntaxHighlighter」を使えば、下の図のようにコードをきれいに表示することができます。

 

スポンサーリンク

準備:SyntaxHighlighterのスクリプト追加手順

1. 下のソースコードを全てコピーする。
<script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js’ type=’text/javascript’/>
<script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js’ type=’text/javascript’/>
<script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.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/shBrushDiff.js’ type=’text/javascript’/>
<script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.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/shBrushJava.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/shBrushPlain.js’ type=’text/javascript’/>
<script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js’ type=’text/javascript’/>
<script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js’ type=’text/javascript’/>
<script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js’ type=’text/javascript’/>
<script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js’ type=’text/javascript’/>
<script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js’ type=’text/javascript’/>
<script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js’ type=’text/javascript’/>
<script language=’javascript’ type=’text/javascript’>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

2. Blogger管理画面「テンプレート」→「HTMLの編集」を選択

3. <head>タグの下に貼り付け、「テンプレートを保存」→「戻る」を選択

準備完了!ひとまずお疲れさまでした。

ここからが本番です。

スポンサーリンク

「SyntaxHighlighter」を使ったソースコードの書き方

1. 投稿エディタに「ソースコード」を入力 → 「HTML」をクリック(切り替える)

2. ソースコードを「<pre class=”brush: 記述言語;”>」と「</pre>」で囲む
例)「記述言語」の部分を「CSS」に置き換えています。※●部分はソースコード
<pre class=”brush: css;”>
●●●●●●●●●●●●●●●●
</pre>

今回の例では、コメント(「/*—~—*/」の部分)で始まり、中カッコ「}」で終わっていました。これがもし、不等号「<」で始まり、「>」で終わる場合には、「<」の部分を「&lt;」に、「>」の部分を「&gt;」に書き換える必要があります。ただし、「Blogger」の投稿エディタでは下の図のように自動で変換してくれるのでご安心を!

3. 記事を「公開」すると下のように表示されます。
※「Blogger」では、「プレビュー」では適用されないので、確認したい場合はいったん「公開」して「下書き」に戻すことになります。

おしまい!お疲れさまでした。

スポンサーリンク

さいごに

今回はSyntaxHighlighterを使って、コードをきれいに表示する方法についてお話ししました。
プログラミングを勉強している方は自分の備忘録の為、はたまた、その道に詳しい方は誰かに伝える為。そんなシチュエーションにピッタリの方法です。
SyntaxHighlighterには、背景色や文字色の違うテーマや様々なオプションがあります。テーマの変更法やオプションの設定については、近いうちに書きたいと思います。
この記事を見て、「これだったら、私にもできるかも!」と思っていただけたら嬉しいです。

それではまた~!

コメント