Code Highlight not as expected

[老王 Willin (v0)]

Config:

/** @type {import('rehype-pretty-code').Options} */
const rehypePrettyCodeOptions = {
  transformers: [transformerNotationDiff()],
  theme: 'one-dark-pro',
  onVisitTitle(node) {
    console.log(node); // never print anything.
  },
  onVisitHighlightedLine(node) {
    console.log(node);  // never print anything.
  },
  onVisitHighlightedWord(node) {
    console.log(node);  // never print anything.
  }
};

const config = defineConfig({
  extensions: ['.svelte.md', '.md', '.svx'],
  highlight: false,
  rehypePlugins: [
    rehypeSlug,
    [rehypePrettyCode, rehypePrettyCodeOptions],
    [
      rehypeAutolinkHeadings,
      {
        behavior: 'wrap',
        properties: {
          className: ['anchor']
        }
      }
    ]
  ],
  remarkPlugins: [
    remarkGfm
  ],
  smartypants: {
    dashes: 'oldschool'
  }
});

export default config;

//```js title="hello.js" /age/#v /name/#v /setAge/#s /setName/#s /50/#i /'Taylor'/#i
const [age, setAge] = useState(50);
const [name, setName] = useState('Taylor');
//```

outputs:

<figure data-rehype-pretty-code-figure="">
  <pre
    style="background-color: #282c34; color: #abb2bf"
    tabindex="0"
    data-language="js"
    data-theme="one-dark-pro"
  ><code data-language="js" data-theme="one-dark-pro" style="display: grid;"><span data-line=""><span style="color:#C678DD">const</span><span style="color:#ABB2BF"> [</span><span style="color:#E5C07B">age</span><span style="color:#ABB2BF">, </span><span style="color:#E5C07B">setAge</span><span style="color:#ABB2BF">] </span><span style="color:#56B6C2">=</span><span style="color:#61AFEF"> useState</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">50</span><span style="color:#ABB2BF">);</span></span>
<span data-line=""><span style="color:#C678DD">const</span><span style="color:#ABB2BF"> [</span><span style="color:#E5C07B">name</span><span style="color:#ABB2BF">, </span><span style="color:#E5C07B">setName</span><span style="color:#ABB2BF">] </span><span style="color:#56B6C2">=</span><span style="color:#61AFEF"> useState</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'Taylor'</span><span style="color:#ABB2BF">);</span></span></code></pre>
</figure>

Title and highlight info missing.

In other frameworks, like next.js:

<div data-rehype-pretty-code-fragment="">
  <div data-rehype-pretty-code-title="" data-language="js" data-theme="default">
    hello.js
  </div>
  <pre
    data-language="js"
    data-theme="default"
  ><code data-language="js" data-theme="default"><span class="line"><span style="color: rgb(198, 120, 221);">const</span><span style="color: rgb(171, 178, 191);"> [</span><span class="word--highlighted" style="color: rgb(229, 192, 123);">age</span><span style="color: rgb(171, 178, 191);">, </span><span class="word--highlighted" style="color: rgb(229, 192, 123);">setAge</span><span style="color: rgb(171, 178, 191);">] </span><span style="color: rgb(86, 182, 194);">=</span><span style="color: rgb(171, 178, 191);"> </span><span style="color: rgb(97, 175, 239);">useState</span><span style="color: rgb(171, 178, 191);">(</span><span class="word--highlighted" style="color: rgb(209, 154, 102);">50</span><span style="color: rgb(171, 178, 191);">);</span></span>
<span class="line"><span style="color: rgb(198, 120, 221);">const</span><span style="color: rgb(171, 178, 191);"> [</span><span class="word--highlighted" style="color: rgb(229, 192, 123);">name</span><span style="color: rgb(171, 178, 191);">, </span><span class="word--highlighted" style="color: rgb(229, 192, 123);">setName</span><span style="color: rgb(171, 178, 191);">] </span><span style="color: rgb(86, 182, 194);">=</span><span style="color: rgb(171, 178, 191);"> </span><span style="color: rgb(97, 175, 239);">useState</span><span style="color: rgb(171, 178, 191);">(</span><span class="word--highlighted" style="color: rgb(152, 195, 121);">'Taylor'</span><span style="color: rgb(171, 178, 191);">);</span></span></code></pre>
</div>

[老王 Willin (v0)]

block code done.

is there a way to highlight inline code?

[Lucretius Biah]

block code done.

is there a way to highlight inline code?

It's possbile