Hugo KaTeX shortcode
KaTeX is a powerful math/LaTeX typesetting. This shortcode provides an easy way to integrate KaTeX in your content.
This article was written for Hugo 0.74.
The (heavy) KaTeX library is used to draw math typesetting. At the time of writing
0.11.1.
The text is rendered on the fly which may cause small page jumps.
Usage
There are no options to speak of, place the KaTeX syntax in the shortcode an off you go.
| option | effect | optional | default |
|---|---|---|---|
| display | if defined it will be shown as display: block instead of display: inline-block | yes | |
| class | adds additional CSS class(es) | yes |
Example
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
{{< katex display >}}
x = \begin{cases}
a &\text{if } b \\
c &\text{if } d
\end{cases}
{{< /katex >}}
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\[ x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases} \] Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Here is some inline example:
\(\pi(x)\) and some txt here. Code {{< katex >}}\pi(x){{< /katex >}}
Code
Very similar to the mermaid shortcode. The Javascript and CSS are only loaded on the page when the KaTeX shortcode is used at least once to save resources. Also the same CDN implementation is used as in the mermaid shortcode.
| |
- Permalink: //oostens.me/posts/hugo-katex-shortcode/
- License: The text and content is licensed under CC BY-NC-SA 4.0. All source code I wrote on this page is licensed under The Unlicense; do as you please, I'm not liable nor provide warranty.