Mercurial

comparison mrjunejune/pages/tools/markdown_to_html/index.html @ 76:35b1abc37969

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updating my website to use seobeo library.
author June Park <parkjune1995@gmail.com>
date Wed, 31 Dec 2025 14:11:21 -0800
parents
children e7bf9e002850
comparison
equal deleted inserted replaced
75:ae6a88e6e484 76:35b1abc37969
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Markdown to HTML Converter</title>
7 <link rel="stylesheet" href="/base.css" />
8 <link rel="stylesheet" href="markdown_to_html/index.css" />
9 </head>
10 <body>
11 <div id="header"></div>
12 <div class="header">
13 <h1>Markdown to HTML Converter</h1>
14 </div>
15
16 <div class="container">
17 <div class="panel">
18 <div class="label">Markdown Input</div>
19 <textarea id="input" placeholder="Type your markdown here..."># Welcome to Markdown Converter
20
21 ## Features
22
23 This converter supports:
24
25 - **Bold text** and *italic text*
26 - [Links](https://example.com)
27 - `inline code`
28 - ~~strikethrough~~
29
30 ### Lists
31
32 1. Ordered lists
33 2. Like this one
34 3. With numbers
35
36 - Unordered lists
37 - Use dashes
38 - Or asterisks
39
40 ### Code Blocks
41
42 ```
43 function example() {
44 return "Hello World";
45 }
46 ```
47
48 ### Blockquotes
49
50 > This is a blockquote
51 > It can span multiple lines
52
53 ---
54
55 ### Images
56
57 ![Alt text](https://via.placeholder.com/150)
58
59 **Try editing this text!**</textarea>
60 </div>
61
62 <div class="panel">
63 <div class="title">
64 <div class="label">HTML Output</div>
65 <button id="copy"> Copy </button>
66 </div>
67 <div id="output"></div>
68 </div>
69 </div>
70
71 <script src="/dark-mode.js"></script>
72 <script src="/markdown_to_html.js"></script>
73 <script>
74 function convert() {
75 output.innerHTML = '';
76 const markdown = input.value;
77 renderMarkdown(output, markdown);
78 }
79 input.addEventListener('input', convert);
80
81 convert();
82
83 copy.addEventListener('click', () => {
84 const htmlBlob = new Blob([output.innerHTML], { type: 'text/html'});
85 const textBlob = new Blob([output.innerText], { type: 'text/plain'});
86 const data = [new ClipboardItem({
87 'text/html': htmlBlob,
88 'text/plain': textBlob
89 })];
90 navigator.clipboard.write(data).then(() => {
91 copy.textContent = "Copied!";
92 setTimeout(() => {
93 copy.textContent = "Copy";
94 copy.classList.remove('success');
95 }, 1000);
96 }).catch(err => {
97 console.error('Failed to copy: ', err);
98 });
99 });
100 </script>
101 </body>
102 <script src="/index.js"></script>
103 </html>