HUGO

Manipulate markdownify output in shortcode

I have a short code to highlight important parts on the page

Example:

{{< alert success >}}
**Markdown with Link**  
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non [ritibus](#) Telethusa
{{< /alert >}}

Shortcode:

<div class="alert alert-{{ .Get 0 }}">
  {{ .Inner | markdownify | }}
</div>

This shortcode renders a colored box with the markdown text in it. I want to be able to add a CSS-class to every link () element that may exists in the rendered (markdownified) output.

Is this possible?

Instead of

<div class="alert alert-success">
  <strong>Markdown with Link</strong><br>
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non <a href="#">ritibus</a> Telethusa
</div>

I want to be able to have:

<div class="alert alert-success">
  <strong>Markdown with Link</strong><br>
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non <a class="alert-link" href="#">ritibus</a> Telethusa
</div>

Yes, folks do so using https://gohugo.io/functions/replacere/ and other functions in their shortcode. Search the forums for examples. :slight_smile:

@maiki Thank you for your input. The solution looks like

<div class="alert alert-{{ .Get 0 }}">
  {{ .Inner | markdownify | replaceRE "<a" "<a class=\"alert-link\"" | safeHTML }}
</div>

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