Skip to content

Fix preview width #165

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 28, 2022
Merged

Fix preview width #165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 2 additions & 40 deletions examples/docusaurus/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,3 @@
# Website
# Docusaurus + Code Hike

This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.

### Installation

```
$ yarn
```

### Local Development

```
$ yarn start
```

This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.

### Build

```
$ yarn build
```

This command generates static content into the `build` directory and can be served using any static contents hosting service.

### Deployment

Using SSH:

```
$ USE_SSH=true yarn deploy
```

Not using SSH:

```
$ GIT_USER=<Your GitHub username> yarn deploy
```

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.
See [this guide](https://codehike.org/docs/installation/docusaurus).
185 changes: 5 additions & 180 deletions examples/docusaurus/docs/intro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,186 +2,11 @@
sidebar_position: 1
---

# Code Hike + Docusaurus
### Lorem ipsum

You can create a new Docusaurus website with:

```
npx create-docusaurus@latest my-website classic
```

To use Code Hike we need to add these dependencies:

```
cd my-website
npm i @mdx-js/react docusaurus-theme-mdx-v2 @code-hike/mdx
```python hello.py
# mark[22:30]
print("Rendered with Code Hike")
```

<CH.Scrollycoding>

```js docusaurus.config.js focus=7
/** @type {import('@docusaurus/types').Config} */
const config = {
presets: [
// ...
],

themes: ["mdx-v2"],

themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
({
navbar: {
// ...
},
}),
}

module.exports = config
```

## MDX v2 theme

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).

We've already added the dependency, now we need to add the theme to the `docusaurus.config.js` with _`themes: ["mdx-v2"]`_..

> 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).

---

```text blog/2019-05-29-long-blog-post.md focus=12
---
slug: long-blog-post
title: Long Blog Post
authors: endi
tags: [hello, docusaurus]
---

This is the summary of a very long blog post,

Use a comment to limit blog post size in the list view.

<!--truncate-->

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque elementum dignissim ultricies. Fusce rhoncus
ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque elementum dignissim ultricies. Fusce rhoncus
ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

```

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/).

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`.

Change it from `<!--truncate-->` to `{/* truncate */}`.

---

{/* prettier-ignore */}
```js docusaurus.config.js focus=1:4,13:15
const theme = require("shiki/themes/nord.json")
const {
remarkCodeHike,
} = require("@code-hike/mdx")

/** @type {import('@docusaurus/types').Config} */
const config = {
presets: [
[
"classic",
{
docs: {
beforeDefaultRemarkPlugins: [
[remarkCodeHike, { theme }],
],
sidebarPath: require.resolve("./sidebars.js"),
},
},
],
],

themes: ["mdx-v2"],

themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
({
navbar: {
// ...
},
}),
};

module.exports = config;
```

Now that Docusaurus can render MDX v2 we can add Code Hike to the `docusaurus.config.js`.

We need to import the `remarkCodeHike` function from the _`@code-hike/mdx`_ package, and add it to the _`beforeDefaultRemarkPlugins`_ array.

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.

You can also pass more options, like `lineNumbers` for example. See the [configuration docs](/docs/intro) for more information.

---

{/* prettier-ignore */}
```js docusaurus.config.js focus=19,20,22
const theme = require("shiki/themes/nord.json")
const {
remarkCodeHike,
} = require("@code-hike/mdx")

/** @type {import('@docusaurus/types').Config} */
const config = {
presets: [
[
"classic",
{
docs: {
beforeDefaultRemarkPlugins: [
[remarkCodeHike, { theme }],
],
sidebarPath: require.resolve("./sidebars.js"),
},
theme: {
customCss: [
require.resolve("@code-hike/mdx/styles.css"),
require.resolve("./src/css/custom.css"),
],
},
},
],
],

themes: ["mdx-v2"],

themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
({
navbar: {
// ...
},
}),
};

module.exports = config;
```

Then we need to import Code Hike's stylesheet.

There's a `customCSS` property in the theme config. You can replace it with an array and add Code Hike's stylesheet to it.

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](/docs/intro).

</CH.Scrollycoding>

The code for this tutorial is available on [GitHub](https://github.com/code-hike/codehike/tree/main/examples/docusaurus).

You can also try it out from your browser on Stackblitz.
Lorem ipsum dolor sit amet.
1 change: 1 addition & 0 deletions packages/mdx/src/mini-browser/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
padding: 0 10px;
color: #544;
min-width: 5px;
width: 5px;
}

.ch-browser-button {
Expand Down