v0.6.2

packages/mdx/dev/content/assets/foo.js

@@ -0,0 +1 @@
+console.log("hello foo")

packages/mdx/dev/content/assets/foo.py

@@ -0,0 +1 @@
+print("Hello foo")

packages/mdx/dev/content/external.mdx

@@ -0,0 +1,34 @@
+```js foo.js
+// from ./assets/foo.js
+```
+
+```py foo.py
+# from ./assets/foo.py
+```
+
+```py foo.py
+print("not external")
+# from ./assets/foo.py
+```
+
+<CH.Code>
+
+```js foo.js
+// from ./assets/foo.js
+```
+
+```py foo.py
+# from ./assets/foo.py
+```
+
+```html index.html
+<h1>Hello</h1>
+```
+
+---
+
+```py another.py
+# from ./assets/foo.py
+```
+
+</CH.Code>

packages/mdx/dev/content/test.mdx

@@ -1,10 +1,79 @@
+### with width
+
+<CH.Code debug >
+
 ```js
-foo
-// link(1:2) https://codehike.org
-const hi = 'hi'
-const hi = 'hi'
-const hi = 'hi'
-// link[2:18] https://codehike.org
-hello world
-hello
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
 ```
+
+</CH.Code>
+
+<CH.Code>
+
+```js
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+```
+
+</CH.Code>
+
+### with width
+
+<CH.Code debug style={{width: 400}}>
+
+```js
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+```
+
+</CH.Code>
+
+<CH.Code style={{width: 400}}>
+
+```js
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+```
+
+</CH.Code>
+
+### with zoom
+
+<CH.Code debug maxZoom={0.7} minZoom={0.7}>
+
+```js
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+```
+
+</CH.Code>
+
+<CH.Code maxZoom={0.7} minZoom={0.7}>
+
+```js
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+```
+
+</CH.Code>
+
+### with line numbers
+
+<CH.Code debug lineNumbers>
+
+```js
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+```
+
+</CH.Code>
+
+<CH.Code lineNumbers>
+
+```js
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+```
+
+</CH.Code>

packages/mdx/dev/files.ts

@@ -10,16 +10,14 @@ export async function getFiles() {
     .filter(file => file.endsWith(".mdx"))
     .map(filename => filename.slice(0, -4))
 }
-export async function getContent(filename: string) {
-  const file = await fs.promises.readFile(
-    `./dev/content/${filename}.mdx`,
-    "utf8"
-  )
+export async function getFile(filename: string) {
+  const path = `./dev/content/${filename}.mdx`
+  const file = await fs.promises.readFile(path, "utf8")
 
-  return file
+  return { value: file, path }
 }
 
-export async function getCode(file: string, config = {}) {
+export async function getCode(file: any, config = {}) {
   let debugLink = ""
 
   const debugCompile = withDebugger(compile, {
@@ -36,6 +34,7 @@ export async function getCode(file: string, config = {}) {
           remarkCodeHike,
           {
             autoImport: false,
+            skipLanguages: ["", "mermaid"],
             showCopyButton: true,
             theme,
             ...config,

packages/mdx/pages/[name].tsx

@@ -1,7 +1,7 @@
 import { runSync } from "@mdx-js/mdx"
 import * as runtime from "react/jsx-runtime.js"
 import { CH } from "../src/components"
-import { getCode, getContent, getFiles } from "../dev/files"
+import { getCode, getFile, getFiles } from "../dev/files"
 import { ClickToComponent } from "click-to-react-component"
 import { Layout } from "../dev/layout"
 
@@ -17,8 +17,8 @@ export async function getStaticProps({ params }) {
   const { name = "test" } = params
 
   const files = await getFiles()
-  const content = await getContent(name)
-  const { code, debugLink } = await getCode(content)
+  const file = await getFile(name)
+  const { code, debugLink } = await getCode(file)
   return {
     props: {
       tests: files,

packages/mdx/src/mdx-client/code.tsx

@@ -55,6 +55,7 @@ export function mergeCodeConfig<T>(
       showExpandButton == null
         ? props.codeConfig?.showExpandButton
         : showExpandButton,
+    debug: props.debug ?? props.codeConfig?.debug,
   }
   return { ...rest, codeConfig }
 }

packages/mdx/src/mdx-client/scrollycoding.scss

@@ -2,11 +2,11 @@
   display: flex;
   position: relative;
   margin: 1rem 0;
+  gap: 1rem;
 }
 
 .ch-scrollycoding-content {
   box-sizing: border-box;
-  padding-right: 16px;
   flex: 1;
 }
 

packages/mdx/src/mdx-client/scrollycoding.tsx

@@ -11,13 +11,17 @@ export function Scrollycoding({
   codeConfig,
   presetConfig,
   start = 0,
+  className,
+  style,
   ...rest
 }: {
   children: React.ReactNode
   editorSteps: EditorStep[]
   codeConfig: EditorProps["codeConfig"]
   start?: number
   presetConfig?: PresetConfig
+  className?: string
+  style?: React.CSSProperties
 }) {
   const stepsChildren = React.Children.toArray(children)
 
@@ -58,7 +62,8 @@ export function Scrollycoding({
     <section
       className={`ch-scrollycoding ${
         presetConfig ? "ch-scrollycoding-with-preview" : ""
-      }`}
+      } ${className || ""}`}
+      style={style}
     >
       <div className="ch-scrollycoding-content">
         <Scroller onStepChange={onStepChange}>

packages/mdx/src/mdx-client/section.tsx

@@ -16,9 +16,13 @@ const SectionContext = React.createContext<{
 
 export function Section({
   children,
+  className,
+  style,
   ...props
 }: {
   children: React.ReactNode
+  className?: string
+  style?: React.CSSProperties
 }) {
   const [state, setState] = React.useState<any>(props)
 
@@ -45,7 +49,10 @@ export function Section({
   const { selectedId, ...rest } = state
 
   return (
-    <section>
+    <section
+      className={`ch-section ${className || ""}`}
+      style={style}
+    >
       <SectionContext.Provider
         value={{
           props: rest,

packages/mdx/src/mdx-client/slideshow.tsx

@@ -9,13 +9,17 @@ export function Slideshow({
   codeConfig,
   presetConfig,
   code,
+  className,
+  style,
   ...rest
 }: {
   children: React.ReactNode
   editorSteps: EditorStep[]
   codeConfig: EditorProps["codeConfig"]
   presetConfig?: PresetConfig
   code?: EditorProps["codeConfig"]
+  className?: string
+  style?: React.CSSProperties
 }) {
   const stepsChildren = React.Children.toArray(children)
 
@@ -42,7 +46,8 @@ export function Slideshow({
     <div
       className={`ch-slideshow ${
         presetConfig ? "ch-slideshow-with-preview" : ""
-      }`}
+      } ${className || ""}`}
+      style={style}
     >
       <div className="ch-slideshow-slide">
         <InnerCode

packages/mdx/src/mdx-client/spotlight.scss

@@ -1,13 +1,12 @@
 .ch-spotlight {
   display: flex;
-  gap: 0.5rem;
+  gap: 1.1rem;
   margin: 1rem 0;
 }
 
 .ch-spotlight-tabs {
   display: flex;
   flex-flow: column;
-  margin-right: 10px;
   flex: 1;
   gap: 0.5rem;
   align-items: stretch;

packages/mdx/src/mdx-client/spotlight.tsx

@@ -9,13 +9,17 @@ export function Spotlight({
   codeConfig,
   start = 0,
   presetConfig,
+  className,
+  style,
   ...rest
 }: {
   children: React.ReactNode
   editorSteps: EditorStep[]
   codeConfig: EditorProps["codeConfig"]
   start?: number
   presetConfig?: PresetConfig
+  className?: string
+  style?: React.CSSProperties
 }) {
   const stepsChildren = React.Children.toArray(children)
 
@@ -38,10 +42,11 @@ export function Spotlight({
     stepsChildren[0] as React.ReactElement
 
   return (
-    <div
+    <section
       className={`ch-spotlight ${
         presetConfig ? "ch-spotlight-with-preview" : ""
-      }`}
+      } ${className || ""}`}
+      style={style}
     >
       <div className="ch-spotlight-tabs">
         {headerElement?.props?.children ? (
@@ -83,6 +88,6 @@ export function Spotlight({
           />
         )}
       </div>
-    </div>
+    </section>
   )
 }

packages/mdx/src/mini-editor/code-browser.tsx

@@ -1,6 +1,6 @@
 import { CodeFile } from "./editor-shift"
 import { IRawTheme } from "vscode-textmate"
-import { ColorName, getColor } from "utils"
+import { ColorName, getColor, getColorScheme } from "utils"
 import React from "react"
 
 export function CodeBrowser({
@@ -189,15 +189,20 @@ function Content({
           theme,
           ColorName.SelectionBackground
         ),
+        colorScheme: getColorScheme(theme),
       }}
     >
       {file.code.lines.map((line, i) => (
         <div key={i}>
-          {line.tokens.map((token, i) => (
-            <span key={i} {...token.props}>
-              {token.content}
-            </span>
-          ))}
+          {line.tokens.length === 0 ? (
+            <br />
+          ) : (
+            line.tokens.map((token, i) => (
+              <span key={i} {...token.props}>
+                {token.content}
+              </span>
+            ))
+          )}
         </div>
       ))}
     </div>