how to add property on TextNode

[wqcstrong]

import { unified } from 'unified';
import { visit } from 'unist-util-visit';
import rehypeDomParse from 'rehype-dom-parse';
import rehypeDomStrigify from 'rehype-dom-stringify';

const processor = unified()
  .use(rehypeDomParse)
  .use(() => (tree) => {
    visit(
      tree,
      (node) => {
        if (
          ['script', 'style'].includes(node.tagName) &&
          node.children.length === 1
        )
          return true;
        return false;
      },
      (node) => {
        node.children[0].lang = '🚀🚀🚀';
      },
    );
  })
  .use(rehypeDomStrigify);
  // .data('settings', { fragment: false })

const file = await processor.process(`<style>body {height: 100vh}</style>`);
const tree = processor.parse(file);

console.log(tree);

I have tried return new TextNode and add the lang directly, but the result don't include lang, how to correct it.

[wooorm]

You can’t add properties to text nodes. That’s the thing with text nodes: they are text.
In HTML, elements have properties. You can add properties to elements.

I don’t know what you want to do. The HTML lang attribute can be set to a BCP 47 language code. 🚀 is not a language code. en is a language code.
But regardless, lang is nonsensical on script or style.

[wqcstrong]

OK, got that!

And what I am doing...I want to highlight the text content which is the children of script / style with highlight.js manually, and I need to pass the language to it with:

// The `lang` value:
// (<textNode.parentNode>.tagName === "script" &&  "javascript") ||
// (<textNode.parentNode>.tagName === "style" &&  "css")

hljs.highlight(textContent, {
  language: lang,
})

The end, the unifiedjs ecosystem is a great project, thank you.

[wooorm]

You should not highlight script or style. You should highlight code elements.

Please see https://github.com/wooorm/lowlight, https://github.com/wooorm/refractor, https://github.com/wooorm/starry-night for how to do highlighting.

[wqcstrong]

Yap, thanks for your answer again. ❤️