MDExKatex

MDEx plugin for KaTeX.

Usage

Mix.install([
  {:mdex_katex, "~> 0.1"}
])

markdown = """
# Einstein's Mass-Energy Equivalence

In text, Euler's identity is $e^{i\\pi} + 1 = 0$.

```math
E = mc^2
```

The quadratic formula:

```math
x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}
```
"""

mdex =
  MDEx.new(markdown: markdown, extension: [math_dollars: true])
  |> MDExKatex.attach()

MDEx.to_html!(mdex) |> IO.puts()
#=>
# <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16/dist/katex.min.css">
# <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16/dist/katex.min.js"></script>
# <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16/dist/contrib/auto-render.min.js" onload="renderMathInElement(document.body, {delimiters: [{left: &#39;$$&#39;, right: &#39;$$&#39;, display: true}]});"></script>
# <script>
#   document.addEventListener("DOMContentLoaded", () => {
#     document.querySelectorAll(&#39;.katex-block, .katex-inline&#39;).forEach(el => {
#       const latex = el.dataset.latex;
#       const mathStyle = el.dataset.mathStyle;
#       if (latex && mathStyle) {
#         const displayMode = mathStyle == "display" ? true : false
#         katex.render(latex, el, {
#           displayMode: displayMode,
#           throwOnError: false,
#           trust: true,
#         });
#       }
#     });
#   });
# </script>
# <h1>Einstein&#39;s Mass-Energy Equivalence</h1>
# <p>In text, Euler&#39;s identity is <span id="katex-inline-1" class="katex-inline" phx-update="ignore" data-math-style="inline" data-latex="e^{i\pi} + 1 = 0"></span>.</p>
# <div id="katex-1" class="katex-block" phx-update="ignore" data-math-style="display" data-latex="E = mc^2"></div>
# <p>The quadratic formula:</p>
# <div id="katex-2" class="katex-block" phx-update="ignore" data-math-style="display" data-latex="x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}"></div>

To customize KaTeX without replacing the whole init script:

MDEx.new(markdown: markdown)
|> MDExKatex.attach(katex_options: [trust: false, output: "mathml"])
|> MDEx.to_html!()

See KaTeX Options for the supported render options.

For KaTeX options that require JavaScript functions, pass a raw object expression string:

MDEx.new(markdown: markdown)
|> MDExKatex.attach(
  katex_options: "{strict: (errorCode) => 'ignore', trust: (context) => false}"
)
|> MDEx.to_html!()

Note:math and katex code fences render as display math. Dollar math is also supported when MDEx enables extension: [math_dollars: true]; inline formulas use the .katex-inline class and display formulas use .katex-block.

Quick reference:

Inline math: $e^{i\pi} + 1 = 0$

```math
E = mc^2
```

See attach/2 for integration examples (static HTML, Phoenix LiveView, custom styling) and configuration options.