onVisitHighlightedLine cannot push classname using Rehype Pretty code

Question

I'm using Rehype Pretty code to add syntax highlighting to my MDX blog. But I'm not able to get the line highlighting to work.

As per the documentation and few other resources, below is the configuration that should work, but I'm getting the following error.

_mdx_bundler_entry_point-f0976fc3-b34d-45fd-a559-565325298b22.mdx:0:0: ERROR: [plugin: @mdx-js/esbuild] TypeError: Cannot read properties of undefined (reading 'push') at onVisitHighlightedLine

const options = {
    theme: 'one-dark-pro', // 'github-dark-dimmed' is default

    onVisitLine(node) {
        // Prevent lines from collapsing in `display: grid` mode, and allow empty
        if (node.children.length === 0) {
            node.children = [{ type: "text", value: " " }]
        }
    },
    onVisitHighlightedLine(node) {
        node.properties.className.push("line--highlighted");
    },
    onVisitHighlightedWord(node) {
        node.properties.className = ["word--highlighted"]
    },
};

Answer 1

After reading through the log and debugging the node, it shows that the className is undefined and hence its not an array - so I cannot use Array.push method. So I modified the code to check if className is an array:

const options = {
    theme: 'one-dark-pro', // 'github-dark-dimmed' is default

    onVisitLine(node) {
        if (node.children.length === 0) {
            // if code block has a empty line, add a space instead of keeping it blank
            node.children = [{ type: "text", value: " " }]
        }
    },
    onVisitHighlightedLine(node) {
        const nodeClass = node.properties.className;
        console.log("Highlighted Line", {node})
        if (nodeClass && nodeClass.length > 0) {
            node.properties.className.push("line--highlighted");
        }else{
            node.properties.className = ["line--highlighted"];
        }
    },
    onVisitHighlightedWord(node) {
        node.properties.className = ["word--highlighted"]
    },
};