VPS者

- Introduction: http://vpser.xyz/docs/getting-started/introduction/
- Create a Site: http://vpser.xyz/docs/getting-started/create-a-site/
- Configuration: http://vpser.xyz/docs/getting-started/configuration/
- Organisation: http://vpser.xyz/docs/content/organisation/
- Pages: http://vpser.xyz/docs/content/pages/
- Menus: http://vpser.xyz/docs/content/menus/
- Blog: http://vpser.xyz/docs/content/blog/
- Multi-Language: http://vpser.xyz/docs/content/multilingual/
- Shortcodes: http://vpser.xyz/docs/content/shortcodes/
- Asciinema: http://vpser.xyz/docs/content/shortcodes/asciinema/
- Buttons: http://vpser.xyz/docs/content/shortcodes/buttons/
- Columns: http://vpser.xyz/docs/content/shortcodes/columns/
- Details: http://vpser.xyz/docs/content/shortcodes/details/
- Images: http://vpser.xyz/docs/content/shortcodes/experimental/images/
- Hints: http://vpser.xyz/docs/content/shortcodes/hints/
- Mermaid: http://vpser.xyz/docs/content/shortcodes/mermaid/
- Steps: http://vpser.xyz/docs/content/shortcodes/steps/
- Tabs: http://vpser.xyz/docs/content/shortcodes/tabs/
- KaTeX: http://vpser.xyz/docs/content/shortcodes/katex/
- Styles: http://vpser.xyz/docs/customization/styles/
- Inject Partials: http://vpser.xyz/docs/customization/inject-partials/


# KaTeX

Render math typesetting with [KaTeX](https://katex.org/).

## Activation

KaTeX styles are included on the page by the first use of the shortcode or a `katex` code block. In order to use delimiters [passthrough](#passthrough) needs to be configured.

## Block Rendering

Three equivalent ways to render display math:

{{% columns %}}

- #### Shortcode
  ```tpl
  {{</* katex displayMode=true >}}
  f(x) = \int_{-\infty}^\infty
  \hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
  {{< /katex */>}}
  ```

- #### Code block
  ````tpl
  ```katex
  f(x) = \int_{-\infty}^\infty
  \hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
  ```
  ````

- #### Dollar delimiters
  ```tpl
  $$
  f(x) = \int_{-\infty}^\infty
  \hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
  $$
  ```

{{% /columns %}}

Result:
```katex
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
```


## Inline Rendering

| Syntax | Output |
| -- | -- |
| `{{</* katex >}}\pi(x){{< /katex */>}}` | {{< katex >}}\pi(x){{< /katex >}} |
| `\\( \pi(x) \\)` | {{< katex >}}\pi(x){{< /katex >}} |

## Parameters

Shortcode and block parameters are the same as original from `transform.ToMath`. See Hugo [documentation](https://gohugo.io/functions/transform/tomath/#options)

## Passthrough 

Hugo offers a hook to render math as passthrough, without codeblocks or shortcodes. See [configuration](https://gohugo.io/functions/transform/tomath/#example) in Hugo documentation.

```yaml {filename=hugo.yaml}
markup:
  goldmark:
    extensions:
      passthrough:
        enable: true
        delimiters:
          block:
          - ['\[', '\]']
          - ['$$', '$$']
          inline:
          - ['\(', '\)']
```

```go {filename="layouts/_markup/render-passthrough.html"}
{{/*- $opts := dict "displayMode" (eq .Type "block") -*/}}
{{/*- (transform.ToMath .Inner $opts) -*/}}
```