将Markdown内容与编辑器同步实现内容双向更新

2024-01-19 07:43:24

一、前言

Markdown 是一种轻量级标记语言，它使用纯文本格式来创建格式化的文档。由于Markdown具有易于阅读和书写的特点，因此它被广泛应用于撰写博客文章、技术文档、 README文件等。

CodeMirror 是一款流行的文本编辑器，它支持语法高亮、自动完成、代码折叠等功能。

unified 是一款用于处理Markdown内容的工具包，它提供了丰富的API，可以轻松地解析、渲染和转换Markdown内容。

二、实现步骤

1. 安装依赖

npm install codemirror unified markdown-it

2. 创建编辑器实例

const editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
  mode: 'markdown',
  theme: 'material',
  lineNumbers: true
});

3. 创建渲染器实例

const renderer = new markdownit();

4. 同步编辑器和渲染器

editor.on('change', () => {
  const content = editor.getValue();
  const html = renderer.render(content);
  document.getElementById('preview').innerHTML = html;
});

document.getElementById('preview').addEventListener('scroll', () => {
  const scrollTop = document.getElementById('preview').scrollTop;
  editor.scrollTo(0, scrollTop);
});