How would you pass a class to markdown?

[jan_at_gohugo]

Sometimes, I have md content I wish I could tag it with a certain css class.

I would want this output:

div.someclass
   ul
      li foo
      li bar

given this input (or similar)

.someclass
  - foo
  - bar

or

div.someclass
  hello world!

from

.someclass
hello world!

You think something like this is possible feasible?

[Grob]

This is not possible.

Yet, you can make a shortcode which converts markdown within <div /> to HTML.

Set custom classes within Markdown content

In Jekyll, you’re able to set custom classes for sections within Markdown itself. For example, if I wanted to add a special ‘warning’ class to a block quote I could do: > Beware! {: .warning} And it would render into <blockquote class="warning"> Beware! </blockquote> Is something similar possible within Hugo?

[jan_at_gohugo]

I tried that, but was not sure, if it was the best approach.

However my shortcode

<div class="gallery">
    {{.Inner}}
</div>

given this md

{{% gallery %}}
- ![](some.png)
- ![](other.png)
{{% /gallery %}}

renders as

<!-- raw HTML omitted -->
<ul>
<li><figure> ...
</ul>
<!-- raw HTML omitted -->

[jan_at_gohugo]

Ah right, as in https://tangenttechnologies.ca/blog/hugo-shortcodes/, this

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

needs to be in config.toml

[Grob]

You can also build a simple markdownify shortcode:

{{ $optBlock := dict "display" "block" }}
{{ with .Inner }}{{ . | $.Page.RenderString $optBlock }}{{ end }}

Another idea is a html-tag shortcode like this (I have not tested this recently):

{{ $optBlock := dict "display" "block" }}
{{ print "<" | safeHTML }}{{ .Get "tag" | default "div" }}{{ with .Get "id" }} id="{{ . }}"{{ end }}{{ with .Get "class" }} class="{{ . }}"{{ end }}{{ with .Get "style" }} style="{{ . | safeCSS }}"{{ end }}{{ print ">" | safeHTML }}
{{ with .Inner }}{{ . | $.Page.RenderString $optBlock }}{{ end }}
{{ print "</" | safeHTML }}{{ .Get "tag" | default "div" }}{{ print ">" | safeHTML }}

[jan_at_gohugo]

This sounds very interesting!
How would I consume this code in md? Or could you point to where I could read about this? https://gohugo.io/functions/markdownify/ isn’t very verbose, I am afraid …

[Grob]

Hi!

Here are two examples:

<div class="my-class-name">
{{< markdownify >}}
# Heading

- list item
- list item
{{< /markdownify >}}
</div>

{{< html-tag tag="section" class="my-class-name" >}}
# Heading

- list item
- list item
{{< /html-tag >}}

Create Your Own Shortcodes

[jzeneto]

Also note that your “gallery” shortcode didn’t work because you called it using {{% %}}. When shortcode should preserve raw HTML, it should be called using {{< >}}, and, in your case, using markdownify or RenderString to process .Inner as markdown.