簡単なAsciiDocエディタを作ってみた

これは何

簡単なMarkdownエディタを作る を読んで、AsciiDoc版を作ってみたくなったので試してみた。

成果物

ここ

左のテキストエリアに AsciiDoc を記述すると、右側に結果が出力される。
凝ったものは出せないと思うが、Asciidocの文法をちょっとお試ししてみる程度には使えると思う。
エラーチェックは全くやってないので、変なコードを書いてブラウザがおかしくなっても責任は取れない…。

文法が載っているサイト

Asciidoctor 文法クイックリファレンス(日本語訳)

ここまで大仰でなくていいからちょっと試したい、という場合は
AsciiDocとPlantUMLでドキュメント作成
がシンプルでいいかも。
※PlantUMLは書けません。

ソース

study/simpleAsciidocEditor

使ったライブラリ

Asciidoctor

Asciidoctor以外は、opengl-8080 さんが作ったエディタと同じライブラリを使用した。

ハマリポイント ※2018/1/12時点

Asciidoctor のgithub配布ページに書かれている一文に誤りがあるのか、配布されるjsに漏れがあるのかわからないが、

<script src="node_modules/asciidoctor.js/dist/asciidoctor.min.js"></script>

は

<script src="node_modules/asciidoctor.js/dist/asciidoctor.js"></script>

に書き換えないと動かない。

できなかったこと

[source,js]
.hello.js
----
console.log('Hello, world!');
----

と書いた時に色を付けたかったが、asciidoctor.jsが吐きだすhtmlコードがhighlight.jsに対応していないため色が付けられない。
issueも立っている。

https://github.com/asciidoctor/asciidoctor.js/issues/334 を読むと当面は自力で頑張るしかないらしい。