SyntaxHighlighterでソースコードの装飾

SyntaxHighlighterでソースコードの装飾

デザイン(css js)SyntaxHighlighterでソースコードの装飾

最近、技術ネタが蓄積されてきたこともあって、今年溜まっていた分を徐々に書いていこうと思います。このサイトのデザインは数年前からあるテンプレートを使っていて、ソースコードやインストール手順などを書く時は、自分で作成した css を使っています。最近では、Redmine のようなプロジェクト管理ツールの Wiki 機能の中にも、ソースコードの装飾がデフォルトで搭載されているものもあり、もう当たり前の時代のようです。

そこで、新しく記事を書いていくまでに、このブログのテンプレートを新しくしたり、ソースコードの装飾などカスタマイズも考えたいと思い、まずはソースコードをキレイに表示するところからです。決してソースコードがキレイなわけではないです(笑)

今回は、SyntaxHighlighter を使って、PHP・sh・Perl・Java・html・JavaScript などのソースコードや、Linux のコマンドラインによるサーバ構築やミドルウェアのインストール手順などの TIPS を書いていければと思います。

SyntaxHighlighter の 2012年11月1日 現在の最新バージョンは 3.0.83 です。ダウンロードしたファイルを解凍すると、styles の中に css が、scripts の中に JavaScript のファイルがあります。今回は styles から shCoreDefault.css を、scripts からは shBrushBash.js や shBrushPhp.js など自分がよく使うものを選択して、それ以外は読み込まないようにしておきます。css も js も core ファイルだけは必須のようなので、これと組み合わせて定義します。

下記は html を対象としたソースコード。プレーンなテキストよりは見やすくなったのではないでしょうか。バージョン 2 の頃はソースをコピーしようとすると行番号までコピー対象でしたが、最新バージョンだとソースの部分だけを選択すれば行番号はコピーされないので便利です。もちろん、行番号の部分からドラッグすれば、行番号もコピーできます。

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/sh/scripts/shCore.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushPerl.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="/sh/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="/sh/styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>

最終更新日:

関連記事

人気記事

新着情報