在网页中实现基于Markdown的富文本输入与实时预览，核心思路是监听用户输入，将Markdown文本即时转换为HTML并展示。这种方式比传统富文本编辑器更轻量，也更符合技术写作习惯。
基础页面结构
我们需要一个输入框用于写Markdown，一个容器用于显示预览。两者并排布局即可。
<div class="editor"> <textarea id="mdInput" placeholder="请输入Markdown"></textarea> <div id="preview"></div> </div>
引入解析库
浏览器端可使用 marked 这类库将Markdown转为HTML。通过CDN引入后，调用其 parse 方法即可。
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
实现实时预览逻辑
给文本域绑定 input 事件，每次输入都重新解析并写入预览区。注意要对输出做基础转义以防XSS，演示中暂用 marked 默认配置。
// 获取元素
const input = document.getElementById('mdInput');
const preview = document.getElementById('preview');
// 输入时实时转换
input.addEventListener('input', function () {
const text = input.value;
// 将Markdown解析为HTML
preview.innerHTML = marked.parse(text);
});
样式简单优化
为提升体验，可用CSS让两侧高度一致、溢出滚动。下面给出最简样式示例。
.editor { display: flex; gap: 12px; }
#mdInput, #preview {
width: 50%;
height: 400px;
border: 1px solid #ccc;
padding: 8px;
overflow: auto;
}
#mdInput { resize: none; }
支持代码块高亮（可选）
若文章含代码，可配合 highlight.js 增强预览。在解析后调用高亮方法即可，此处不展开配置。
小结
通过上述步骤，我们完成了Markdown输入与实时预览的最小实现。核心是 input 事件加 marked.parse。实际项目中可加入防抖、草稿存储与权限控制，让功能更完善。