katex formula cannot be rendered properly
Hello, thank you very much for open-sourcing such a useful tool. I integrated this tool into my own website (using Vue) and added some personalized features. But I found that katex formulas often cannot be rendered.
First, I did not use extraJs and extraCSS. I tried to use transformer.getUsedAssets({'katex': true}); directly to load katex related resources. But it seems to be useless.
Then, I tried:
const { scripts, styles } = transformer.getUsedAssets({'katex': true});
scripts.push({data: {async: true, defer: false, src: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/mhchem.min.js'}, type: 'script'})
await loadJS(scripts, {
getMarkmap: () => markmap,
});
Actively load js files. But it seems to be useless. Finally, I can only use the following method:
this.$nextTick(() => {
const { root } = transformer.transform(this.markdownContent)
await this.markmapInstance.setData(root)
this.markmapInstance.fit()
//Store data in localstorage
const dataString = this.markdownContent;
localStorage.setItem('qmind', dataString);
});
This method is useful, but obviously, the page will "shake" once, and it seems that the timing of the place where the katex syntax exists is not uniform, but at least it can be used.
Nevertheless, if the initial rendered markdown syntax does not contain katex text, it seems that the entire code will not load katex js or css.
For example, here, the code clearly contains katex formulas, and the console also loads katex-related js and css resources, but it was not successfully rendered in the end. I tried for a long time, but I still don't know what went wrong.
Can you try transformer.getAssets() instead of transformer.getUsedAssets({'katex': true})?
If it still does not work, please provide a minimal reproduction (maybe starting from here).
I cannot really tell what the issue is from the snippets.