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,
autoImport: true,
theme: someTheme,
},
],
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.


_11
mdxOptions = {
_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
Copy

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

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

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
Copy

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

shiki/themes/dracula-soft.json

index.js
styles.css
Copy

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

shiki/themes/dracula.json

index.js
styles.css
Copy

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

shiki/themes/github-dark-dimmed.json

index.js
styles.css
Copy

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

shiki/themes/github-dark.json

index.js
styles.css
Copy

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

shiki/themes/github-light.json

index.js
styles.css
Copy

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

shiki/themes/light-plus.json

index.js
styles.css
Copy

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

shiki/themes/material-darker.json

index.js
styles.css
Copy

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

shiki/themes/material-default.json

index.js
styles.css
Copy

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

shiki/themes/material-lighter.json

index.js
styles.css
Copy

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

shiki/themes/material-ocean.json

index.js
styles.css
Copy

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

shiki/themes/material-palenight.json

index.js
styles.css
Copy

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

shiki/themes/min-dark.json

index.js
styles.css
Copy

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

shiki/themes/min-light.json

index.js
styles.css
Copy

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

shiki/themes/monokai.json

index.js
styles.css
Copy

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

shiki/themes/nord.json

index.js
styles.css
Copy

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

shiki/themes/one-dark-pro.json

index.js
styles.css
Copy

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

shiki/themes/poimandres.json

index.js
styles.css
Copy

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

shiki/themes/slack-dark.json

index.js
styles.css
Copy

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

shiki/themes/slack-ochin.json

index.js
styles.css
Copy

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

shiki/themes/solarized-dark.json

index.js
styles.css
Copy

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

shiki/themes/solarized-light.json

index.js
styles.css
Copy

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

shiki/themes/vitesse-dark.json

index.js
styles.css
Copy

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

shiki/themes/vitesse-light.json

index.js
styles.css
Copy

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