The best example is github, for example: GitHub - concourse/concourse: Concourse is a container-based continuous thing-doer written in Go. [image] There is an anchor to click on it. How can I achieve it in hugo? I don’t want to use shortcodes. I want to use standard markdown # H1, ## H2 etc.

[image] kwladyka: How can I achieve it in hugo? That’s JavaScript. It reads the heading’s ID and loads a graphic linking to it. Hugo adds the ID by default (see Content formats | Hugo ). The Hugo docs uses such a script, I believe it lives at https://github.com/gohugoio/hugoDocs/blob/master/th…

[03] Hmm but I am not sure if google will make Vars / Atoms / Agents then. Not sure if it has to be static vs javascript. Do you know maybe?

[image] kwladyka: Do you know maybe? No. You’ll need to read the documentation for the systems you use, that is out of scope for Hugo troubleshooting. :slight_smile:

[image] kwladyka: re is an anchor to click o or use a kind of post processing following the links in this link: [image] Creating a clickable link from an anchor generated by hugo tips & tricks Thanks for this tip @freethebit . For reference, @kaushalmodi does the s…

@maiki solution to write own simple js is the one which I choose to solve it. I modified it a little to get GitHub effect. If somebody is interested in about effect you can see it here Clojure Blog . It is simple JS + CSS. JS var anchorForId = function (id) { var anchor = document.createEleme…

I personlly try to avoid JavaScript for this. [image] kwladyka: I don’t want to use shortcodes. This is probably because you do not want to insert a shortcode before/after each heading. This is another approach This is the partial header-link.html: {{ $content := . | replaceRE "(<h[2] id=\…

I personlly try to avoid JavaScript for this. why? Thanks for alternative solution.

[image] kwladyka: I personlly try to avoid JavaScript for this. why? Good question: At first I thought it was just a matter of taste. But it’s a bit more than that. This seems to be my policy: Use semantic HTML5. Use pure CSS—following a DRY style. (I do not use SASS any more.) Use (van…

This thread inspired me to do this on my site so thanks for posting this @kwladyka . Doing this in an AsciiDoc content file that’s rendered by asciidoctor involves setting one or both of these attributes: :sectlinks: :sectanchors: Details are in https://asciidoctor.org/docs/user-manual/#links and h…

[image] kwladyka: How can I achieve it in hugo? There is a CSS-only method that is on this forum somewhere and that I use in my theme. [image] GitHub - TotallyInformation/hugo-theme-twenty-sixteen: A blog and information... A blog and information management theme for Hugo roughly…

OK, found it: [image] Adding anchor next to headers support Slight variation to make it closer to a GitHub style: .hanchor { font-size: 50%; visibility: hidden} h2:hover a { visibility: visible} function addAnchor(element) { element.insertAdjacentHTML('beforeend', `<…

ToC with anchors in posts

support

TotallyInformation July 22, 2019, 10:26pm 12

OK, found it:

Topic		Replies	Views
Adding anchor next to headers support	23	14647	May 26, 2021
Surrounding HTML Heading Content with Anchor Tag? support	7	3076	January 30, 2020
Adding a link icon to headings support	6	5459	April 15, 2018
Creating anchors in Hugo pages support	10	13050	January 5, 2024
[SOLVED] Anchor image for headers support	4	1891	February 4, 2018

ToC with anchors in posts

Related topics