How can I implement Markdown Syntax for an icon library

support
1

Hi! I’m trying to make a Hugo theme, and I wanted to include an icon library to go with it. I really like this one, Material Icons by the Pictogrammers, so I included it in my theme.

For ease of use, I’m trying to implement a custom Markdown Syntax to use icons. Right now, you have to type <i class="mdi mdi-link"></i> to use an icon for example, but I want users to be able to write : link :, and for the icon to render. (I had to leave a space between the word and the colon if not it will turn into an emoji, but I do not want any spacing)

I’ve tried the following with layouts/_defaults/_markup/render-string.html, but it dosn’t work, and just outputs the text, not actually turning it into an icon:

{{- $pattern := `:(\w+):` -}}
{{- $replacement := `<i class="mdi mdi-$1"></i>` -}}
{{- $processedContent := . | replaceRE $pattern $replacement | safeHTML -}}
{{- return $processedContent -}}

Any suggestions as to how to do this would be much appreciated. Thank you!

2

mmh, always keen to learn new things, but I believe there’s no such thing like a layouts/_defaults/_markup/render-string.html. Any reference for that?

here’s a recent discussion on that listing some possibilities: Hey everyone, I would like to know if it is possible to support an extended markdown format like obsidian comments

3

Uhh render-string.html was ChatGPT generated because I thought it could identify a problem but it made it worse