Installation
Code Hike is a remark plugin for MDX v2. The specific set up will depend on your stack, it usually involves five steps:
Frameworks
Installation guides for specific frameworks. Pick one:
Next.js + Code Hike
Based on Next.js official docs.
Start by installing next and react on an empty directory:
npm install next react react-dom
Then also install the mdx plugin for next, the mdx loader, and Code Hike.
npm install @next/mdx @mdx-js/loader @code-hike/mdx
Create a next.config.js
file at the root of your project.
We use the @next/mdx
plugin to set up MDX imports.
Inside the withMDX
function we pass the Next JS config. Make sure to include "md"
and "mdx"
on the pageExtensions
setting if you want to write MDX files directly in your pages
directory.
After this step, you can use MDX files in your project, but you can't use Code Hike yet.
To set up Code Hike you need to import the @code-hike/mdx
plugin, and add it to the remarkPlugins
array in the next.config.js
file.
Next to the plugin you can pass a config object. Almost always you'll want to pass a theme
there. For more information about themes, see the themes docs.
You can also pass more options, like lineNumbers
for example. See the configuration docs for more information.
Then you need to create a pages/_app.js
file if you don't have one.
The MyApp
component is where you put global stuff that applies to all pages.
You can find more information about the _app.js
file in the Next.js official docs.
We use pages/_app.js
file to import Code Hike's stylesheet.
If you want to customize Code Hike's styles with a global stylesheet make sure to import it after this import to avoid specificity issues.
You can learn more about customizing Code Hike styles in the styling docs.
And now you should be able to use Code Hike inside your mdx files.
For example, create an index.mdx
file in your pages
directory, and run Next with npx next
.
If you open localhost:3000
on your browser you should see Code Hike's syntax highlighting.
Markdown (.md) files should also work.
Create a next.config.js
file at the root of your project.
We use the @next/mdx
plugin to set up MDX imports.
Inside the withMDX
function we pass the Next JS config. Make sure to include "md"
and "mdx"
on the pageExtensions
setting if you want to write MDX files directly in your pages
directory.
After this step, you can use MDX files in your project, but you can't use Code Hike yet.
To set up Code Hike you need to import the @code-hike/mdx
plugin, and add it to the remarkPlugins
array in the next.config.js
file.
Next to the plugin you can pass a config object. Almost always you'll want to pass a theme
there. For more information about themes, see the themes docs.
You can also pass more options, like lineNumbers
for example. See the configuration docs for more information.
Then you need to create a pages/_app.js
file if you don't have one.
The MyApp
component is where you put global stuff that applies to all pages.
You can find more information about the _app.js
file in the Next.js official docs.
We use pages/_app.js
file to import Code Hike's stylesheet.
If you want to customize Code Hike's styles with a global stylesheet make sure to import it after this import to avoid specificity issues.
You can learn more about customizing Code Hike styles in the styling docs.
And now you should be able to use Code Hike inside your mdx files.
For example, create an index.mdx
file in your pages
directory, and run Next with npx next
.
If you open localhost:3000
on your browser you should see Code Hike's syntax highlighting.
Markdown (.md) files should also work.
A demo of Code Hike + NextJS is available on GitHub. You can also try it out from your browser on StackBlitz.