Some websites, including all rendered Markdown documents on Github, have a small “anchor” next to each headline if you hover over it. They are directs links to a specific header, like in this example from Github: <h2> <a id="user-content-overview" class="anchor" href="#overview" aria-hidden="true"> …

My initial requirement was to put # before h1 headings, ## before h2 heading, etc. As others have mentioned, this can be achieved with render hooks. This is what I’m doing: Put this in your theme’s layouts/_default/_markup/render-heading.html file: <h{{ .Level }} id="{{ .Anchor | safeURL }}"> …

I like this idea and it turns out that it requires no core changes at all. Apparently hugo is already adding an id to every header on each page, so all you need is a link to them. A ghetto, poorly styled option would simply be: $('h2').each(function() { $(this).prepend('<a href=#' + $(this).cont…

Thanks. I needed a version without jQuery so here it is: <script> function addAnchor(element) { element.innerHTML = `<a href="#${element.id}">${element.innerText}</a>` } document.addEventListener('DOMContentLoaded', function () { var headers = document.querySelectorAll('article h2') if (hea…

AnchorJS can be used to do this.

Being JS-illiterate, I just use this one-liner in Hugo partial :smiley: kaushalmodi/hugo-onyx-theme/blob/master/layouts/partials/headline-hash.html {{ . | replaceRE "(<h[2-9] id=\"([^\"]+)\".+)(</h[2-9]+>)" "${1} <a class=\"headline-hash\" href=\"#${2}\">#</a> ${3}" | safeHTML }} …

[image] Oskar: Thanks. I needed a version without jQuery so here it is: <script> function addAnchor(element) { element.innerHTML = <a href="#${element.id}">${element.innerText}</a> } document.addEventListener(‘DOMContentLoaded’, function () { var headers = document.querySelecto…

Oh, and if you want to color that character something other than black, you will need to add the “variation selector” character after it. 🔗︎ Will do it. That’s because the link icon is treated as an emoji and they have their own colours, they don’t take the CSS text colour.

I’m using this now in my theme. Way better than AnchorJS since AnchorJS is client side while this is static. :smile: https://github.com/UtkarshVerma/hugo-dream-plus/blob/master/layouts/partials/anchor.html

[image] UtkarshVerma: I’m using this now in my theme Nice, I’m certainly going to borrow that approach - another bit of JS removed from the site!

Here’s what I ended up with in my single.html layout: {{- with .Content -}} <div> {{ . | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" `${1}<a href="#${2}" class="hanchor" ariaLabel="Anchor"> 🔗︎</a> ${3}` | safeHTML }} </div> {{- end -}} The CSS needed (I only sh…

Love the static versions! Thanks all!

Adding anchor next to headers

support

sephore August 30, 2020, 1:57pm 23

Maybe it’s worth mentioning that replaceRE over the .Content here isn’t necessary anymore, since this issue could now be solved by using markdown render hooks.

Topic		Replies	Views
ToC with anchors in posts support asciidoc	11	2495	July 22, 2019
Is my approach correct for displaying an anchor link next to the headline? support	9	263	October 28, 2024
Surrounding HTML Heading Content with Anchor Tag? support	7	3057	January 30, 2020
Adding a link icon to headings support	6	5435	April 15, 2018
HTML anchor tags should be made from markdown headers feature	3	2361	October 29, 2014

Adding anchor next to headers

Related topics