# Elementcodes: post-process markdown generated elements via shortcode-like templates

**URL:** <https://discourse.gohugo.io/t/elementcodes-post-process-markdown-generated-elements-via-shortcode-like-templates/6108>\
**Category:** feature\
**Tags:** typesetting\
**Created:** [April 10, 2017, 11:43pm UTC](https://discourse.gohugo.io/t/elementcodes-post-process-markdown-generated-elements-via-shortcode-like-templates/6108 "2017-04-10T23:43:31Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jpap](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jpap/32/2969_2.png) [@jpap](https://discourse.gohugo.io/u/jpap)\
**Post date:** [April 10, 2017, 11:43pm UTC](https://discourse.gohugo.io/t/elementcodes-post-process-markdown-generated-elements-via-shortcode-like-templates/6108/1 "2017-04-10T23:43:31Z")

</div>

I currently use JavaScript to add a CSS class to paragraphs starting with a quote character in order to lay it out as a “hanging paragraph”.

It would be better if I could do that at site build time to avoid a “jump” at page-load and as the JavaScript kicks in. What is lacking, however, is a way to post-process the markdown generated HTML in Hugo.

One method would be to have a set of special (optional) shortcodes, each that map directly to the HTML element being emitted by the Markdown-to-HTML generator. These might be called _elementcodes_ to make them distinct from shortcodes. In each elementcode template:

- the `.Inner` variable would be the `innerHTML` of the current rendered element
- the template is responsible for writing out the open/close tag; allowing the template to change the element to something else completely, nest the element in another, or add attributes (.e.g CSS class)

These elementcodes might live in `layouts/elementcodes`, adjacent to where shortcodes live.

Thoughts?

---

<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:** [April 11, 2017, 12:13am UTC](https://discourse.gohugo.io/t/elementcodes-post-process-markdown-generated-elements-via-shortcode-like-templates/6108/2 "2017-04-11T00:13:21Z")

</div>

I think I’m missing something. How are you not able to do this already by creating your own shortcodes?

---

<div class="post-metadata">

**Author:** ![jpap](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jpap/32/2969_2.png) [@jpap](https://discourse.gohugo.io/u/jpap)\
**Post date:** [April 11, 2017, 12:20am UTC](https://discourse.gohugo.io/t/elementcodes-post-process-markdown-generated-elements-via-shortcode-like-templates/6108/3 "2017-04-11T00:20:34Z")

</div>

I want to apply it to every element generated by markdown, without having to place shortcodes everywhere. Think of _elementcodes_ as a way to extend the intrinsic markup that markdown can output, consistently across all generated elements, without having to pollute the markdown source.

For example, the following markdown,

```auto
This is a paragraph.

"This is a hanging paragraph."

```

generates the following HTML:

```auto
<p>This is a paragraph.</p>

<p>"This is a hanging paragraph."</p>

```

I’d like to post-process all generated `<p>` elements without changing the above markdown source so that the output becomes:

```auto
<p>This is a paragraph.</p>

<p class="hanging">"This is a hanging paragraph."</p>

```

The same markdown with shortcodes,

```auto
This is a paragraph.

{{< hanging-par >}}
"This is a hanging paragraph."
{{< /hanging-par >}}

```

is going to pollute the source quite a bit the more it is used.

---

<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:** [April 11, 2017, 12:38am UTC](https://discourse.gohugo.io/t/elementcodes-post-process-markdown-generated-elements-via-shortcode-like-templates/6108/4 "2017-04-11T00:38:35Z")

</div>

But that’s not about replacing every instance of an element as much as it’s about replacing every instance of an element by checking for a specific character; that is, the quotes. I guess I’m wondering about more than this very specific use case…

---

<div class="post-metadata">

**Author:** ![jpap](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jpap/32/2969_2.png) [@jpap](https://discourse.gohugo.io/u/jpap)\
**Post date:** [April 11, 2017, 12:46am UTC](https://discourse.gohugo.io/t/elementcodes-post-process-markdown-generated-elements-via-shortcode-like-templates/6108/5 "2017-04-11T00:46:30Z")

</div>

The proposed _elementcodes_, where defined, would replace every instance of the element.

In this case, I would write the elementcode (`elementcodes/p.html`) to conditionally add the CSS class when the `.Inner` text starts with a quote, and otherwise produce HTML that matches the intrinsic element.

The elementcode template above might look something like:

```auto
{{ $firstchar := substr .Inner 0 1 }}
{{ if $firstchar == "\"" }}
<p class="hanging">{{ .Inner }}</p>
{{ else }}
<p>{{ .Inner }}</p>
{{ end }} 

```

---

<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:** [April 11, 2017, 6:55am UTC](https://discourse.gohugo.io/t/elementcodes-post-process-markdown-generated-elements-via-shortcode-like-templates/6108/6 "2017-04-11T06:55:57Z")

</div>

Have you taken a look at MMark?

[https://hugodocs.info/content-management/formats/#mmark](https://hugodocs.info/content-management/formats/#mmark)

---

<div class="post-metadata">

**Author:** ![jpap](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jpap/32/2969_2.png) [@jpap](https://discourse.gohugo.io/u/jpap)\
**Post date:** [April 11, 2017, 7:43am UTC](https://discourse.gohugo.io/t/elementcodes-post-process-markdown-generated-elements-via-shortcode-like-templates/6108/7 "2017-04-11T07:43:47Z")

</div>

Mmark is fantastic! Nevertheless, unless I’ve missed something, it isn’t extensible in the manner desired.

The _elementcodes_ described here could apply to Mmark, or any markdown processor, as it is essentially a post-processing step.

The only other workable solution, aside from JavaScript at page-load, is to post-process the Hugo-generated HTML before uploading to the web-server. The only (big!) downside is that it is not visible when running Hugo’s server with live-reload.

---

<div class="post-metadata">

**Author:** ![jpap](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jpap/32/2969_2.png) [@jpap](https://discourse.gohugo.io/u/jpap)\
**Post date:** [April 13, 2017, 7:40pm UTC](https://discourse.gohugo.io/t/elementcodes-post-process-markdown-generated-elements-via-shortcode-like-templates/6108/8 "2017-04-13T19:40:10Z")

</div>

I just started using MathJax and these _elementcodes_ could help here too.

In the [Hugo MathJax documentation](https://gohugo.io/tutorials/mathjax/), it is recommended to enclose inline math with backticks so Markdown acts as pass-through on the LaTeX markup.

The official recommendation then uses page-load JavaScript that adds a `has-jax` CSS class to generated HTML elements that contain the LaTeX content above. With the CSS class, the math content of the page can be targeted by to undo the `<code>` default formatting and add further styling.

This could be better done at site generation time instead with a `elementcodes/code.html` template that checks for the `$` MathJax delimiters and statically inserts the CSS class when required, thus avoiding a page-load content jump.

The above is focused on in-line math; for display-style math, a shortcode can be created that creates a `div` with the required CSS class. However with _elementcodes_, we could more elegantly unify math markup by using a fenced code block, where the _elementcode_ template checks for the `$$` math markup delimiter.

---

<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:** [April 14, 2017, 2:14am UTC](https://discourse.gohugo.io/t/elementcodes-post-process-markdown-generated-elements-via-shortcode-like-templates/6108/9 "2017-04-14T02:14:46Z")

</div>

In the new docs concept, just as an FYI, we mention that MMark works well with MathJax and Katex:

[https://hugodocs.info/content-management/formats/#mathjax-with-hugo](https://hugodocs.info/content-management/formats/#mathjax-with-hugo)