ソースコードをWebサイトに提示するライブラリ、SyntaxHighlighterは、Xhtml似宜しくない表現をしている。それを解決してみる。
SyntaxHighlighterを使うとHTML-lintで警告される。
SyntaxHighlighterは、ソースコードをWebサイトやブログに記載する時に便利なJavaScriptである。
サンプルコードを探す際に多く見かけるわけだが、Xhtmlの文法的に仕様に従ったまま設置するのは、宜しく無い。
textareaタグ
なら対して問題にならないがpreタグ
にname属性を付けるのは、推奨されていない。
下記のように記入することになっているが、preタグにname属性は、あり得ない。<pre name="code" class="php">
// コード
</pre>
またname属性で同じ値が1ページ内に同一のものが複数存在することも好ましくない。<pre class="php">
// コード
</pre>
上のようclass名だけ指定すれば、これらの問題も解決することができるようにしたい。
SyntaxHighlighterでLint警告が出ないようにする。
目的としては、下記のようにname="code" を記入せずにclass属性だけを指定した記入ができるようにする。
<pre class="xhtml"> //ここにソースコードを記入する </pre>
Uncompressedフォルダは、SyntaxHighlighterの無圧縮のソースコードが格納されている。
実際に使われているのは、圧縮されたコードでScriptsフォルダに格納されている。
中核部分となるのは、『shCore.js
』でその他の『shBrushJScript.js』や『shBrushPhp.js』は、
言語を定義したライブラリとなる。つまり改変するのは、『shCore.js
』になります。
作業の流れ
- UncompressedフォルダにあるshCore.jsをテキストエディタで開く。
- name属性を判定してる箇所を改変する。
- ScriptsフォルダのshCore.jsに上書きして保存する。
- サーバーにアップロードする。
name属性を判定してる箇所を改変する
現時点(2008年6月23日)で配布されているものを確認した限りでは、613行目〜620行目で
どの部分をソースコード表記とするタグなのか判定して登録するコードになっている。
改変する前
function FindTagsByName(list, name, tagName)
{
var tags = document.getElementsByTagName(tagName);
for(var i = 0; i < tags.length; i++)
if(tags[i].getAttribute('name') == name)
list.push(tags[i]);
}
改変した後
function FindTagsByName(list, name, tagName){
var tags = document.getElementsByTagName(tagName);
for(var i = 0; i < tags.length; i++){
if(tags[i].className){
list.push(tags[i]);
}
}
}
name属性で判断していたところをclass属性の有無で判断する流れに変えています。
厳密にするならば、class属性の値も判断したほうが良いですが実験した限りでは、特定のclass名で無ければ、
影響を受けませんので気にする必要も無いと思われます。
このページを印刷するには、ここをクリックしてください。
通常の表示に戻るには、ブラウザの更新ボタンかF5キーを押してください。
コメント
トラックバック
サイト情報(連絡先・リンクについて) (C)2007-2008 PC Memo ALL Rights Reserved. 今日:1 総合:1