HUGO

Goldmark: paragraphs and footnotes

No idea where to start… I have to include a long poem in my page and make several footnotes or tooltips for all the proper names in the verses.

  1. Poetry asks for soft breaks but neither Enter, nor inserting two spaces after each line can give me the desired soft break. I got hard breaks and new paragraphs. Until now I resolved the problem by using bloc codes for poems. I mean all the verses on my web pages look like programming code. This way I can make poems render correctly. But how to insert footnotes into the code?

  2. Footnotes do work in ordinary markdown texts as they should but… Alas! I have a sticky header. So when the page jumps to the footnote location the text of the footnote disappes behind the header. And the same happens when I want to return to the text: the line with the footnote mark is behind the header.

Is there a way to add footnotes or tooltips to the code? Or a way to add soft breaks in the usual markdown text using some fancy mardown editor (I use Typora and Visual Studio Code)?

Is there a way to show footnotes or tooltips in a theme with a sticky header?

  1. Basic Syntax | Markdown Guide
  2. scroll-padding-top - CSS: Cascading Style Sheets | MDN

Thank you very much for the scroll padding link! Just the thing!

But as for the markdown guide and poetry, I have already tried “two or more spaces in the end of line” and it doesn’t work. Maybe Goldmark markdown that is being used in Hugo need some changes in its setting to allow soft breaks?

About the soft wraps. Maybe you should set the configuration option hardwraps =true in your markdown configuration ( if you are using Goldmark ). This should work with Typora edited files. All single line breaks are then treated as expected. They start a new line without starting a new paragraph.

1 Like

Thank you for your idea, Georg. I have just tried several combinations without success. In Typora I put <br> in the end of each line and it rendered the poem as it should look ( soft wraps) but only in Typora itself. On the webpage there are no line breaks at all and the verses look like one line – both with
[markup.goldmark.renderer]
hardWraps = true
and
[markup.goldmark.renderer]
hardWraps = false
By the way, I added the hardwraps=true to config.toml in my website. Maybe I ought to add the lines somewhere else in my theme?

Perhaps your editor is removing trailing whitespace on save. End your lines with a backslash (\) instead.

Try it.

  1. With \
    in Typora and on the webpage the poem looks the same:

O hushed October morning mild,\

Thy leaves have ripened to the fall;\

Tomorrow’s wind, if it be wild,\

Should waste them all.

  1. With <br> in Typora

O hushed October morning mild,<br>
Thy leaves have ripened to the fall;<br>
Tomorrow’s wind, if it be wild,<br>
Should waste them all.

On the webpage

O hushed October morning mild,Thy leaves have ripened to the fall;Tomorrow’s wind, if it be wild,Should waste them all.

That sounds like a Typora problem, not a Hugo problem.

Okay, I’ll try Visual Studio Code and show the results.

I have tried Visual Studio and Notepad++

The results are all the same in all the cases. Nice in the editor and hard breaks on the webpage.

  1. Visual Studio
    With \
    In VS
    O hushed October morning mild,\
    Thy leaves have ripened to the fall;\
    Tomorrow’s wind, if it be wild,\
    Should waste them all.

On the webpage

O hushed October morning mild,

Thy leaves have ripened to the fall;

Tomorrow’s wind, if it be wild,

Should waste them all.

With <br>

In VS
O hushed October morning mild,<br>
Thy leaves have ripened to the fall;<br>
Tomorrow’s wind, if it be wild,<br>
Should waste them all.

On the webpage

O hushed October morning mild,

Thy leaves have ripened to the fall;

Tomorrow’s wind, if it be wild,

Should waste them all.

  1. Notepad++

With \
Notepad++
O hushed October morning mild,\
Thy leaves have ripened to the fall;\
Tomorrow’s wind, if it be wild,\
Should waste them all.

On the webpage:

O hushed October morning mild,

Thy leaves have ripened to the fall;

Tomorrow’s wind, if it be wild,

Should waste them all.

With <br>

In Notepad++:

O hushed October morning mild,<br>
Thy leaves have ripened to the fall;<br>
Tomorrow’s wind, if it be wild,<br>
Should waste them all.

On the webpage:

O hushed October morning mild,

Thy leaves have ripened to the fall;

Tomorrow’s wind, if it be wild,

Should waste them all.

Then you need to share your project repository. See:
https://discourse.gohugo.io/t/requesting-help/9132

Let us see your code

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.

Jmooring, you are absolutely right. The cause of the strange rendering of poetry is in the theme I use.

I made it out of two themes. The main one is free and the other was bought a year ago when I was a newbie and knew very little about Hugo. The paid theme is the culprit. But I don’t feel it would be right to put my theme in a public repo since it has chunks of paid content.

I has just carried out several experiments with different themes in their pristine forms and now I know for sure that the cause of my troubles is in the paid theme.

I have written to the author. Maybe he will answer, maybe not. It doesn’t matter. Feeling much more confident now I plan to delete the part of of his theme that I incorporated into my website and to rewrite it myself. If I find out the concrete cause of the problem I will write in this forum because while looking for the solution I read a lot of laments of other people having problems with poetry in markdown files.
P.S. I have found the same deviant rendering of poetry in free themes. I’ll write about my findings in a few minutes.

It seems that the free theme Liva-hugo https://demo.gethugothemes.com/liva/blog/post-10/ has the same poetry deviation. ( I am not surprised since the author of the liva-hugo is the author of the paid theme which I bought for enhansing the theme of my website. I like both the themes. They are great and the author has made a wonderful job. The only problem is “pesky” poetry.)

This how it looks in Typora and on the websites 1. liva-hugo theme 2. ananke theme
##### Poetry test view from Typora (two spaces and Enter in the end of every line)

O hushed October morning mild,
Thy leaves have ripened to the fall;
O hushed October morning mild,
Tomorrow’s wind, if it be wild,
Should waste them all.

##### Poetry test from Typora (backslash in the end of every line)
O hushed October morning mild,\
Thy leaves have ripened to the fall;\
O hushed October morning mild,\
Tomorrow’s wind, if it be wild,\
Should waste them all.

##### Poetry test from Typora (br tag in the end of every line)
O hushed October morning mild,<br>
Thy leaves have ripened to the fall;<br>
O hushed October morning mild,<br>
Tomorrow’s wind, if it be wild,<br>
Should waste them all.

And this is how it looks on the liva webpage. (Deviant)


This how it looks on the ananke webpage (Normal)

Any ideas about the cause?

See my previous post.

But I don’t feel it would be right to put my theme in a public repo since it has chunks of paid content.

Then make it public for a short time, then make it private again once this issue has been resolved. Or find a way to share it privately.

Guessing is a waste of your time and ours.

The purged version of the site (Liva theme) can be seen here https://marybat.github.io/liva-play/blog/post-1/. It’s a page with a piece of poetry. The image is a sceenshot from Typora.
I created two repos: Liva-play (Hugo public folder) and Liva-source (raw Hugo files). Maybe I should have pushed them into one repo? If so, please, tell me and I will make all the necessary changes. This is my first stab at git… (And it was not a piece of cake… :blush:)

This is what I’m seeing. What’s wrong with it?


This is what I am seeing.

Try each of the following:

  • Use a different browser
  • View the page in an incognito (private browsing) window

Desktop: Chrome, Opera, Edge - looking fine.
Firefox gives hard wraps always (in private browsing too).
iPhone Safary – looking fine.

This is the problem with the liva theme:
https://github.com/gethugothemes/liva-hugo/blob/master/assets/scss/templates/_main.scss#L232-L235

.content {
  * {
    margin-bottom: 20px;
  }

Firefox applies this to everything (*) including the <br> element. Other browsers ignore the margin on the <br> element.

The fix:

.content {
  * {
    margin-bottom: 20px;
  }
  br {
    margin-bottom: 0;
  }
}

Take this up with theme author.

3 Likes