How to customize the asciidoctor menu macro?

user_5873760 0
Viewed 42

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>
asciidoctor asciidoc
1 Answers

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.
user_54158350
Related