Mercurial
diff mrjunejune/pages/markdown_to_html/index.html @ 64:a30944e5719e
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 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/mrjunejune/pages/markdown_to_html/index.html Tue Dec 23 15:18:46 2025 -0800 @@ -0,0 +1,257 @@ +<!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> + <style> + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + line-height: 1.6; + padding: 20px; + max-width: 1200px; + margin: 0 auto; + background: #f5f5f5; + } + + .container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + margin-top: 20px; + } + + .panel { + background: white; + border-radius: 8px; + padding: 20px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + } + + h1 { + color: #333; + margin-bottom: 20px; + } + + textarea { + width: 100%; + height: 500px; + padding: 15px; + border: 1px solid #ddd; + border-radius: 4px; + font-family: 'Courier New', monospace; + font-size: 14px; + resize: vertical; + } + + #output { + min-height: 500px; + padding: 15px; + border: 1px solid #ddd; + border-radius: 4px; + background: #fafafa; + } + + #output h1, #output h2, #output h3, #output h4, #output h5, #output h6 { + margin: 20px 0 10px 0; + color: #333; + } + + #output h1 { font-size: 2em; } + #output h2 { font-size: 1.5em; } + #output h3 { font-size: 1.3em; } + + #output p { + margin: 10px 0; + } + + #output ul, #output ol { + margin: 10px 0; + padding-left: 30px; + } + + #output li { + margin: 5px 0; + } + + #output code { + background: #f4f4f4; + padding: 2px 6px; + border-radius: 3px; + font-family: 'Courier New', monospace; + font-size: 0.9em; + } + + #output pre { + background: #282c34; + color: #abb2bf; + padding: 15px; + border-radius: 4px; + overflow-x: auto; + margin: 10px 0; + } + + #output pre code { + background: none; + color: inherit; + padding: 0; + } + + #output blockquote { + border-left: 4px solid #ddd; + padding-left: 15px; + margin: 10px 0; + color: #666; + font-style: italic; + } + + #output a { + color: #0066cc; + text-decoration: none; + } + + #output a:hover { + text-decoration: underline; + } + + #output hr { + border: none; + border-top: 2px solid #ddd; + margin: 20px 0; + } + + #output img { + max-width: 100%; + height: auto; + } + + #output strong { + font-weight: bold; + } + + #output em { + font-style: italic; + } + + #output del { + text-decoration: line-through; + } + + button { + background: #0066cc; + color: white; + border: none; + padding: 10px 20px; + border-radius: 4px; + cursor: pointer; + font-size: 16px; + margin-top: 10px; + } + + button:hover { + background: #0052a3; + } + + .header { + text-align: center; + margin-bottom: 30px; + } + + .label { + font-weight: bold; + margin-bottom: 10px; + color: #555; + } + + @media (max-width: 768px) { + .container { + grid-template-columns: 1fr; + } + } + </style> +</head> +<body> + <div class="header"> + <h1>Markdown to HTML Converter</h1> + </div> + + <div class="container"> + <div class="panel"> + <div class="label">Markdown Input</div> + <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 + + + +**Try editing this text!**</textarea> + </div> + + <div class="panel"> + <div class="label">HTML Output</div> + <div id="output"></div> + </div> + </div> + + <script src="/markdown_to_html.js"></script> + <script> + const input = document.getElementById('input'); + const output = document.getElementById('output'); + + function convert() { + // Clear previous output + output.innerHTML = ''; + + // Convert and render + const markdown = input.value; + renderMarkdown(output, markdown); + } + + // Convert on input + input.addEventListener('input', convert); + + // Initial conversion + convert(); + </script> +</body> +</html>