Build first-class code walkthroughs for the web. Whether you are writing blog posts, documentation, tutorials, coding videos, or any type of technical content, Code Hike helps you create a superior code reading experience.

There isn't a stable version yet, but there's a preview version for people who want to try it out and give feedback. You can use it in any project that has MDX v2 configured. Or you can clone this starter project.

There are no docs yet, but you can explore the demos for an overview of all the features and how to use them.

How to set up Code Hike

1. First you need MDX v2 (or xdm). See MDX v2 docs on how to set it up.
2. Install Code Hike remark plugin with yarn add @code-hike/mdx@next
3. Add the remark plugin to the MDX loader options. This depends on the bundler or site generator you are using. It usually looks something like this:

const { remarkCodeHike } = require("@code-hike/mdx");
const theme = require("shiki/themes/monokai.json"); // any theme from shiki

// ...
// somewhere on your bundler configuration:
//      {
//        loader: "@mdx-js/loader",
//        options: {
            remarkPlugins: [[remarkCodeHike, { theme }]],
//        },
//      },
// ...

4. Add Code Hike's CSS. Also depends on your stack. Usually you can just import it:

import "@code-hike/mdx/dist/index.css";

5. Create an mdx file and copy the code from any of the demos to see if it works

Here is a minimal Next.js example.