ブログ記事でHTMLソースやスタイルシートを説明する際に、奇麗に見やすく表示することが意外と難しいです。

そんな時は、【SyntaxHighlighter】を利用するとブログの記事でソースコードのを紹介する際に、キレイに分かりやすく表示すること出来ます。

ソースを別ウィンドウで表示したり、印刷やクリップボードへの保存も可能です。多くの方が利用されているので、一度は目にしたことがあるかと思います。

▼こんな感じでhead部分に記述を追加します。

[html]
<script type="text/javascript" src="/blog/scripts/shCore.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushXml.js"></script>
<link href="/blog/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="/blog/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = ‘/blog/scripts/clipboard.swf’;
SyntaxHighlighter.all();
</script>
[/html]

参考にさせていただいたサイト
NetyaSun