docusaurus-plugin-copy-temml-assets plugin

  

This plugin copies Temml assets to the build directory.

Demo: https://tats-u.github.io/docusaurus-plugin-copy-temml-assets (uses Noto Sans Math)

Why Temml instead of KaTeX?

- Can use the other fonts (including local fonts) than Latin Modern.
- Can reduce the download size if you stick to local fonts.
- Can reduce the number of deployment files.
- Supports more LaTeX features.
- Output is simpler (KaTeX outputs invisible MathML tags too).

How to Use

Install the plugin and @daiji256/rehype-mathml (instead of rehype-katex):

``
npm install @tats-u/docusaurus-plugin-copy-temml-assets @daiji256/rehype-mathml
`

This package exports the following plugin and companion types and variables:

| Name | Description |
| --- | --- |
| copyTemmlAssetsPlugin | Docusaurus plugin to copy KaTeX assets |
| CopyTemmlAssetsPluginOptions | Configuration options for the plugin |
| getTemmlStyleSheet | Ditto, but with custom base URL |
| getTemmlCssPath | Ditto, but with custom base URL |

Then add plugins to docusaurus.config.js:

`js
import remarkMath from 'remark-math';
import rehypeMathml from '@daiji256/rehype-mathml';
import { copyTemmlAssetsPlugin, getTemmlStyleSheet } from '@tats-u/docusaurus-plugin-copy-temml-assets';

/**
* @import { CopyTemmlAssetsPluginOptions } from '@tats-u/docusaurus-plugin-copy-temml-assets';
*/

const remarkPlugins = [remarkMath];
// Use @daiji256/rehype-mathml instead of rehype-katex
const rehypePlugins = [rehypeMathMl];

const baseUrl = '/';

// You must use satisfies in TypeScript
const temmlPluginOptions = /* @satisfies {CopyTemmlAssetsPluginOptions} / ({
baseUrl,
fontPath: 'path/to/font.woff2',
});

const config = {
// ...
baseUrl,
stylesheets: [
// ...
getTemmlStyleSheet(temmlPluginOptions),
],
plugins: [
// ...
[copyTemmlAssetsPlugin, temmlPluginOptions],
],
// ...
presets: [
[
'classic',
/* @satisfies {import('docusaurus/preset-classic').PresetConfig} / (
{
docs: {
// If you use docs
docs: {
// ...
remarkPlugins,
rehypePlugins,
},
// If you use blog
blog: {
// ...
remarkPlugins,
rehypePlugins,
},
// If you customize pages
pages: {
// ...
remarkPlugins,
rehypePlugins,
},
},
},
),
],
],
}
`

> [!NOTE]
> For TypeScript, use the following instead:
>
> `ts
> import {
> type CopyTemmlAssetsPluginOptions,
> copyTemmlAssetsPlugin,
> getTemmlStyleSheet,
> } from '@tats-u/docusaurus-plugin-copy-temml-assets';
> `

$3

This plugin is compatible with Docusaurus Faster.

$3

The default deployed path is /assets/temml-{Temml version}/Temml-{Font type}.css. If you want to change the path, pass assetsRoot to the plugin:

`js
const temmlPluginOptions = /* @satisfies {CopyTemmlAssetsPluginOptions} / ({
baseUrl,
fontPath: 'path/to/font.woff2',
assetsRoot: 'assets/temml',
});
`

> [!NOTE]
> For TypeScript, use { ... } satisfies CopyTemmlAssetsPluginOptions instead.

fontPreset is automatically detected from the basename of fontPath if not specified. If the basename is irregular, you can specify it manually:

`js
const temmlPluginOptions = /* @satisfies {CopyTemmlAssetsPluginOptions} / ({
baseUrl,
fontPath: 'path/to/stix2.woff2', // Standard name: STIXTwoMath.woff2
fontPreset: 'STIX2',
});
``

Acknowledgement

This plugin is derived from docusaurus-copy-plugin. Thanks to Ramón Lamana (@rlamana) for the original work.