如何使用AsciiDoctor创建自定义类HTML部门?

时间:2016-03-16 18:21:47

标签: asciidoc asciidoctor

我从AsciiDoctor开始,我想输出HTML。我一直试图弄清楚如何在分区中创建自定义类,我搜索谷歌,手册等,但无法找到解决方案。我想做的只是写下这样的东西:

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

哪个生成HTML

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

但我想要div标签而不是span。有没有办法做到这一点,或者我应该使用类似的东西 +++<div class="userinput">asciidoc</span>+++

2 个答案:

答案 0 :(得分:6)

我认为你所需要的是&#34;角色&#34;在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. Setting attributes on an element(您还可以搜索&#34;角色&#34;)。

答案 1 :(得分: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