html实现Markdown编辑预览_html markdown编辑器实时预览实现【精选】

陆砚码

2026-10-24 • 👁 0人浏览过

可行且轻量，但需注意DOM更新频率、XSS风险（marked必须开启sanitize或用DOMPurify）、滚动锚点偏移（需比例映射scrollTop）及样式错乱（应引入github-markdown-css或手动重置）。直接用原生 HTML + JavaScript 实现 Markdown 实时编辑预览，不依赖大型框架（如 React/Vue），核心靠

marked

解析 + 双栏同步滚动，可行且轻量；但要注意 DOM 更新频率、XSS 风险和滚动锚点偏移这三处最容易翻车的地方。用

marked

解析 Markdown 时必须开启

sanitize: true

默认

marked

不过滤 HTML 标签，用户输入

会直接执行。即使你只做内部工具，也建议强制开启安全模式：

marked.setOptions({
  sanitize: true,
  // ⚠️ 注意：v4+ 版本改用 sanitizer 选项，但最简方案仍是 sanitize: true
});

如果你用的是

marked@^4.0.0

，

sanitize

已废弃，应改用

renderer

+ 自定义

html

方法拦截，或搭配

DOMPurify

二次处理 —— 否则任何含

</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"></code></div>
的输入都可能触发 XSS。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">textarea</code></div>
和预览区滚动不同步？用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">scrollHeight</code></div>
和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">scrollTop</code></div>
做比例映射
纯 CSS 无法让两个容器滚动联动，必须监听
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">scroll</code></div>
或
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">input</code></div>
事件手动同步。常见错误是直接复制
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">scrollTop</code></div>
值，导致预览区滚动过快或卡顿：
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
编辑区高度变化频繁（比如输入换行、粘贴大段文本），
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">scrollHeight</code></div>
会抖动，需节流处理
预览区内容渲染有延迟，应在
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">marked.parse()</code></div>
回调后才更新
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">scrollTop</code></div>
比例计算要用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">(textarea.scrollTop / (textarea.scrollHeight - textarea.clientHeight))</code></div>
，再乘以预览区可滚动高度
示例关键逻辑：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">textarea.addEventListener('scroll', () => {
  const ratio = textarea.scrollTop / (textarea.scrollHeight - textarea.clientHeight);
  preview.scrollTop = ratio * (preview.scrollHeight - preview.clientHeight);
});</code></div>
为什么预览区样式错乱？别漏掉
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">marked</code></div>
输出的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><p></code></div>
和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><code></code></div>
默认样式
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">marked</code></div>
输出的是纯语义 HTML（如无 class 的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><h2></code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><pre><code></code></div>
），浏览器默认样式和你的页面主题冲突很常见：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><pre><code></code></div>
没加语法高亮 → 推荐用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">highlight.js</code></div>
的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">highlightElement()</code></div>
在渲染后调用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><table></code></div>
无边框/错位 → 需手动重置
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">border-collapse: collapse</code></div>
和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">td, th</code></div>
padding
链接没下划线或颜色太浅 → 至少加一条
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">preview a { color: #007bff; text-decoration: underline; }</code></div>
最省事的做法：给预览容器加
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">class="markdown-body"</code></div>
，然后引入 GitHub 官方的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">github-markdown-css</code></div>
（注意只用它对 block 元素的 reset 规则，别全量加载）。
滚动同步的精度、HTML 渲染的安全边界、样式隔离的粒度——这三点在小项目里容易被当成“先跑起来再说”的环节，但一旦用户开始粘贴代码块或嵌入表格，问题就会集中爆发。
                            </div>

                            <!-- 文章导航 -->
                            <nav class="phpwebsoft-article-nav" aria-label="文章导航">

    
                                <a href="http://www.phpwebsoft.com/news/29358.html" class="phpwebsoft-article-nav-link phpwebsoft-article-nav-prev">
                                    <span>&#8249;</span>
                                    <div>
                                        <div class="phpwebsoft-article-nav-label">上一篇</div>
                                        <div class="phpwebsoft-article-nav-title">一个可以显示当前年份以及生肖的js代码_时间日期</div>
                                    </div>
                                </a>
    


    
                                <a href="http://www.phpwebsoft.com/news/29414.html" class="phpwebsoft-article-nav-link phpwebsoft-article-nav-next">
                                    <div>
                                        <div class="phpwebsoft-article-nav-label">下一篇</div>
                                        <div class="phpwebsoft-article-nav-title">HTML5的classList属性操作CSS类的使用详解</div>
                                    </div>
                                    <span>&#8250;</span>
                                </a>
    

                            </nav>
                        </div>
                    </article>

                    <!-- 相关文章列表 -->
                    <section class="phpwebsoft-content-section" style="margin-top: 20px;">
                        <h2 class="phpwebsoft-widget-title" style="margin-bottom: 20px;">相关文章</h2>
                        <ul class="phpwebsoft-article-list">

    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/29358.html" class="phpwebsoft-article-link">一个可以显示当前年份以及生肖的js代码_时间日期</a>
                                <div class="phpwebsoft-article-meta">2026-10-23</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/29355.html" class="phpwebsoft-article-link">如何自定义Bootstrap 5的Badge徽章形状_修改border-radius的CSS属性</a>
                                <div class="phpwebsoft-article-meta">2026-10-23</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/29344.html" class="phpwebsoft-article-link">JavaScript内存管理机制_垃圾回收原理</a>
                                <div class="phpwebsoft-article-meta">2026-10-23</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/29342.html" class="phpwebsoft-article-link">JavaScript如何操作DOM_JavaScriptDOM元素获取修改删除操作方法大全</a>
                                <div class="phpwebsoft-article-meta">2026-10-23</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/29322.html" class="phpwebsoft-article-link">javascript是什么线程</a>
                                <div class="phpwebsoft-article-meta">2026-10-23</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/29414.html" class="phpwebsoft-article-link">HTML5的classList属性操作CSS类的使用详解</a>
                                <div class="phpwebsoft-article-meta">2026-10-24</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/29419.html" class="phpwebsoft-article-link">Ionic实现验证码倒计时</a>
                                <div class="phpwebsoft-article-meta">2026-10-24</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/29426.html" class="phpwebsoft-article-link">分析html文档中的ol 元素的序号数字极限探讨</a>
                                <div class="phpwebsoft-article-meta">2026-10-24</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/29431.html" class="phpwebsoft-article-link">如何创建HTML网页？网页制作新手入门教程</a>
                                <div class="phpwebsoft-article-meta">2026-10-24</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/29434.html" class="phpwebsoft-article-link">IE下通过a实现location.href 获取referer的值_javascript技巧</a>
                                <div class="phpwebsoft-article-meta">2026-10-24</div>
                            </li>
    

                        </ul>
                    </section>
                </div>

                <!-- 右侧边栏 -->
                <aside class="phpwebsoft-sidebar phpwebsoft-sidebar-right" aria-label="侧边栏">
    <!-- 推荐阅读 -->
    <div class="phpwebsoft-widget">
        <h3 class="phpwebsoft-widget-title">推荐阅读</h3>
        <div class="phpwebsoft-recommend-grid">

    
            <a href="http://www.phpwebsoft.com/news/29557.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="JS+CSS实现可以凹陷显示选中单元格的方法_javascript技巧">
                </div>
                <div class="phpwebsoft-recommend-title">JS+CSS实现可以凹陷显示选中单元格的方法_javascript技巧</div>
            </a>
    
            <a href="http://www.phpwebsoft.com/news/29551.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="关于@keyframes定义动画的问题_html/css_WEB-ITnose">
                </div>
                <div class="phpwebsoft-recommend-title">关于@keyframes定义动画的问题_html/css_WEB-ITnose</div>
            </a>
    
            <a href="http://www.phpwebsoft.com/news/29550.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="神秘编年史：神秘和阴谋的故事">
                </div>
                <div class="phpwebsoft-recommend-title">神秘编年史：神秘和阴谋的故事</div>
            </a>
    
            <a href="http://www.phpwebsoft.com/news/29548.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="如何实现文件拖拽上传">
                </div>
                <div class="phpwebsoft-recommend-title">如何实现文件拖拽上传</div>
            </a>
    

        </div>
    </div>

    <!-- 最新文章 -->
    <div class="phpwebsoft-widget">
        <h3 class="phpwebsoft-widget-title">最新文章</h3>
        <ul class="phpwebsoft-article-list">

    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/29557.html" class="phpwebsoft-article-link">JS+CSS实现可以凹陷显示选中单元格的方法_javascript技巧</a>
                <div class="phpwebsoft-article-meta">2026-10-24</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/29551.html" class="phpwebsoft-article-link">关于@keyframes定义动画的问题_html/css_WEB-ITnose</a>
                <div class="phpwebsoft-article-meta">2026-10-24</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/29550.html" class="phpwebsoft-article-link">神秘编年史：神秘和阴谋的故事</a>
                <div class="phpwebsoft-article-meta">2026-10-24</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/29548.html" class="phpwebsoft-article-link">如何实现文件拖拽上传</a>
                <div class="phpwebsoft-article-meta">2026-10-24</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/29547.html" class="phpwebsoft-article-link">jQuery选择器中含有空格的使用示例及注意事项_jquery</a>
                <div class="phpwebsoft-article-meta">2026-10-24</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/29538.html" class="phpwebsoft-article-link">如何正确实现短链接重定向以确保社交平台抓取目标页面元数据</a>
                <div class="phpwebsoft-article-meta">2026-10-24</div>
            </li>
    

        </ul>
    </div>

    <!-- 热门标签 -->
    <div class="phpwebsoft-widget">
        <h3 class="phpwebsoft-widget-title">热门标签</h3>
        <div class="phpwebsoft-article-tag-list">

    
            <a href="http://www.phpwebsoft.com/tag/1714" class="phpwebsoft-article-tag-item">markdown</a>
    
            <a href="http://www.phpwebsoft.com/tag/1687" class="phpwebsoft-article-tag-item">html</a>
    

        </div>
    </div>
</aside>
            </div>
        </div>
    </main>


    <!-- 页脚 -->
    <footer class="phpwebsoft-footer">
        <div class="phpwebsoft-container">
            <div class="phpwebsoft-footer-links" style="justify-content: center;">
                
                
                <a href="http://www.phpwebsoft.com/22.html" class="phpwebsoft-footer-link">免责声明</a>
                
                <a href="http://www.phpwebsoft.com/23.html" class="phpwebsoft-footer-link">关于我们</a>
                
                <a href="http://www.phpwebsoft.com/24.html" class="phpwebsoft-footer-link">联系我们</a>
                
                <a href="http://www.phpwebsoft.com/25.html" class="phpwebsoft-footer-link">投诉删除</a>
                
                <a href="http://www.phpwebsoft.com/26.html" class="phpwebsoft-footer-link">投稿须知</a>
                
                
            </div>
            <div class="phpwebsoft-footer-copyright" style="text-align: center; margin-top: 20px;">
                Copyright 2026
                 websoft网络软件专家
                版权所有
                 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025061481号</a>
            </div>
            <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button class="phpwebsoft-back-to-top" id="backToTop" aria-label="返回顶部">&#8679;</button>

    <!-- 公共脚本 -->
    <script src="http://www.phpwebsoft.com/static/v10/js/common.js"></script>
    
    <div class="hide">
    </div>
</body>
</html>