こんばんは、martinです。JavaScript単体で稼働するソースハイライト表示用のスクリプトpettieSyntax.jsですが、スタイルシートのクラス指定に対応したバージョン(pettieSyntax-class.js)も作成してみました。と、同時に正規表現の微調整をしています。一応、CSSソースのハイライトにも対応していますが、CSS3のセレクタ とかは何でもありの状態なので、まぁ抜けがあったりするかも知れませんが、そこまで完璧を求めていないので。ちなみに、CSS3のセレクタは、具体例で挙げると以下のような感じです。
a[rel="external"] { /* REL属性がexternalなら外部アイコンの背景を付ける */ padding-right: 5px; background: url(Images/external-icon.png) no-repeat right center; } p[class~="foo"] { /* クラス名にfooが含まれていれば */ margin: 0; padding: 0; } a[href$=".pdf"] { /* リンク名が.pdfで終わっていれば */ background: url(Images/pdf.png) no-repeat right center; } a[hreflang|="en"] { /* リンク要素のhreflang属性がenで始まっていれば(enとかen-USとか) */ background: url(Images/english.png) no-repeat right top; } div p:nth-child(2n+1) { /* DIVの子孫P要素で奇数番目のもの */ background: ivory; }
別件ですが、JavaScriptライブラリのoParts.jsは、このCSS3のセレクタにも対応していて、例えば、
o('div:nth-child(2n+1)')
とすれば、奇数番目にあるDIV要素を一気に取得することが出来ます。お遊びですが、
<button onclick="o('ul li:nth-child(2n+1)').css('background:red');"> CLICK ME! </button>
というコードを記述してみます。期待するのは、「UL要素の子孫のLI要素で奇数番目のやつの背景を赤にする」という動作です。
syntax.jsの最新版とクラス対応版、およびそのCSSファイルを添付しておきます。ハイライト用のCSSファイルは、テーマのCSSファイルに追加しても良いでしょうし、以下のようにCSSファイルの中で呼び出すことも出来ます。
@import 'syntax.css';
メンテナンスしやすいのは、上記のように別ファイルで用意しておくインポート方式でしょうか。
Comments