Mercurial
diff mrjunejune/pages/tools/markdown_to_html/index.html @ 76:35b1abc37969
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 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/mrjunejune/pages/tools/markdown_to_html/index.html Wed Dec 31 14:11:21 2025 -0800 @@ -0,0 +1,103 @@ +<!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> + <link rel="stylesheet" href="/base.css" /> + <link rel="stylesheet" href="markdown_to_html/index.css" /> +</head> +<body> + <div id="header"></div> + <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="title"> + <div class="label">HTML Output</div> + <button id="copy"> Copy </button> + </div> + <div id="output"></div> + </div> + </div> + + <script src="/dark-mode.js"></script> + <script src="/markdown_to_html.js"></script> + <script> + function convert() { + output.innerHTML = ''; + const markdown = input.value; + renderMarkdown(output, markdown); + } + 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> +<script src="/index.js"></script> +</html>