JavascriptでのTeXのようなマークアップ

コンソールのようなフォーラムを作成する際に、「どのマークアップを使用する方が良いですか?」という質問がありました。 オプションには、標準のbbコード([b]太字[/ b])、wikiマークアップ(*太字*)、またはTeXのようなマークアップ(\ b {bold})が含まれていました。 短い会議の後、選択は特にTeXに似ていました。 私の意見では、非常に興味深く、拡張可能で、柔軟な小さなライブラリが作成されました。 例を見たい人はfreecr.ru/TeXのリンクをたどることができます



ライブラリはプラグインで拡張されます。 プラグインには「タグ」と「ルール」の2種類があります。 「タグ」は実際にはTexタグそのものであり、ルールはタグで構成されていないテキストに適用される機能です。 たとえば、テキスト内のURLを強調表示するには、「 www.example.comでは\ b {example site}」と表示されます。

ルールを追加する例:



TeX.addRule ({

name : 'liveUrls' ,

func : function ( string ) {

var urlRE = /((git|svn|ftp|http|https):\/\/(www\.)?|www.)(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/gi;

return string .replace(urlRE, function (url) {

var urlFull = (url.indexOf( 'www' ) === 0) ? "http://" + url : url;

return "<a class='url' href='" + urlFull + "'>" + url + "</a>" ;

});

}

})
;






タグは同じ原理で追加されます:

TeX.addTag ({

name : 'b' ,

args : [1],

func : function (args) {

return "<b>" + TeX.markup(args[0]) + "</b>" ;

}

});




* This source code was highlighted with Source Code Highlighter .








唯一の大きな違いは、タグのargsプロパティの存在です。 数値の配列、または文字列「無制限」を取ることができます。 したがって、引数で使用できるパラメーターの数を示します。たとえば、コードは2つのパラメーター(言語とコード自体、または1つ-コードのみ)を取ることができます。 その場合、値はargs:[1、2]になり、1つまたは2つの値を持つ引数の配列を受け取ります。



タグ内のすべての文字はルールによって処理されないため、処理する必要がある場合は、対応する引数に対してTeX.markupを再帰的に呼び出すことができます。



作業の最も理解しやすい原則は、サンプルコードにあると思います。

Liba自体: http : //pastebin.com/f46087804



プラグイン: http : //pastebin.com/f7840dc97



まあ、シードのために-css-highlighting、laを実装するより高度なプラグインの例:

\ style {float:right} {border:点線の赤2px} {background:#fcc} {text-align:justify} {padding:25px 100px} {display:block} {text is here}


http://pastebin.com/f4e75d3f6



ライセンス-LGPL。

Libaは非常に新鮮で、あまりテストされていないため、無相関の作業が可能です。




All Articles