Access metastring in Fence component to highlight line numbers

[ian-whitestone]

Greetings!

I am trying to add the ability to highlight specific lines of code in my Fence component, following this guide. Given code block, like:

I need the Fence component to get access to the metastring '{1,3-4}' so I can parse out the line numbers and style them accordingly. I tried adding it as a new attribute in my nodes.js:

// nodes.js
const nodes = {
    ...
  fence: {
    render: Fence,
    attributes: {
      language: {
        type: String,
      },
      metastring: {
        type: String,
      },
    },
  },
  ...
}

And then passing that to the Fence component:

// Fence.jsx


export function Fence({ children, language, metastring }) {
  console.log(language)
  console.log(metastring)
  const shouldHighlightLine = calculateLinesToHighlight('{1,2,3-4}');

...

But metastring is always undefined. Any ideas how I can pass through an additional attribute? Thanks!

[mfix-stripe]

@ian-whitestone two things: for one, there is a condition in our parser where the language attribute is only captured if there is no space before the content.

If you remove the space in your example, then those values will show up in the language attribute of the fence node.

Here is a playground that demonstrates how this works: https://markdoc.dev/sandbox?mode=ast&c=YGBgezEsMy00fQpzZWxlY3QgLi4uCmBgYA%253D%253D

[rpaul-stripe]

To pass a custom attribute to a fenced code block, use the following syntax:

```sql {% attributename="1,3-4" %}
code goes here
```

[ian-whitestone]

Thanks @mfix-stripe and @rpaul-stripe for the quick responses! Using @rpaul-stripe 's solution worked.