ちょこちょこ巡ってるブログで、プログラムのコードを掲載している場合に、きれいに整列・色付けしてある記事を見掛ける事が多くなりました。
これってどうやってるんだろうなぁ？と疑問が湧いたので、調べて試してみました。
こんな感じになる状態ですね。※下は画像です。
Bloggerのテンプレートを編集
Bloggerに行って設定したいブログの「デザイン」→「HTMLの編集」に進みます。
開いてるテンプレート内の、<head> ～ </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/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.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/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/shBrushVb.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/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.config.clipboardSwf='http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
記事内での指定
記事内で、コードをハイライトさせたい箇所は以下のようにします。
<pre class="brush: java">
ここにコードを書きます。
</pre>
「brush」のあとは対応させたい言語名を記述。以下は一覧です。
■SyntaxHighlighter - Bundled Brushes
これでハイライトされたらOKです。
テーマもあります。
きれいに色分けされるに当たって、テーマも用意されてます。
■SyntaxHighlighter - Themes
以下の箇所のファイル名を指定する事で、色んなスタイルが楽しめます。
どれもきれいなので、サイトに合うものや好みを選ぶ事が出来ます。
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
参考情報
■Practician - The Zen of Trial and Error ...: Color My World - Syntax highlighter
■クリボウの Blogger Tips: コードをハイライトする「Blogger Syntax Highlighter」ウィジェット
■SyntaxHighlighter - Themes
あとがき
一先ず復帰しました。
ちょっと状況によりまた書かなくなるかもしれないけど、ぼちぼちやってこうかな？って思います。
心配してくれた方、ほんとありがとうございました(´･ω･`)
えと、この半年でとても良い経験積んで来ました。
お仕事とか趣味なんかに活かして、このサイトでもそのうち、プログラミングについて何か記事書けるようになれたら良いなぁって思ってます。
