スポンサーサイト





上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

  • Comments (Close): -
  • TrackBack (Close): -

SyntaxHighlighter





SyntaxHighlighter(以下、SH)は、ソースコードを見やすく表示してくれるJavaScriptライブラリです。

これを使うと、キーワードに色がついて強調できたり、行番号を表示できたりします。

言語もHTMLだけでなくJavaなど多くの言語に対応しており、もちろんJavaScriptでも使うことができます。



ダウンロード


SHは、Alex Gorbatchev氏によるもので、こちらのページからダウンロードできます。

20110629_1


アップロード


ダウンロード・解凍したら、使うフォルダは JavaScriptファイルの入った「scripts」と、CSSファイルの入った「styles」です。必要なファイル(またはフォルダまるごと)をWebサーバにアップします。

JavaScriptファイルは、必須なのが shCore.js です。加えて、使いたい言語用のJavaScriptファイルが必要です。

私の場合、Java(shBrushJava.js)、JavaScript(shBrushJScript.js)、PHP(shBrushPhp.js)、SQL(shBrushSql.js)、VisualBasic(shBrushVb.js)、XML(shBrushXml.js)をアップしました。

CSSファイルは、CoreとThemeの2つのCSSファイルが必要です。テンプレート(theme)はたくさんあるので、自分の使いたいものに合わせたファイルを選びます。

たとえば私は、Eclipse themeを利用することにしたので、shCoreEclipse.cssとshThemeEclipse.cssをアップしました。



ヘッダーに追加


ファイルまたはフォルダをアップしたら、ご自分のサイトのHTMLファイルのヘッダーに修正を加えます。

以下は、FC2ブログを使っている私の場合の書き方です。

<script type="text/javascript" src="http://blog-imgs-35.fc2.com/j/a/v/javascriptmania/shCore.js"></script>
<script type="text/javascript" src="http://blog-imgs-35.fc2.com/j/a/v/javascriptmania/shBrushJava.js"></script>
<script type="text/javascript" src="http://blog-imgs-35.fc2.com/j/a/v/javascriptmania/shBrushJScript.js"></script>
<script type="text/javascript" src="http://blog-imgs-35.fc2.com/j/a/v/javascriptmania/shBrushPhp.js"></script>
<script type="text/javascript" src="http://blog-imgs-35.fc2.com/j/a/v/javascriptmania/shBrushSql.js"></script>
<script type="text/javascript" src="http://blog-imgs-35.fc2.com/j/a/v/javascriptmania/shBrushVb.js"></script>
<script type="text/javascript" src="http://blog-imgs-35.fc2.com/j/a/v/javascriptmania/shBrushXml.js"></script>
<link href="http://blog-imgs-35.fc2.com/j/a/v/javascriptmania/shCoreEclipse.css" rel="stylesheet" type="text/css" />
<link href="http://blog-imgs-35.fc2.com/j/a/v/javascriptmania/shThemeEclipse.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all()
</script>


ひとつ注意が必要なのは、

SyntaxHighlighter.config.bloggerMode = true;

の部分です。

BloggerやFC2などのブログサービスを利用している場合、BRタグをつけなくてもEnterで改行するだけで改行が反映される機能がついています。

bloggerModeをtrueにしないと、この自動改行がPREタグ内に反映されずコードが見づらくなります。

逆に、デフォルトはfalseなので改行時にBRタグを必ずつける人はこの部分の記述は不要です。


ソースの記述方法


ソースは、preタグ内に記述します。

<pre class="brush: xx">
ここに記述
</pre>


xx の部分は記述している言語によって変えます。具体的には、このページのBrush Aliasesの部分です。

たとえば、JavaScriptのソースを記述するときは、xxをjs, jscript, javascriptのいずれかに変えます。

それから、< は &lt; 、> は &gt; と書かないとうまくいきません。


行を強調


覚えておきたいのは、行を強調する機能の使い方です。

ある一行を強調したいとき、
<pre class="brush: js; highlight: 2">

のように highlight で指定することができます。

複数行を指定するときは、行番号を かっこ[]で囲みます。
<pre class="brush: js; highlight: [2,4]">


タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

Comments:

Comment Form
Only inform the site author.

Trackback+Pingback:

TrackBack URL for this entry
http://javascriptmania.blog111.fc2.com/tb.php/60-e0099534
  • 閉じるボタン
月別アーカイブ
リンク
カテゴリ
RSSリンクの表示
QRコード
QR
最新コメント
最新トラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。