murakya.net

JavaScriptでTextile

最近Textileで文章を書く機会が増えてきたのですが、Textileなどの軽量マークアップ言語のすばらしさを改めて実感しています。

軽量マークアップ言語とはTextileやMarkdownに代表される文章の書き方、詳しくは Wikipedia を参照してください(^^;
Textileについては TxStyle :: Textile Documentation が参考になります(英語ですが)
最近はMarkdownの方が流行っている気もしますが、tableが気軽に使えるTextileがお気に入りです。

軽量マークアップ言語の魅力は、なんといってもHTMLよりも書くのが楽。
さらに私にとってHTMLは自由度が高すぎて、統一した文章構成で書き続けるということが難しいですが、Textileならそもそも自由度が低いのでそんな心配もありません。
唯一の問題点は、導入が大変なこと。
わざわざCMSを入れたり等、サーバ側でごにょごにょする必要があります。

なんとか簡単にできないものかと思って、作ってみました。
Javascriptなのでサーバ側は関係なし、script要素で読み込むだけです。
実装したのは私が使う機能だけですが(^^;
IE7~IE10、GoogleChrome25、Firefox19、Opera12、ついでにNode.js 0.10.1やWSHでも動くようにしました。

全部ではありませんが、このページもTextileで書いてWSHで変換しました。

ダウンロード

textilel.js
ライセンス : MIT License

使い方

とっても簡単

  1. textilel.js をscript要素で読み込む
  2. クラス名をtextileにしたtextareaに文章を書く
  3. CSSで適当に味付け

あとは自動でTextileをHTMLに変換します。

下のようなHTMLをテンプレートファイルとして作っておけば、気軽にTextileでWebサイトが作れますね。

<!doctype html>
<html>
<head>
<title></title>
<script type="text/javascript" src="textilel.js"></script>
</head>
<body>
<textarea class="textile">
ここにTextileで文章を書くよ!!
&lt;/textarea>
</body>
</html>

node.jsで使うなら var textile = require('./textilel.js'); で読み込んで、 textile.textile( Textileで書いた文字列 ) として使います。
これで手抜きwikiが簡単に作れる…かも。

WSHとして動かすには、上のテンプレートのようにTextileを書いたhtmlファイルをD&DするとTextileをhtmlに変換して保存します。

テストツール

入力

出力