https://hugomods.com/docs/content/katex/

[giscus[bot]]

https://hugomods.com/docs/content/katex/

KaTeX is the fastest math typesetting library for the web, this module integrates KaTeX with Hugo.

https://hugomods.com/docs/content/katex/

[FuadEfendi]

Right now, I just add {{< katex />}} at the end of each page, and it activates all formulas on a page, absolutely everything. I am still trying to find better solution with explicit JavaScript in some hooks; but for now, it works. Here is example:

---
title: Example Katex
---

### Etymology, Background, and History
Co-developed by economists Fischer Black and Myron Scholes, with further contributions by Robert Merton, the Black–Scholes model revolutionized financial economics by providing a systematic method for options pricing. The model earned Scholes and Merton the 1997 Nobel Prize in Economics; Black would have been co-recipient had he not passed away two years earlier. The model's main equation is:

\\[ \frac{\partial V}{\partial t} + rS \frac{\partial V}{\partial S} + \frac{1}{2}\sigma^2S^2 \frac{\partial^2 V}{\partial S^2} = rV \\]

where:
- \\(V\\) = Option Price
- \\(t\\) = Time
- \\(S\\) = Stock Price
- \\(r\\) = Risk-Free Interest Rate
- \\(\sigma\\) = Volatility of the stock

{{< katex />}}

Last line activates it all. Formulas wrapped with $$ works too.

[razonyang]

The reason is simple, KaTeX shortcode and code block is just use to indicate which pages contains KaTeX formula.

1. People won't like to include KaTeX CSS and JS in other pages which not using KaTeX formula.
2. We can scan the content and determind whether if there is KaTeX formula, but it's expensive and unreliable to do some regexp matching or strings matching, this approach won't happen in this theme.

I'd recommend wrapping your KaTeX formula via shortcode or code block as far as possible to avoid encountering some strange issues.

[FuadEfendi]

Thanks, I already encountered 1st strange issue: three backticks in markdown, ```, shown as $$$$ on the page.

This is generated output:

<div class="katex-output">
   $$$$
</div>

I am working with files already having Katex in standard notations, so that I just run script to add {{< katex />}} at the end of Markdown, less work...

[razonyang]

I see, you can implement it with hook (when using HugoPress), such as head-end.

// hook template
{{ with index .Page.Params "katex" }}
  {{ .Page.Store.Set "hasKaTeX" true }}
{{ end }}

hasKaTeX represents whether if there is KaTeX formula.

Then you can tell the module to load KaTeX CSS and JS via the custom page's parameter.

---
params:
  katex: true
---

You can also override the hook to scan content and detech if there is KaTeX stuff, but please keep in mind that those two approaches are out of scope of this module, you're doing this on your own risk.

[FuadEfendi]

Hi Razon,

I have KaTeX formula shown correctly at katex.org online editor, but not with Hugo:

\\[
\text{SMA}_n  =  \frac {1} {n} \sum_{i=1}^{n} \text{Close}_i
\\]

Hugo renders output with <em> because formula has two _ characters:

<p>\[
\text{SMA}<em>n  =  \frac {1} {n} \sum</em>{i=1}^{n} \text{Close}_i
\]</p>

Something like "safe html" maybe?

Could you help please?

[FuadEfendi]

ops I think my question already has an answer: I need to use {{< katex >}} {{< /katex >}} for "safe html" ;) it works! Now I understand why we need this tag.