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")
const someTheme = require("shiki/themes/nord.json")
mdxOptions = {
  remarkPlugins: [
    [
      remarkCodeHike,
      {
        lineNumbers: false,
        showCopyButton: false,
        theme: someTheme,
        skipLanguages: ["mermaid"],
        staticMediaQuery: "not screen, (max-width: 768px)",
        autoImport: true,
      },
    ],
    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.

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

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

Code Hike uses Shiki for syntax highlighting, so you can import themes directly from Shiki:

// import:
import theme from "shiki/themes/nord.json"
// require:
const theme = require("shiki/themes/nord.json")
// import with assert:
import theme from "shiki/themes/nord.json" assert { type: "json" }
// createRequire:
import { createRequire } from "module"
const require = createRequire(import.meta.url)
const theme = require("shiki/themes/nord.json")

Custom themes

Themes in Code Hike are javascript objects, so you can copy and edit any of the themes from Shiki. You can also search the json file for any VS Code Theme and make it your own.

For example, this website is using a modified version of the json file from the Nord Wave theme.

Theme list

These are the themes you can import directly from Shiki:

`shiki/themes/dark-plus.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/dracula-soft.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/dracula.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/github-dark-dimmed.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/github-dark.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/github-light.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/light-plus.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/material-darker.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/material-default.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/material-lighter.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/material-ocean.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/material-palenight.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/min-dark.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/min-light.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/monokai.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/nord.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/one-dark-pro.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/poimandres.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/rose-pine-dawn.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/rose-pine-moon.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/rose-pine.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/slack-dark.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/slack-ochin.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/solarized-dark.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/solarized-light.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/vitesse-dark.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

`shiki/themes/vitesse-light.json`

index.js

styles.css

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null
  dolor = sit - amet(dolor)
  return "consectetur"
}

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 }} />
}