Somewhere in your code, you'll have a
remarkPlugins array, there you'll find Code Hike's . If you haven't already set Code Hike up, see the installation docs first.
Line numbers are turned off by default (I'm not a fan of line numbers). You can turn them on by setting
To add a copy button to your code, set
A common pattern is to have the copy button hidden by default, but show it when the user hovers over the code. You can do it with this CSS:
By default, any Code Hike component used in your mdx files will be automatically imported. But some tools don't work well with imports in mdx files, so you can disable this feature by setting
Then you'll need to pass Code Hike components as a prop like this:
Code Hike uses Shiki for syntax highlighting, so you can import themes directly from Shiki:
For example, this website is using a modified version of the json file from the Nord Wave theme.
These are the themes you can import directly from Shiki: