Skip to content

Commit 9fe5366

Browse files
authored
Add set up instructions
1 parent 6eb7165 commit 9fe5366

File tree

1 file changed

+27
-0
lines changed

1 file changed

+27
-0
lines changed

readme.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,30 @@ Build first-class code walkthroughs for the web. Whether you are writing blog po
77

88
There are no docs yet, but you can [explore the demos](https://codehike.org/#demos) for an overview of all the features and how to use them.
99

10+
## How to set up Code Hike
11+
12+
1. First you need MDX v2 (or [xdm](https://github.com/wooorm/xdm/)). See [MDX v2 docs](https://mdxjs.com/docs/getting-started/) on how to set it up.
13+
2. Install Code Hike remark plugin with `yarn add @code-hike/mdx@next`
14+
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:
15+
16+
```js
17+
const { remarkCodeHike } = require("@code-hike/mdx");
18+
const theme = require("shiki/themes/monokai.json"); // any theme from shiki
19+
20+
// ...
21+
// somewhere on your bundler configuration:
22+
// {
23+
// loader: "@mdx-js/loader",
24+
// options: {
25+
remarkPlugins: [[remarkCodeHike, { theme }]],
26+
// },
27+
// },
28+
// ...
29+
```
30+
4. Add Code Hike's CSS. Also depends on your stack. Usually you can _just_ import it:
31+
32+
```js
33+
import "@code-hike/mdx/dist/index.css";
34+
```
35+
36+
5. Create an mdx file and copy the code from any of the [demos](https://codehike.org/#demos) to see if it works

0 commit comments

Comments
 (0)