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 MDX Remote + Code Hike

Based on Next.js official docs and next-mdx-remote.

Start by installing next and react on an empty directory:


npm install next react react-dom

Then also install the next-mdx-remote plugin.


npm i next-mdx-remote

First, 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.

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.

pages/_app.js


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

Next, create a page for rendering your MDX content.

You can learn more about parsing MDX content from remote locations in the next-mdx-remote docs;

pages/_app.js

pages/content.js


import { serialize } from "next-mdx-remote/serialize"
import { MDXRemote } from "next-mdx-remote"
import Test from "../components/test"
const components = {}
export default function TestPage({
  source,
}) {
  return (
    <div className="wrapper">
      <MDXRemote
        {...source}
        components={components}
      />
    </div>
  )
}
export async function getStaticProps() {
  // MDX text - can be from a local file, database, anywhere
  const source =
    "Some **mdx** text, <p>using an HTML element</p>"
  const mdxSource = await serialize(
    source
  )
  return {
    props: { source: mdxSource },
  }
}

To set up Code Hike you need to import the @code-hike/mdx`` plugin, and add it to the remarkPlugins``array in theserialize function.

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.

pages/_app.js

pages/content.js


import { serialize } from "next-mdx-remote/serialize"
import { MDXRemote } from "next-mdx-remote"
import { remarkCodeHike } from "@code-hike/mdx"
import { CH } from "@code-hike/mdx/components"
const components = { CH }
export default function TestPage({
  source,
}) {
  return (
    <div className="wrapper">
      <MDXRemote
        {...source}
        components={components}
      />
    </div>
  )
}
export async function getStaticProps() {
  // MDX text - can be from a local file, database, anywhere
  const source =
    "Some **mdx** text, <p>using an HTML element</p>"
  const mdxSource = await serialize(
    source,
    {
      mdxOptions: {
        remarkPlugins: [
          [
            remarkCodeHike,
            {
              autoImport: false,
              theme: "material-default",
            },
          ],
        ],
        useDynamicImport: true,
      },
    }
  )
  return {
    props: { source: mdxSource },
  }
}

And now you can import mdx files from anywhere.

For examples on importing files from your local file system or a database, refer to the next-mdx-remote docs.

First, 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.

Next, create a page for rendering your MDX content.

You can learn more about parsing MDX content from remote locations in the next-mdx-remote docs;

To set up Code Hike you need to import the @code-hike/mdx`` plugin, and add it to the remarkPlugins``array in theserialize function.

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.

And now you can import mdx files from anywhere.

For examples on importing files from your local file system or a database, refer to the next-mdx-remote docs.

pages/_app.js


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

A demo of Code Hike + NextJS is available on GitHub. You can also try it out from your browser on StackBlitz.