Installation

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.

Frameworks

Installation guides for specific frameworks. Pick one:

Next.js

Docusaurus

Next.js + Contentlayer

Next.js + MDX Bundler

Next MDX Remote

docs.page

Next.js + Code Hike

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.

next.config.js


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

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. For more information about themes, see the themes docs.

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

next.config.js


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

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.

next.config.js

pages/_app.js


function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
export default MyApp

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.

next.config.js

pages/_app.js


import "@code-hike/mdx/dist/index.css"
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
export default MyApp

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

For example, create an index.mdx file in your pages directory, and run Next with npx next.

If you open localhost:3000 on your browser you should see Code Hike's syntax highlighting.

Markdown (.md) files should also work.

next.config.js

pages/_app.js

pages/index.mdx


# Hello
Lorem ipsum dolor sit amet.
```python hello.py
print("Rendered with Code Hike")
```
Lorem ipsum dolor sit amet.