CODEWITHSUNDEEP
asciidoc
Naresh Chaurasia
Naresh Chaurasia

Reputation: 469

How to change color of Highlight syntax in asciidoc

I am using asciidoc extensively for documentation. I am also using the feature Highlight syntax feature of asciidoc.

By default it highlight the color in yellow, as in the following link: https://docs.asciidoctor.org/asciidoc/latest/text/highlight/

I googled to find out if it is possible to change the color, but did not find any useful information.

Question: Is it possible to change this color. Also is it possible to maintain more that one color for highlighting.

Upvotes: 2

Views: 4090

Answers (2)

Kiroul
Kiroul

Reputation: 535

The default stylesheet for asciidoctor currently contains the following custom inline styles for highlighting:

.aqua-background{background:#00fafa}
.black-background{background:#000}
.blue-background{background:#0000fa}
.fuchsia-background{background:#fa00fa}
.gray-background{background:#7d7d7d}
.green-background{background:#007d00}
.lime-background{background:#00fa00}
.maroon-background{background:#7d0000}
.navy-background{background:#00007d}
.olive-background{background:#7d7d00}
.purple-background{background:#7d007d}
.red-background{background:#fa0000}
.silver-background{background:#bcbcbc}
.teal-background{background:#007d7d}
.white-background{background:#fafafa}
.yellow-background{background:#fafa00}

I assume you are converting to HTML, in that case the easiest way to change the highlighting color would be to use these existing inline styles, like this:

#Werewolves# are [.red-background]#allergic# to [.aqua-background]#cinnamon#.

Upvotes: 1

Richard Smith
Richard Smith

Reputation: 49692

The colour of the highlight is determined by the converter you are using. For example, with the HTML converter, the text is surrounded by <mark> tags, and most browsers will style this yellow by default. You can change the colour of the <mark> element using CSS.

To add more than one highlight style to your document, you should use a custom inline style. Again, for the HTML converter, style the <span> elements using CSS.

Upvotes: 2

Related Questions