Syntax Highlighter とは？
プログラムソース（コード）をウェブページに掲載する際に、ソースコードを読みやすく表示してくれるJavaScriptライブラリのことです。 → 対応プログラム言語一覧
例えばこんな感じになります。とても読みやすいですね。
<link href="../css/syntaxhighlighter/shThemeDefault.css" type="text/css" rel="stylesheet">
Syntax Highlighter の入手
SyntaxHighlighter 公式サイトからダウンロードしてください。
Syntax Highlighter の構成
ダウンロードしたファイルを解凍します。内容物は以下の通りです。
| フォルダ | 内容物 |
|---|---|
| src | 非圧縮のJavaScriptソース |
| scripts | 圧縮JavaScriptソース |
| styles | css および ツールバーに使用するアイコン |
「src」に入っている「shCore.js」と「shLegacy.js」は圧縮されていません。メニューを日本語化するにはこの圧縮されていないソースを編集します。
test.html
test.html は確認用のファイルです。test.htmlを開くと、Syntax Highlighter がどのように動作するのかを確認できます。
このように記述すると・・・
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SyntaxHighlighter Build Test Page</title>
<script type="text/javascript" src="js/syntaxhighlighter/shCore.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/shBrushBash.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/shBrushCpp.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/shBrushCSharp.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/shBrushCss.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/shBrushDelphi.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/shBrushDiff.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/shBrushGroovy.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/shBrushJava.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/shBrushJScript.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/shBrushPhp.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/shBrushPlain.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/shBrushPython.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/shBrushRuby.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/shBrushScala.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/shBrushSql.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/shBrushVb.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="../css/syntaxhighlighter/shCore.css"/>
<link type="text/css" rel="stylesheet" href="../css/syntaxhighlighter/shThemeDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'js/syntaxhighlighter/clipboard.swf';
SyntaxHighlighter.all();
</script>
</head>
<body >
<h1>SyntaxHihglighter Test</h1>
<p>This is a test file to insure that everything is working well.</p>
<pre class="brush: c-sharp;">
function test() : String
{
return 10;
}
</pre>
</html>
このように表示されます
function test() : String
{
return 10;
}