ホームページを作成に関する備忘録

SyntaxHighlighter 2 を使ってコード表示する

このページのコードはすべてこれを使っています。

Xhtmlファイル

<head>
	<link type="text/css" rel="stylesheet" href="インストールしたフォルダなど/Styles/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="インストールしたフォルダなど/Styles/shThemeDefault.css"/>
	<script type="text/javascript" src="インストールしたフォルダなど/Scripts/shCore.js"></script>
	<script type="text/javascript" src="インストールしたフォルダなど/Scripts/shBrushCss.js"></script>
	<script type="text/javascript" src="インストールしたフォルダなど/Scripts/shBrushJScript.js"></script>
	<script type="text/javascript" src="インストールしたフォルダなど/Scripts/shBrushXml.js"></script>

	<script type="text/javascript">
		SyntaxHighlighter.config.clipboardSwf = 'インストールしたフォルダなど/Scripts/clipboard.swf';
		SyntaxHighlighter.all("code");
	</script>
</head>

<body>
<pre name="code" class="brush:html;">
表示したいコードを入れる
</pre>
</body>

Xhtmlでの組込み方について

SyntaxHighlighter 2 はこちらからどうぞ。

JavaScriptが有効ならば別ウインドウ（タグ）で開きます。

　まず、上のリンクよりファイル（現段階でsyntaxhighlighter_2.1.364.zip）をダウンロードします。これを解凍ソフトにてどこかのフォルダに解凍すると、Script,Src,Styleの３つのフォルダができ、Scriptに各種JSファイルが、Styleに各種CSSファイルができます。これらのうち必要なものを取り込みます。左のコードのうち、02、04行は必須です。03行目のCSSファイルはデフォルトのレイアウトです。Styleフォルダに色々と入っているので試してみて下さい。05,06,07行目については、どの言語のコードを載せたいかによって決まります。ここでは、05行目CSS用、06行目JavaScript用、07行目Xml（html）用のものです。他にもいろいろな言語に対応しています。そして、09行目から12行目のスクリプトを書き込みます。これで用意は終了。次に実際に使う場合です。表示したいコードは<pre></pre>で囲みます。そして、<pre>タグ内にclass="brush:html;"のようにクラスを指定します。このうち、htmlの部分は表示したいコードにより変えます。例えばJavaScriptならjs、CSSならcssのようにします。やっていることは、どうも<pre>タグ内の部分を<ol>タグなどに置き換えて表示しているようです。よって、最初に置き換える前の様子が出てそれから変化します。小さなファイルだと一瞬ですが、大きくなるとその変化する様子が鬱陶しいかもしれません。また、これを設置する上で何度も苦労しました。それは、ローカルでは動くが、アップロードすると動かないという症状です。いろいろと悩んでいる内に、非常に基本的なことでした（恥ずかしい）。それは、jsファイルやcssファイルを入れたフォルダ名に大文字小文字があってそれをHtmlファイル内で取り込むときに、フォルダ名をすべて小文字で書いていた事によるものでした。windowsは大文字小文字は無視するのに対し、サーバ（UNIXかな？）は区別することを忘れていました。ということで、それを思い出して動くようになりました。