How to use KaTeX extensions (like mhchem and copy-tex) in Docusaurus?

[dbxxx-ac]

[Josh-Cena]

I don't think there's a trivial way to fix this, because the way KaTeX extensions work is quite weird (it relies on a global katex instance). I have been wrestling with this since my first day of using Docusaurus, and currently I copied the source of rehype-katex (which is surprisingly short), and added the import myself. See https://github.com/Josh-Cena/Josh-Cena.github.io/blob/master/src/remark/rehypeKatex.js I'm sure there are updates needed to support Docusaurus v3, but we'll see later.

[dbxxx-ac]

Thanks a lot for your reply! I will make a try.

[dbxxx-ac]

Lots of thanks! mhchem is ready right now, but there is still some problem with copy-tex. There is the element Document in copy-tex.js and I can't simply require it in my rehype file, for it threw an error. Do you have any idea? Thank you for your help!

require("katex/dist/contrib/copy-tex"); // this throws an error
require("katex/dist/contrib/mhchem"); // this is ok

[Josh-Cena]

@dbxxx-oi copy-tex is entirely client code, so you can try loading it as a client module.

[dbxxx-ac]

UPDATE: ALREADY FIXED

Hi, docusaurus v3.0.0 has been already out. Do you have any precious idea for supporting mhchem again? Thanks!
I tried to make a simple copy of rehype-katex (without any modification), and replace the import rehypeKatex from 'rehype-katex'; in config.js with import rehypeKatex from './src/components/rehype-katex';, but a warning occured:

<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve './src/components/rehype-katex' in 'C:\Users\xbc\Desktop\programming\Projects\whk-wiki'                                                                                                                         
<w> while resolving './src/components/rehype-katex' in C:\Users\xbc\Desktop\programming\Projects\whk-wiki as file                                   
<w>  at resolve esm file ./src/components/rehype-katex                                                                                              
<w>  at file dependencies C:\Users\xbc\Desktop\programming\Projects\whk-wiki\docusaurus.config.js                                                   
<w>  at file C:\Users\xbc\Desktop\programming\Projects\whk-wiki\docusaurus.config.js                                                                
<w>  at resolve commonjs C:\Users\xbc\Desktop\programming\Projects\whk-wiki\docusaurus.config.js
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve './src/components/rehype-katex' in 'C:\Users\xbc\Desktop\programming\Projects\whk-wiki'
<w> while resolving './src/components/rehype-katex' in C:\Users\xbc\Desktop\programming\Projects\whk-wiki as file
<w>  at resolve esm file ./src/components/rehype-katex
<w>  at file dependencies C:\Users\xbc\Desktop\programming\Projects\whk-wiki\docusaurus.config.js
<w>  at file C:\Users\xbc\Desktop\programming\Projects\whk-wiki\docusaurus.config.js
<w>  at resolve commonjs C:\Users\xbc\Desktop\programming\Projects\whk-wiki\docusaurus.config.js

and neither adding require('katex/dist/contrib/mhchem.mjs') nor require('../../katex/dist/contrib/mhchem.js') into /rehype-katex/lib/index.js can work.

[dbxxx-ac]

Here's the way to add the copy-tex support:

copy katex/dist/contrib/mhchem.mjs to /src folder, with some addition:

1. add import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; on the top of the file
2. find the code document.addEventListener('copy', function (event) {, and wrap this function with if (ExecutionEnvironment.canUseDOM) {}.

After that, load it as a client module.

Here's the way to add the mhchem support:

use yarn patch to modify the rehype-katex module(rather than just making a simple copy) to avoid cache warning.

add require('katex/contrib/mhchem') at the top of /lib/index.js

[ttheng3810]

Hi, I'm trying to apply the auto-render extension for my Docusaurus site so that I can use delimiters like \( \) \[ \] for my math equations, but both of the methods here do not work. How should I achieve this?