I am not a react dev so maybe I'm missing something. Any help is much appreciated. I have a Docusaurus 2.2 site in which I've implemented a Prism grammar for a DSL we use. In Docusaurus 2.2, everything works as expected. I am attempting to update Docusaurus to v3 but now the DSL syntax highlighting is not working. If I inspect my code blocks, none of the css classes that should be assigned to lines are there. Everything is token-line
or token plain
.
I followed the Docusaurus guide here and added the require statement to the new prism-include-languages.js file. My grammar hasn't changed from what was working previously.
import siteConfig from '@generated/docusaurus.config';
export default function prismIncludeLanguages(PrismObject) {
const {
themeConfig: {prism},
} = siteConfig;
const {additionalLanguages} = prism;
// Prism components work on the Prism instance on the window, while prism-
// react-renderer uses its own Prism instance. We temporarily mount the
// instance onto window, import components to enhance it, then remove it to
// avoid polluting global namespace.
// You can mutate PrismObject: registering plugins, deleting languages... As
// long as you don't re-assign it
globalThis.Prism = PrismObject;
additionalLanguages.forEach((lang) => {
if (lang === 'php') {
// eslint-disable-next-line global-require
require('prismjs/components/prism-markup-templating.js');
}
// eslint-disable-next-line global-require, import/no-dynamic-require
require(`prismjs/components/prism-${lang}`);
});
require('@site/src/components/prism-myLang');
delete globalThis.Prism;
};
My DSL grammar file looks like this
import {Prism} from 'prism-react-renderer';
console.log('register myLang grammar');
Prism.languages.myLang = {
//grammar rules/patterns
};
console.log("finished loading grammar");
From Chrome DevTools, I can see both of my log statements get printed and if I check the Prism object, it does contain my grammar.