1+1=10

记记笔记，放松一下...

Introduction to Python Markdown Extension md_katex

This page illustrates how mathematical formulas written in Python-Markdown can be rendered using KaTeX with the help of the md_katex extension.

Demo

md_katex is a KaTeX plugin initially developed for use in this blog with Pelican. It focuses on rendering mathematical formulas directly in the browser using the KaTeX JavaScript library, rather than performing offline conversions.

Inline Formula

The md_katex extension supports two inline formula styles:

  • GitLab Style: Delimited by $` and `$
  • Brackets Style: Delimited by \( and \)

Markdown Example:

1
2
3
GitLab-style inline formula `` $`E=mc^2`$ `` : $`E=mc^2`$

Brackets-style inline formula `` \(E=mc^2\) ``: \(E=mc^2\)

Rendered Output:

GitLab-style inline formula $`E=mc^2`$ : E=mc^2

Brackets-style inline formula \(E=mc^2\): E=mc^2

Generated HTML Source:

1
2
<p>GitLab-style inline formula <code>$`E=mc^2`$</code> : <span class="math inline">E=mc^2</span></p>
<p>Brackets-style inline formula <code>\(E=mc^2\)</code>: <span class="math inline">E=mc^2</span></p>

Block Formula

The md_katex extension also supports rendering block-level formulas in three styles:

  • GitLab Style: Delimited by ~~~math and ~~~
  • Brackets Style: Delimited by \[ and \]
  • GitHub Style: Delimited by $$ and $$

GitLab-style Block Formula

Markdown Example:

1
2
3
```math
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
```

Rendered Output:

\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}

Generated HTML Source:

1
2
3
<div class="math display">
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
</div>

Brackets-style Block Formula

Markdown Example:

1
2
3
\[
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
\]

Rendered Output:

\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}

GitHub-style Block Formula

Markdown Example:

1
2
3
$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$

Rendered Output:

\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}

Installation

First, ensure that you have the python-markdown library installed. Then, you can install this plugin using the following command:

1
pip install md_katex

The generated HTML will include KaTeX formulas, and you will need to load KaTeX JavaScript on the frontend to complete the rendering.

To ensure proper rendering, include the KaTeX script via a <script> tag in your HTML page. For example, using a CDN:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js" integrity="sha384-7zkQWkzuo3B5mTepMUcHkMB5jZaolc2xDwL6VFqjFALcbeS9Ggm/Yr2r3Dy4lfFg" crossorigin="anonymous"></script>

    <script>document.addEventListener("DOMContentLoaded", function () {
 var mathElements = document.getElementsByClassName("math");
 var macros = [];
 for (var i = 0; i < mathElements.length; i++) {
  var texText = mathElements[i].firstChild;
  if (mathElements[i].tagName == "SPAN" || mathElements[i].tagName === "DIV") {
   katex.render(texText.data, mathElements[i], {
    displayMode: mathElements[i].classList.contains('display'),
    throwOnError: false,
    macros: macros,
    fleqn: false
   });
}}});
    </script>

References

  • https://github.com/dbzhang800/md_katex
  • https://katex.org/docs
  • https://python-markdown.github.io/