PC Memo

ソースコードを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 』になります。

作業の流れ

  1. UncompressedフォルダにあるshCore.jsをテキストエディタで開く。
  2. name属性を判定してる箇所を改変する。
  3. ScriptsフォルダのshCore.jsに上書きして保存する。
  4. サーバーにアップロードする。

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名で無ければ、
影響を受けませんので気にする必要も無いと思われます。

次のドキュメント:Webサイトに記事作成機能を付ける方法 前のドキュメント:TinyMCEのプラグインを作る
印刷用ページとして表示しています。
このページを印刷するには、ここをクリックしてください。
通常の表示に戻るには、ブラウザの更新ボタンかF5キーを押してください。
このドキュメントへのトラックバック 

コメント

名前
Webサイト、ブログのURL
コメント
投稿する内容をよく確認して送信して下さい。
コメントは、まだありません。

トラックバック

トラックバックURL
コメント
トラックバックURLと内容をよく確認して送信して下さい。
トラックバックは、まだありません。

Valid XHTML 1.0 Transitional HTML lint 正当なCSSです! CSS Validation Service ページを編集 アクセス情報
サイト情報(連絡先・リンクについて) (C)2007-2008 PC Memo ALL Rights Reserved. 今日:1 総合:1
トップページ   プリントアウト   検索: メニューを表示