CSS3 Colorの正規表現 for サクラエディタ
これまでEmEditor Freeで満足していたのだけど、HTML5のキャラクタエンコーディングの判定にずっこけるので*1、長らくアップデートされてないこともあって、そろそろテキストエディタの変えどきかなあ…と。
今はフリーの代替エディタを検討中だけど、とりあえずサクラエディタとかどうよ?というついったーでのおすすめがあったので、インストールしてみることに。
ところが、デフォルトでCSSのシンタックスハイライトが用意されてないのね(涙)。
で、軽くぐぐって見つけたのがこれ。
- サクラエディタ用 CSSキーワード定義ファイル Rev1.00
- http://kaede.blog.abk.nu/sakura-css
実際に適用すればわかるけど、キーワードマッチの方法を取っているので、#rgbとか#rrggbbのマッチが残念ながらウェブセーフカラー分しか用意されてない。
サクラエディタは正規表現でマッチさせることも可能なので、16進だけじゃなく、せっかくだからrgb()、rgba()、hsl()、hsla()関数にもマッチさせる正規表現を書いてみた。正規表現初心者なので、ツッコミをもらえるとありがたい。
CSS カラーモジュール Level 3(http://standards.mitsue.co.jp/resources/w3c/TR/css3-color/)によれば、colorの値はこういう感じになる(一部仕様書にない文言を追加してある)。
<color>
キーワードまたは数値によって指定される。
<alphavalue>
構文的には <number> と等価である。不透明度の設定はオブジェクト全体に対し均一に適用される。0.0 (透明) から 1.0 (不透明) という範囲を外れた値はこの範囲内に収められる。
RGB カラー値
1) #で始まる3桁もしくは6桁の16進数値。
2) 関数表記の RGB 値のフォーマットは ‘rgb(’ 直後に3つの数値 (3つの整数値もしくはパーセンテージ) をカンマで区切り記述し、‘)’ で終了したもの。
RGBA カラー値
関数表記の RGBA 値のフォーマットは ‘rgba(’ 直後に3つの数値 (3つの整数値もしくはパーセンテージ) および <alphavalue> をカンマで区切り記述し、‘)’ で終了したもの。
HSL カラー値
HSL カラー値のフォーマットは ‘hsl(’ 直後に色相の数値、彩度パーセンテージ、明度パーセンテージのパーセンテージをカンマで区切り記述し、‘)’ で終了したもの。
HSLA カラー値
HSLA カラー値のフォーマットは ‘hsla(’ 直後に色相の数値、彩度パーセンテージ、明度パーセンテージのパーセンテージ、そして <alphavalue> をカンマで区切り記述し、‘)’ で終了したもの。
拡張カラーキーワード
基本カラーキーワード
‘currentColor’ キーワード
‘transparent’ キーワード
CSS2 システムカラー(Deprecated扱い)
キーワードを除いた、数値表現をざっくり書いてみた。
/#[\da-fA-F]{3}?\b/k //#rgb /#[\da-fA-F]{6}?\b/k //#rrggbb /rgb\(((\s)*(2[0-5]{2}|1\d{1,2}|[1-9]\d|\d)(\s)*(,)){2}(2[0-5]{2}|1\d{1,2}|[1-9]\d|\d)(\s)*\)/k //rgb()整数値 /rgba\(((\s)*(2[0-5]{2}|1\d{1,2}|[1-9]\d|\d)(\s)*(,)){3}(\s)*(0?(\.)\d+|0|1.?0*)(\s)*\)/k //rgba()整数値 /rgb\(((\s)*(\d*\.?\d+%)(\s)*(,)){2}(\s)*(\d*\.?\d+%)(\s)*\)/k //rgb()パーセンテージ /rgba\(((\s)*(\d*\.?\d+%)(\s)*(,)){3}(\s)*(0?(\.)\d+|0|1.?0*)*\)/k //rgba()パーセンテージ /hsl\((\s)*(\+|-)?(\d{0,3})(\s)*,(\d*\.?\d+%),(\d*\.?\d+%)*\)/k //hsl() /hsla\((\s)*(\+|-)?(\d{0,3})((\s)*,(\s)*(\d*\.?\d+%)){2}(\s)*,(\s)*(0?(\.)\d+|0|1.?0*)(\s)*\)/k //hsla()
perlの正規表現のはずなので、この形式を受け付けるエディタならばサクラエディタ以外でも受け付けるはず(未確認)。
どんなもんでしょ。
*1:回避できる方法あれば、乗り換えずに済むよね・・・