Commonmark 'MARK' element (aka `==`) and Gold Mark rendering

support
1

I searched the existing posts and could not find a hit on this topic.

I would like to use <MARK>Some highlighted text</MARK> in a hugo site (or the markdown equivalent ==Highlighted Text==)

With the goldmark rendering in Hugo neither of these produce highlighting.

I went to Sign in to GitHub · GitHub which strongly asserts that they are common mark compliant. When I try the above in commonmark.js demo it renders reverse text.

I also found this entire fork of goldmark that seems to just handle this one code: GitHub - zuern/goldmark-highlight

Does anyone know what the issue is here?

2

You need to add this to your site config:

[markup.goldmark.renderer]
  unsafe = true

And then <mark>Some highlighted text</mark> will work (I use that in almost all my posts on my Hugo site).

@bep Is there any chance to still make this a default?

3

I am not sure if that’s a supported syntax; at least it doesn’t work in commonmark.js demo.

4

It’s not part of Markdown or CommonMark. I would attempt this with a shortcode instead.

5

I author in Typora and if it was compliant I would see the highlighting live. It also makes the non-hugo rendering less and less human readable in other contexts.

However, the goldmark demo does render the <mark> tag - is that goldmark doing that rendering?

Can I just style the HTML element <mark> in my hugo theme?

FYI the MARK tag does not show up in rendered markdown when the element is not recognized.

Can I create a shortcode with the standard code so I get both renderings - like this?
{{<MARK>}}Testing in Production Like environments to find missing configuration information{{</MARK>}}

6

No, that’s just HTML.

Sure. Try it out.

Did you see this comment? (btw you don’t need to capitalize the HTML tags. Lowercase <mark> .. </mark> works just fine.

Yes. See the documentation for custom shortcodes.

7

Opps, just needed

In hugo config.toml

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true
8

¯\_(ツ)_/¯

9

I also added nicer colors in a css override

/* Highligh colors for mark element and spans */
mark, .hlyellow {
    background-color: rgb(2255, 247, 175);
}

.hlpink {
    background-color: rgb(255,191,206);
}

.hlblue {
    background-color: rgb(178,205,251);
}

.hlorange {
    background-color: rgb(255,215,174);
}