How can I make custom class HTML divisions using AsciiDoctor?

Question

I am beginning with AsciiDoctor and I want to output HTML. I've been trying to figure out how to create custom class in divisions, I searched google, manuals etc. and couldn't find a solution. What I want to do is simply write something like this:

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

Which generates HTML

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

but I want to have div tags instead of span. Is there any way to do it or should I just use something like +++<div class="userinput">asciidoc</span>+++ ?

Answer 1

I think what you need is called "role" in Asciidoctor.

This example:

This is some text.

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

This is some text.

Produces:

<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>

You have now a css selector div.userinput for the concerned div.

See 13.5. Setting attributes on an element in the Asciidoctor User Manual (you can also search for "role").

Answer 2

You may want to use an open block for that purpose:

Type the following commands:

[.userinput]
--
command1

command1
--

Producing:

<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>

The advantage is it can wrap any other block and is not limited to only one paragraph like the other answer.

For slightly different use cases, you may also consider defining a custom style.