astro-katex

Astro component to auto-render math in element, based on Katex

Install or Try it now

$ npm install astro-katex katex

Usage

Before using astro-katex

Add a new integration

import katex from 'astro-katex';

export default defineConfig({
  integrations: [ katex() ],
});

Math in element

---
import AstroKatex from 'astro-katex/AstroKatex.astro'
---
<AstroKatex is:raw>
  Look again at \(\textbf{Figure A} \) and \(\textbf{Figure B}\). Notice that in both graphs, as  \(x\)  approaches \(7\), the output values approach \(8\). This means
  \[
    \lim_{x \to 7} f(x) = \lim_{x \to 7} g(x)
  \]
</AstroKatex>

Output:

Look again at $\textbf{Figure A}$ and $\textbf{Figure B}$. Notice that in both graphs, as $x$ approaches $7$, the output values approach $8$. This means $$\lim_{x \to 7} f(x) = \lim_{x \to 7} g(x)$$

Using just an Expression

---
import Expr from 'astro-katex/OnlyExpression.astro'
---

A simple mathematical expression:
<Expr>
    \sqrt{3x-1}+(1+x)^2
</Expr>

Output:

A simple mathematical expression: $\sqrt{3x-1}+(1+x)^2$

Options for Katex

A number of options are now supported. For a comprehensive list please visit: here

License

MIT

Note: Some $\LaTeX$ syntax may not be supported by KaTeX itself.