脳log[SHJS: 2010-07-30～]

最終更新: 2012-11-01T13:41+0900

♪ [SakuraEditor][SHJS][Ruby] Rubyの %リテラルの色分けを修正。

説明が面倒なのと誰も知りたくないだろうから適当に、備忘のためだけに。

1. まさか %{literal} の literal部分で \{ や \} を使う人間がいるとは思わなかった。(違う種類の括弧を使えばいいじゃない。開閉の釣り合いがとれてれば同じ種類の括弧でもエスケープ不要だし)

2. だのに Ruby1.9の rake.rbにこんなパターンが……

   %r{[*?\[\{]}

3. エスケープされた { 2のはの考慮がないから、閉じ括弧が足りないとしてファイル末尾まで正規表現として色分けされてしまう。
4. ちょちょちょいと .rkw2ファイルにエスケープ文字を追加してサクラエディタに対する修正は完了。
5. SHJSの lang/sh_ruby.js(自作)への対応も同じですむはずが、入力の末尾に達した時点で意図せぬバックトラックが発動し、閉じ括弧が足りなくても色分けが適当な閉じ括弧で終了してしまう現象に遭遇。これは自業自得(20090808p01)なので自分でなんとかせねば。間違いが埋没してしまうのはよろしくない。

6. こうした。

   %r{余分な開き括弧{。間違いはインタープリタを通す前から目立つように}

最終更新: 2010-04-08T22:28+0900

♪ [SHJS][SakuraEditor] 色分けにこんな機能があると便利。

参照(説明の丸投げ)> 萌ディタの Lex 周り - miau's blog?

SHJSと萌ディタ、共通の泣き所。そもそも論を言えば、入力に対応した stateを一つ一つ定義していけば対応できなくもないし、Rubyの括弧を使った %記法、%r(pattern)flag のようなものでは括弧に分類される文字種が 4つしかなかったために実際そうしたのだが、非英数1バイト文字や識別子が使えるとなると状態数があっという間にふくれあがってしまう。

SHJSの場合は、JavaScriptであることと eval()で評価されることを利用して、ネイティブの RegExpオブジェクトの代わりに execメソッドと lastIndexプロパティを定義したオブジェクトを登録することで抜け道を用意できるように感じたが、どんな形で特定のキャプチャを参照するのか決めかねた。

今日試しにダウンロードしてみた K2Editorではヒアドキュメントの色分けが可能なようだ。配布パッケージに含まれる Ruby.txtと K2Editor.chmによると書式はこう。

・<<(["'`]?)(\w+)\1 .... ^$2$
    ヒアドキュメント１。後ろのディスクリプターは行内に唯一でなければ
    ならない。

右側の検索文字列には、後方参照が使えます。 左側で()でくくってグルーピングしたマッチ文字列を、 右側の検索文字列の中で取得できます。

取得するには、 K2Editorの置換機構の 後方参照と同じように、$1,$2などを使います。

\1、\2でなくて $1、$2だから、右側のパターンは左側のパターンマッチングが終わった後で、置換されてからコンパイルされるのかも。

SHJS(と萌ディタ)にあてはめた場合、$1、$2がどのマッチングのキャプチャを指しているのかが明らかではない。というところで二の足を踏んでいる次第。

 @2010-04-08: くわえて

  formatted_text = <<TEXT.strip.gsub(/\t/, " "*8)
TEXT

  texts = [<<TEXT1, <<TEXT2]
TEXT1
TEXT2

こんなんどうする？

最終更新: 2019-12-01T02:10+0900

♪ [SHJS] shjs-0.6にバックトラックを。

20090525に書いたことをやってみた。sh_ruby.jsは巨大なのでとりあえず 0.6/sh_main.js と 0.6/lang/sh_javascript.js (lang/sh_javascript.js) だけ。どちらの sh_javascript.jsも、バックトラックのないノーマル sh_main.jsと組み合わせることもできるつもり(2種類の langファイルをメンテナンスするのは面倒くさいもんね)。0.6/sh_main.jsが自分でも見直したくないソースになっているのは否定できない(だからおおっぴらにリンクしていない)。そういう人間はこう言うのです。「動いたもんが勝ち」

 "正しい\
  文字列(ECMAScript 5th ed.の場合)"

 "不正な
  文字列(ですらない)"

 /* 正しい
    コメント */

 /* 閉じていない
    コメント？

ノーマル、バージョン 0.6の SHJSと違うのは、一つの正規表現で始まりから終わりまでマッチングできない対象(複数行にまたがるものとか)に対して、最初の文字「"」や「/*」を見て、文字列だ、コメントだ、と決めてかかった結果を後で修正できること。

「/*」があった。ここからコメントらしい。「*/」が見つからない。やっぱりコメントではない。という判断が改行をまたいでできる。

 @2010-04-13 文字列リテラル内の改行は不正らしい。

NOTE 文字 LineTerminator は、それにバックスラッシュ \ を先行させても、文字列リテラル内には出現できない。

http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/7_Lexical_Conventions.html#section-7.8.4

以前、どっちなんだろう？と調べたときに「\(改行)」は空文字列と解釈されるシーケンスだ、と書かれてるの(そういうエスケープシーケンスの一覧表)を見たんだけど実際は違ったらしい。

一次情報にあたらなければ同じミスをおかすんじゃないかと手許にあった「Final final final final draft Standard ECMA-262 5th edition」というタイトルの pdfを開いてみた。(3rd ed.ではなく 5th ed.だということに注意)

A line terminator cannot occur within any token except a StringLiteral. Line terminators may only occur within a StringLiteral token as part of a LineContinuation.

Final final final final draft Standard ECMA-262 5th edition(pdf) 7.3

NOTE A line terminator character cannot appear in a string literal, except as part of a LineContinuation to produce the empty character sequence. The correct way to cause a line terminator character to be part of the String value of a string literal is to use an escape sequence such as \n or \u000A.

Final final final final draft Standard ECMA-262 5th edition(pdf) 7.8.4

日本語にもそういう罠があるけど、英語だとうっかり正反対の意味にとってしまうことがあって恐い。それでも、行継続の意味に \(改行)を使う(それは空文字列として解釈される)ことは exception(例外)として認められているように読める。

3rdから 5thに更新するにあたり現状を追認するように書き換わったのかもしれないけど……ECMAScript3の仕様はどこ？

面倒くさがらずにダウンロードしてきた。

NOTE A 'LineTerminator' character cannot appear in a string literal, even if preceded by a backslash \. The correct way to cause a line terminator character to be part of the string value of a string literal is to use an escape sequence such as \n or \u000A.

Microsoft Word - Ecma-262.doc(pdf) 7.8.4

5thで exceptだった部分に even ifが使われている。現バージョンでは文字列リテラル内での「\(改行)」の使用は明確に否定されてた。

というわけで上のサンプルソースの記述を正しくなるように変更しました。

最終更新: 2014-12-24T10:54+0900

♪ [SHJS] SHJSに行番号表示機能を。

個人的にはなくても不便はないけども、番号を表示する方法のアテができたので。

• /shjs/sh_main.js (shjs-0.5までと互換)
• /shjs/sh_main.min.js (shjs-0.5までと互換)

 番号を表示する方法

求める条件は

• 選択&コピーで(改行コードまでは無理にしても)元のソースコードが手に入ること。余分に行番号までコピーされるなんてもってのほか。
• 開始行番号が指定できること。できれば非推奨な <ol start="555">以外の方法で。(Chili 2.2はこの方法だった)

SyntaxHighlighterのように "view source", "copy to clipboard"機能を用意して、行番号が一緒にコピーされる欠点をカバーするのは次善の策。

WP-Syntaxがやっているように、1行 2列のテーブルを作って、左の列に行番号を、右の列にハイライトされたソースコードを配置するのは、サポートするブラウザも多そうで良さげ。

でも行番号あり・なしで二通りの出力フォーマットを用意するのはスクリプトのサイズの面から避けたい。何と言っても、忘れていたけど、shjs-0.4.2をいじくったものであるこの日記の /shjs/sh_main.js はハイライトするついでに、各行に <span class="odd">、<span class="even">というタグをかぶせていたのだった(しかも 3行の追加だけで)。その方面でいくことにする。

つまり、CSS2の counter-reset, counter-increment, counter に全面的に頼った方法。contentで追加した文字列がコピペ不能なのがかえって幸いした。Fx 3.0.7、Safari 3.2.2、Opera 9.64、IE8で期待通りの表示を確認した。(※末尾に追記あり)

 スタイルシートに追加したルール

pre.sh_sourceCode.sh_numbered .odd:before,
pre.sh_sourceCode.sh_numbered .even:before {
  counter-increment: sh_sourceCode;
  content: counter(sh_sourceCode, decimal-leading-zero) ": ";
}

 sh_main.js (version 0.4.2)に加えた変更

--- sh_main.js-0.4.2	Mon May 12 23:07:40 2008
+++ sh_main.js	Fri Mar 13 23:29:34 2009
@@ -60,6 +60,8 @@
     currentStyle = style;
   };
 
+  var oddLine = false;
+
   var endOfLinePattern = /\r\n|\r|\n/g;
   endOfLinePattern.lastIndex = 0;
   var inputStringLength = inputString.length;
@@ -78,6 +80,7 @@
     }
 
     var line = inputString.substring(start, end);
+    builder.startElement((oddLine = !oddLine) ? 'odd' : 'even');
 
     var matchCache = null;
     var matchCacheState = -1;
@@ -158,6 +161,7 @@
       builder.endElement();
     }
     currentStyle = undefined;
+    builder.endElement();
     if (endOfLineMatch) {
       builder.text(endOfLineMatch[0]);
     }
@@ -307,8 +311,13 @@
 @param  element  a DOM <pre> element containing the source code to be highlighted
 @param  language  a language definition object
 */
-function sh_highlightElement(htmlDocument, element, language) {
+function sh_highlightElement(htmlDocument, element, language, firstline) {
   sh_addClass(element, "sh_sourceCode");
+  if (firstline !== null && ! isNaN(firstline)) {
+    // cssのセレクタで区別できるように。
+    this.sh_addClass(element, "sh_numbered");
+    element.style.counterReset = "sh_sourceCode " + (parseInt(firstline) - 1);
+  }
   var inputString;
   if (element.childNodes.length === 0) {
     return;
@@ -345,7 +354,8 @@
       if (prefix === "sh_") {
         var language = htmlClass.substring(3);
         if (language in sh_languages) {
-          sh_highlightElement(htmlDocument, element, sh_languages[language]);
+        // firstlineなんて非標準属性をでっちあげないで
+        // スクリプトにパラメータを渡す方法は？
+        // (class属性を乱用するのは気に入らない)
+          sh_highlightElement(htmlDocument, element, sh_languages[language], element.getAttribute("firstline"));
         }
         else {
           throw "Found <pre> element with class='" + htmlClass + "', but no such language exists";

sh_main.js (version 0.5)への変更も似たようなものだけど、sh_load()の中にも変更すべき場所がある。

sh_main.js (version 0.6)を対応させるのは面倒なので省略。0.4.2も実はそうだったんだけど、shjsはスタイルのネストを想定していない。例えばこれ。

// URL inside comment. <http://vvvvvv.sakura.ne.jp>

ハイライトされた結果の HTMLはこうなる。

<span class="sh_comment">// URL inside comment. &lt;</span><span class="sh_url"><a class="sh_url" href="http://vvvvvv.sakura.ne.jp">http://vvvvvv.sakura.ne.jp</a></span><span class="sh_comment">&gt;</span>

フラットな構造で、comment, url, commentと 3つの要素が並んでいる。commentが urlを含むような構造にはならない。0.6ではハイライト前後のタグ構造をマージする仕組みになっているから、0.4.2や 0.5のように ad hocなごまかしができなくて、まずはこの前提を取り払わなければいけない……。

 (付録) hikidoc.rb (revision 108) への変更

<<< language, number
>>>

を

<pre class="sh_language" firstline="number">
</pre>

に変換します。

--- hikidoc.rb.108	Thu Aug 28 22:11:00 2008
+++ hikidoc.rb	Fri Mar 13 23:05:05 2009
@@ -335,7 +378,7 @@
     @output.preformatted(@output.text(text))
   end
 
-  BLOCK_PRE_OPEN_RE = /\A<<<\s*(\w+)?/
+  BLOCK_PRE_OPEN_RE = /\A<<<\s*(.*\S)?/
   BLOCK_PRE_CLOSE_RE = /\A>>>/
 
   def compile_block_pre(f)
@@ -665,9 +706,18 @@
     end
 
     def block_preformatted(str, info)
-      syntax = info ? info.downcase : nil
+      syntax, firstline = *(info ? info.split(/\s*,\s*/) : [])
+      syntax = syntax.downcase if syntax
+      firstline = /\A[-+]?\d+\z/.match(firstline).to_a[0] if firstline
       if syntax
         begin
+          attr_firstline = firstline ? %Q( firstline="#{escape_html_param firstline}") : ""
+          @f.print %Q(<pre class="sh_#{escape_html_param syntax}"#{attr_firstline}>), text(str), "</pre>\n"
+          @f.puts inline_plugin(%Q(shjs #{syntax.dump}))
+          return  
+
           convertor = Syntax::Convertors::HTML.for_syntax(syntax)
           @f.puts convertor.convert(str)
           return

 追記: コピペまでは試してなかった。

お試しください。

Firefox> 行番号が選択されたり選択されなかったりする。見た目の選択範囲に関わらず行番号はコピーされない。
Safari> 行番号も選択範囲に入るがコピーはされない。
Opera> 行番号がコピーされる。
IE8> 行番号がコピーされる。

 追記@2009-03-27: 最後で全部ひっくりかえしちゃった。

やっぱり一行二列の表を作る方法でいくことにした。

この方法だと、preを一旦取り除いて tableの下に追加する関係からか、同じ preにハイライト処理が二回走ってしまう(getElementsByTagName()で得られる NodeListが liveである、ということ)。sh_sourceCodeというクラス名を目印に、二度目以降の処理をスキップするよう動作を変更した。

Internet Explorerは 8になっても一筋縄ではいかないようで……。左右の列の<pre>の高さが、デフォルトスタイルシートと同じ font-size:80%でないと揃わない。「IE8互換表示」や「IE7」モードだと揃うんだけど。

二重処理を防ごうと Array.prototype.sliceを使って NodeListを Arrayに変換しようと思ったらまたしても IEの壁。オブジェクトを指定してください、と相変わらずわかりにくいエラーメッセージ。(prototype.jsが愚直にループをまわしてるのは IEのせいかもね)

<table>を使うとその中の <pre>の幅が、内容に同期している(最小にして十分なサイズ)。他の <pre>と同じように、いつでも本文と同じ幅に揃えたいなー。

 追記@2009-04-02: 0-paddingオプションとか。(暇だなあ)

<pre class="sh_javascript" firstline="00339">
  このような <pre>を出力すると……
</pre>

00339
00340
00341
00342
00343
00344
00345
00346
00347
00348
00349
00350
00351
00352
00353
00354
00355
00356
00357
00358
00359
00360
00361
00362
00363
00364
00365
00366
00367
00368
00369
00370
00371
00372

sh_putLinenumber: function(element, param, inputString) {
  var startline = parseInt(param, 10);
  var opt = /^([-+]?)(0*)(\d+)/.exec(param);
  var opt_explicit_sign = (opt[1] === '+') ? '+' : '';
  var opt_zero_padding = (0 !== opt[2].length) ? new Array(opt[2].length + opt[3].length + 1).join('0') : '';
  var re_zero_padding = new RegExp('^0+(?=\\d{' + opt_zero_padding.length + '})');
  var nums = inputString.match(/(?:\r\n?|\n)(?!$)|$/g);
  if (0 !== opt_explicit_sign.length || 0 !== opt_zero_padding.length) {
    for (var i = 0; i !== nums.length; ++i) {
      nums[i] =
        (0 < startline + i ? opt_explicit_sign : startline + i < 0 ? '-' : '') +
        (opt_zero_padding + Math.abs(startline + i)).replace(re_zero_padding, '') +
        nums[i];
    }
  }
  else {
    for (var i = 0; i !== nums.length; ++i) {
      nums[i] = '' + (startline + i) + nums[i];
    }
  }

  var d = element.ownerDocument;
  var e = {table:'table', tbody:'tbody', tr:'tr', tdLeft:'td', pre:'pre', tdRight:'td'};
  for (var p in e) {
    e[p] = d.createElement(e[p]);
  }
  element.parentNode.replaceChild(e['table'], element);
  e['table'].appendChild(e['tbody']).appendChild(e['tr']);
  e['tr'].appendChild(e['tdLeft']).appendChild(e['pre']).appendChild(d.createTextNode(nums.join('')));
  e['tr'].appendChild(e['tdRight']).appendChild(element);
  e['table'].className = 'sh_sourceTable';
  e['pre'].className = 'sh_sourceCode sh_numbers';
  return element;
},

341-344、346-354、358行がオプションのために追加した部分。(SyntaxHighlighter2.0の行ハイライト機能はこういときにつかうのだな。イラネと思っていたのを改めます)

固定幅というわけではなくて、0の数以上に繰り上がれば桁が増える。上の場合では 99999行目を超えたとき。テストする段で気付いたが、最低でも 92行のソースコードを貼らないと恩恵に与れない……。

正規表現を持ち出すまでもなく、適切な数の 0をくっつけるだけでよかったんだね(> JavaScriptのビルトインオブジェクトの拡張：ゼロパディング - 気まぐれショウルーム)。先に調べよう。過去に、適切な数の 0を知るために log(10)をとればいいと無邪気に考えていた苦い記憶があるので、最初に正規表現を持ち出してしまった(それもどうだ？)という事情があったりもするんだけど。(Number.toString(10).lengthで済んでしまうなんて！)

 345行目の /(?:\r\n?|\n)(?!$)|$/g というパターンについて

<pre>直後の改行は存在しないかのように扱われるが、</pre>直前の改行は存在する(スクリプトで取得できる)ものの表示されない(4つのブラウザで確認)。というわけで、末尾の空行に行番号を付けてしまうと列の左右で行の数が一致しなくなる(だから除外する)。

Google Chrome(1.0.154.53)は

<pre>.innerHTML = <pre>.innerHTML

とやるたびに先頭の改行文字を取り除いていってしまうんじゃないか？ 個別のブラウザ対応は切りがないし、完全対応は不可能なので、行番号を付けるときは <pre>の最初と最後の行を空行にしないのが最も安全。

トンデモ IEさんは <pre>.innerHTML= だろうと <tag style="white-space:pre">.innerHTML= だろうと空白をトリミングしてくれますしね。

 追記@2009-04-04: 一行二列の TABLE方式にしたら shjs-0.6での対応も簡単だったので。

• /shjs/0.6/sh_main.js (shjs-0.6と互換)
• /shjs/0.6/sh_main.min.js (shjs-0.6と互換)

テストが不十分なので、langファイルの自動読み込み部分など、一度も実行されていない部分が動くかは不明。

最小化方法は JSMin。ためしに YUI Compressorにもかけてみたがローカル変数の短縮を全くやってくれなくて JSMinと大差ない結果だった。一番外側の無名関数の実行部分をとりのぞいたらちゃんとローカル変数名の短縮もやってくれた。

小手先の変更もいくつか加えた。(ブラウザ判別コードの実行を一度だけにしたり << 関数の中で分岐するんでなく、判別結果で関数を取り換える)

♪ [SHJS][javascript] SHJS-0.6がリリースされていた。(2008年12月15日)

アナウンスされている変更点は…… (注: 日本語部分は俺の勝手な訳のような注釈のようなもの)

December 15, 2008 - SHJS 0.6

SHJS 0.6 is available for download.

SHJS 0.6 includes several new features, improvements and bug fixes:

• SHJS is now distributed under version 3 of the GNU General Public License. (Older releases of SHJS were distributed under version 2 of the GNU GPL.)

  ライセンスが GPLv2から GPLv3へ変更。

• Markup inside pre elements is now preserved.

  PREタグの中の HTMLマークアップが保存される。(以前は Node.dataを再帰的に取り出したもの。乱暴にいうと PRE.{innerText|textContent}に相当するものが利用されていた。ver.0.5ではマークアップとして <br>のみが考慮されていた。)

• Several new languages (from the latest release of GNU Source-highlight) are included: S-Lang, Scala, Java properties files, Desktop files, LSM (Linux Software Map) files, Xorg configuration files, RPM spec files, Haxe, LDAP files, GLSL, Objective Caml, Standard ML, JavaScript with DOM, and C (separate from the C++ language file).

  最新の GNU Source-highlightから新しい言語ファイルを追加。JavaScriptには DOMキーワードを含んだ lang/sh_javascript_dom.jsが追加された。(sh_javascript_dom = sh_javascript + applicationCache|closed|Components|content|controllers|crypto|defaultStatus|dialogArguments|directories|document|frameElement|frames|fullScreen|globalStorage|history|innerHeight|innerWidth|length|location|locationbar|menubar|name|navigator|opener|outerHeight|outerWidth|pageXOffset|pageYOffset|parent|personalbar|pkcs11|returnValue|screen|availTop|availLeft|availHeight|availWidth|colorDepth|height|left|pixelDepth|top|width|screenX|screenY|scrollbars|scrollMaxX|scrollMaxY|scrollX|scrollY|self|sessionStorage|sidebar|status|statusbar|toolbar|top|window + alert|addEventListener|atob|back|blur|btoa|captureEvents|clearInterval|clearTimeout|close|confirm|dump|escape|find|focus|forward|getAttention|getComputedStyle|getSelection|home|moveBy|moveTo|open|openDialog|postMessage|print|prompt|releaseEvents|removeEventListener|resizeBy|resizeTo|scroll|scrollBy|scrollByLines|scrollByPages|scrollTo|setInterval|setTimeout|showModalDialog|sizeToContent|stop|unescape|updateCommands|onabort|onbeforeunload|onblur|onchange|onclick|onclose|oncontextmenu|ondragdrop|onerror|onfocus|onkeydown|onkeypress|onkeyup|onload|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|onpaint|onreset|onresize|onscroll|onselect|onsubmit|onunload)

• Many other languages have minor improvements.

  言語ファイルのアップデート。

• Compressed .min.css stylesheets are now included in the distribution.

  最小化した CSSファイルを同梱。(.jsも .cssも YUI Compressorを使用。ver.0.5までは .jsのみが JSMinで処理されていた)

Please note that the format of language-specific JavaScript files has changed in SHJS 0.6. JavaScript language files from version 0.6 will not work with sh_main.js from previous releases, and vice versa. Make sure you upgrade both the sh_main.js file and language-specific files.

古い言語ファイル(lang/*.js)と新しいメインスクリプト(sh_main.js)は互換性がない(逆も同じ)。両方入れ替えるべし。

大きな変更は <pre></pre>内の HTMLマークアップがシンタックスハイライト後も保存されること。(タグがたすき掛けになるときはどうするんだろ？)

言語ファイルの変更は小さくて、"next"、"regex"、"style"、"exit"というプロパティを持ったパターンオブジェクトが、3要素の配列になっている。

 異種document対応が必要では？ (sh_main.js)

function sh_highlightElement(element, language) {
  sh_addClass(element, 'sh_sourceCode');
  var originalTags = [];
  var inputString = sh_extractTags(element, originalTags);
  var highlightTags = sh_highlightString(inputString, language);
  var tags = sh_mergeTags(originalTags, highlightTags);
  // この documentFragmentはグローバル変数の document由来。
  var documentFragment = sh_insertTags(tags, inputString);
  while (element.hasChildNodes()) {
    element.removeChild(element.firstChild);
  }
  // element.ownerDocument != documentFragment.ownerDocumentのとき失敗しませんか？
  element.appendChild(documentFragment);
}

コメントを参照のこと。IEのバージョンが 5.5くらいだった時に失敗したような記憶が根拠で、確証はないし、レアケースだとは思うけど。(フレームをまたいで sh_highlightElement(element, language)を呼び出したとき(=スクリプトとエレメントが異なるドキュメントに属するとき)に起こるかなぁ？)

 タグのたすき掛けの結果

 before

<pre class="sh_ruby">
require 'sqlite3'
<strong>require</strong> 'sqlite3'
<strong>req</strong>uire 'sqlite3'
</pre>
<pre class="sh_javascript">
/*
http://example.com
http://example<em>.</em>com
*/
</pre>