« 矢印ボタンや数字でスライドできるjQueryのプラグイン | トップページ | リスト化したページネーションを表示してくれるプラグイン 「Pagination」 #jQuery »

2011年4月25日 (月)

ソースコードをハイライトで表示してくれる「syntaxhighlighter 3.0.83」 #jQuery

Syntaxhighlighter

様々なソースコードをハイライトで表示してくれるjQueryのプラグイン「syntaxhighlighter 3.0.83」の導入方法をご紹介します。

デモページ

このブログではjavascriptとhtml、cssを主に扱っているので、これら3種類の設定方法に絞ってご紹介いたします。

使用する基本リソース
jQuery
shCore.js
shCoreDefault.css (ハイライト表示のcssファイル)

今回使用するリソース
shBrushJScript.js (javascriptのハイライト表示)
shBrushXml.js (html,xhtml,xmlのハイライト表示)
shBrushCss.js (cssのハイライト表示)

head要素への記入
<script language="javascript" type="text/javascript" src="フォルダ名/jquery.js"></script>
<script language="javascript" type="text/javascript" src="フォルダ名/shCore.js"></script>
<script language="javascript" type="text/javascript" src="フォルダ名/shBrushJScript.js"></script>
<script language="javascript" type="text/javascript" src="フォルダ名/shBrushXml.js"></script>
<script language="javascript" type="text/javascript" src="フォルダ名/shBrushCss.js"></script>
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>

<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>

htmlへの記述方法(例)
<pre class="brushooo">
    ハイライトしたいコードを記述します。
</pre>
class名の内部のbrush:ooo;のoooの部分には記述するプログラムのコードが入ります。
javascriptならばjsとなり <pre class="brush:js"> と記述します。
html(xhtml)ならばxmlとなり <pre class="brush:xml"> と記述します。
cssならばcssとなり <pre class="brush:css"> と記述します。

オプションの設定
オプションの設定はページ全体への指定方法と個別に記述する2通りの方法があります。
ページ全体への指定方法は先ほどのhead要素内に追加して記述します。
<script type="text/javascript">
SyntaxHighlighter.defaults['オプション名']=値;
    SyntaxHighlighter.all();
</script>

個別に記述する方法は適応させたいpreタグ内に記述をします。
<pre class="brush:ooo;オプション名:値;">
    ハイライトしたいコードを記述します。
</pre>

オプション名 解説
collapse true ソースのハイライト表示を折りたたんで表示します。
first-line 数値 ラインの左側の数字を指定された値にします。
gutter false 行番号を非表示にします。
tab-size 数値 タブのサイズを指定します。
toolbar false 右上に表示されるツールバーを非表示にします。

ハイライト表示のcssファイル
配布ファイル内にも豊富なcssファイルがあり、サイトのデザインに合わせて着せ替えができます。

shCoreRDark
Syntaxhighlighter_shcorerdark

shCoreEclipse
Syntaxhighlighter_shcoreeclipse

追記
取材に行ったんじゃなかったんですかblogでも使用したいと思ったのですが、1ページ内に複数のpreタグを配置して見たのですが、現行のプランでは複数のpreタグを指定が困難なようで導入を今回は見送りました。調べてみて再度導入に挑戦してみたいと思います。

|

« 矢印ボタンや数字でスライドできるjQueryのプラグイン | トップページ | リスト化したページネーションを表示してくれるプラグイン 「Pagination」 #jQuery »

jQuery」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/39716444

この記事へのトラックバック一覧です: ソースコードをハイライトで表示してくれる「syntaxhighlighter 3.0.83」 #jQuery:

« 矢印ボタンや数字でスライドできるjQueryのプラグイン | トップページ | リスト化したページネーションを表示してくれるプラグイン 「Pagination」 #jQuery »