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.

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

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

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

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.

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.

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

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

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

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

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:

• github-from-css colors
• material-from-css colors

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

Importing code from a file into a codeblock

To include code from a file in your markdown codeblocks, you can use the !from directive followed by the path to the file (relative to the markdown file).

```js index.js
!from ./assets/index.js
```

This will try to find the ./assets/index.js file relative to the markdown file and replace the codeblock with the content of the file.

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.

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

Inline code

You can also provide a custom component for inline code:

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

const chConfig = {
  components: {
    code: "MyCode",
+
    inlineCode: "MyInlineCode",
  },
}

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

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

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

async function MyInlineCode({ codeblock }: { codeblock: RawCode }) {
  const highlighted = await highlight(codeblock, "github-dark")
  return <Inline code={highlighted} style={highlighted.style} />
}

To use MyInlineCode from Markdown you need to use a special syntax: _`code`_.

This syntax also allows you to specify the language and meta for inline code _py lorem ipsum`print 5`_, will give you {lang: "py", meta: "lorem ipsum", value: "print 5"}.

This is not handled by Code Hike: `var x = 10`

This is handled by Code Hike (with jsx as default lang): _`var x = 10`_

With a diffrent language: _css`a { color: #123 }`_