やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

AsciiDocにも木構造を表現する記法はない

なぜ未だにHTMLにすらないのか。私が知らないだけなのか。

背景

ファイル構成などでしばしば木構造を使う。しかしHTMLやその軽量マークアップ言語には木構造独自の記法が存在しない。現状、HTMLのリスト<ul>のネストで木構造の代用をしている。MarkdownやAsciiDocでは*にあたる。

理想

  • ソースコードの可読性を高めるために木構造文脈、ファイルシステム文脈であることが識別できるようにしたい
    • HTML構文的に。
      • AsciiDoc構文的に。
  • TABキーで木構造のネスト階層を編集したい
  • ファイラのようにカッコよく表示したい

AsciiDoctor拡張機能

ただし拡張機能で構文を追加できるらしい。

test.asc

[tree]
----
> A
>> B

test.html

A
└─ B

素敵。しかしHTMLというリッチ表現ができるのにテキストなのは微妙。コピーするときはテキストであって欲しいが。

また、拡張機能を入れていない状態で上記の構文を書いても以下のエラーになる。

asciidoctor: WARNING: test.asc: line 16: invalid style for listing block: tree

拡張機能がないと使えない構文。これはMarkdownの方言と同じ問題になる。できれば使いたくない。

AsciidocFX

https://github.com/asciidocfx/AsciidocFX#filesystem-tree-extension

まさしくこういう表示を望んでいる。しかし画像ファイルになってしまうようにみえる。動的にはできないのか。たとえばファイル名にリンクしたり、rootをパンくずリスト式で表示したりしたいのだが。

AsciidocFXが何なのかよく知らないがエディタ?JavaFX製らしいがJavaFXが何なのかも知らない。低スペックPCなので重いエディタは動かせない。

HTML規格に存在しない

そもそもHTML規格に存在しないのでどうしようもない。HTMLに出力する以上、HTML規格を超えられない。CSSやJSを駆使すれば可能だと思うが。

調査

「HTML tree view pure javascript」のキーワードで検索。

JS(1)

http://www.cssscript.com/pure-javascript-treeview-component-aimarajs/

思っていた感じのリッチ表現。しかしコピーができない。

  • ファイル名のテキストコピーができない
  • JavaScriptでデータ入力が必要
    • プレーンテキストのインデントまたはHTMLの<ul><li>でも入力したい

JS(2)

http://www.cssscript.com/create-a-simple-tree-view-using-vanilla-javascript-js-treeview/

  • マウスで文字列を選択しコピーできる
  • クリックに応答する
  • 開閉できる

ただし以下の欠点がある。

  • JavaScriptでデータ入力が必要
    • プレーンテキストのインデントまたはHTMLの<ul><li>でも入力したい
  • 見た目が微妙

CSS

構造的にはHTML<ul><li>CSSで表示変化させるだけがシンプルか。

http://www.cssscript.com/minimalist-tree-view-pure-css/

ただしHTMLの入力はMarkdownかAsciiDocでしたい。どう連携すればいいのか。連携できても構造が複雑になってしまう。

所感

AsciiDoctorの拡張機能のようにファイルに書いて簡単に編集できるのが好ましい。記法や表示が気に入らないのでそれらを組み替えられて表示環境でも再現できるのが良い。難しすぎて現実的でない。細かく考えると欲しい機能が多くて収拾つかない。どうするか…。