Code Hike is a remark plugin for MDX v2. The specific set up will depend on your stack, it usually involves five steps:

1. Set up MDX v2
2. Install the Code Hike plugin
3. Include Code Hike's CSS
4. Add the remark plugin to your MDX configuration
5. Copy and try one of the demos to test the set up.


Installation guides for specific frameworks.

Based on Next.js official docs.

Start by installing next and react on an empty directory:

npm install next react react-dom

Then also install the mdx plugin for next, the mdx loader, and Code Hike.

npm install @next/mdx @mdx-js/loader @code-hike/mdx

Create a next.config.js file at the root of your project.

We use the @next/mdx plugin to set up MDX imports.

Inside the withMDX function we pass the Next JS config. Make sure to include "md" and "mdx" on the pageExtensions setting if you want to write MDX files directly in your pages directory.

After this step, you can use MDX files in your project, but you can't use Code Hike yet.

To set up Code Hike you need to import the @code-hike/mdx plugin, and add it to the remarkPlugins array in the next.config.js file.

Next to the plugin you can pass a config object. Almost always you'll want to pass a theme there. You can import one from shiki, or make a custom one.

You can also pass more options, like lineNumbers for example. See the configuration docs for more information.

Then you need to create a pages/_app.js file if you don't have one.

The MyApp component is where you put global stuff that applies to all pages.

You can find more information about the _app.js file in the Next.js official docs.

We use pages/_app.js file to import Code Hike's stylesheet.

If you want to customize Code Hike's styles with a global stylesheet make sure to import it after this import to avoid specificity issues.

You can learn more about customizing Code Hike styles in the styling docs.

And now you should be able to use Code Hike inside your mdx files.

For example, create an my.mdx file in your pages directory, and run Next with npx next. If you open localhost:3000/my on your browser you should see Code Hike's syntax highlighting.

Markdown (.md) files should also work.


const withMDX = require("@next/mdx")({
extension: /\.mdx?$/,
options: {
remarkPlugins: [],
module.exports = withMDX({
pageExtensions: [
"ts", "tsx", "js",
"jsx", "md", "mdx"

The code for this tutorial is available on GitHub.

You can also try it out from your browser on Stackblitz.