Markdown在线编辑器升级版
<style>.mnBox { margin: 20px 0; left: calc(50% - 81px); transform: translateX(-50%); padding: 0 16px; width: clamp(600px, 90vw, 1400px); height: 90vh; display: flex; gap: 20px; flex-wrap: wrap; box-shadow: 1px 1px 6px gray; background: linear-gradient(45deg, beige, aliceblue, beige); z-index: 1000; position: relative; }
.mnBox * { box-sizing: border-box; }
#txtEditor, #showDiv { height: 80%; flex: 1 1 calc(50% - 10px); padding: 18px; background: #fff; }
#showDiv { overflow: auto; position: relative; }
#showDiv:empty::before { content: '效果预览'; position: absolute; color: #aaa; }
#showDiv { font-size: 16px; }
#showDiv table { border-collapse: collapse; white-space: pre-wrap; box-sizing: border-box; }
#showDiv th, #showDiv td { padding: 8px 10px; border: 1px solid #999; }
#txtEditor { font-size: 18px; resize: none; tab-size: 4; }
.barDiv { height: calc(10% - 20px); flex: 1 1 100%; padding: 8px; }
.barDiv h1 { text-align: center; padding-top: 10px; margin: 0; }
.barDiv button { margin: 0 4px; min-width: 100px; padding: 4px 8px; border-radius: 10px; background: none; border: none; cursor: pointer; }
.barDiv button:hover { box-shadow: 1px 1px 2px gray; color: red; }
.floatRight { float: right; }
</style>
<div class="mnBox">
<div class="barDiv">
<h1>Markdown在线编辑器</h1>
</div>
<textarea id="txtEditor" placeholder="输入Markdown文本"></textarea>
<div id="showDiv"></div>
<div class="barDiv">
<button type="button" id="showSample">基本示例</button>
<button type="button" id="copyMDContent">复制Markdown</button>
<button type="button" id="copyHtml">复制HTML</button>
<button type="button" id="clearContent" class="floatRight">重置</button>
</div>
</div>
<script type="module">
import { marked } from 'https://638183.freep.cn/638183/web/mod/marked.js';
import { copy } from 'https://638183.freep.cn/638183/web/mod/copy.js';
import { samples, cssCode } from 'https://638183.freep.cn/638183/web/mod/md.doc.js';
let scheduled = false;
let lastValue = '';
txtEditor.oninput = () => {
const value = txtEditor.value;
if (!scheduled && value !== lastValue) {
scheduled = true;
requestAnimationFrame(() => {
showDiv.innerHTML = marked.parse(value);
lastValue = value;
scheduled = false;
});
}
};
txtEditor.onkeydown = (e) => {
if (e.key !== 'Tab') return;
e.preventDefault();
txtEditor.setRangeText('\t');
txtEditor.selectionStart += 1;
};
showSample.onclick = () => {
txtEditor.value = samples;
showDiv.innerHTML = marked.parse(samples);
}
clearContent.onclick = () => txtEditor.value = showDiv.innerHTML = '';
copyMDContent.onclick = () => copy(txtEditor.value);
copyHtml.onclick = () => copy(cssCode + showDiv.outerHTML);
</script> 主要更新：
（一）界面细节调整，UI友好性有所提升；
（二）重写基本语法示例，可能更为一目了然；
（三）给预览区增加表格等CSS样式，复制HTML代码时样式跟走；
（四）添加复制功能，壳复制纯Markdown代码和由其生成的HTML代码。
编辑器的设计主要基于PC段显示器环境，对移动段显示环境未作考虑。 谢谢黑黑老师辛苦，很好用！{:4_187:} 其实，还是没整明白这个怎么用，每次来看教案的时候都是喝完酒的时候{:4_173:} 红影 发表于 2026-2-11 19:11
其实，还是没整明白这个怎么用，每次来看教案的时候都是喝完酒的时候
你可以假设你在写一篇学术论文。写这样的东东，Markdow 能让你轻松实现：你只需少量的语法规范，就可以轻松地进行创作，不必过多关心排版问题。然后，你写成的东东，可以让你或你的助手轻松地进行精细排版。换句话说，你用 Markdown 写出的东东，不论将来演变为Word文档还是博文，不论是Windows平台还是Linux系统还是Mac，它都可以轻松处理，借助相应编辑器，你还可以将你的文本转为 PPT、博文、HTML页面甚至是别的。
就是说，Markdown 简化了文档的排版，其语法规范下的内容在不同的层面都可以轻松适配。 梦江南 发表于 2026-2-11 15:45
谢谢黑黑老师辛苦，很好用！
{:4_190:} 马黑黑 发表于 2026-2-11 19:37
你可以假设你在写一篇学术论文。写这样的东东，Markdow 能让你轻松实现：你只需少量的语法规范，就可以轻 ...
看到了黑黑后来发的那个，已经明白它的用途了，这个太好了。
黑黑辛苦了{:4_187:} 红影 发表于 2026-2-11 21:23
看到了黑黑后来发的那个，已经明白它的用途了，这个太好了。
黑黑辛苦了
{:4_190:} 界面更友好，功能更完善，谢谢马老师将Markdown在线编辑器荣耀升级{:4_180:} 杨帆 发表于 2026-2-12 16:21
界面更友好，功能更完善，谢谢马老师将Markdown在线编辑器荣耀升级
不过我这个知识基于基本Markdown语法，对于扩展语法和变体语法，它处理不来 马黑黑 发表于 2026-2-12 18:45
不过我这个知识基于基本Markdown语法，对于扩展语法和变体语法，它处理不来
最基础的也是最重要的，先学习基本Markdown语法，学习扩展语法和变体语法是更高要求了{:4_173:} 杨帆 发表于 2026-2-12 19:28
最基础的也是最重要的，先学习基本Markdown语法，学习扩展语法和变体语法是更高要求了
那倒也是。对于一般的文档，基础的Markdown语法可以应付，也是Markdown设计的初衷，至于更精细的需求则是更为专业性的文档，用到时再说
页:
[1]