Markdownify and paragraphs

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,

{{ someVariable | markdownify }}

always produces properly wrapped content like so

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

and never something as disturbing as this

"... some unwrapped text ..."

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?

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.


@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.

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

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 = "";

Works like a charm :sunglasses:.

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.

@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?

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.

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

1 Like

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 }}