Markdown编辑器 - 在线实时预览Markdown

字数: 0 行数: 0 大小: 0 B

const html='Markdown导出'+$('pv').innerHTML+''; const blob=new Blob([html],{type:'text/html'}); const a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download='markdown.html';a.click(); toast('已导出'); } // 语法参考 const REF=[ {title:'标题',code:'# H1 ## H2 ### H3',desc:'# 一级标题 ## 二级标题'}, {title:'粗体',code:'**文字**',desc:'**粗体文字**'}, {title:'斜体',code:'*文字*',desc:'*斜体文字*'}, {title:'删除线',code:'~~文字~~',desc:'~~删除的文字~~'}, {title:'无序列表',code:'- 项目',desc:'- 第一项\n- 第二项'}, {title:'有序列表',code:'1. 项目',desc:'1. 第一步\n2. 第二步'}, {title:'任务列表',code:'- [ ] 任务',desc:'- [x] 已完成\n- [ ] 未完成'}, {title:'引用',code:'> 文字',desc:'> 这是一段引用'}, {title:'行内代码',code:'`code`',desc:'使用 `print()` 函数'}, {title:'代码块',code:'```语言\n代码\n```',desc:'```python\nprint("hi")\n```'}, {title:'链接',code:'[文字](URL)',desc:'[点击访问](https://example.com)'}, {title:'图片',code:'![描述](URL)',desc:'![图片](https://example.com/img.png)'}, {title:'表格',code:'| 列 | 列 |',desc:'| A | B |\n|---|---|\n| 1 | 2 |'}, {title:'分割线',code:'---',desc:'---'}, {title:'公式',code:'$E=mc^2$',desc:'行内 $E=mc^2$ 或块 $$\\sum$$'}, ]; function buildRef(){ $('refContent').innerHTML=REF.map(r=>{ return '

'+r.title+'

'+esc(r.code)+'

'+esc(r.desc)+'

'; }).join(''); } buildRef(); function toggleRef(){$('refPanel').classList.toggle('open')} // Tab键 $('ed').addEventListener('keydown',e=>{ if(e.key==='Tab'){e.preventDefault();insertText(' ')} }); // 同步滚动 let syncScroll=false; $('ed').addEventListener('scroll',()=>{ if(syncScroll)return;syncScroll=true; const el=$('ed'),pv=$('pv').parentElement; const ratio=el.scrollTop/(el.scrollHeight-el.clientHeight||1); pv.scrollTop=ratio*(pv.scrollHeight-pv.clientHeight); setTimeout(()=>syncScroll=false,50); }); function toast(m){const t=$('toast');t.textContent=m;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),1200)} render();