如何使用AsciiDoctor创建自定义类HTML分区？

Question

我开始学习AsciiDoctor并希望输出HTML。我一直在尝试找出如何创建自定义类的部分，我搜索了谷歌、手册等，但没有找到解决方案。我想要做的就是简单地写出这样一段话： Type the word [userinput]#asciidoc# into the search bar. 生成HTML的代码为: <span class="userinput">asciidoc</span> 但是我想要使用div标签代替span标签。有没有办法实现或者我应该只是使用像这样的东西: +++<div class="userinput">asciidoc</span>+++ ?

- trabant

---

相关：如何为现有的Asciidoctor Asciidoc宏创建自定义HTML输出？。 - Ciro Santilli OurBigBook.com

Answer 1

我认为你需要的是Asciidoctor中的“角色”。

这个例子：

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.设置元素属性（您也可以搜索“role”）。

- Jmini

---

谢谢您的帮助。我只是想知道，是否有可能仅使用<div class="userinput">而不包含其中的“段落”？ - trabant

不使用自己的输出模板是无法完成的。 - LightGuard

有没有类似这样的东西适用于Asciidoc？ - vfclists

Answer 2

您可能希望使用一个打开块来实现这个目的：

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>

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

对于略有不同的用例，您还可以考虑定义自定义样式。

- Sylvain Leroux