CODEWITHSUNDEEP
asciidocasciidoctor
Paul Seibel
Paul Seibel

Reputation: 23

How to customize the asciidoctor menu macro?

In my document I want to render menu chains italic and with arrows between the entries, like this:

File → Save As...

Is there a way to do this with the menu macro?

I couldn't find a way to customize the macro. I also thought about writing a custom converter but I was hoping for a simpler way.

Edit

The answer by @Kiroul worked. I had to add some css to get the → in there. My docinfo.html ended up looking like this:

<style>
  /* Customizing Menu Macro */
  .menuseq b:before {
    content: "\00a0";
    padding-right: 0.2em;
  }
  .menuseq b:not(.caret),
  .menuref {
    font-style: italic;
  }
  .menuseq i.caret:before {
    content: "\2192";
  }
  .menuseq:after {
    content: "\00a0";
    padding-right: 0.2em;
  }
</style>

Upvotes: 1

Views: 258

Answers (1)

Kiroul
Kiroul

Reputation: 535

In order to do that you will need to change the styling for the menu macro. If you look at the source HTML you will see that the styling for the menu macro is done by the following CSS:

.menuseq,.menuref{color:#000}
.menuseq b:not(.caret),.menuref{font-weight:inherit}
.menuseq{word-spacing:-.02em}
.menuseq b.caret{font-size:1.25em;line-height:.8}
.menuseq i.caret{font-weight:bold;text-align:center;width:.45em}

You could make use of the docinfo file to inject some CSS code into your HTML. Create a resources folder and create a docinfo.html file inside it, copy the following content:

<!--docfile.html-->
<style>
.menuseq b:not(.caret),.menuref{font-style:italic}
</style>

Applying this style to the example in the documentation could look like this:

:experimental:
:docinfo: shared
:docinfodir: resources

To save the file, select menu:File[Save].

Select menu:View[Zoom > Reset] to reset the zoom level to the default setting.

Upvotes: 1

Related Questions