search

contentlayerdev / website

Contentlayer Website
https://www.contentlayer.dev
MIT License
131 stars 60 forks source link

Ability to highlight lines in code blocks #9

Open seancdavis opened 2 years ago

seancdavis commented 2 years ago

It would be great to be able to highlight lines in code blocks to help focus readers in the documentation.

Tailwind's docs show a nice example of this.

seancdavis commented 2 years ago

I did some research and couldn't find anything that will do this right out of the box.

I found an example of building a custom rehype plugin. There's a lot more going on here than is necessary. May not be all that difficult to do.

MiryangJung commented 2 years ago

How about using https://github.com/timlrx/rehype-prism-plus

export default makeSource({
  ...
  mdx: { rehypePlugins: [highlight, rehypePrism] },
})

I tested it and it looks like this.

스크린샷 2022-04-13 오전 1 54 56
seancdavis commented 2 years ago

@MiryangJung This could definitely work! I'm going to spend some time with the docs site next week and I'll take a look. Thanks for sharing!

nkilm commented 1 year ago

@seancdavis You can make use of Rehype Pretty Code, it can also be used to highlight lines in a code snippet. It also has some advantages over prism e.g, build-time highlighting.