Markdown编辑器测试
<style>.mnBox { margin: 20px; 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: #eee; z-index: 10000; position: relative; }
.mnBox * { box-sizing: border-box; }
#txtEditor, #showDiv { height: 80%; flex: 1 1 calc(50% - 10px); padding: 18px; background: #fff; }
#showDiv { overflow: auto; }
#txtEditor { font-size: 18px; resize: none; }
.barDiv { height: calc(10% - 20px); flex: 1 1 100%; padding: 8px; }
.barDiv h1 { text-align: center; padding: 0; margin: 0; }
.barDiv button { width: 200px; margin-right: 16px; }
</style>
<div class="mnBox">
<div class="barDiv">
<h1>Markdown在线编辑器</h1>
</div>
<textarea id="txtEditor"></textarea>
<div id="showDiv"></div>
<div class="barDiv">
<button type="button" id="showknowledge">Markdown简介</button>
<button type="button" id="showSample">Markdown基本用法示例</button>
<button type="button" id="clearContent">清空全部内容</button>
</div>
</div>
<script type="module">
import { marked } from 'https://638183.freep.cn/638183/web/mod/marked.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;
});
}
};
const samples = `# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
---
分割线的三种表示方法：---、___、***
___
段落一（用空行表示段落 P 标签）
段落二
段落三
***
换行一(句末加两个空格表示 br 标签)
换行二
换行三
___
**粗体文字**
*斜体文字*
***粗斜体文字***
文本 ~~删除线~~ 有木有
\<u\>文本下划线\</u\>
---
\>一级引用
\>\>二级引用
---
1. 有序列表项目一
2. 有序列表项目二
---
- 无序列表项目一
- 无序列表项目二
- 无序列表项目三
- 无序列表（子层1）
- 无序列表（子层2）
---
锚：[马黑网站](http://mhh.52qingyin.cn "点击访问")
---
---
代码使用符号 \`\` 包裹：
\`code here\`
---
转义符使用符号 \\ 引导，例如想在行首显示 * 等符号：
\\* 行首显示星号
\\+ 行首显示加号
\\- 行首显示减号
\\_ 行首显示下划线
\\~ 行首显示波浪号
`;
const basicKnowledge = `## 关于Markd
Markdown 是轻量级的标记语言，对标 HTML 的 Markup 标记语言，意在提供一个比 HTML 更简洁的文本书写方式。它使用一整套简洁而高效的规范性语法来组织文本结构，使之相较于 HTML 超文本语言而言更能轻松驾驭。换言之，Markdown 提供一种更为简单实用的写作方式，使得文本结构的组织工作变得非常轻松，写作者可以更专注于内容创作，且不必担心文档结构的兼容性问题。
## Markdown的起源
Markdown的历史可以追溯到2004年，由约翰·格鲁伯（John Gruber）和亚伦·斯沃茨（Aaron Swartz）共同开发。这一标记语言的初衷是创建一种易读易写的纯文本格式，能够轻松转换为HTML。Markdown这个名字源于格鲁伯的愿景，他希望这种语言能够以轻松、流畅的方式“标记”文本。
## Markdown的用途
Markdown在各个领域都有广泛的应用。它可以用于撰写文档、博客文章、学术论文，甚至在在线教育中广泛使用。在技术界，Markdown作为编写代码文档和文档化项目的首选格式。它还用于写作、团队协作和内容管理。
## Markdown的发展趋势
Markdown继续发展，不断有新的扩展语法和工具出现。未来，Markdown可能会在移动应用中发挥更大的作用，并支持更多的交互性和多媒体元素。这将使Markdown变得更加多样化和适应不同用途。
## Markdown工具和编辑器
有许多Markdown编辑器和工具可供选择，以满足不同需求。一些流行的Markdown编辑器包括Typora、Visual Studio Code等。此外，还有在线Markdown编辑工具，方便用户随时访问并编辑Markdown文档。`;
showSample.onclick = () => {
txtEditor.value = samples;
showDiv.innerHTML = marked.parse(samples);
}
showknowledge.onclick = () => {
txtEditor.value = basicKnowledge;
showDiv.innerHTML = marked.parse(basicKnowledge);
}
clearContent.onclick = () => txtEditor.value = showDiv.innerHTML = '';
</script> 相关语法还有一些变体或备用方案，另外，Markdown 还有一些更详细的语法，这里就不一一介绍了，可以网查了解。
Markdown基础语法学起来也就几分钟，冲顶用15分钟就能完全学会。一旦学会，撰写文案效率会大大提升。
这里，一楼对 Markdown 的解析，使用的是 marked.js 开源模块。实时输出方法则使用了 requestAnimationFrame 渲染方式，对 CPU 的占用极低。 另外，渲染效果的 CSS 未做任何CSS设置，使用的样式论坛的相关设定 挺实用的一款编辑器，谢谢马老师经典分享{:4_180:}
杨帆 发表于 2026-2-9 17:09
挺实用的一款编辑器，谢谢马老师经典分享
尝试一下，不专业 谢谢黑黑的好帖，很实用{:4_187:} 红影 发表于 2026-2-9 21:11
谢谢黑黑的好帖，很实用
这个还没有完善，现在只是测试JS对Markdown代码的解析情况。今后需要加入css样式表、复制Markdown代码和HTML代码代码等功能，同时一些细节可能还需要斟酌。
当然完全可以使用第三方软件，网上在线Markdown编辑工具也很成熟，可以使用它们。
页:
[1]