Mercurial

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown to HTML Converter</title>
    {{/parts/base_head.html}}
    <link rel="stylesheet" href="markdown_to_html/index.css" />
</head>
<body>
    {{/parts/header.html}}
    <div class="header">
        <h1>Markdown to HTML Converter</h1>
    </div>

    <div class="container">
        <div class="panel">
          <zen-field appearance="plain" size="md">
            <label class="label" for="input">Markdown Input</label>
            <textarea id="input" placeholder="Type your markdown here..."># Welcome to Markdown Converter

## Features

This converter supports:

- **Bold text** and *italic text*
- [Links](https://example.com)
- `inline code`
- ~~strikethrough~~

### Lists

1. Ordered lists
2. Like this one
3. With numbers

- Unordered lists
- Use dashes
- Or asterisks

### Code Blocks

```
function example() {
    return "Hello World";
}
```

### Blockquotes

> This is a blockquote
> It can span multiple lines

---

### Images

![Alt text](https://mrjunejune.com/public/epi_favicon.svg)

**Try editing this text!**</textarea>
          </zen-field>
        </div>

        <div class="panel">
            <div class="title">
              <div class="label">HTML Output</div>
              <zen-button appearance="plain" size="sm">
                <button id="copy"> Copy </button>
              </zen-button>
            </div>
            <div id="output"></div>
        </div>
    </div>
    {{/parts/footer.html}}
    <script type="module">
        import createModule from '/markdown_to_html_bin.js';

        // Get DOM elements
        const input = document.getElementById('input');
        const output = document.getElementById('output');
        const copy = document.getElementById('copy');

        // Modern Emscripten exports a factory function that returns a Promise
        createModule().then(Module => {
          // Get raw pointer so we can free it after use
          const markdownToHtmlPtr = Module.cwrap('markdown_to_html', 'number', ['string']);
          const markdownFree = Module.cwrap('markdown_free', null, ['number']);

          function convert() {
            output.innerHTML = '';
            const markdown = input.value;

            // Get pointer, convert to string, then free the C memory
            const ptr = markdownToHtmlPtr(markdown);
            const html = Module.UTF8ToString(ptr);
            markdownFree(ptr);

            output.innerHTML = html;
          }

          input.addEventListener('input', convert);
          convert();

          copy.addEventListener('click', () => {
            const htmlBlob = new Blob([output.innerHTML], { type: 'text/html'});
            const textBlob = new Blob([output.innerText], { type: 'text/plain'});
            const data = [new ClipboardItem({
              'text/html': htmlBlob,
              'text/plain': textBlob
            })];
            navigator.clipboard.write(data).then(() => {
              copy.textContent = "Copied!";
              setTimeout(() => {
                copy.textContent = "Copy";
                copy.classList.remove('success');
              }, 1000);
            }).catch(err => {
              console.error('Failed to copy: ', err);
            });
          });
        });
    </script>
</body>
</html>
author	MrJuneJune <me@mrjunejune.com>
date	Mon, 17 Aug 2026 22:22:36 -0700
parents	60a876c4587a
children