Goldmark: paragraphs and footnotes

Mary · October 17, 2021, 8:43pm

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.

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

nternetinspired · October 18, 2021, 12:43pm

Mary · October 18, 2021, 1:21pm

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?

Georg · October 18, 2021, 1:53pm

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.

Mary · October 18, 2021, 2:43pm

Thank you for your idea, Georg. I have just tried several combinations without success. In Typora I put   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?

jmooring · October 18, 2021, 3:15pm

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

Try it.

Mary · October 18, 2021, 3:34pm

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.

With   in Typora

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.

jmooring · October 18, 2021, 3:40pm

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

Mary · October 18, 2021, 3:42pm

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

Mary · October 18, 2021, 4:43pm

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.

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  

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.

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  

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

jmooring · October 18, 2021, 4:49pm

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.

Mary · October 20, 2021, 9:51am

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.

Mary · October 20, 2021, 12:57pm

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, 
Thy leaves have ripened to the fall; 
O hushed October morning mild, 
Tomorrow’s wind, if it be wild, 
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?

jmooring · October 20, 2021, 2:00pm

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.

Mary · October 21, 2021, 7:59pm

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… )

jmooring · October 21, 2021, 8:33pm

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

Mary · October 22, 2021, 3:13pm

This is what I am seeing.

jmooring · October 22, 2021, 3:19pm

Try each of the following:

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

Mary · October 22, 2021, 3:48pm

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

jmooring · October 22, 2021, 4:18pm

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   element. Other browsers ignore the margin on the   element.

The fix:

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

Take this up with theme author.

Topic		Replies	Views
Retain line breaks in plain text paragraph support	3	11783	December 26, 2015
Inclusion of third-party Goldmark Extensions? feature typesetting	10	1581	January 11, 2024
Footnote anchor inside shortcode support	3	1504	March 28, 2021
Controlling Goldmark footnote rendering support	7	1427	July 11, 2020
Need help with broken footnote shortcode support	9	2682	April 18, 2017

Goldmark: paragraphs and footnotes

Related topics