How can I create custom HTML section classes using AsciiDoctor?

Question

I am starting with AsciiDoctor and I want to output HTML. I tried to figure out how to create a custom class in divisions, searched google, manuals, etc. And could not find a solution. I want to just write something like this:

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

What HTML generates

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

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

Answer 1

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

In this example:

 This is some text. [.userinput] Type the word asciidoc into the search bar. This is some text. 

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

Now you have the css div.userinput selector for the corresponding div.

See 13.5. Setting attributes in an element in the Asciidoctor User Guide (you can also find a "role").

Answer 2

For this purpose you can use an open block :

 Type the following commands: [.userinput] -- command1 command1 -- 

Production:

 <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 that it can wrap any other block and is not limited to just one paragraph, like a different answer.

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