pettieSyntaxがCSSに対応

category-icon

 ソースをJavaScriptでハイライト表示するpettieSyntaxLink ですが、CSSの表記にも対応しました。このせいでファイルサイズが3キロ弱になりましたが、まぁこの辺で落ち着くでしょう。

 色の指定をソースの上の方で、指定できるようにしてます。ソースを見ると、CSSの表記に対応した色指定だけ3色ありますが、これは1.タグ、2.CSSプロパティー(fontなど)、3.その実際の指定値 に対応しています。

var cssprops = ['indigo', 'slategray', 'indianred', /((?:[-#a-z0-9.,_* +:¥r¥n[¥]=]{2,}|[abipq*]))¥s*¥{¥s*[^}=]+?¥}/ig];

 実際のデモとして、このサイトのベーシックテーマに適用しているPREタグのCSS指定をば。

pre {
  font: 500 1em/1.4 "Consolas","Bitstream Vera Sans Mono","Lucida Console","Courier New",Verdana,Meiryo,monospace;
  background: #f6f6f9;
  border: double 4px #808080;
  border-width: 0 0 0 4px;
  margin: 1em auto;
  padding: 20px;
  width: 89%;
  height: 3em;
  color: #333;
  clear: both;
  white-space: pre;
  overflow-x: auto;
  letter-spacing: 0.1px;
}
body[id=weblog] pre { /* IE6以外のモダンなブラウザ用 */
  overflow: auto;
  height: auto;
}

 こんな感じです。仕様上、PHPやJavaScript用キーワードの中途半端な対応と違って、CSSのあらゆるプロパティーに対応してると思います。最新版を添付しておきます。

添付ファイル: syntax.jsattachedIcon 

 

— posted by martin at 05:34 pm   commentComment [6]  pingTrackBack [0]

この記事に対するコメント・トラックバック [6件]

scrollUp1. BENIT — 2008/04/07@12:14:47

お疲れ様です。色分け?yen;示、早速取り入れたいのですが、色を直接指定するのではなく、テーマごとに色を変えられるよう、クラス名での指定はできますでしょうか?

あんまり居ないとは思うのですが、テーマによって黒文字か白文字かが変わるので、テーマCSSで指定できたら楽かなぁ、と…

2. BENIT — 2008/04/07@17:27:20

あ、すいません。そもそも外部ファイルなしのStandAloneで動くことを主眼に作られたスクリプトでしたねf(--;

色を直接指定できる以外にクラスの指定をできるように・・・いやいや、これは自分で改造することにします(**!)

3. BENIT — 2008/04/07@17:29:24

そういえば、携帯(au)からコメントすると、一つ目のコメントのように文字化けするみたいです。
あと、Ajaxボタンが2回クリックしないと作動しないような感じがします

4. BENIT — 2008/04/08@01:18:03

>あと、Ajaxボタンが2回クリックしないと作動しないような感じがします
すいません、これは見なかったことにしてください。


今自宅で確認してみたところ、Safari3.1@Windowsで色分け表示がされません。ソースを見る限りでは、SPAN要素自体が作られていないようです。

5. BENIT — 2008/04/08@01:19:42

もっとちゃんと確認すべきでした。

正確には「色分け表示がされないときがある」です。
アドレスバーに直接URLを入力して開くと色分けがされていません。いったんforumに行って、homeのリンクから戻ってくると色分けがありました。
個別記事のリンクを踏んでも色分け表示されませんが、前の日に戻ってもう一回表示すると色分けされています。
謎ですf(--;

scrollUpOwner Comment martin Website  2008/04/08@01:30:38

 Safariは、以前からスクリプトの動的読み込み後の挙動が不審ですからねぇ。素直にSCRIPTタグで呼び込めば良いのかも。
 pettieSyntaxは、クラス版を作りますよ。普通にstyle=""をclassに置き換えただけでは動かないと思いますので。今夜にはアップできるのではと。
 あと、Ajaxボタンですが、これはAタグで疑似ボタンにしているのと、あと呼び込み時のタイムラグで2回押さないといけない場合があるかもです。ここは素直にBUTTONタグにして同期呼び込みにすれば、ボタン押しの制御は可能なんですが。

この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~

     
T: Y: ALL: Online:
Created in 0.0040 sec.
prev
2024.4
next
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30