asciidoctorのHTML出力で、動的なコードの表示/非表示を試してみた

概要

asciidoctorのhtml出力で動的な記事の非表示をしてみる。
できるからといって、オススメする訳ではありません。

pass で htmlコードを直接流し込むことができて、普通に JavaScript で実現するだけです。
本屋で立ち読みして、便利そうなので jQuery を使ってみました。

環境

Ubuntu 18.04
asciidoctor 1.5.8
※コメントにある通り、2.0.0 からは asciidoctor の機能で実現できます。

コード

解説。jQueryのコードそのままです。
asciidoctor的には、[#foo] が <tag id="foo">～</tag> に相当することから制御できます。

1. jquery-3.4.1.min.js を読み込んでいる。HTMLコードなので pass:[～] の指定で文字列化を抑制する。
2. #maxim_toggle_button が表示・非表示のボタンに相当するコンポーネントとなる
3. #maxim_block が、ボタンにより、表示されたり隠されたりするコンポーネントとなる
4. 最後の script のブロックは、初期化時に#maxim_toggle_buttonのテキストの更新と、#maxim_block の表示・非表示状態に変える。

=== Hide & Show
pass:[<script src="jquery-3.4.1.min.js"></script>]

頭隠して尻隠さず

[#maxim_toggle_button]
...
[#maxim_block]
----
Head
----
Ass

[pass,subs="attributes"]
++++
<script>
$(function() {
  $('#maxim_block').hide();
  $('#maxim_toggle_button').text('▾ hide')

  $("#maxim_toggle_button").click(function() {
    $("#maxim_block").toggle();
    if ($('#maxim').is(':visible')) {
      $('#maxim_toggle_button').text('▾ hide')
    } else {
      $('#maxim_toggle_button').text('❱❱ show')
    }
  });
});
</script>
++++

実行結果

初期状態で、 Head のテキストを隠しています。クリックで、表示されます。
今回は ---- のブロックですが、リストとか色々いけます。

テキストを隠した状態

表示した状態

おまけ

もう少し、asciidoctor をこじらせると再利用可能となり、多少は実用的なレベルにはなる。
Markdown では、表示・非表示をサポートしている方言はあって、asciidoctor は、
include, pass, subs の置換なりの標準的な機能を組み合わせると、何とか実現できてしまう。

「軽量マークアップ言語＋マクロ言語」みたいなものは、LaTeXやMarkdownでもあって、
以外と asciidoctor と JavaScript の親和性は妙に高い気がする。

+ toggle_sample.adoc
+ jquery_toggle.html

toggle_sample.adoc
subs="attributes" の部分で、includeしたファイル中の属性だけ前処理として置換する。
なんだか、古きよき時代の関数呼び出しみたいですね。

[#maxim_toggle_button]
...

[#maxim_block]
----
Head
----
Ass

頭隠して尻隠さず

:toggle_block: maxim_block
:toggle_button: maxim_toggle_button
[subs="attributes"]
----
include::jquery_toggle.html[]
----

jquery_toggle.html

<script>
$(function() {
	$('#{toggle_block}').hide();
  $('#{toggle_button}').text('▾ hide')

	$("#{toggle_button}").click(function() {
		$("#{toggle_block}").toggle();

    // change button text
    if ($('#{toggle_block}').is(':visible')) {
      $('#{toggle_button}').text('▾ hide')
    } else {
      $('#{toggle_button}').text('❱❱ show')
    }
	});
});
</script>

参考

• W3Schools Online Web Tutorials
• jQuery｜要素をdisplay:noneで隠す方法と表示・非表示を判定する方法
• collapsible markdown · GitHub
• R Markdownで任意の領域を表示/非表示ボタンの実装- Qiita
• Awesome Asciidoctor: Collapsible Content - Messages from mrhaki

Since Asciidoctor 2.0.0 we can add the collapsible option to an example block.
⇒ Asciidoctor 2.0.0 より、exampleブロックに collapsible オプションを追加できるようになった。