Using Custom Inline Styles

Custom style syntax

You can assign built-in roles (e.g., big or underline) or custom roles (e.g., term or required) to any formatted text. These roles, in turn, can be used to apply styles to the text. In HTML, this is done by mapping styles to the role in the stylesheet using a CSS class selector.

Example 1. Text with built-in role
Do werewolves believe in [.small]#small print#? (1)

[.big]##O##nce upon an infinite loop.

  1. The first positional attribute is treated as a role. You can assign it a custom or built-in CSS class.

The results of Example 1 are displayed below.

Do werewolves believe in small print?

Once upon an infinite loop.

Although built-in roles such as big and small are supported by most AsciiDoc processors, it’s really better to define your own semantic role names and map styles to them accordingly.

Here’s how you can assign a custom role to text so you can apply your own styles to it.

Example 2. Text with custom role
Type the word [.userinput]#asciidoctor# into the search bar.

When Example 2 is converted to HTML, the word asciidoctor is enclosed in a <span> element and the role userinput is used as the element’s CSS class.

Example 3. HTML output
<span class="userinput">asciidoctor</span>

The following example shows how you can assign styles to elements that have this role using a CSS class selector.

.userinput {
  font-family: monospace;
  font-size: 1.1em;
  line-height: calc(1 / 1.1);
}