Markdown 转 HTML

首页说明

Markdown 输入

HTML 预览

`; const blob = new Blob([fullHtml], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'markdown-output.html'; a.click(); URL.revokeObjectURL(url); showToast('已开始下载'); } async function pasteMarkdown() { try { const text = await navigator.clipboard.readText(); document.getElementById('markdown-input').value = text; convert(); } catch (err) { showToast('无法访问剪贴板'); } } function clearAll() { document.getElementById('markdown-input').value = ''; convert(); } function loadExample() { document.getElementById('markdown-input').value = `# 欢迎使用 Markdown 编辑器 ## 什么是 Markdown？ Markdown 是一种轻量级标记语言，让你可以使用**易读易写**的纯文本格式编写文档。 ## 常用语法 ### 文本样式 - **粗体文本** - *斜体文本* - ~~删除线~~ - \`行内代码\` ### 列表无序列表： - 项目 1 - 项目 2 - 子项目 2.1 - 子项目 2.2 有序列表： 1. 第一项 2. 第二项 3. 第三项 ### 代码块 \`\`\`javascript function hello() { console.log("Hello, World!"); } \`\`\` ### 引用 > 这是一段引用文字。 > 可以有多行。 ### 链接和图片 [访问 GitHub](https://github.com) ### 分隔线 --- ## 开始编写你的 Markdown 吧！`; convert(); } function showToast(message) { const toast = document.createElement('div'); toast.style.cssText = ` position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #333; color: white; padding: 12px 24px; border-radius: 8px; z-index: 1000; animation: fadeInOut 2s ease; `; toast.textContent = message; document.body.appendChild(toast); setTimeout(() => toast.remove(), 2000); } // Add animation const style = document.createElement('style'); style.textContent = ` @keyframes fadeInOut { 0% { opacity: 0; transform: translateX(-50%) translateY(20px); } 15% { opacity: 1; transform: translateX(-50%) translateY(0); } 85% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(-20px); } } `; document.head.appendChild(style); // 初始化 loadExample();