How do I load languages into PrismJS using webpack?

Question

I am using PrismJS to add syntax highlighting to some HTML that I load into a react document. (The HTML is actually the output from a markdown converter, but it could come from anywhere.) The HTML is loaded asynchronously, sanitized, and set into a div:

export const MyComponent = (props: IProps) => {
  const {content} = props;
  const sanitized = marked.parse(markdown, {
    sanitizer: sanitize,
  });

  return <div dangerouslySetInnerHTML={{__html: sanitized}} />;
};

I've added Prism and it works for default languages like XML or javascript.

export const MyComponent = (props: IProps) => {
  const {content} = props;
  const sanitized = marked.parse(markdown, {
    sanitizer: sanitize,
  });

  useEffect(() => {
    Prism.highlightAll();
  }, [content]);

  return <div dangerouslySetInnerHTML={{__html: sanitized}} />;
};

However, some of the generated HTML contains Kotlin and Gradle code. I used babel-plugin-prismjs to add these languages:

plugins: [
  [
    "prismjs", {
      "languages": ["markup", "java", "kotlin",  "gradle"]
    }
  ]
]

However, as soon as I try to render the generated HTML, I get this error:

Cannot find module 'prismjs/components/prism-gradle'

Do I need to install additional packages with yarn/npm? The page says something about an autoloader, too, but to avoid using it with that package above.

How do I load languages into PrismJS using webpack?

0 Answers0