experimental/playground.html

<!DOCTYPE html>
<html>

<head>
  <title>SMotaal's Markup (Playground)</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <meta http-equiv="Content-Security-Policy"
        content="default-src 'self' 'unsafe-inline' https://* http://*.smotaal.io; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://unpkg.com/@smotaal.io/ https://*.smotaal.io; connect-src *;" />
  <meta name="theme-color" content="#999">
  <meta name="color-scheme" content="dark light">
  <link rel="manifest" href="/markup/manifest.webmanifest">
  <link rel="example" href="./example">
  <script>(typeof self !== 'object' || !self || self.globalThis === self || (self.globalThis = self))</script>
  <script type="module" src="./playground.js"></script>
  <script type="module" src="/markup/packages/tokenizer/browser/experimental.js"></script>
  <script type="module" src="/markup/packages/markup/browser/demo.js"></script>
  <link rel="stylesheet" href="/fonts/iosevka.css" />
  <link rel="stylesheet" href="/markup/packages/markup/browser/demo.css" />
  <style type="text/css">
    :root {
      color-adjust: exact;
      forced-color-adjust: none;
      forced-colors: none;
    }
  </style>
</head>

<body>
  <pre id="source-code" class="markup-container"></pre>
  <script type="module">
    import bootstrap from '/markup/packages/markup/browser/demo.js';
    import markup from '/markup/packages/tokenizer/browser/experimental.extended.js';

    (async () => {
      try {
        const experiment = await import('./playground.js');
        const playground = bootstrap(markup, await experiment.default(markup));
        if (playground && playground.sourceURL) console.log('example: %O', await (await fetch(playground.sourceURL)).text());
      } catch (exception) {
        (document.body.querySelector('.markup-container') || document.body).appendChild(new Text(`${exception}`));
      }
    })()
  </script>
</body>

</html>