Highlighting works, but Meta strings do not work

[Tebaeleven]

I was able to syntax-highlight the code displayed in MDX using rehype-pretty-code in Next13, but here is the site (https://rehype-pretty-code.netlify.app/ ) However, all of the Meta strings listed on this site do not work.

I have done a lot of research and could not figure out why, so I would appreciate it if you could let me know.

Below is the actual code and an image of Meta strings not working. MDX file

import Layout from "@/components/layout";
import { postsFileNames, postsPath } from "@/utils/mdxUtils";
import path from "path";
import matter from "gray-matter";
import { MDXRemote } from "next-mdx-remote";
import { serialize } from "next-mdx-remote/serialize";
import mdxStyles from "@/components/mdx/mdx.module.css"
import rehypePrettyCode from "rehype-pretty-code";

export default function About({ source }) {
    return (
        <>
            <div className="bg-white ">
                <div className="mx-auto max-w-screen-xl px-4 md:px-8">
                    <div className={mdxStyles.mdx}>
                        <MDXRemote {...source}></MDXRemote>
                    </div>
                </div>
            </div>
        </>
    );
}

export async function getStaticProps() {
    const content = fs.readFileSync(path.join(postsPath, "pages/about.mdx"));
    const options = {
        // Use one of Shiki's packaged themes
        theme: "dark-plus",
        keepBackground: true,
    };
    const mdxSource = await serialize(content, {
        mdxOptions: {
            remarkPlugins: [],
            rehypePlugins: [[rehypePrettyCode,options]],
        },
    });
    return { props: { source: mdxSource } };
}

dependencies

  "dependencies": {
    "@chakra-ui/react": "^2.6.1",
    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@mdx-js/loader": "^2.3.0",
    "@next/mdx": "^13.4.3",
    "@types/node": "20.2.1",
    "@types/react": "18.2.6",
    "@types/react-dom": "18.2.4",
    "autoprefixer": "10.4.14",
    "eslint": "8.41.0",
    "eslint-config-next": "13.4.3",
    "framer-motion": "^10.12.12",
    "gray-matter": "^4.0.3",
    "next": "13.4.3",
    "next-mdx-remote": "^4.4.1",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "rehype-pretty-code": "^0.9.5",
    "shiki": "^0.14.2",
    "tailwindcss": "3.3.2",
    "typescript": "5.0.4"
  }

[atomiks]

The meta strings require specifying how you want to manipulate the nodes in the options object — you haven't yet specified onVisitHighlightedWord to manipulate the node and allow any styling to appear.

onVisitHighlightedWord(node, id) {
  node.properties.className = ['word'];

  if (id) {
    // If the word spans across syntax boundaries (e.g. punctuation), remove
    // colors from the child nodes.
    if (node.properties['data-rehype-pretty-code-wrapper']) {
      node.children.forEach((childNode) => {
        childNode.properties.style = '';
      });
    }

    node.properties.style = '';
    node.properties['data-word-id'] = id;
  }
}

[Tebaeleven]

I had overlooked it. Thank you so much for your help!