File tree Expand file tree Collapse file tree 1 file changed +27
-0
lines changed Expand file tree Collapse file tree 1 file changed +27
-0
lines changed Original file line number Diff line number Diff line change @@ -7,3 +7,30 @@ Build first-class code walkthroughs for the web. Whether you are writing blog po
7
7
8
8
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.
9
9
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
You can’t perform that action at this time.
0 commit comments