PrismJS package not automatically highlighting markdown

Question

I'm using Prism to highlight my markdown code snippets. I am calling Prism.highlightAll(), and I have a <pre>-tagged section. Yet, it is not highlighting my syntax.

Here's my component with the useEffect hook which attempts to highlight (I checked, it's being called):

const ArticlePage: NextPage<{ article: Article }> = ({ article }) => {
  useEffect(() => {
    Prism.highlightAll(); // <-- HERE IT IS BEING CALLED
  }, []);
  return (
    <div className={styles.box}>
      <h1 className="mb-5 text-6xl leading-1 font-extrabold">
        {article.title}
      </h1>
      <ReactMarkdown>{markdown}</ReactMarkdown> // <-- What I'm trying to highlight
    </div>
  );
};

My markdown is pulling trivially from here:

  const markdown: string = "```dart\nprint('hello');\nprint('world');\n```";

Here are my relevant imports:

import Prism from "prismjs";
import { useEffect } from "react";

require("prismjs/components/prism-javascript");

require("prismjs/components/prism-dart");

require("prismjs/components/prism-css");

require("prismjs/components/prism-jsx");

I am also using getServerSideProps to return the actual markdown I need to render (this example I hard-code it for brevity):

export const getServerSideProps: GetServerSideProps = async (context) => {
  const slug = context.query.slug;
  const res = await fetch(
    "https://MY_WEBSITE_URL/article/" + slug
  );
  const article: Article = await res.json();

  return {
    props: {
      article,
    },
  };
};

export default ArticlePage;

Here is what the inspect-element looks like:

Here's the webpage representation (no syntax highlighting!):

If it's helpful, I'm using Typescript, TailwindCSS, NextJS, and pulling from a Heroku web server built in Rust (Actix-Web).

Answer 1

Figured it out.

Instead of placing the imports at the top of your file, put them inside the UseEffect hook:

require("prismjs/components/prism-javascript");

require("prismjs/components/prism-dart");

require("prismjs/components/prism-css");

require("prismjs/components/prism-jsx");