2009年12月15日

#5記事中のソースコード記述について

  • 更新 2009年12月26日 16:24
  • 投稿 2009年12月15日 01:07

PC > MT構築メモ

ブログ記事中にソースコードの記述をしたいケースがあります。
そのまま記述しても問題がないこともありますが、プログラムソースの場合、ヘンに解釈されてしまい都合が悪いことが多々あります。

画像にしたり、<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>タグを記事中に記述したい場合は"<",">"を実体参照("&lt;","&gt;)で置き換えてください。

記事中にベタでソースコードを記述するよりも大変見易くなります。記事中のコード記述についてのアプローチは他にもいろいろとありますので、探されてみてはいかがでしょうか。

トラックバック

この記事のトラックバックURL:

コメント

コメントはありません。

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

Sparkling Smile Shy Smile Happy Confident Lovely Bleah Think Gawk Bearing Wobbly Weep Pout Shock
Despair Sad Cat Heart Good
Powered by MT Smileys

コメント(スタイル用のHTMLタグを使えます)

リアルタイムコメントプレビュー(絵文字は表示されません)

ご利用のブラウザ、設定ではコメントのリアルタイムプレビューはご利用になれません。

このページのトップへ

プロフィール

コルトでGO

コルトでGO

続きを読む »

最近のエントリ

最近の整備

最近のコメント

つぶやかれリスト

カテゴリ

整備ノート

ガラクタ制作の全記録♪

月別アーカイブ

タグクラウド