Alex Gorbatchev氏のdp.SyntaxHighlighterがメジャーバージョンアップしてSyntaxHighlighter 2.0になりました。これに伴い、設定項目も増えカスタマイズしやすくなっています。しかし、依然としてhtml構文的にinvalidな部分が存在しています。そこで、SyntaxHighlighterをxhtml 1.1でもvalidになるように修正してみましょう。

問題になるのは、class属性に指定する引数の書き方。

<pre class="brush: plain; first-line: 10">
this is test code.
</pre>

class属性に書き込まれたコロン( : )やセミコロン( ; )はxhtml 1.1では不正な文字と見なされます。xhtml 1.0 strictまでであれば、class名がCDATA型なのでコロン( : )もOKです。ですが、xhtml 1.1は使用可能文字が厳しく制限されておりNMTOKEN型しか使えません。

NMTOKEN, NMTOKENS (XHTML リファレンス)

NMTOKEN は、アルファベット( A-Z a-z )、数字( 0-9 )、ハイフン( - )、 アンダースコア( _ )、コロン( : )、ピリオド( . )のみで構成された文字列です。

NMTOKENS は、NMTOKEN をスペースで区切って複数指定することができます。 大文字小文字にかかわらず、xml で始まる名前は使用できません。 また、コロンはできるだけ使用しないようにして下さい。

まず、セミコロン( ; )ですが、次のように未記入でも正常に動作します。xhtml 1.0 strictで運用するなら、これで解決です。

<pre class="brush: plain first-line: 10">
this is test code.
</pre>

更にxhtml 1.1 validを目指すには、shCore.jsを修正する必要があります。ファンクションparseParamsを探してください。先頭部分で生成されている変数regexのコンストラクタを以下のように変更します。

regex = new XRegExp(
	"(?<name>[\\w-]+)" +
	//"\\s*:\\s*" +
	"\\s*_\\s*" + //:から_に変更
	"(?<value>" +
		"[\\w-%#]+|" +		// word
		"\\[.*?\\]|" +		// [] array
		'".*?"|' +			// "" string
		"'.*?'" +			// '' string
	")\\s*;?",
	"g"
)
;

これで引数名と値の区切り文字がコロン( : )からアンダースコア( _ )になりました。以下のような記述が可能になり、晴れてlintからもxhtml 1.1 validだとお墨付きを貰えます。

<pre class="brush_plain first-line_10">
this is test code.
</pre>

もし、アンダースコアが気に入らないようであれば、ピリオド( . )に置き換えてみて下さい。