Link formatting in markdown

support
1

Hi, I have just finished moving my website from Wordpress to Hugo and hit an small issue that I cannot work out. I would like to control the formatting of internal links using a shortcode inside another shortcode, this is my code:

{{% half_text %}}

Starting with a barrel half

Make up a wooden frame to fit the outside of the half barrel and screw together at the corners. This stage is similar to my
{{< text_link “Recycled Barrel Planter” “recycling-plastic-barrel-as-a-planter” “My recycled barrel planter build” >}}

Screw the barrel to the frame around the inside as shown.

{{% /half_text %}}

Using this the link text is converted to markdown. If I change the outer %% to <> the link renders correctly but I lose the markdown formatting for the rest of the text.
If I then add {{ .Inside | markdownify }} to the half_text shortcode the link text is changed back to markdown.

I have searched docs, topics and google but cannot find a solution, any pointers would be really appreciated

2

Please post code for both shortcode templates, or (preferably) a link to the public repository for your project. See https://discourse.gohugo.io/t/requesting-help/9132.

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

3

Sorry, I’m not up to speed on git, but here are the two shortcode templates. Hope it helps

half_text.html shortcode:

<div class="w3_container w3-half w3-left-align w3-padding-large sc-padding-lr">
{{ .Inner }}
</div>

text_link.html shortcode:

<a style="text-transform: capitalize; color: blue !important; text-decoration: underline;" href="{{ .Get 1 }}"title="{{ .Get 2 }}"> {{ .Get 0 }} </a>
4

Two options…

Option 1

Disable an aspect of Hugo’s security model. I don’t like this approach.

config.toml

[markup.goldmark.renderer]
unsafe = true

markdown (do not use {{% %}} notation)

{{< half_text >}}

Some **bold** and *emphasized* markdown.

{{< text_link "Recycled Barrel Planter" "recycling-plastic-barrel-as-a-planter" "My recycled barrel planter build" >}}

{{< /half_text >}}

layouts/shortcodes/half_text.html

<div class="w3_container w3-half w3-left-align w3-padding-large sc-padding-lr">
  {{ .Inner | markdownify }}
</div>

Option 2

Use a markdown render hook instead of a shortcode for your link. This allows you to use the standard markdown syntax for links: [Link Text](Destination "Title").

markdown (do not use {{% %}} notation)

{{< half_text >}}

Some **bold** and *emphasized* markdown.

[Recycled Barrel Planter](recycling-plastic-barrel-as-a-planter "My recycled barrel planter build")

{{< /half_text >}}

layouts/shortcodes/half_text.html (use .Page.RenderString instead of markdownify)

<div class="w3_container w3-half w3-left-align w3-padding-large sc-padding-lr">
  {{ .Inner | .Page.RenderString }}
</div>

layouts/_default/_markup/render-link.html

<a style="text-transform: capitalize; color: blue !important; text-decoration: underline;" href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}>{{ .Text | safeHTML }}</a>
1 Like
5

Thank you for the rapid response, I went with option 2 and it worked perfectly. I think I’ve still got a lot to learn!

6

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