Fix transparent color

Author: pomber

examples/docusaurus/docs/intro.md

@@ -4,15 +4,23 @@ sidebar_position: 1
 
 # Code Hike + Docusaurus
 
-Create a Docusaurus website:
+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
+```
+
 <CH.Scrollycoding>
 
-```js docusaurus.config.js
+```js docusaurus.config.js focus=7
+/** @type {import('@docusaurus/types').Config} */
 const config = {
   presets: [
     // ...
@@ -32,32 +40,148 @@ const config = {
 module.exports = config
 ```
 
-Code Hike requires MDX v2 but Docusaurus [doesn't support it yet](https://github.com/facebook/docusaurus/issues/4029). So we'll need to add a Docusaurus theme to support it:
+## MDX v2 theme
 
-So you install it with:
+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).
 
-```bash
-npm i docusaurus-theme-mdx-v2
-```
+We've already added the dependency, now we need to add the theme to the `docusaurus.config.js` with _`themes: ["mdx-v2"]`_..
 
-And add it to your `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).
 
-> There may be a few docusaurs features that doesn'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]
 ---
 
-```md blog/2019-05-29-long-blog-post.md 5
 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
+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`. From _`<!--truncate-->`_ to _`{/\* truncate \*/}`_.
+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](/configuration) 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](/styling).
 
 </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.

examples/docusaurus/docusaurus.config.js

@@ -4,8 +4,8 @@
 const lightCodeTheme = require("prism-react-renderer/themes/github")
 const darkCodeTheme = require("prism-react-renderer/themes/dracula")
 
+const theme = require("shiki/themes/nord.json")
 const { remarkCodeHike } = require("@code-hike/mdx")
-const theme = require("shiki/themes/monokai.json")
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -39,8 +39,8 @@ const config = {
         },
         theme: {
           customCss: [
+            require.resolve("@code-hike/mdx/styles.css"),
             require.resolve("./src/css/custom.css"),
-            require.resolve("@code-hike/mdx/dist/index.css"),
           ],
         },
       }),

examples/docusaurus/package.json

@@ -17,7 +17,7 @@
     "@code-hike/mdx": "^0.3.0",
     "@docusaurus/core": "2.0.0-beta.18",
     "@docusaurus/preset-classic": "2.0.0-beta.18",
-    "@mdx-js/react": "^1.6.22",
+    "@mdx-js/react": "^2.1.1",
     "clsx": "^1.1.1",
     "docusaurus-theme-mdx-v2": "^0.1.1",
     "prism-react-renderer": "^1.3.1",

packages/mdx/dev/content/inline-code.mdx

@@ -0,0 +1 @@
+Foo _`const x = 2`_ bar

packages/mdx/dev/content/scrollycoding copy.mdx

@@ -1,7 +1,7 @@
 import fs from "fs"
 import { remarkCodeHike } from "../src/index"
 import { compile } from "@mdx-js/mdx"
-import theme from "shiki/themes/slack-dark.json"
+import theme from "shiki/themes/nord.json"
 import { withDebugger } from "mdx-debugger"
 
 export async function getFiles() {

packages/mdx/dev/files.ts

@@ -6,7 +6,7 @@
 
 .ch-editor-tab {
   border-right: 1px solid rgb(37, 37, 38);
-  width: 120px;
+  // width: 120px;
   min-width: fit-content;
   flex-shrink: 1;
   position: relative;