MathJax with code fences 2

support
1

I use the MathJax implementation which is described here.

Something like

`\(\Rightarrow\)`

renders, but something like

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

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 >}}
\(\Rightarrow\)
{{< /math >}}

{{% /example %}}

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

2

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

3

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.

4

I would put the braces in there

\( {{ .Inner }} \)

and call it

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

5

It still gets escaped

{{% example %}}

Our first example

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

{{% /example %}}

Output

(\Rightarrow)

6

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

1 Like
7

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?

8

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

9

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
10

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

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

11

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