MathJax with code fences 2

I use the MathJax implementation which is described here.

Something like


renders, but something like


doesn’t render. Can somebody reproduce this?

The solution mentioned here, doesn’t work for me, because I use math in nested shortcodes:

{{% example %}}

Our first example

{{< math >}}
{{< /math >}}

{{% /example %}}

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

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


{{ .Inner }}


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

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

I would put the braces in there

\( {{ .Inner }} \)

and call it


It still gets escaped

{{% example %}}

Our first example

{{< math >}}
{{< /math >}}

{{% /example %}}



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

1 Like

What works in nested shortcodes

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


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

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

What doesn’t work nested shortcodes

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


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

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


You have to activate the dollar symbol in the MathJax configuration

MathJax 2.7

<script type="text/javascript" async

  tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    displayMath: [['$$','$$']]


MathJax 3

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

<script src=""></script>
<script id="MathJax-script" async src=""></script>


I just found out that




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

Maybe somebody can explains why this works?

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

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

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!
1 Like

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

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

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