Line numbers

packages/mdx/src/client/annotations.tsx

@@ -31,7 +31,10 @@ function Box({
           tc.scope?.includes("string")
         )?.settings?.foreground || "yellow"
   return (
-    <span style={{ outline: `2px solid ${border}` }}>
+    <span
+      className="ch-code-box-annotation"
+      style={{ outline: `2px solid ${border}` }}
+    >
       {children}
     </span>
   )
@@ -63,8 +66,18 @@ function Background({
         background: bg,
         // cursor: "pointer",
       }}
-      // onClick={_ => alert("clicked")}
+      className="ch-code-bg-annotation"
     >
+      <span
+        className="ch-code-bg-annotation-border"
+        style={{
+          background: "#00a2d3",
+          width: "3px",
+          height: "100%",
+          position: "absolute",
+          left: 0,
+        }}
+      />
       {children}
     </div>
   )

packages/mdx/src/plugin.ts

@@ -6,8 +6,15 @@ import { transformSpotlights } from "./plugin/spotlight"
 import { transformScrollycodings } from "./plugin/scrollycoding"
 import visit from "unist-util-visit"
 import { transformSlideshows } from "./plugin/slideshow"
+import { valueToEstree } from "./plugin/to-estree"
+import { CH_CODE_CONFIG_VAR_NAME } from "./plugin/unist-utils"
 
-export function remarkCodeHike({ theme }: { theme: any }) {
+type CodeHikeConfig = {
+  theme: any
+  lineNumbers?: boolean
+}
+
+export function remarkCodeHike(config: CodeHikeConfig) {
   return async (tree: Node) => {
     // TODO add opt-in config
     let hasCodeHikeImport = false
@@ -21,24 +28,60 @@ export function remarkCodeHike({ theme }: { theme: any }) {
       }
     })
 
+    addConfig(tree as Parent, config)
+
     if (!hasCodeHikeImport) {
       addImportNode(tree as Parent)
     }
 
     try {
-      await transformScrollycodings(tree, { theme })
-      await transformSpotlights(tree, { theme })
-      await transformSlideshows(tree, { theme })
-      await transformSections(tree, { theme })
-      await transformEditorNodes(tree, { theme })
-      await transformCodeNodes(tree, { theme })
+      await transformScrollycodings(tree, config)
+      await transformSpotlights(tree, config)
+      await transformSlideshows(tree, config)
+      await transformSections(tree, config)
+      await transformEditorNodes(tree, config)
+      await transformCodeNodes(tree, config)
     } catch (e) {
       console.error("error running remarkCodeHike", e)
       throw e
     }
   }
 }
 
+function addConfig(tree: Parent, config: CodeHikeConfig) {
+  tree.children.unshift({
+    type: "mdxjsEsm",
+    value: "export const chCodeConfig = {}",
+    data: {
+      estree: {
+        type: "Program",
+        body: [
+          {
+            type: "ExportNamedDeclaration",
+            declaration: {
+              type: "VariableDeclaration",
+              declarations: [
+                {
+                  type: "VariableDeclarator",
+                  id: {
+                    type: "Identifier",
+                    name: CH_CODE_CONFIG_VAR_NAME,
+                  },
+                  init: valueToEstree(config),
+                },
+              ],
+              kind: "const",
+            },
+            specifiers: [],
+            source: null,
+          },
+        ],
+        sourceType: "module",
+      },
+    },
+  })
+}
+
 function addImportNode(tree: Parent) {
   tree.children.unshift({
     type: "mdxjsEsm",

packages/mdx/src/plugin/code.ts

@@ -6,6 +6,7 @@ import {
   toJSX,
   NodeInfo,
   splitChildren,
+  CH_CODE_CONFIG_PLACEHOLDER,
 } from "./unist-utils"
 import { CodeStep } from "@code-hike/smooth-code"
 import { EditorProps } from "@code-hike/mini-editor"
@@ -83,9 +84,7 @@ async function mapCode(
       heightRatio: 1,
     },
     files: [file],
-    codeConfig: {
-      theme: config.theme,
-    },
+    codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
   }
   return props
 }
@@ -136,9 +135,7 @@ export async function mapEditor(
         }
       : undefined,
     files: allFiles as any,
-    codeConfig: {
-      theme: config.theme,
-    },
+    codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
   }
   return props
 }

packages/mdx/src/plugin/scrollycoding.ts

@@ -1,4 +1,8 @@
-import { visitAsync, toJSX } from "./unist-utils"
+import {
+  visitAsync,
+  toJSX,
+  CH_CODE_CONFIG_PLACEHOLDER,
+} from "./unist-utils"
 import { Node, Parent } from "unist"
 import { extractStepsInfo } from "./steps"
 import { getPresetConfig } from "./preview"
@@ -33,7 +37,7 @@ async function transformScrollycoding(
 
   toJSX(node, {
     props: {
-      codeConfig: { theme },
+      codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
       editorSteps: editorSteps,
       presetConfig,
     },

packages/mdx/src/plugin/slideshow.ts

@@ -1,4 +1,8 @@
-import { visitAsync, toJSX } from "./unist-utils"
+import {
+  visitAsync,
+  toJSX,
+  CH_CODE_CONFIG_PLACEHOLDER,
+} from "./unist-utils"
 import { Node, Parent } from "unist"
 import { extractStepsInfo } from "./steps"
 import { getPresetConfig } from "./preview"
@@ -33,7 +37,7 @@ async function transformSlideshow(
 
   toJSX(node, {
     props: {
-      codeConfig: { theme },
+      codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
       editorSteps: editorSteps,
       presetConfig,
     },

packages/mdx/src/plugin/spotlight.ts

@@ -1,4 +1,8 @@
-import { visitAsync, toJSX } from "./unist-utils"
+import {
+  visitAsync,
+  toJSX,
+  CH_CODE_CONFIG_PLACEHOLDER,
+} from "./unist-utils"
 import { Node, Parent } from "unist"
 import { extractStepsInfo } from "./steps"
 import { getPresetConfig } from "./preview"
@@ -34,7 +38,7 @@ async function transformSpotlight(
 
   toJSX(node, {
     props: {
-      codeConfig: { theme },
+      codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
       editorSteps: editorSteps,
       presetConfig,
     },

packages/mdx/src/plugin/unist-utils.ts

@@ -46,6 +46,9 @@ export async function visitAsync(
   await Promise.all(promises)
 }
 
+export const CH_CODE_CONFIG_PLACEHOLDER = "CH_CodeConfig" as any
+export const CH_CODE_CONFIG_VAR_NAME = "chCodeConfig"
+
 export function toJSX(
   node: Node,
   {
@@ -73,25 +76,51 @@ export function toJSX(
     if (props[key] === undefined) {
       return
     }
-    ;(node as any).attributes.push({
-      type: "mdxJsxAttribute",
-      name: key,
-      value: {
-        type: "mdxJsxAttributeValueExpression",
-        value: JSON.stringify(props[key]),
-        data: {
-          estree: {
-            type: "Program",
-            body: [
-              {
-                type: "ExpressionStatement",
-                expression: valueToEstree(props[key]),
-              },
-            ],
-            sourceType: "module",
+    if (props[key] === CH_CODE_CONFIG_PLACEHOLDER) {
+      ;(node as any).attributes.push({
+        type: "mdxJsxAttribute",
+        name: key,
+        value: {
+          type: "mdxJsxAttributeValueExpression",
+          value: CH_CODE_CONFIG_VAR_NAME,
+          data: {
+            estree: {
+              type: "Program",
+              body: [
+                {
+                  type: "ExpressionStatement",
+                  expression: {
+                    type: "Identifier",
+                    name: CH_CODE_CONFIG_VAR_NAME,
+                  },
+                },
+              ],
+              sourceType: "module",
+            },
           },
         },
-      },
-    })
+      })
+    } else {
+      ;(node as any).attributes.push({
+        type: "mdxJsxAttribute",
+        name: key,
+        value: {
+          type: "mdxJsxAttributeValueExpression",
+          value: JSON.stringify(props[key]),
+          data: {
+            estree: {
+              type: "Program",
+              body: [
+                {
+                  type: "ExpressionStatement",
+                  expression: valueToEstree(props[key]),
+                },
+              ],
+              sourceType: "module",
+            },
+          },
+        },
+      })
+    }
   })
 }

packages/mini-editor/src/editor-frame.tsx

@@ -1,8 +1,11 @@
 import React from "react"
 import { FrameButtons } from "@code-hike/mini-frame"
 import { useClasser, Classes } from "@code-hike/classer"
-import { EditorTheme } from "@code-hike/smooth-code/dist/themes"
-import { getColor, ColorName } from "./theme-colors"
+import {
+  EditorTheme,
+  getColor,
+  ColorName,
+} from "@code-hike/utils"
 
 export {
   EditorFrameProps,

packages/mini-editor/src/index.scss

@@ -1,5 +1,6 @@
 @import "~@code-hike/mini-frame/dist/index.scss";
 @import "~@code-hike/mini-terminal/dist/index.scss";
+@import "~@code-hike/smooth-code/dist/index.scss";
 
 /** tabs */
 

packages/playground/content/test.mdx

@@ -1,3 +1,9 @@
 # Hello
 
-<foo x={<div />} />
+export const pi = { foo: 1 }
+
+<pre>{JSON.stringify(chCodeConfig, null, 2)}</pre>
+
+```js
+console.log(1)
+```

packages/playground/next.config.js

@@ -1,4 +1,29 @@
-module.exports = {
-  target: "serverless",
+const { remarkCodeHike } = require("@code-hike/mdx")
+const theme = require("shiki/themes/monokai.json")
+const withBundleAnalyzer = require("@next/bundle-analyzer")(
+  {
+    enabled: process.env.ANALYZE === "true",
+    // enabled: true,
+  }
+)
+module.exports = withBundleAnalyzer({
   experimental: { esmExternals: true },
-}
+  pageExtensions: ["md", "mdx", "tsx", "ts", "jsx", "js"],
+  webpack(config, options) {
+    config.module.rules.push({
+      test: /\.mdx?$/,
+      use: [
+        // The default `babel-loader` used by Next:
+        options.defaultLoaders.babel,
+        {
+          loader: "@mdx-js/loader",
+          /** @type {import('@mdx-js/loader').Options} */
+          options: {
+            remarkPlugins: [[remarkCodeHike, { theme }]],
+          },
+        },
+      ],
+    })
+    return config
+  },
+})

packages/playground/package.json

@@ -8,6 +8,9 @@
   },
   "dependencies": {
     "@code-hike/mdx": "^0.3.0-next.0",
+    "@mdx-js/loader": "^2.0.0-rc.2",
+    "@mdx-js/react": "^2.0.0-rc.2",
+    "@next/bundle-analyzer": "^12.0.7",
     "esbuild": "^0.13.2",
     "mdx-bundler": "^6.0.1",
     "next": "^11.1.2",

packages/playground/pages/size-test.mdx

@@ -0,0 +1,9 @@
+# Hello
+
+```js
+function lorem(ipsum) {}
+```
+
+```js
+function lorem(ipsum) {}
+```

packages/playground/src/page-data.js

@@ -51,12 +51,18 @@ export async function toProps({ demo, theme }) {
     ).then(module => module.default)
 
     postCodeHike = await bundle(mdxSource, files, [
-      [remarkCodeHike, { theme: loadedTheme }],
+      [
+        remarkCodeHike,
+        { theme: loadedTheme, lineNumbers: true },
+      ],
       remarkShowTree,
     ])
 
     result = await bundle(mdxSource, files, [
-      [remarkCodeHike, { theme: loadedTheme }],
+      [
+        remarkCodeHike,
+        { theme: loadedTheme, lineNumbers: true },
+      ],
     ])
   } catch (e) {
     console.error("remark-code-hike error", e)