Code Blocks

To use a custom component to render code blocks, you need to provide the name of the component in the Code Hike configuration, and then make sure the component is available in the scope where you render the markdown content.

your-config.mjs

import { remarkCodeHike, recmaCodeHike } from "codehike/mdx"

const chConfig = {
  components: { code: "MyCode" },
}

const mdxOptions = {
  remarkPlugins: [[remarkCodeHike, chConfig]],
  recmaPlugins: [[recmaCodeHike, chConfig]],
}

page.tsx

import Content from "./content.md"
import type { RawCode } from "codehike/code"

export default function Page() {
  return <Content components={{ MyCode }} />
}

function MyCode({ codeblock }: { codeblock: RawCode }) {
  return <pre>{codeblock.value}</pre>
}

Syntax highlighting

To add syntax highlighting to your component, you can use the highlight function from the codehike/code module. This function takes a RawCode object and a theme name, and returns a HighlightedCode object. You can then pass this object to the Pre component to render the highlighted code.

code.tsx

import { Pre, RawCode, highlight } from "codehike/code"

export async function MyCode({ codeblock }: { codeblock: RawCode }) {
  const highlighted = await highlight(codeblock, "github-dark")
  return <Pre code={highlighted} />
}

React Server Components

Note that the highlight function is asynchronous, which means that the MyCode component will need to be an async as well. So the example above will only work if you're using React Server Components.

If you're using a framework that doesn't support React Server Components: you can configure Code Hike to run the highlight during the compilation step, and pass a HighlightedCode object to the MyCode component.

your-config.mjs

import { remarkCodeHike, recmaCodeHike } from "codehike/mdx"

const chConfig = {
  components: { code: "MyCode" },
  syntaxHighlighting: {
    theme: "github-dark",
  },
}

const mdxOptions = {
  remarkPlugins: [[remarkCodeHike, chConfig]],
  recmaPlugins: [[recmaCodeHike, chConfig]],
}

page.tsx

import Content from "./content.md"
import { HighlightedCode, Pre } from "codehike/code"

export default function Page() {
  return <Content components={{ MyCode }} />
}

function MyCode({ codeblock }: { codeblock: HighlightedCode }) {
  return <Pre code={codeblock} />
}

This setting will also syntax highlight the code from decorated codeblocks.

The `<Pre />` component

Both the highlight function and the Pre component are optional. You can use a different solution for syntax highlighting instead of Code Hike's highlight, or render the highlighted tokens manually instead of using the Pre component. The main advantage of using them is the support for annotations and annotation handlers.

Themes

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

Built-in themes

dark-plus

dracula-soft

dracula

github-dark

github-dark-dimmed

github-light

light-plus

material-darker

material-default

material-lighter

material-ocean

material-palenight

min-dark

min-light

monokai

nord

one-dark-pro

poimandres

slack-dark

slack-ochin

solarized-dark

solarized-light

import { Pre, RawCode, highlight } from "codehike/code"
  
async function Code({codeblock}: {codeblock: RawCode}) {
  const highlighted = await highlight(codeblock, "dark-plus")
  return <Pre code={highlighted} style={highlighted.style} />
}

CSS Light/Dark themes

There are also two built-in themes that support light/dark mode using CSS: "github-from-css" and "material-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.

Languages

Code Hike handles syntax highlighting for 210 languages: abap, actionscript-3, ada, apache, apex, apl, applescript, ara, asm, astro, awk, ballerina, bash, bat, batch, be, beancount, berry, bibtex, bicep, blade, c, c#, cadence, cdc, clarity, clj, clojure, cmake, cmd, cobol, codeql, coffee, console, cpp, crystal, cs, csharp, css, cue, cypher, d, dart, dax, diff, docker, dockerfile, dream-maker, elixir, elm, erb, erl, erlang, f#, fish, fs, fsharp, fsl, gdresource, gdscript, gdshader, gherkin, git-commit, git-rebase, glimmer-js, glimmer-ts, glsl, gnuplot, go, graphql, groovy, hack, haml, handlebars, haskell, hbs, hcl, hjson, hlsl, hs, html, http, imba, ini, jade, java, javascript, jinja-html, jison, js, json, json5, jsonc, jsonl, jsonnet, jssm, jsx, julia, kotlin, kql, kusto, latex, less, liquid, lisp, logo, lua, make, makefile, markdown, marko, matlab, md, mdx, mermaid, narrat, nextflow, nginx, nim, nix, objc, objective-c, objective-cpp, ocaml, pascal, perl, perl6, php, plsql, postcss, powerquery, powershell, prisma, prolog, properties, proto, ps, ps1, pug, puppet, purescript, py, python, ql, r, raku, razor, rb, reg, rel, riscv, rs, rst, ruby, rust, sas, sass, scala, scheme, scss, sh, shader, shaderlab, shell, shellscript, shellsession, smalltalk, solidity, sparql, sql, ssh-config, stata, styl, stylus, svelte, swift, system-verilog, tasl, tcl, terminal, tex, text, toml, ts, tsx, turtle, twig, txt, typescript, v, vb, verilog, vhdl, vim, viml, vimscript, vue, vue-html, vyper, wasm, wenyan, wgsl, wolfram, xml, xsl, yaml, yml, zenscript, zsh, and 文言.

Ignoring some codeblocks

If there are codeblocks that you don't want to be processed by Code Hike, you can add an ignoreCode function to the configuration. This function receives a RawCode object and should return true if the codeblock should be ignored.

your-config.mjs

/** @type {import('codehike/mdx').CodeHikeConfig} */
const chConfig = {
  components: { code: "MyCode" },
  ignoreCode: (codeblock) => codeblock.lang === "mermaid",
}