While exploring Next.js 14 and React Server Components, I noticed no syntax highlighting the library supporting React Server components. After a quick search, I found Bright, which was exactly what I was looking for! ✨
Bright is a syntax highlighting library that supports React Server Components. This means that it runs on the server, doesn't impact bundle size, and doesn't require extra configurations. You install it, import it, and use it.
The best part is that it supports VS Code's syntax highlighting. This means you can use any of the themes you already know. Code Hike created bright, a company focused on creating tools that improve the developer experience. Below are my notes on using Bright and how I modified it to fit my use case. You can check out the documentation on Bright's website.
Installation
Install Bright using npm or yarn.
Usage
Use it from a server component, for example in Next.js app/page.tsx
:
In my case, I'm using MDX, so I created a separate component to handle the code blocks.
Customizing Bright
The HighlightedCode
component is where I'm using Bright. This might seem like a lot of code, but it's mostly styling and extensions. Below, you can find a breakdown of the code.
The most important part is the BrightCode
component. This is where we are using Bright. I'm passing in extensions, which are Bright's way of adding functionality to the code blocks. I'm using the fileIcons
extension to add icons to the tabs, the extractTitleAndTrimCode
extension to extract the title from the code block and the focus
extension to add a filter to the code block.
There's several extensions or recipes that you can use, you can find them in the Bright documentation. Check them out, they are pretty cool. I modified mine to fit my use case.
Copy Code Button
I also added a copy code button to the code blocks. This is a simple component that uses the Clipboard
API to copy the code to the clipboard.
It takes a text prop and copies it to the clipboard when clicked. It uses the useState
hook to manage a isCopied
state, which toggles the button's text between 'Copy' and 'Copied! 🎉'. After copying, it resets the button text back to 'Copy' after 10 seconds.
It uses the the Web API navigator.clipboard.writeText
to copy the text prop to the user's clipboard, which is supported in all modern browsers. I then pass the full code block as the text prop inside the HighlightedCode
component.
Themes
My favorite part about Bright is that it supports VS Code's syntax highlighting. This is a delight to use because I can use any of the themes I'm already familiar with.
You can make your theme or extend any VS Code theme. You can use another of Code Hike's tools, Bright Theme Generator, to create your theme.
Conclusion
Bright is a versatile and powerful library for adding syntax highlighting to your React Server Components. Its ease of use, customization options, and server-side rendering support make it a great choice for any developer looking to enhance their application's code readability and overall user experience.