# MathJax with code fences 2

**URL:** <https://discourse.gohugo.io/t/mathjax-with-code-fences-2/27644>\
**Category:** support\
**Tags:** typesetting\
**Created:** [August 17, 2020, 5:20pm UTC](https://discourse.gohugo.io/t/mathjax-with-code-fences-2/27644 "2020-08-17T17:20:17Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Troy](https://avatars.discourse-cdn.com/v4/letter/t/85f322/32.png) [@Troy](https://discourse.gohugo.io/u/Troy)\
**Post date:** [August 17, 2020, 5:20pm UTC](https://discourse.gohugo.io/t/mathjax-with-code-fences-2/27644/1 "2020-08-17T17:20:17Z")

</div>

I use the MathJax implementation which is described [here](https://geoffruddock.com/math-typesetting-in-hugo/).

Something like

```
`\(\Rightarrow\)`

```

renders, but something like

````
```
\(\Rightarrow\)
```

````

doesn’t render. Can somebody reproduce this?

The solution mentioned [here](https://discourse.gohugo.io/t/mathjax-with-code-fences/18447/3), doesn’t work for me, because I use math in nested shortcodes:

```
{{% example %}}

Our first example

{{< math >}}
\(\Rightarrow\)
{{< /math >}}

{{% /example %}}

```

Outside the `{{% example %}}` environment the `{{< math >}}` part would render perfectly.

---

<div class="post-metadata">

**Author:** ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)\
**Post date:** [August 17, 2020, 5:47pm UTC](https://discourse.gohugo.io/t/mathjax-with-code-fences-2/27644/2 "2020-08-17T17:47:51Z")

</div>

You should give us more information to help.  
What is in your shortcode?

I use a math shortcode with this inside

`${{safeHTML .Inner}}$`  
the call looks like

`{{< math >}}\Rightarrow{{< /math >}}`

This is a short content, copy it in the other shortcode - as a workaround

---

<div class="post-metadata">

**Author:** ![Troy](https://avatars.discourse-cdn.com/v4/letter/t/85f322/32.png) [@Troy](https://discourse.gohugo.io/u/Troy)\
**Post date:** [August 17, 2020, 5:51pm UTC](https://discourse.gohugo.io/t/mathjax-with-code-fences-2/27644/3 "2020-08-17T17:51:02Z")

</div>

shortcodes/math.html

`{{ .Inner }`}

shortcodes/example.html

```
<div class="some classes">
  <div class="some classes">
    Example
  </div>
  {{ .Inner }}
</div>

```

I tried to add `safeHTML` to both of the `{{ .Inner }}` in the shortcodes, but it doesn’t work.

---

<div class="post-metadata">

**Author:** ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)\
**Post date:** [August 17, 2020, 6:00pm UTC](https://discourse.gohugo.io/t/mathjax-with-code-fences-2/27644/4 "2020-08-17T18:00:14Z")

</div>

I would put the braces in there

`\( {{ .Inner }} \)`

and call it

`{{<example>}}\rightarrow{{</example>}}`

---

<div class="post-metadata">

**Author:** ![Troy](https://avatars.discourse-cdn.com/v4/letter/t/85f322/32.png) [@Troy](https://discourse.gohugo.io/u/Troy)\
**Post date:** [August 17, 2020, 6:06pm UTC](https://discourse.gohugo.io/t/mathjax-with-code-fences-2/27644/5 "2020-08-17T18:06:48Z")

</div>

It still gets escaped

```auto
{{% example %}}

Our first example

{{< math >}}
\Rightarrow
{{< /math >}}

{{% /example %}}

```

Output

`(\Rightarrow)`

---

<div class="post-metadata">

**Author:** ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)\
**Post date:** [August 17, 2020, 6:12pm UTC](https://discourse.gohugo.io/t/mathjax-with-code-fences-2/27644/6 "2020-08-17T18:12:49Z")

</div>

can you switch from `\( \)` to other symbols?  
**$** works for me. Must be set in the script call.

---

<div class="post-metadata">

**Author:** ![Troy](https://avatars.discourse-cdn.com/v4/letter/t/85f322/32.png) [@Troy](https://discourse.gohugo.io/u/Troy)\
**Post date:** [August 17, 2020, 6:31pm UTC](https://discourse.gohugo.io/t/mathjax-with-code-fences-2/27644/7 "2020-08-17T18:31:15Z")

</div>

**What works in nested shortcodes**

`{{< math >}}$\Rightarrow${{< /math >}`

and

`{{< math >}}\Rightarrow{{< /math >}`

(with dollars in shortcodes like `${{ .Inner }}$`)

**What doesn’t work nested shortcodes**

`{{< math >}}\(\Rightarrow\){{< /math >}`

and

`{{< math >}}\Rightarrow{{< /math >}`

(with parenthesis in shortcodes like `\({{ .Inner }}\)`)

**BUT**

You have to activate the dollar symbol in the MathJax configuration

MathJax 2.7

```
<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">

  MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    displayMath: [['$$','$$']]
  }
  });

</script>

```

MathJax 3

```
MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      displayMath: [['$$','$$'], ['\\[', '\\]']]
    }
  };

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>

```

**EDIT**

I just found out that

`$\Rightarrow$`

or

`$$\Rightarrow$$`

renders perfectly (in- and outside of shortcodes) _without_ the `{{< math >}}`-environment. I didn’t expect that.

Maybe somebody can explains why this works?

---

<div class="post-metadata">

**Author:** ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)\
**Post date:** [August 18, 2020, 6:16am UTC](https://discourse.gohugo.io/t/mathjax-with-code-fences-2/27644/8 "2020-08-18T06:16:09Z")

</div>

the back-slash is an escape character to remove syntax functions of other characters.  
this can play a role here.

---

<div class="post-metadata">

**Author:** ![gleicher](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/gleicher/32/11543_2.png) [@gleicher](https://discourse.gohugo.io/u/gleicher)\
**Post date:** [August 19, 2020, 1:14pm UTC](https://discourse.gohugo.io/t/mathjax-with-code-fences-2/27644/9 "2020-08-19T13:14:50Z")

</div>

Here is a great trick that I have used really effectively in one of my themes:

> **[The Best Way to Support LaTeX Math in Markdown with MathJax - Yihui Xie | 谢益辉](https://yihui.org/en/2018/07/latex-math-markdown/)**
>
> Recle Etino Vibal discovered a MathJax trick I used early last year in the hugo-lithium theme to render LaTeX math in Markdown. However, it was not an elegant trick in my eyes, and I came up with a …

  
Without this trick, remembering to escape the backslashes is a pain, and other special characters get interpreted. With this trick, easy!  
I did not invent this trick - but am really greatfull to the author since it has really saved me a lot!

---

<div class="post-metadata">

**Author:** ![Troy](https://avatars.discourse-cdn.com/v4/letter/t/85f322/32.png) [@Troy](https://discourse.gohugo.io/u/Troy)\
**Post date:** [August 19, 2020, 6:35pm UTC](https://discourse.gohugo.io/t/mathjax-with-code-fences-2/27644/10 "2020-08-19T18:35:30Z")

</div>

In the comments of the post you shared, there is another solution mentioned which also looks very nice:

[https://www.stderr.nl/Blog/Blog/MathJaxInMarkdown.html](https://www.stderr.nl/Blog/Blog/MathJaxInMarkdown.html)

I will try both and figure out what works best for me.

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [August 21, 2020, 6:35pm UTC](https://discourse.gohugo.io/t/mathjax-with-code-fences-2/27644/11 "2020-08-21T18:35:30Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.