CODEWITHSUNDEEP
htmlcssjekyllasciidocasciidoctor
Aloso
Aloso

Reputation: 5417

Asciidoc: How to create clickable anchors for anchors

I have a jekyll blog site using asciidoc. Now I want an "anchor" symbol to appear when hovering over a heading, like on GitHub:

GitHub heading hover

When clicking the symbol, the browser should jump to the heading, so the HTML output should look like this:

<h2 id="whats-in-a-rainbow-table">
    <a href="#whats-in-a-rainbow-table"></a>
    What's in a Rainbow table?
</h2>

The equivalent asciidoc markup is:

== xref:whats-in-a-rainbow-table[ ]What's in a Rainbow table?

This works and looks good with some CSS, but I don't want to write this much markup for every heading. Is there a way to automate this?

Upvotes: 1

Views: 838

Answers (1)

eskwayrd
eskwayrd

Reputation: 4521

Adding the "permalink" icon would best be done with custom JavaScript, added to the theme used to generate HTML.

You can add custom JavaScript using a "docinfo" file. See my answer to this question for the strategy to do so.

Your custom JavaScript should run on page load, search for all headings, create the permalink anchor, and inject it into the heading markup.

Upvotes: 1

Related Questions