Controlling Goldmark footnote rendering

support
1

I am needing to implement footnotes on my project. The markdown syntax is straight forward enough, but I need to modify the rendered html output somewhat. Below is what is generated:

<section class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1" role="doc-endnote">
<p>Here is my foot note <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</section>

Scratching my head as to where it is coming from. I looked a bit at the Goldmark section in the Hugo docs, but I cant really find what I’m looking for, seems to be a param (footnoteReturnLinkContents) that Blackfriday users can modify, but it doesn’t seem to work when using the default Goldmark. Ultimately I can live with this, but for example, the “return” arrow renders differently on different systems and in some cases looks bad in my opinion. I’d like to be able to control this and other aspects of the rendered html.

thanks

2

I recently published a theme with this option, replacing the return link with an icon.

Maybe it can give you a kickstart:

It’s kinda hacky, but it seems to work.

3

@sephore,
Thanks for the help, I’ll see if I can adopt your line of reasoning. I am still researching how to intercept / modify / create my own template to handle the rendering… so far little luck.

4

So, one thing I foolishly overlooked was my font stack included the Apple Color Emoji family, which was giving me an emoji which I was not happy about. And hence my desire to re-write the output (which I still do.) However, the project must keep moving, so for now I’m going to try using BlackFriday, which seems to allow one to override the character used in the footnote. Barring that I suppose JavaScript will come to the rescue.

5

AFAIK that’s a bad move because: Deprecate blackfriday #6487.

Let me simplify my suggestion:

{{ $footnoteReturnLink = (printf "${1}%s${2}" "SOMETHING") }}

{{ .Content | replaceRE "(<a (?:.*) class=\"footnote-backref\" (?:.*)>)(?:.*)(</a>)" $footnoteReturnLink | safeHTML }}

Basically I’m rendering the .Content, but using replaceRE to capture 2 groups, the portion before and after the footnote return link icon. Then I’m replacing it with “something” (but re-inserting the 2 captured groups).

1 Like
6

Ah, I see. This works well for my purposes and lets me carry on w/ my project. I made a mistake in my earlier attempt to implement.
Also, I noticed there’s a missing : in the first line variable declartion, it should read:

{{ $footnoteReturnLink := (printf "${1}%s${2}" "SOMETHING") }}

So, Big thanks @sephore!

2 Likes
7

Yeah, sorry for that. The bad habit of copy and pasting without reading…

8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.