如何使用 AsciiDoctor 进行自定义 class HTML 划分？

Question

我从 AsciiDoctor 开始，我想输出 HTML。我一直在尝试弄清楚如何在 div 中创建自定义 class，我搜索了 google、手册等，但找不到解决方案。我想做的就是简单地写这样的东西：

Type the word [userinput]#asciidoc# into the search bar.

生成 HTML

<span class="userinput">asciidoc</span>

但我想要 div 标签而不是跨度。有什么办法可以做到还是我应该使用类似的东西 +++<div class="userinput">asciidoc</span>+++ ?

Answer 1

我想你需要的是 Asciidoctor 中的 "role"。

这个例子：

This is some text.

[.userinput]
Type the word asciidoc into the search bar.

This is some text.

生产：

<div class="paragraph">
<p>This is some text.</p>
</div>
<div class="paragraph userinput">
<p>Type the word asciidoc into the search bar.</p>
</div>
<div class="paragraph">
<p>This is some text.</p>
</div>

您现在有一个 css 选择器 div.userinput 用于相关的 div。

参见 Asciidoctor 用户手册中的 13.5. Setting attributes on an element（您也可以搜索 "role"）。

Answer 2

您可能希望为此目的使用 open block：

Type the following commands:

[.userinput]
--
command1

command1
--

制作中：

<div class="paragraph">
  <p>Type the following commands:</p>
</div>
<div class="openblock userinput">
  <div class="content">
    <div class="paragraph">
      <p>command1</p>
    </div>
    <div class="paragraph">
      <p>command1</p>
    </div>
  </div>
</div>

优点是它可以包裹任何其他块，而不像其他答案那样仅限于一个段落。

对于稍微不同的用例，您还可以考虑定义一个 custom style.

如何使用 AsciiDoctor 进行自定义 class HTML 划分？

How can I make custom class HTML divisions using AsciiDoctor?

asciidoc

asciidoctor