# Set custom classes within Markdown content

**URL:** <https://discourse.gohugo.io/t/set-custom-classes-within-markdown-content/20627>\
**Category:** support\
**Created:** [September 7, 2019, 12:02am UTC](https://discourse.gohugo.io/t/set-custom-classes-within-markdown-content/20627 "2019-09-07T00:02:47Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![JordanTheDev](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jordanthedev/32/5638_2.png) [@JordanTheDev](https://discourse.gohugo.io/u/JordanTheDev)\
**Post date:** [September 7, 2019, 12:02am UTC](https://discourse.gohugo.io/t/set-custom-classes-within-markdown-content/20627/1 "2019-09-07T00:02:47Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![matt-antone](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/matt-antone/32/8460_2.png) [@matt-antone](https://discourse.gohugo.io/u/matt-antone)\
**Post date:** [September 7, 2019, 12:10am UTC](https://discourse.gohugo.io/t/set-custom-classes-within-markdown-content/20627/2 "2019-09-07T00:10:56Z")

</div>

You should look into Hugo shortcodes. Be aware Hugo does not process shortcodes in frontmatter only the main content of a .md doc. That threw me off for a while.

You could do something like

```auto
{{<warning "beware" "Beware!">}}

```

and have shortcode called warning.html

```auto
<blockquote class="{{ .Get 0 }}">
  {{ .Get 1 }}
</blockquote>

```

> **[Create your own shortcodes](https://gohugo.io/templates/shortcode-templates/)**
>
> You can extend Hugo's built-in shortcodes by creating your own using the same templating syntax as that for single and list pages.

---

<div class="post-metadata">

**Author:** ![apoorvmote](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/apoorvmote/32/8100_2.png) [@apoorvmote](https://discourse.gohugo.io/u/apoorvmote)\
**Post date:** [December 28, 2019, 6:36am UTC](https://discourse.gohugo.io/t/set-custom-classes-within-markdown-content/20627/3 "2019-12-28T06:36:34Z")

</div>

Hugo has moved to Goldmark as default Markdown processor.  
And as per today Goldmark supports adding classes, id and custom attributes to **heading** only. With more to come in future.

```auto
## heading ## {#id .className attrName=attrValue class="class1 class2"}

## heading {#id .className attrName=attrValue class="class1 class2"}

```

You can [read about goldmark custom attribute](https://github.com/yuin/goldmark/#attributes) support on their github readme.

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [December 28, 2019, 6:38am UTC](https://discourse.gohugo.io/t/set-custom-classes-within-markdown-content/20627/4 "2019-12-28T06:38:52Z")

</div>