トップページ

シンタックス・ハイライター(Syntax Highlighter)の使い方など

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;
}

↑このページの先頭へ