Mercurial

comparison mrjunejune/pages/markdown_to_html/index.html @ 64:a30944e5719e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Added vibe coded markdown to html script since it is useful for me. Updated Dowa so that it can be compiled without dirnet for windows.
author June Park <parkjune1995@gmail.com>
date Tue, 23 Dec 2025 15:18:46 -0800
parents
children
comparison
equal deleted inserted replaced
63:fff1b048dda6 64:a30944e5719e
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 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
16 line-height: 1.6;
17 padding: 20px;
18 max-width: 1200px;
19 margin: 0 auto;
20 background: #f5f5f5;
21 }
22
23 .container {
24 display: grid;
25 grid-template-columns: 1fr 1fr;
26 gap: 20px;
27 margin-top: 20px;
28 }
29
30 .panel {
31 background: white;
32 border-radius: 8px;
33 padding: 20px;
34 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
35 }
36
37 h1 {
38 color: #333;
39 margin-bottom: 20px;
40 }
41
42 textarea {
43 width: 100%;
44 height: 500px;
45 padding: 15px;
46 border: 1px solid #ddd;
47 border-radius: 4px;
48 font-family: 'Courier New', monospace;
49 font-size: 14px;
50 resize: vertical;
51 }
52
53 #output {
54 min-height: 500px;
55 padding: 15px;
56 border: 1px solid #ddd;
57 border-radius: 4px;
58 background: #fafafa;
59 }
60
61 #output h1, #output h2, #output h3, #output h4, #output h5, #output h6 {
62 margin: 20px 0 10px 0;
63 color: #333;
64 }
65
66 #output h1 { font-size: 2em; }
67 #output h2 { font-size: 1.5em; }
68 #output h3 { font-size: 1.3em; }
69
70 #output p {
71 margin: 10px 0;
72 }
73
74 #output ul, #output ol {
75 margin: 10px 0;
76 padding-left: 30px;
77 }
78
79 #output li {
80 margin: 5px 0;
81 }
82
83 #output code {
84 background: #f4f4f4;
85 padding: 2px 6px;
86 border-radius: 3px;
87 font-family: 'Courier New', monospace;
88 font-size: 0.9em;
89 }
90
91 #output pre {
92 background: #282c34;
93 color: #abb2bf;
94 padding: 15px;
95 border-radius: 4px;
96 overflow-x: auto;
97 margin: 10px 0;
98 }
99
100 #output pre code {
101 background: none;
102 color: inherit;
103 padding: 0;
104 }
105
106 #output blockquote {
107 border-left: 4px solid #ddd;
108 padding-left: 15px;
109 margin: 10px 0;
110 color: #666;
111 font-style: italic;
112 }
113
114 #output a {
115 color: #0066cc;
116 text-decoration: none;
117 }
118
119 #output a:hover {
120 text-decoration: underline;
121 }
122
123 #output hr {
124 border: none;
125 border-top: 2px solid #ddd;
126 margin: 20px 0;
127 }
128
129 #output img {
130 max-width: 100%;
131 height: auto;
132 }
133
134 #output strong {
135 font-weight: bold;
136 }
137
138 #output em {
139 font-style: italic;
140 }
141
142 #output del {
143 text-decoration: line-through;
144 }
145
146 button {
147 background: #0066cc;
148 color: white;
149 border: none;
150 padding: 10px 20px;
151 border-radius: 4px;
152 cursor: pointer;
153 font-size: 16px;
154 margin-top: 10px;
155 }
156
157 button:hover {
158 background: #0052a3;
159 }
160
161 .header {
162 text-align: center;
163 margin-bottom: 30px;
164 }
165
166 .label {
167 font-weight: bold;
168 margin-bottom: 10px;
169 color: #555;
170 }
171
172 @media (max-width: 768px) {
173 .container {
174 grid-template-columns: 1fr;
175 }
176 }
177 </style>
178 </head>
179 <body>
180 <div class="header">
181 <h1>Markdown to HTML Converter</h1>
182 </div>
183
184 <div class="container">
185 <div class="panel">
186 <div class="label">Markdown Input</div>
187 <textarea id="input" placeholder="Type your markdown here..."># Welcome to Markdown Converter
188
189 ## Features
190
191 This converter supports:
192
193 - **Bold text** and *italic text*
194 - [Links](https://example.com)
195 - `inline code`
196 - ~~strikethrough~~
197
198 ### Lists
199
200 1. Ordered lists
201 2. Like this one
202 3. With numbers
203
204 - Unordered lists
205 - Use dashes
206 - Or asterisks
207
208 ### Code Blocks
209
210 ```
211 function example() {
212 return "Hello World";
213 }
214 ```
215
216 ### Blockquotes
217
218 > This is a blockquote
219 > It can span multiple lines
220
221 ---
222
223 ### Images
224
225 ![Alt text](https://via.placeholder.com/150)
226
227 **Try editing this text!**</textarea>
228 </div>
229
230 <div class="panel">
231 <div class="label">HTML Output</div>
232 <div id="output"></div>
233 </div>
234 </div>
235
236 <script src="/markdown_to_html.js"></script>
237 <script>
238 const input = document.getElementById('input');
239 const output = document.getElementById('output');
240
241 function convert() {
242 // Clear previous output
243 output.innerHTML = '';
244
245 // Convert and render
246 const markdown = input.value;
247 renderMarkdown(output, markdown);
248 }
249
250 // Convert on input
251 input.addEventListener('input', convert);
252
253 // Initial conversion
254 convert();
255 </script>
256 </body>
257 </html>