Markdownify and paragraphs

support
1

I have been looking around to see if anyone has come across an issue I have been experiencing with the markdownify function. Apparently there are quite a number of folks; in fact there have been an issue on github and other questions like this.

That said, I have not found a conclusive solution to this problem. My experience with kramdown, the markdown engine Jekyll uses by default,

<div>
{{ someVariable | markdownify }}
</div>

always produces properly wrapped content like so

<div>
 <p>... my content ...</p>
</div>

and never something as disturbing as this

<div>
"... some unwrapped text ..."
</div>

The latter situation is quite infuriating especially because it leads to design inconsistencies. Normally, I would result to JavaScript to resolve issues like this. I bet it would be easier to remove unwanted paragraph tags using JavaScript than add one to orphaned text.

Has anyone come up with something conclusive?

2

In the issue you linked to there is a possible solution:

{{ $markdown := .intro | markdownify }}

{{ if not ( strings.Contains $markdown "<p>" ) }}
    <p>{{ $markdown }}</p>
{{ else }}
    {{ $markdown }}
{{ end }}

As imjasonmiller points out, change .intro to whatever your param is.

2 Likes
3

@maiki, this works well for one instance. It, however, becomes a tedious process when you have over half a dozen instances across an entire theme.

4

Use a partial, and only “do the work” once

5

I decided to use JavaScript after all

(function wrapOrphan(parent) {
  let container = document.querySelector(parent);
  let divs = container.querySelectorAll('div');
  Array.from(divs).forEach(function(div, index){
    if(!div.innerHTML.includes("</")) {
      let text = div.innerHTML;
      let paragraph = document.createElement('p');
      paragraph.innerHTML = text; 
      div.innerHTML = "";
      div.appendChild(paragraph);
    }
  });
})('.body_wrapper');

Works like a charm :sunglasses:.

6

I ran up against this problem today wondering why the line spacing in my summaries didn’t look correct.

It would definitely be nice to have a builtin solution. Otherwise, I have to port it to every project I do in hugo.

7

@mhhollomon, It’s been a while since I have had to use this technique. Maybe I found a solution without even having to think about it after all. Is your code publicly accessible?

8

Thanks @Weru, but no, it is not.

For my case, I am trying to handle the .Summary correctly.

  • If it comes from the auto summary, then it is guaranteed to not have <p>.
  • If it comes from the manual summary then it is pretty much guaranteed to have <p>.
  • If it comes from the page header data, I want to support markdown, so use markdownify to process, it may or may not have <p>.

In truth, since I don’t know the actual origin, I just pass whatever string is in .Summary into markdownify and use the strings.Contains logic from earlier answers in this thread.

9

Looks like there is an open issue. Though, it keeps changing milestones.

1 Like
10

You can ensure hugo won’t trim any p element by adding a paragraph to your string, formatting it and trimming the extra paragraph, something like that:

{{ printf "%s\n\n[eof]" .Summary | markdownify | strings.TrimSuffix "<p>[eof]</p>\n" | safeHTML }}
1 Like