Markdown mixed with HTML stops links from being rendered?

support
1

Hi,

I am trying to use the personal-web template by bjacquemet and had to tweak the theme a bit. I do only have very basic knowledge of HTML and CSS and even less of Hugo, and with this limited knowledge I had to write a bit of HTML in my content to allow text to flow around pictures. I have put a stripped down repository github: GitHub - Zugschlus/hugo-flow: stripped down demo example for hugo support

Here is the code I’d like to have:

<div class="text-flow-bild">
<p class="text-flow-bild-bild-30">
<img src="/201505-MarcHaber-3557b6-600x600.jpg" alt="Marc Haber" title="Marc Haber" />
</p>
<p class="text-flow-bild-text">
blah text here
Find a [Link](link-target/).
blah.
</p>
<div class=text-flow-clear></div>
</div>

(first paragraph on the rendered example page.

Inside the div construct, the markdown links are not converted to HTML links by Hugo.

This also happens if one strips the scaffolding down to just a single div construct (second paragraph on the rendered example page).

Only if all HTML is removed, the links render ok (third paragraph).

I think I have the following possibilities to solve that:

  1. Modify the theme to offer a paragraph format that allows a picture to be inserted with the text flowing around. Disadvantage: I don’t have a remote clue about how to do that.
  2. Find a workaround to make Hugo render the links inside HTML correctly.
  3. Write HTML links. Most ugly variant. The content markup is already ugly enough.

Can you help with one of the first two variants? I’d really appreciate that.

Greetings
Marc

2

try unsafe = true

3

Sorry, I forgot to mention that [markup.goldmark.renderer] unsafe= true is already set. Otherwise, the embedded HTML wouldnt work at all.

Greetings
Marc

4

Not even one suggestion how to address my issue?

5

Had no time on te weekend :wink:
change the config to

[markup]
    defaultMarkdownHandler = "goldmark"

    [markup.goldmark]
        [markup.goldmark.renderer]
            unsafe = true
6

Summary:

  1. Hugo uses the Goldmark markdown parser.
  2. Goldmark adheres to the CommonMark specification.
  3. The CommonMark specification describes how to identify HTML blocks. In particular, see items 6 and 7, specifically the end condition.

This is treated as one HTML block.The encapsulated markdown will be rendered as-is.

<div>
This is **bold** and this is _emphasized_.
</div>

This is treated as two HTML blocks. The encapsulated markdown will be converted to HTML

<div>

This is **bold** and this is _emphasized_.
</div>
4 Likes
7

I already had unsafe = true set, and changing this to the more sophisticated way of setting unsafe=true didn’t change the wrong behavior sorry.

1 Like
8

Hi

Thanks for this pointer, that was actually helpful. Adding some empty lines solves the issue for me at the price to have marginally more ugly source, see my repo given in the thread starter (GitHub - Zugschlus/hugo-flow: stripped down demo example for hugo support).

However, over the weekend I kind of discovered shortcodes and did some experimentation (hoping to coax the renderer into rendering the links before it discovers that there is raw HTML). I have pushed some changes to the demo repo - it looks like adding empty lines doesn’t end the HTML block if a shortcode is in the game. I can easily live without shortcodes in my simple project, but I would love to understand how shortcodes influence the renderer so that the fix doesn’t work again.

Greetings
Marc

9

Ok, shortcodes go down the drain. Not going to use something that I don’t understand. Too bad.

10

Hi,

if your HTML is a fixed part, checkout .Inner