Configuration

Somewhere in your code, you'll have a remarkPlugins array, there you'll find Code Hike's config object. If you haven't already set Code Hike up, see the installation docs first.

your.config.js


const remarkSomething = require("remark-something")
const { remarkCodeHike } = require("@code-hike/mdx")
mdxOptions = {
  remarkPlugins: [
    [
      remarkCodeHike,
      {
        lineNumbers: false,
        showCopyButton: false,
        theme: "dark-plus",
        skipLanguages: ["mermaid"],
        staticMediaQuery: "not screen, (max-width: 768px)",
        autoImport: true,
        autoLink: false,
      },
    ],
    remarkSomething,
    remarkSomethingElse,
  ],
}

Line Numbers

Line numbers are turned off by default (I'm not a fan of line numbers). You can turn them on by setting lineNumbers: true.


_11mdxOptions = {
_11  remarkPlugins: [
_11    [
_11      remarkCodeHike,
_11      {
_11        theme: someTheme,
_11        lineNumbers: true,
_11      },
_11    ],
_11  ],
_11}

Copy Button

To add a copy button to your code, set showCopyButton to true.

your.config.js


mdxOptions = {
  remarkPlugins: [
    [
      remarkCodeHike,
      {
        theme: someTheme,
        showCopyButton: true,
      },
    ],
  ],
}

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:


.ch-codeblock .ch-code-button {
  display: none;
}
.ch-codeblock:hover .ch-code-button {
  display: block;
}

Theme

See the themes docs for more info.

Skip Languages

If you want Code Hike to skip certain languages, you can set skipLanguages. This is useful when you have other plugins that handle those languages, like mermaid.


mdxOptions = {
  remarkPlugins: [
    [
      remarkCodeHike,
      {
        theme: someTheme,
        skipLanguages: ["", "mermaid"],
      },
    ],
  ],
}

Static Components

Some components, like <CH.Scrollycoding> have static versions more suitable for small screens or printing. You can choose the media query that triggers the static version.


mdxOptions = {
  remarkPlugins: [
    [
      remarkCodeHike,
      {
        theme: someTheme,
        staticMediaQuery: "not screen, (max-width: 768px)",
      },
    ],
  ],
}

Auto Import

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 autoImport: false.


mdxOptions = {
  remarkPlugins: [
    [
      remarkCodeHike,
      {
        theme: someTheme,
        autoImport: false,
      },
    ],
  ],
}

Then you'll need to pass Code Hike components as a prop like this:


import Example from "./example.mdx"
import { CH } from "@code-hike/mdx/components"
function App() {
  return <Example components={{ CH }} />
}

Auto Link

You can set autoLink: true to automatically turn any URL in your code into a link.


mdxOptions = {
  remarkPlugins: [
    [
      remarkCodeHike,
      {
        autoLink: true,
      },
    ],
  ],
}