CODEWITHSUNDEEP
next.jsmdxjsrehypejscontentlayer
Gangula
Gangula

Reputation: 7332

onVisitHighlightedLine cannot push classname using Rehype Pretty code

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"]
    },
};

Upvotes: 1

Views: 542

Answers (1)

Gangula
Gangula

Reputation: 7332

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"]
    },
};

Upvotes: 3

Related Questions