ブログ記事中にソースコードの記述をしたいケースがあります。
そのまま記述しても問題がないこともありますが、プログラムソースの場合、ヘンに解釈されてしまい都合が悪いことが多々あります。
画像にしたり、<pre>タグを用いたりすることで解決はできますが、なにか便利なものはないかな? と調べていたら、見つけました!
「Project Hosting on Google Code」の「dp.SyntaxHighlighter」。
導入してみたら、なかなか便利なスクリプトでしたのでご紹介したいと思います。
記事中では実際にスクリプトを実装し表現しています。
<導入>
「Project Hosting on Google Code」にアクセス。
SyntaxHighlighter_1.5.1.rarをダウンロード。(バージョンは2009/12/15現在)
解凍後、Scriptsフォルダ内のjsファイル、swfファイルをサーバにアップロード。
StylesフォルダのSyntaxHighlighter.cssファイルをサーバにアップロード。
cssファイルは既存のスタイルシートに追加を行うか、「スタイルシート」テンプレートに追加記述をします。続いて、jsファイル、swfファイルの定義をします。記述の仕方は後述。
<ブログ記事での使用方法>
ブログ記事の中で、表示させたいソースコードを <pre>タグ、若しくは<textarea>タグで囲めばOKです。
詳しい使用方法は同サイトのUsage項を参照。
記述例:
記述例:
表示したい言語ソースに合わせてクラスセレクタを指定します。
対応している言語は
| ソースコードの言語 | エイリアス(クラス名として使用。いずれの名称でも可) |
| C++ | cpp , c , c++ |
| C# | c# , c-sharp , csharp |
| CSS | css |
| Delphi | delphi , pascal |
| Java | java |
| Java Script | js , jscript , javascript |
| PHP | php |
| Python | py , python |
| Ruby | rb , ruby , rails , ror |
| Sql | sql |
| VB | vb , vb.net |
| XML/HTML | xml , html , xhtml , xslt |
詳細は同サイトLanguages項を参照。
そして、公開する記事にスクリプトを追加します。
表示したい言語ソースに合わせて適宜選択・記述をします。
私の場合、Java ScriptとCSSとXML/HTMLのコード記述がメインなので、下記内容を「ヘッダー」テンプレートに記述しました。
※shCore.jsの記述は必須です。
※ソースコードの記述目的以外で<pre>タグや<textarea>タグを記事中に記述したい場合は"<",">"を実体参照("<",">)で置き換えてください。
記事中にベタでソースコードを記述するよりも大変見易くなります。記事中のコード記述についてのアプローチは他にもいろいろとありますので、探されてみてはいかがでしょうか。
タグ関連記事:
- 2010年1月11日 MTIfで複数の条件を指定するには?
- 2009年12月24日 長い単語がボックスを突き破る
- 2009年12月21日 ブログ記事のナンバリング表示
- 2009年12月14日 記事タイトルの表示調整について
- 2009年12月14日 MTIfタグ 変数同士の比較



コメント
コメントの投稿はこちらから