Style Hugo Poem

Question

I want to display poems with hugo.

The content file:

So some text
with some rhyme

and another strophe

I want to be displayed this exactly with these newlines.

---

What happens by just using .Content? Lines within the same strophe get no newline.

---

What happens by making a newline there? {{ (replace .Content "\n" "<br/>") | safeHTML}}? Four newlines between the strophes.

---

Now, I'm confused. I'm wondering it's that hard to get back the original newlines.

In fact, I'm fighting against the markdown processor. Can't I just say: "No, don't markdownify this?"

Answer 1

As of Hugo 0.60.0, the CommonMark compliant Goldmark library is used for rendering markdown. If you want to render a hard line break you can use two or more spaces, or a backslash at the end of the line.

Input:

So some text\
with some rhyme

and another strophe\
enter code here

Output:

<p>So some text<br>with some rhyme</p>
<p>and another strophe<br>enter code here</p>

Answer 2

There are multiple solutions. You could use native Markdown linebreaks, raw HTML or a codeblock.

Markdown linebreaks

The simplest solution is to use native Markdown linebreaks (two spaces at the end of a line generate a line break).

In the following example, the spaces have been replaced with dots for demonstration purposes:

So·some·text··
with·some·rhyme

and·another·strophe··
enter·code·here

Which generates the following HTML (almost identical to the other answer's suggested raw HTML)

<p>So some text<br>
with some rhyme</p>
<p>and another strophe<br>
enter code here</p>

and renders as

So some text
with some rhyme

and another strophe
enter code here

Of course, unless your editor has the option to display whitespace, you can't actually see those trailing spaces and it can be annoying to edit documents that need to contain them.

Raw HTML

It often helps to consider what HTML you want Markdown to output before deciding which Markdown structure to use for formatting some text. In this case it is interesting to look at the pre tag. The HTML5 spec describes the tag this way:

The <pre> element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.

And then provides Example 12:

The following shows a contemporary poem that uses the pre element to preserve its unusual formatting, which forms an intrinsic part of the poem itself.

<pre>                maxling

it is with a          heart
                heavy

that i admit loss of a feline
        so           loved

a friend lost to the
        unknown
                                (night)

~cdr 11dec07</pre>

Given the above, the pre tag seems like a good candidate for marking up a poem. You can format the plain text however you want and it its wrapped in a pre tag, the plain text formatting is retained.

Of course, Markdown does not have a mechanism to create pre tags which do not also include a child code tag (Markdown code blocks). And as the original Markdown rules state:

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.

Given the above, the "correct" way to write a poem with unusual formatting is to use a raw HTML pre tag.

<pre>So some text
with some rhyme

and another strophe
enter code here</pre>

which renders as:

So some text 
with some rhyme

and another strophe 
enter code here

Codeblock

However, if you only want to use supported Markdown syntax and are less concerned about the semantics of the generated HTML, then a Markdown code block would do fine. While "the code element represents a fragment of computer code," there is no rules controlling how code elements are to be displayed. Of course, some sites might apply some CSS rules to code elements, so you may need to be aware of that, but when you can complete control (perhaps on your own site) that may not be a problem.

Here's a simple code block, just like the one included in the original question:

    So some text
    with some rhyme

    and another strophe
    enter code here

Which you already know renders as:

So some text
with some rhyme

and another strophe
enter code here

Answer 3

Given that this answer also uses Markdown, here's one way you could do it:

<p>So some text<br>
with some rhyme<br>
<br>
and another strophe<br>
enter code here</p>

You can put generic HTML into a Markdown document and it gets rendered out as-is:

So some text
with some rhyme

and another strophe
enter code here