Customizing Markdown Links in Hugo

tips & tricks
1

I would like to share what I did to add cross reference support and link icons in regular Markdown links with the use of Hugo’s render hooks.

What I have achieved so far are the following:

  • I no longer need to use ref and relref
  • Use the content’s title
  • Multilingual support
  • Supports the regular Markdown text and title
  • URI #fragment support
  • Link icons

There are three Markdown link formats I have not figured out (included in the article) but so far as to what I need, everything works fine.

It’s a bit long, so I have it here on my blog: How To Customize Markdown Links in Hugo.

Enjoy. Shalom!

11 Likes
2

Link icons for different protocols is super cool, going to borrow this for my blog :eyes:

1 Like
3

Very nice! One note: copied/pasted as-is, the proposed code produces an error. In this part…

{{ with or .Title $internal.LinkTitle .Test }}

… it should say .Text rather than .Test — otherwise, hugo server throws an error (part of which is shown below), then quits:

can't evaluate field Test in type goldmark.linkContext
4

@bwintx Thank you for catching that! Fixed! :slight_smile:

2 Likes
5

found same error and fixed it for me.
Nice to drop ref and relref shortcodes :star_struck:

Had it in some posts and removed now - looks more nice
Thanks

1 Like
6

Can this work with this?

7

Hmm… not sure what the sample repo was (no longer available) – I mean the ‘how’ – but as per the OP in the thread, no, the codes I shared doesn’t support masking. It’s only for adding ref/relref functionality in regular markdown links ([text](https://example.com "Title")) and link icons.