javascript - メモ

■ google-code-prettifyでD言語をハイライト: [javascript]

google-code-prettify でD言語をハイライトするハンドラー
をかいた。

使い方

<script src="lang-d.js" type="text/javascript"></script>
...
<pre class="prettyprint lang-d">
...

ネストできる字句は未対応
ネストできるブロックコメントとトークン文字列

[ 固定リンク ]  [ トラックバック(0) ]    

■ createSimpleLexer を使ってみる [javascript]

google-code-prettify の createSimpleLexer を使うと、
任意の正規表現でハンドラーを生成できる。

たとえば、以下のように書くと、D言語のコメントに対応する。
（ネストできるコメントは手抜き）

PR.registerLangHandler(
    PR.createSimpleLexer(
        /** 特定の文字で判別できる場合ここに書く
          * [style:string, patern:regexp, null, shortcut:string]
          * 例：#で始まるコメント行
          * [PR_COMMENT, /^#[^\r\n]*/, null, '#']
          * shortcut は必須
          */
        [
        ],
        /** 上でマッチしなかった場合に使われる。
          * [style:string, patern:regexp, null, shortcut:string]
          * 例：//で始まるコメント行
          * [PR.PR_COMMENT,/^\/\/[^\r\n]*/, null]
          * shortcut は無くても良い
          * 配列の順にテストするので順番に注意する
          */
        [
            [PR.PR_COMMENT,/^\/\/[^\r\n]*/, null],
            [PR.PR_COMMENT,/^\/\*[\s\S]*?(?:\*\/|$)/, null],
            [PR.PR_COMMENT,/^\/\+[\s\S]*?(?:\+\/|$)/, null]
        ]),
    ['d']);

[ 固定リンク ]  [ トラックバック(0) ]    

■ 10文字ごとに色分けする [javascript]

google-code-prettify で10文字ごとに色分けするハンドラー

function createMyDecorator(){
    /**
      * 10文字ごとにトークンわけする。
      */
    function tokenizer(source){
        var tokens = [];
        for(i=0;i < source.length;i += 10){
            tokens.push(source.substr(i,10));
         }
        return tokens;
    }

    var decorate = function(job){
        var sourceCode = job.source, basePos = job.basePos;
        var decorations = [basePos, PR.PR_PLAIN];
        var tokens = tokenizer(sourceCode);
        var pos = 0;
        for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti){
            var token = tokens[ti];
            var tokenStart = pos;
            pos += token.length;
            style = ti % 2 ? PR.PR_STRING : PR.PR_PLAIN; //交互に色分け
            decorations.push(basePos + tokenStart, style);
        }
        job.decorations = decorations;
    };
    return decorate;
};

PR.registerLangHandler(createMyDecorator(), ['d']);

[ 固定リンク ]  [ トラックバック(0) ]    

■ PR.createSimpleLexerを読む [javascript]

google-code-prettifyのPR.createSimpleLexerは、
combinePrefixPatterns で生成した正規表現で、
ソースをトークンに分割している。

[ 固定リンク ]  [ トラックバック(0) ]    

■ ハンドラーのかき方 [javascript]

google-code-prettify での特定言語に対するハンドラーは、

function createMyDecorator(){
    var decorate = function(job){
        var sourceCode = job.source, basePos = job.basePos;
        var decorations = [basePos, PR.PR_PLAIN];
        /**
          * decorations は
          * position と style の組の配列
          *
          * position 番目以降は style を適用
          * と解釈される
          * 
          * style はCSSでのクラス名になる
          * 
          */
        job.decorations = decorations;
    };
    return decorate;
};

PR.registerLangHandler(createMyDecorator(), ['MyLangExt']);

こんな感じで書くようだ。

[ 固定リンク ]  [ トラックバック(0) ]    

■ google-code-prettify を読む [javascript]

google-code-prettify は JavaScript で書かれた、
pre 要素をシンタックスハイライトする。

D言語は対応していない。

このサイトでは、prettify.jsにキーワードを追加して対応している。

言語を追加する場合、prettify.jsを修正せずに
PR.registerLangHandlerで追加するのが本来のやり方。

PR.registerLangHandleを使ってD言語に対応させてみる。

PR.registerLangHandlerで特定の言語に対応するには、

PR.registerLangHandler(handler, ['d']) 

これでクラス属性に"prettify lang-d"を持つpre要素に適用される、
ハンドラーを追加する。

google-code-prettify には、ハンドラーを出力する関数
PR.createSimpleLexer
PR.sourceDecorator
の２つが用意されている。

C言語に似ている言語の場合
PR.sourceDecorator を使うといい。

var D_KEYWORDS = "abstract alias align asm assert auto " +
                 "body bool break byte " +
                 "case cast catch cdouble cent cfloat char class const continue creal " +
                 "dchar debug default delegate delete deprecated do double " +
                 "else enum export extern " +
                 "false final finally float for foreach function foreach_reverse " +
                 "goto " +
                 "idouble if ifloat import in inout int interface invariant ireal is " +
                 "lazy long " +
                 "macro mixin module " +
                 "new nothrow null " +
                 "out override " +
                 "package  pragma private protected public pure " +
                 "real ref return scope shared short static struct super switch synchronized " +
                 "template this throw true try typedef typeid typeof " +
                 "ubyte ucent uint ulong union unittest ushort " +
                 "version void volatile " +
                 "wchar while with " +
                 "__FILE__ __LINE__ __gshared __thread __traits ";
PR.registerLangHandler(PR.sourceDecorator({
    'keywords': D_KEYWORDS,
    'cStyleComments': true
    }), ['d']);

キーワードのハイライトが出来る。

しかし、この場合D言語特有の構文に対応できない。
- ネストできるブロックコメント
- WYSIWYG文字列
- 16進文字列
- デリミタ指定文字列
- トークン文字列

対応するためには、ハンドラーを自作する必要がある。

[ 固定リンク ]  [ トラックバック(0) ]