| 1 | --- |
| 2 | relates: |
| 3 | - Demo: /demo/starter/11 |
| 4 | - KaTeX: https://katex.org/ |
| 5 | tags: [codeblock, syntax] |
| 6 | description: | |
| 7 | Slidev comes with LaTeX support out-of-box, powered by KaTeX. |
| 8 | --- |
| 9 | |
| 10 | # LaTeX |
| 11 | |
| 12 | Slidev comes with LaTeX support out-of-box, powered by [KaTeX](https://katex.org/). |
| 13 | |
| 14 | ## Inline |
| 15 | |
| 16 | Surround your LaTeX with a single `$` on each side for inline rendering. |
| 17 | |
| 18 | ```md |
| 19 | $\sqrt{3x-1}+(1+x)^2$ |
| 20 | ``` |
| 21 | |
| 22 | ## Block |
| 23 | |
| 24 | Use two (`$$`) for block rendering. This mode uses bigger symbols and centers |
| 25 | the result. |
| 26 | |
| 27 | ```latex |
| 28 | $$ |
| 29 | \begin{aligned} |
| 30 | \nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\ |
| 31 | \nabla \cdot \vec{B} &= 0 \\ |
| 32 | \nabla \times \vec{E} &= -\frac{\partial\vec{B}}{\partial t} \\ |
| 33 | \nabla \times \vec{B} &= \mu_0\vec{J} + \mu_0\varepsilon_0\frac{\partial\vec{E}}{\partial t} |
| 34 | \end{aligned} |
| 35 | $$ |
| 36 | ``` |
| 37 | |
| 38 | ## Line Highlighting |
| 39 | |
| 40 | To highlight specific lines, simply add line numbers within bracket `{}`. Line numbers start counting from 1 by default. |
| 41 | |
| 42 | ```latex |
| 43 | $$ {1|3|all} |
| 44 | \begin{aligned} |
| 45 | \nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\ |
| 46 | \nabla \cdot \vec{B} &= 0 \\ |
| 47 | \nabla \times \vec{E} &= -\frac{\partial\vec{B}}{\partial t} \\ |
| 48 | \nabla \times \vec{B} &= \mu_0\vec{J} + \mu_0\varepsilon_0\frac{\partial\vec{E}}{\partial t} |
| 49 | \end{aligned} |
| 50 | $$ |
| 51 | ``` |
| 52 | |
| 53 | The `at` and `finally` options of [code blocks](#line-highlighting) are also available for LaTeX blocks. |
| 54 | |
| 55 | ## Chemical equations |
| 56 | |
| 57 | To enable the rendering of chemical equations, the [mhchem](https://github.com/KaTeX/KaTeX/tree/main/contrib/mhchem) |
| 58 | KaTeX extension needs to be loaded. |
| 59 | |
| 60 | Create `vite.config.ts` with the following content: |
| 61 | |
| 62 | ```ts |
| 63 | import 'katex/contrib/mhchem' |
| 64 | |
| 65 | export default {} |
| 66 | ``` |
| 67 | |
| 68 | Now chemical equations can be rendered properly. |
| 69 | |
| 70 | ```latex |
| 71 | $$ |
| 72 | \displaystyle{\ce{B(OH)3 + H2O <--> B(OH)4^- + H+}} |
| 73 | $$ |
| 74 | ``` |
| 75 | |
| 76 | Learn more: [Syntax](https://mhchem.github.io/MathJax-mhchem) |
| 77 | |
| 78 | --- |
| 79 | |
| 80 | <TheTweet id="1392246507793915904" /> |
| 81 |