Skip to content

Commit b9b2237

Browse files
pomberpomber
authored
Merge pull request #165 from code-hike/fix-preview-width
Fix preview width
2 parents 0a40a80 + e8a0e2f commit b9b2237

File tree

3 files changed

+8
-220
lines changed

3 files changed

+8
-220
lines changed

‎examples/docusaurus/README.md‎

Lines changed: 2 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,3 @@
1-
# Website
1+
# Docusaurus + Code Hike
22

3-
This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
4-
5-
### Installation
6-
7-
```
8-
$ yarn
9-
```
10-
11-
### Local Development
12-
13-
```
14-
$ yarn start
15-
```
16-
17-
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
18-
19-
### Build
20-
21-
```
22-
$ yarn build
23-
```
24-
25-
This command generates static content into the `build` directory and can be served using any static contents hosting service.
26-
27-
### Deployment
28-
29-
Using SSH:
30-
31-
```
32-
$ USE_SSH=true yarn deploy
33-
```
34-
35-
Not using SSH:
36-
37-
```
38-
$ GIT_USER=<Your GitHub username> yarn deploy
39-
```
40-
41-
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
3+
See [this guide](https://codehike.org/docs/installation/docusaurus).

‎examples/docusaurus/docs/intro.md‎

Lines changed: 5 additions & 180 deletions
Original file line numberDiff line numberDiff line change
@@ -2,186 +2,11 @@
22
sidebar_position: 1
33
---
44

5-
# Code Hike + Docusaurus
5+
### Lorem ipsum
66

7-
You can create a new Docusaurus website with:
8-
9-
```
10-
npx create-docusaurus@latest my-website classic
11-
```
12-
13-
To use Code Hike we need to add these dependencies:
14-
15-
```
16-
cd my-website
17-
npm i @mdx-js/react docusaurus-theme-mdx-v2 @code-hike/mdx
7+
```python hello.py
8+
# mark[22:30]
9+
print("Rendered with Code Hike")
1810
```
1911

20-
<CH.Scrollycoding>
21-
22-
```js docusaurus.config.js focus=7
23-
/** @type {import('@docusaurus/types').Config} */
24-
const config = {
25-
presets: [
26-
// ...
27-
],
28-
29-
themes: ["mdx-v2"],
30-
31-
themeConfig:
32-
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
33-
({
34-
navbar: {
35-
// ...
36-
},
37-
}),
38-
}
39-
40-
module.exports = config
41-
```
42-
43-
## MDX v2 theme
44-
45-
Code Hike requires MDX v2 but Docusaurus [doesn't support it yet](https://github.com/facebook/docusaurus/issues/4029). That's why we are using the [MDX v2 theme](https://github.com/pomber/docusaurus-mdx-2).
46-
47-
We've already added the dependency, now we need to add the theme to the `docusaurus.config.js` with _`themes: ["mdx-v2"]`_..
48-
49-
> There may be a few docusaurs features that don't work with mdx v2 yet, make sure to check the [known issues](https://github.com/pomber/docusaurus-mdx-2#known-issues).
50-
51-
---
52-
53-
```text blog/2019-05-29-long-blog-post.md focus=12
54-
---
55-
slug: long-blog-post
56-
title: Long Blog Post
57-
authors: endi
58-
tags: [hello, docusaurus]
59-
---
60-
61-
This is the summary of a very long blog post,
62-
63-
Use a comment to limit blog post size in the list view.
64-
65-
<!--truncate-->
66-
67-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
68-
Pellentesque elementum dignissim ultricies. Fusce rhoncus
69-
ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
70-
71-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
72-
Pellentesque elementum dignissim ultricies. Fusce rhoncus
73-
ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
74-
75-
```
76-
77-
MDX v2 has some breaking changes in the syntax. So if you already have content using mdx v1 make sure to migrate to the new syntax. You can find [the migration guide on the mdx website](https://mdxjs.com/migrating/v2/).
78-
79-
If you are following this guide with the Docusaurus template the only change we need to make is one comment in the blog post `2019-05-29-long-blog-post.md`.
80-
81-
Change it from `<!--truncate-->` to `{/* truncate */}`.
82-
83-
---
84-
85-
{/* prettier-ignore */}
86-
```js docusaurus.config.js focus=1:4,13:15
87-
const theme = require("shiki/themes/nord.json")
88-
const {
89-
remarkCodeHike,
90-
} = require("@code-hike/mdx")
91-
92-
/** @type {import('@docusaurus/types').Config} */
93-
const config = {
94-
presets: [
95-
[
96-
"classic",
97-
{
98-
docs: {
99-
beforeDefaultRemarkPlugins: [
100-
[remarkCodeHike, { theme }],
101-
],
102-
sidebarPath: require.resolve("./sidebars.js"),
103-
},
104-
},
105-
],
106-
],
107-
108-
themes: ["mdx-v2"],
109-
110-
themeConfig:
111-
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
112-
({
113-
navbar: {
114-
// ...
115-
},
116-
}),
117-
};
118-
119-
module.exports = config;
120-
```
121-
122-
Now that Docusaurus can render MDX v2 we can add Code Hike to the `docusaurus.config.js`.
123-
124-
We need to import the `remarkCodeHike` function from the _`@code-hike/mdx`_ package, and add it to the _`beforeDefaultRemarkPlugins`_ array.
125-
126-
Next to the plugin you can pass a [config object](focus://14[30:38]). Almost always you'll want to pass a theme there. You can import one from shiki, or make a custom one.
127-
128-
You can also pass more options, like `lineNumbers` for example. See the [configuration docs](/docs/intro) for more information.
129-
130-
---
131-
132-
{/* prettier-ignore */}
133-
```js docusaurus.config.js focus=19,20,22
134-
const theme = require("shiki/themes/nord.json")
135-
const {
136-
remarkCodeHike,
137-
} = require("@code-hike/mdx")
138-
139-
/** @type {import('@docusaurus/types').Config} */
140-
const config = {
141-
presets: [
142-
[
143-
"classic",
144-
{
145-
docs: {
146-
beforeDefaultRemarkPlugins: [
147-
[remarkCodeHike, { theme }],
148-
],
149-
sidebarPath: require.resolve("./sidebars.js"),
150-
},
151-
theme: {
152-
customCss: [
153-
require.resolve("@code-hike/mdx/styles.css"),
154-
require.resolve("./src/css/custom.css"),
155-
],
156-
},
157-
},
158-
],
159-
],
160-
161-
themes: ["mdx-v2"],
162-
163-
themeConfig:
164-
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
165-
({
166-
navbar: {
167-
// ...
168-
},
169-
}),
170-
};
171-
172-
module.exports = config;
173-
```
174-
175-
Then we need to import Code Hike's stylesheet.
176-
177-
There's a `customCSS` property in the theme config. You can replace it with an array and add Code Hike's stylesheet to it.
178-
179-
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.
180-
181-
You can learn more about customizing Code Hike styles in the [styling docs](/docs/intro).
182-
183-
</CH.Scrollycoding>
184-
185-
The code for this tutorial is available on [GitHub](https://github.com/code-hike/codehike/tree/main/examples/docusaurus).
186-
187-
You can also try it out from your browser on Stackblitz.
12+
Lorem ipsum dolor sit amet.

‎packages/mdx/src/mini-browser/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
padding: 0 10px;
2323
color: #544;
2424
min-width: 5px;
25+
width: 5px;
2526
}
2627

2728
.ch-browser-button {

0 commit comments

Comments
 (0)