examples/browser/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Code Hike in the browser</title>
    <link
      rel="stylesheet"
      href="https://esm.sh/@code-hike/mdx@0.9.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?bundle"
      import * as runtime from "https://esm.sh/react/jsx-runtime.js"

      import { remarkCodeHike } from "https://esm.sh/@code-hike/mdx@0.9.0/dist/index.browser.mjs"
      import { CH } from "https://esm.sh/@code-hike/mdx@0.9.0/components"

      const mdx = `# Test

<CH.Code>

~~~python hello.py mark=1[22:30]
print("Rendered with Code Hike")
~~~

~~~js hello.js mark=1[23:36]
console.log("Rendered with Code Hike")
~~~

</CH.Code>
      `

      const { default: Content } = await evaluate(mdx, {
        ...runtime,
        remarkPlugins: [
          [remarkCodeHike, { autoImport: false, theme: "dracula" }],
        ],
      })

      const App = () => {
        return React.createElement(Content, { components: { CH } })
      }

      ReactDOM.render(React.createElement(App), document.getElementById("root"))
    </script>
  </body>
</html>