Add browser example

pomber · pomber · commit ea2f836f0745 · 2022-04-10T15:15:15.000Z
diff --git a/examples/browser/index.html b/examples/browser/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Code Hike in the browser</title>
+    <link
+      rel="stylesheet"
+      href="https://esm.sh/@code-hike/mdx@0.4.0--canary.154.285c03a.0/dist/index.css"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script type="module">
+      import React from "https://esm.sh/react"
+      import ReactDOM from "https://esm.sh/react-dom"
+      import { evaluate } from "https://esm.sh/@mdx-js/mdx?dev"
+      import * as runtime from "https://esm.sh/react/jsx-runtime.js"
+
+      import { remarkCodeHike } from "https://esm.sh/@code-hike/mdx@0.4.0--canary.154.285c03a.0/dist/index.browser.mjs"
+      import { CH } from "https://esm.sh/@code-hike/mdx@0.4.0--canary.154.285c03a.0/components"
+      import theme from "https://esm.sh/shiki@0.10.1/themes/nord.json" assert { type: "json" }
+
+      const mdx = `# Test
+
+      ~~~python hello.py mark=1[22:30]
+      print("Rendered with Code Hike")
+      ~~~
+      `
+
+      const { default: Content } = await evaluate(mdx, {
+        ...runtime,
+        remarkPlugins: [[remarkCodeHike, { autoImport: false, theme }]],
+      })
+
+      const App = () => {
+        return React.createElement(Content, { components: { CH } })
+      }
+
+      ReactDOM.render(React.createElement(App), document.getElementById("root"))
+    </script>
+  </body>
+</html>
diff --git a/packages/mdx/rollup.config.js b/packages/mdx/rollup.config.js
@@ -48,7 +48,7 @@ export default function makeConfig(commandOptions) {
         }),
       ],
     },
-    // for the browser esm we need to replace shiki with shiki/dist/shiki.browser.mjs
+    // for the browser esm we need to replace shiki with shiki/dist/index.browser.mjs
     // https://github.com/shikijs/shiki/issues/131#issuecomment-1094281851
     {
       input: `src/index.tsx`,
@@ -63,9 +63,8 @@ export default function makeConfig(commandOptions) {
         replace({
           delimiters: ["", ""],
           values: {
-            '"shiki"': JSON.stringify(
-              "shiki/dist/index.browser.mjs"
-            ),
+            'from "shiki"':
+              'from "shiki/dist/index.browser.mjs"',
           },
         }),
         json({ compact: true }),
