Compatibility with Goldmark (the new default Hugo markdown renderer)?

[mr-islam]

Hi, thanks for this great utility that I've enjoyed for almost a year!

I just upgraded to a newer version of Hugo and want to use the new Goldmark renderer for some of the new features. The transition was successful, except this library no longer works.

I would guess because the new renderer generates a different kind of HTML output for the footnotes. Goldmark documentation states that it follows this implementation of footnotes. I haven't found a reference for blackfriday's one to compare though

Someone could always continue using blackfriday for compatibility. But since Goldmark is the new default it's important to support it as well I think

[inwardmovement]

I agree.

[rodrigoalcarazdelaosa]

Me too. I came here looking for a solution for my footnotes just to see that it doesn't work with the latest versions of Hugo.

Please 🙏🏼

[vaetas]

Hey @mr-islam @inwardmovement @rodrigoalcarazdelaosa

I have been using Goldmark on my website for some time now and this library works like it used to. I checked my config.toml file for Hugo and there are some options for Goldmark parsing.

Note the footnote = true attribute in extensions part.

[markup]
  defaultMarkdownHandler = "goldmark"
  [markup.goldmark]
    [markup.goldmark.extensions]
      definitionList = true
      footnote = true
      linkify = false
      strikethrough = true
      table = true
      taskList = true
      typographer = true
    [markup.goldmark.parser]
      attribute = true
      autoHeadingID = true
    [markup.goldmark.renderer]
      hardWraps = false
      unsafe = false
      xHTML = false
  [markup.highlight]
    codeFences = true
    guessSyntax = false
    hl_Lines = ""
    lineNoStart = 1
    lineNos = false
    lineNumbersInTable = true
    noClasses = false
    tabWidth = 4
  [markup.tableOfContents]
    endLevel = 3
    ordered = false
    startLevel = 2

Am I missing something? I am not following Hugo development a lot so if you talk about different problem please correct me.

Otherwise please try to put config from snippet above into your config.toml.

There is also a docs page for Goldmark configuration.

[rodrigoalcarazdelaosa]

As far as I can tell that configuration is the default, except for the linkify=false, which I just tested and doesn't work. So it definitely has to do with some updates.

Which version of Hugo are you using in your website? I'm currently using the latest one (0.72.0).

I can confirm that if I change the defaultMarkdownHandler to blackfriday your script works just fine. So it definitely has to do with Goldmark.

Just to clarify, I'm able to write footnotes[^1] and they working fine. What is not working is your footnotes.js script.

[^1]: Like this one.

Thanks!

[vaetas]

I have found the culprit and fixed this.

Sorry for this inconvenience. I have a copy of footnotes.js in my project. Apparently I fixed this issue a while ago but forgot to also fix this inside this project.

I made a commit to immediately fix this.

Please, test it in your project and tell me if it works.

[rodrigoalcarazdelaosa]

Please, test it in your project and tell me if it works.

I can confirm the fix is working.

Thanks a lot!

[mr-islam]

Sadly, it is still not working for me…

To double-check, I started a brand new repo here using the updated footnotes.js and the default hugo config. I deployed on Netlify here — same issue still exists

I am very confused

[rodrigoalcarazdelaosa]

I am very confused

You're missing the CSS. See here.

[mr-islam]

Ah, I missed it on the new testing repo 😅

But I definitely have the CSS on my own site, where I still can't get the popup to work

[vaetas]

@mr-islam Could you please check you are correctly importing footnotes.js file into your site? I cannot see footnotes.js script loaded.

This is not problem with CSS. When you tap on footnote ref it changes URL hash. This behavior is disabled with loaded footnotes.js therefore I think you forgot to include script into template.

[mr-islam]

@vaetas Yes you are right! After waking up this morning I took a fresh look at the script, and I had added an extra . 😅

Looks like I just needed a fresh pair of eyes to go through it. Thank you so much, the latest script works perfectly then!