# Is it possible to postprocess the html Content generated from markdown?

**URL:** <https://discourse.gohugo.io/t/is-it-possible-to-postprocess-the-html-content-generated-from-markdown/5814>\
**Category:** support\
**Created:** [March 16, 2017, 4:12am UTC](https://discourse.gohugo.io/t/is-it-possible-to-postprocess-the-html-content-generated-from-markdown/5814 "2017-03-16T04:12:52Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![xenoterracide](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/xenoterracide/32/2832_2.png) [@xenoterracide](https://discourse.gohugo.io/u/xenoterracide)\
**Post date:** [March 16, 2017, 4:12am UTC](https://discourse.gohugo.io/t/is-it-possible-to-postprocess-the-html-content-generated-from-markdown/5814/1 "2017-03-16T04:12:52Z")

</div>

Trying to figure out if there’s a way to take the content being generated by the markdown and add css classes to it for the theme (asside from javascript). I mean I could write inline html in the content, but I’d rather the content remain semantic and have the final html contain the needed css classes.

---

<div class="post-metadata">

**Author:** ![rdwatters](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rdwatters/32/2848_2.png) [@rdwatters](https://discourse.gohugo.io/u/rdwatters)\
**Post date:** [March 16, 2017, 4:22am UTC](https://discourse.gohugo.io/t/is-it-possible-to-postprocess-the-html-content-generated-from-markdown/5814/2 "2017-03-16T04:22:16Z")

</div>

Your best bet here is likely [shortcodes](https://gohugo.io/extras/shortcodes). They allow you to keep your content nice and tidy while providing a nice intermediary between your markdown and templating layers.

I’m soliciting feedback if you have time to also check out a [revamp of the docs that’s currently underway](https://hugodocs.info/templates/shortcode-templates). Cheers.

---

<div class="post-metadata">

**Author:** ![xenoterracide](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/xenoterracide/32/2832_2.png) [@xenoterracide](https://discourse.gohugo.io/u/xenoterracide)\
**Post date:** [March 16, 2017, 4:40am UTC](https://discourse.gohugo.io/t/is-it-possible-to-postprocess-the-html-content-generated-from-markdown/5814/3 "2017-03-16T04:40:07Z")

</div>

well my understanding thus far is that this, `{{ .Content }}`, shortcode places the markdown comment, and I know there are pipes, but I have no idea how I would get from `.Content` to adding [`blockquote` class to all `blockquote` elements](https://v4-alpha.getbootstrap.com/content/typography/#blockquotes)

---

<div class="post-metadata">

**Author:** ![rdwatters](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rdwatters/32/2848_2.png) [@rdwatters](https://discourse.gohugo.io/u/rdwatters)\
**Post date:** [March 16, 2017, 4:49am UTC](https://discourse.gohugo.io/t/is-it-possible-to-postprocess-the-html-content-generated-from-markdown/5814/4 "2017-03-16T04:49:19Z")

</div>

> [@xenoterracide](#):
>
> well my understanding thus far is that this, {{ .Content }}, shortcode

The `{{.Content}}` is a _variable_ and not a shortcode. This variables is called inside _templates_.

A shortcode is a small snippet you can call within your _content_ and not your templates. You could create a shortcode called `layouts/shortcodes/bq.html` with the following content:

```html
<blockquote class="blockquote">
{{.Inner}}
</blockquote>

```

Then you can call the shortcode in your markdown files with the `%` syntax, which tells Hugo to run the inner content through the Blackfriday markdown parser:

```auto
{{% bq %}}
Without the fear of falling, there is no joy in flight.
{{% /bq %}}

```

At render, this would then output…

```html
<blockquote class="blockquote">
<p>Without the fear of falling, there is no joy in flight.</p>
</blockquote>

```

But for something as simple as just appending that class to a group of block quotes inside your body copy, I don’t see _too_ much harm in doing it on the client if your’e trying to keep `*.md` as commonmark-observant as possible. If it’s just a matter of styling, especially for an element that’s so basic, I would consider targeting it based on specificity in your stylesheets and not even worrying about the class in the first place.

As for next steps, I recommend starting with the [introduction to shortcodes](https://hugodocs.info/content-management/shortcodes/) to see their role in content management. Then, once you get the concept, refer to the template documentation I gave you above. HTH

---

<div class="post-metadata">

**Author:** ![xenoterracide](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/xenoterracide/32/2832_2.png) [@xenoterracide](https://discourse.gohugo.io/u/xenoterracide)\
**Post date:** [March 16, 2017, 4:57am UTC](https://discourse.gohugo.io/t/is-it-possible-to-postprocess-the-html-content-generated-from-markdown/5814/5 "2017-03-16T04:57:10Z")

</div>

right but that would mean tracking down and maintaining the `{{% bq %}}` inside of the markdown, instead of just adding the class to the `<blockquote>` that the markdown generated from `> my quote`.

---

<div class="post-metadata">

**Author:** ![rdwatters](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rdwatters/32/2848_2.png) [@rdwatters](https://discourse.gohugo.io/u/rdwatters)\
**Post date:** [March 16, 2017, 5:32am UTC](https://discourse.gohugo.io/t/is-it-possible-to-postprocess-the-html-content-generated-from-markdown/5814/6 "2017-03-16T05:32:26Z")

</div>

> [@xenoterracide](#):
>
> right but that would mean tracking down and maintaining the {{% bq %}} inside of the markdown, instead of just adding the class to the \<blockquote\> that the markdown generated from \> my quote.

Yes, that was my point about the common mark spec. Please read my full comment since I also offered other options. You might want to check out Hugo’s other supported formats via external helpers since they _may_ offer you more flexibility. HTH.

---

<div class="post-metadata">

**Author:** ![Mikhail](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mikhail/32/1138_2.png) [@Mikhail](https://discourse.gohugo.io/u/Mikhail)\
**Post date:** [March 16, 2017, 9:37am UTC](https://discourse.gohugo.io/t/is-it-possible-to-postprocess-the-html-content-generated-from-markdown/5814/7 "2017-03-16T09:37:24Z")

</div>

Search this forum about [mmark](https://github.com/miekg/mmark/wiki/Syntax)

---

<div class="post-metadata">

**Author:** ![xenoterracide](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/xenoterracide/32/2832_2.png) [@xenoterracide](https://discourse.gohugo.io/u/xenoterracide)\
**Post date:** [March 16, 2017, 4:17pm UTC](https://discourse.gohugo.io/t/is-it-possible-to-postprocess-the-html-content-generated-from-markdown/5814/8 "2017-03-16T16:17:44Z")

</div>

I read it, currently to be common mark compliant the easiest way to solve this problem is actually, just writing this, though I don’t believe in putting html in markdown, it’s completely valid (Trying to get it converted into an extension, or otherwise optional though due to security issues). That seems a lot better than using a shortcode

```auto
<blockquote class="blockquote">
<p>Without the fear of falling, there is no joy in flight.</p>
</blockquote>

```

and yes, to styling obviously this can be resolved with css, issues have been reported to the theme (actually fixed already, but it probably means maintaining the patch in the theme) and bootstrap in regards to the silliness of this…

I was thinking you could postprocess the content with a pipe using xpath, or css selectors, to get the elements and then modify them. That said I haven’t found anything that suggests that there are any css/xpath or dom manipulation API’s accessible in shortcode.

---

<div class="post-metadata">

**Author:** ![rdwatters](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rdwatters/32/2848_2.png) [@rdwatters](https://discourse.gohugo.io/u/rdwatters)\
**Post date:** [March 16, 2017, 5:05pm UTC](https://discourse.gohugo.io/t/is-it-possible-to-postprocess-the-html-content-generated-from-markdown/5814/9 "2017-03-16T17:05:54Z")

</div>

> [@xenoterracide](#):
>
> That seems a lot better than using a shortcode

The `bq` is an example of how a shortcode works and not an example of a recommended implementation. It’s a `foo-bar-baz` kind of thing in response to the following:

> Trying to figure out if there’s a way to take the content being generated by the markdown and add css classes to it for the theme (asside [sic] from javascript).

I am interested in this next comment, however, and would like to help:

> [@xenoterracide](#):
>
> can be resolved with css, issues have been reported to the theme (actually fixed already, but it probably means maintaining the patch in the theme)

If you are leveraging Hugo’s template lookup order, you can make modifications easily while maintaining compatibility with the upstream. I am not sure why you feel you need to maintain the patch, but a good recommendation to any theme author would be to allow for additional stylesheets to come at the bottom of the cascade for “last in wins.” CSS selectors in your own source stylesheet–especially if you’re only worried about `<blockquotes>`–is still your best bet here, although you already mentioned that it’s been fixed in whatever theme it is you are using.

Postprocessing to manage _visual_ styling of a single element is just going to give you an unnecessary headache, FWIW.

Agreed that you should check out mmark. Thanks @Mikhail 😄

---

<div class="post-metadata">

**Author:** ![xenoterracide](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/xenoterracide/32/2832_2.png) [@xenoterracide](https://discourse.gohugo.io/u/xenoterracide)\
**Post date:** [March 16, 2017, 6:56pm UTC](https://discourse.gohugo.io/t/is-it-possible-to-postprocess-the-html-content-generated-from-markdown/5814/10 "2017-03-16T18:56:25Z")

</div>

> I am not sure why you feel you need to maintain the patch

you’re misunderstanding, if `bootstrap` changes its implementation (likely) the author of the theme would probably find it desirable to change his. Also since I’m not submoduling I’d have to reimport.

Oh and you don’t realize it, but I’ve read everything you’ve linked, largely in a skimming speed reading form, but I haven’t found any of it useful for solving this kind of problem.

The theme patch will work for me for now. Have a nice day.

---

<div class="post-metadata">

**Author:** ![rdwatters](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rdwatters/32/2848_2.png) [@rdwatters](https://discourse.gohugo.io/u/rdwatters)\
**Post date:** [March 16, 2017, 7:09pm UTC](https://discourse.gohugo.io/t/is-it-possible-to-postprocess-the-html-content-generated-from-markdown/5814/11 "2017-03-16T19:09:16Z")

</div>

Glad it all worked out 👍
