化繁为简！CodeMirror6 与 MarkedJS 合奏，Markdown 同步滚动一键搞定
2023-02-13 11:10:18
Markdown 双屏同步滚动：用 CodeMirror6 和 MarkedJS 一劳永逸地解决
摆脱滚动不同步的困扰
作为 Markdown 爱好者，您是否曾为编辑和预览区域的滚动不同步而苦恼？每次编辑完一段文字，都要手动滚动预览区域才能看到效果，着实令人抓狂。但现在，这一切都将成为过去！
双屏同步滚动：您的福音
借助 CodeMirror6 和 MarkedJS 这对强大组合，我们可以实现双屏同步滚动，让您的 Markdown 编辑体验顺畅无阻。无论您如何滚动编辑区域，预览区域都会自动同步滚动，完美展示您的编辑效果。
CodeMirror6 和 MarkedJS 强强联手
CodeMirror6 是功能强大的代码编辑器，提供语法高亮、自动完成等实用功能，而 MarkedJS 则是一位出色的 Markdown 渲染器，可将 Markdown 文本转换为美观易读的 HTML。当这两个工具联手合作时，就能碰撞出神奇的火花，实现 Markdown 编辑和预览的完美同步。
分步指南：轻松实现双屏同步
准备好了吗？让我们一步步了解如何使用 CodeMirror6 和 MarkedJS 实现双屏同步滚动：
1. 安装 CodeMirror6 和 MarkedJS
使用 npm 或 yarn 安装这两个工具：
npm install codemirror
npm install marked
2. 创建 HTML 文件
创建一个 HTML 文件，包含 CodeMirror6 和 MarkedJS 的引用，以及用于编辑 Markdown 文本和显示预览的元素：
<html>
<head>
<link rel="stylesheet" href="codemirror.css">
<script src="codemirror.js"></script>
<script src="marked.js"></script>
</head>
<body>
<div id="editor"></div>
<div id="preview"></div>
</body>
</html>
3. 初始化 CodeMirror6 编辑器
使用 CodeMirror6 初始化编辑器：
var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
lineNumbers: true,
mode: "markdown",
theme: "material"
});
4. 使用 MarkedJS 渲染 Markdown
使用 MarkedJS 渲染 Markdown 并显示在预览区域：
var preview = document.getElementById("preview");
editor.on("change", function() {
var markdown = editor.getValue();
var html = marked(markdown);
preview.innerHTML = html;
});
5. 实现同步滚动
使用 CodeMirror6 的 onScroll 事件监听编辑区域的滚动，并使用 scrollTop 属性控制预览区域的滚动：
editor.on("scroll", function() {
preview.scrollTop = editor.getScrollInfo().top;
});
结语：开启流畅编辑体验
通过 CodeMirror6 和 MarkedJS 的强强联手，我们实现了编辑区域和预览区域的双屏同步滚动。现在，您可以尽情编辑您的 Markdown 文档，而预览区域会始终与您同步，轻松掌握编辑效果。告别滚动不同步的困扰，尽享流畅无阻的 Markdown 编辑体验！
常见问题解答
-
为什么要使用 CodeMirror6 和 MarkedJS 而不是其他工具？
CodeMirror6 和 MarkedJS 是重量级的工具，专门针对 Markdown 编辑和渲染而设计，提供强大且可靠的解决方案。 -
是否可以将同步滚动功能添加到现有的 Markdown 编辑器中？
是的，只要该编辑器支持 CodeMirror6 和 MarkedJS，您就可以轻松集成同步滚动功能。 -
同步滚动是否会影响编辑器的性能？
通常情况下，同步滚动不会对编辑器的性能产生显著影响。但是，在极端情况下（例如处理非常大的 Markdown 文档），可能会出现轻微的性能下降。 -
是否可以自定义同步滚动行为？
是的，您可以通过调整 CodeMirror6 和 MarkedJS 的选项来自定义同步滚动行为。 -
是否有其他替代方案可以实现同步滚动？
除了 CodeMirror6 和 MarkedJS，还有其他工具组合也可以实现同步滚动，例如 Ace Editor 和 Showdown，但 CodeMirror6 和 MarkedJS 通常被认为是最可靠和功能丰富的选择。
