Is there a way to highlight a token in a codeblock?

[dbzx10299]

Is there any way to highlight the function parameterbar in the code block?

```js
function foo(bar) {
  console.log(bar)
}
```

If there is not I think it would be useful to have the ability to do something like this

```js /bar/
function foo(bar) {
  console.log(bar)
}

[nobkd]

No, the option for partial highlight does not exist.
(You meant that, as you can set a line to be highlighted, right?)

---

The code gets split to tokens to add styles to it.
As an incomplete example, here is your code piece with missing classes for colors, boldness, italic...

<span>function</span> <span>foo</span><span>(</span><span>bar</span><span>) {</span>
  <span>console</span><span>.</span><span>log</span><span>(</span><span>bar</span><span>)
}</span>

If you want to highlight parts of the code, it might work for some words, e.g. bar as it has it's own token.
But think about cases where you have a regex like /\.lo/ (see console log), you'd have parts that belong to multiple tokens...
So you'd have to reformat the code tags to fix closing spans too early and therefore missing the correct styles.
Or adding the hightlighted class to tokens and inserting new spans where needed.

---

In conclusion, I think that it's hard to make this work as expected,
But if you're interested, you could try to implement it.

---

Example for a real with shiki styled code

Input:

export default defineNitroPlugin((nitroApp) => {
  // ...
})

Output:

<pre>
  <code>
    <span class="line" line="1">
      <span class="ct-942366">export</span><span class="ct-443230"> </span><span class="ct-942366">default</span><span class="ct-443230"> </span><span class="ct-923966">defineNitroPlugin</span><span class="ct-443230">((nitroApp) </span><span class="ct-942366">=&gt;</span><span class="ct-443230"> </span><span class="ct-935781">{</span>
    </span>
    <span class="line" line="2">
      <span class="ct-935781">  </span><span class="ct-128513">// ...</span>
    </span>
    <span class="line" line="3">
      <span class="ct-935781">}</span><span class="ct-443230">)</span>
    </span>
  </code>
</pre>

[dbzx10299]

I did see that this is a valid syntax with rehype-pretty-code

You are indeed able to write this with the rehype-pretty-code plugin

```js /foo/
const foo = 1
```

Nuxt does use rehype and on the nuxt content api it gives this example

export default defineNuxtConfig({
  content: {
    markdown: {
      rehypePlugins: [
        'rehype-figure'
      ]
    }
  }
})

So I installed the plugin and added this but it still does not work

export default defineNuxtConfig({
  content: {
    markdown: {
      rehypePlugins: [
        'rehype-pretty-code'
      ]
    }
  }
})