These are the old docs. Code Hike v1.0 is out! Read the announcement.

Themes

The theme option accepts a string for built-in themes or an object for custom themes.

config.js

import { remarkCodeHike } from "@code-hike/mdx"
// config depends on the framework you're using
mdxOptions = {
remarkPlugins: [
[remarkCodeHike, { theme: "dark-plus" }],
anotherPlugin,
],
}

Built in themes

lorem.js
styles/ipsum.css

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

{ theme: "dark-plus" }

Light/Dark mode

There are also two built-in themes that support light/dark mode using CSS:

|
lorem.js
styles/ipsum.css

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

{ theme: "github-from-css" }

To use them you need to include the colors as CSS variables. You can copy the CSS from here:

and adapt it to your needs by changing the CSS selector.

Custom themes and VS Code themes

You can use the Theme Editor to customize any of the built-in themes or any theme from the VS Code marketplace.

Once you have your theme, import it in your config file:

config.js

import { remarkCodeHike } from "@code-hike/mdx"
import myTheme from "./my-theme"
mdxOptions = {
remarkPlugins: [
[remarkCodeHike, { theme: myTheme }],
anotherPlugin,
],
}