Mercurial

annotate mrjunejune/src/tools/markdown_to_html/index.html @ 258:60a876c4587a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 05:25:40 -0700
parents 4c725fde6999
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
76
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
1 <!DOCTYPE html>
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
2 <html lang="en">
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
3 <head>
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
4 <meta charset="UTF-8">
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
6 <title>Markdown to HTML Converter</title>
80
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 79
diff changeset
7 {{/parts/base_head.html}}
76
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
8 <link rel="stylesheet" href="markdown_to_html/index.css" />
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
9 </head>
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
10 <body>
78
June Park <parkjune1995@gmail.com>
parents: 76
diff changeset
11 {{/parts/header.html}}
76
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
12 <div class="header">
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
13 <h1>Markdown to HTML Converter</h1>
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
14 </div>
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
15
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
16 <div class="container">
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
17 <div class="panel">
258
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 214
diff changeset
18 <zen-field appearance="plain" size="md">
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 214
diff changeset
19 <label class="label" for="input">Markdown Input</label>
76
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
20 <textarea id="input" placeholder="Type your markdown here..."># Welcome to Markdown Converter
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
21
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
22 ## Features
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
23
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
24 This converter supports:
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
25
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
26 - **Bold text** and *italic text*
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
27 - [Links](https://example.com)
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
28 - `inline code`
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
29 - ~~strikethrough~~
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
30
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
31 ### Lists
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
32
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
33 1. Ordered lists
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
34 2. Like this one
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
35 3. With numbers
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
36
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
37 - Unordered lists
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
38 - Use dashes
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
39 - Or asterisks
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
40
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
41 ### Code Blocks
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
42
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
43 ```
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
44 function example() {
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
45 return "Hello World";
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
46 }
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
47 ```
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
48
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
49 ### Blockquotes
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
50
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
51 > This is a blockquote
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
52 > It can span multiple lines
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
53
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
54 ---
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
55
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
56 ### Images
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
57
214
4c725fde6999 [MrJuneJune] Fixed linkedin path and images modules.
MrJuneJune <me@mrjunejune.com>
parents: 184
diff changeset
58 ![Alt text](https://mrjunejune.com/public/epi_favicon.svg)
76
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
59
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
60 **Try editing this text!**</textarea>
258
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 214
diff changeset
61 </zen-field>
76
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
62 </div>
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
63
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
64 <div class="panel">
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
65 <div class="title">
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
66 <div class="label">HTML Output</div>
258
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 214
diff changeset
67 <zen-button appearance="plain" size="sm">
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 214
diff changeset
68 <button id="copy"> Copy </button>
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 214
diff changeset
69 </zen-button>
76
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
70 </div>
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
71 <div id="output"></div>
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
72 </div>
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
73 </div>
93
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
74 {{/parts/footer.html}}
214
4c725fde6999 [MrJuneJune] Fixed linkedin path and images modules.
MrJuneJune <me@mrjunejune.com>
parents: 184
diff changeset
75 <script type="module">
4c725fde6999 [MrJuneJune] Fixed linkedin path and images modules.
MrJuneJune <me@mrjunejune.com>
parents: 184
diff changeset
76 import createModule from '/markdown_to_html_bin.js';
4c725fde6999 [MrJuneJune] Fixed linkedin path and images modules.
MrJuneJune <me@mrjunejune.com>
parents: 184
diff changeset
77
4c725fde6999 [MrJuneJune] Fixed linkedin path and images modules.
MrJuneJune <me@mrjunejune.com>
parents: 184
diff changeset
78 // Get DOM elements
4c725fde6999 [MrJuneJune] Fixed linkedin path and images modules.
MrJuneJune <me@mrjunejune.com>
parents: 184
diff changeset
79 const input = document.getElementById('input');
4c725fde6999 [MrJuneJune] Fixed linkedin path and images modules.
MrJuneJune <me@mrjunejune.com>
parents: 184
diff changeset
80 const output = document.getElementById('output');
4c725fde6999 [MrJuneJune] Fixed linkedin path and images modules.
MrJuneJune <me@mrjunejune.com>
parents: 184
diff changeset
81 const copy = document.getElementById('copy');
4c725fde6999 [MrJuneJune] Fixed linkedin path and images modules.
MrJuneJune <me@mrjunejune.com>
parents: 184
diff changeset
82
4c725fde6999 [MrJuneJune] Fixed linkedin path and images modules.
MrJuneJune <me@mrjunejune.com>
parents: 184
diff changeset
83 // Modern Emscripten exports a factory function that returns a Promise
4c725fde6999 [MrJuneJune] Fixed linkedin path and images modules.
MrJuneJune <me@mrjunejune.com>
parents: 184
diff changeset
84 createModule().then(Module => {
184
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
85 // Get raw pointer so we can free it after use
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
86 const markdownToHtmlPtr = Module.cwrap('markdown_to_html', 'number', ['string']);
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
87 const markdownFree = Module.cwrap('markdown_free', null, ['number']);
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
88
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
89 function convert() {
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
90 output.innerHTML = '';
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
91 const markdown = input.value;
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
92
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
93 // Get pointer, convert to string, then free the C memory
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
94 const ptr = markdownToHtmlPtr(markdown);
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
95 const html = Module.UTF8ToString(ptr);
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
96 markdownFree(ptr);
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
97
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
98 output.innerHTML = html;
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
99 }
76
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
100
184
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
101 input.addEventListener('input', convert);
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
102 convert();
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
103
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
104 copy.addEventListener('click', () => {
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
105 const htmlBlob = new Blob([output.innerHTML], { type: 'text/html'});
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
106 const textBlob = new Blob([output.innerText], { type: 'text/plain'});
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
107 const data = [new ClipboardItem({
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
108 'text/html': htmlBlob,
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
109 'text/plain': textBlob
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
110 })];
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
111 navigator.clipboard.write(data).then(() => {
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
112 copy.textContent = "Copied!";
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
113 setTimeout(() => {
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
114 copy.textContent = "Copy";
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
115 copy.classList.remove('success');
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
116 }, 1000);
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
117 }).catch(err => {
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
118 console.error('Failed to copy: ', err);
8c74204fd362 [MD to HTML] Updated so it can be used through readme to html
MrJuneJune <me@mrjunejune.com>
parents: 93
diff changeset
119 });
76
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
120 });
214
4c725fde6999 [MrJuneJune] Fixed linkedin path and images modules.
MrJuneJune <me@mrjunejune.com>
parents: 184
diff changeset
121 });
76
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
122 </script>
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
123 </body>
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
124 </html>