feature request: line(s) highlighting and adding file name for code block

[hampak]

Hello, thank you for making such a lightweight syntax highlighter for JSX.

I'd like to propose a feature request where we can highlight specific lines in the block of code and also give the code block a name (file name).

For example, people who use "shiki" can do this very easily by specifying like this:

```jsx {5} title="hello.js"
// code goes here

This will highlight the 5th line in the code block and will also give the code block the title "hello.js" which will appear either below or above the block (which can be customizable).

Thank you :D

[huozhi]

Hi @hampak, you can use CSS .sh__line:nth-child() to get the line and select the certain line of the code for now, and customize with your own style.

The markdown example is integrated with markdown rendere, I'm not sure if that's feature on the renderer side. curious are you using sugar-high as markdown highlighter?

[hampak]

Hi, @huozhi! Thank you for the reply.

I'll note the method you've mentioned regarding the line highlighting.

For your question: Yes, I'm using it as a markdown highlighter for my personal blog. I'm using MDX.

[huozhi]

Could you share a bit more how you're using it with MDX, I'd love to help support it if it's possible

[hampak]

Sure,

I'm making a blog where I'm using MDX (with the frontmatter and the actual content).

I'm using MDXRemote from next-mdx-remote/rsc for the utilities it provides. This is the code where I implement sugar high:

function Code({ children, ...props }) {
  const codeHTML = highlight(children)
  return (
    <code dangerouslySetInnerHTML={{ __html: codeHTML }} {...props} />
  )
}

let components = {
  code: Code
}

export const MDX = (props) => {

  return (
    <>
      <MDXRemote
        {...props}
        components={{ ...components, ...(props.components || {}) }}
      />
    </>
  )
}

This is how my MDX file looks like:

[huozhi]

Will you get the line number or file title that get highlighted through props?

For title I think it should be sth outside of code, so need sth wrapping the <code> from outside.

<div>
  <div>{tiltle}</div>
  <code /> 
</div>

Regarding to line number I'm thinking if we can inject some dynamic style there before <code> tag? Or are you having global. Where did you get the line number props?

[hampak]

Where did you get the line number props? -> hmm... only thing I can say for sure is that I'm inputting the line numbers like this:

``` mdx {2-4}
// content goes here

This creates a custom css style which I can later style it for myself like this:

.prose [data-highlighted-line] {
  /* goes here */
}