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.
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
.
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:
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
shiki/themes/dracula-soft.json
shiki/themes/dracula.json
shiki/themes/github-dark-dimmed.json
shiki/themes/github-dark.json
shiki/themes/github-light.json
shiki/themes/light-plus.json
shiki/themes/material-darker.json
shiki/themes/material-default.json
shiki/themes/material-lighter.json
shiki/themes/material-ocean.json
shiki/themes/material-palenight.json
shiki/themes/min-dark.json
shiki/themes/min-light.json
shiki/themes/monokai.json
shiki/themes/nord.json
shiki/themes/one-dark-pro.json
shiki/themes/poimandres.json
shiki/themes/rose-pine-dawn.json
shiki/themes/rose-pine-moon.json
shiki/themes/rose-pine.json
shiki/themes/slack-dark.json
shiki/themes/slack-ochin.json
shiki/themes/solarized-dark.json
shiki/themes/solarized-light.json
shiki/themes/vitesse-dark.json
shiki/themes/vitesse-light.json
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 }} />}