抛开框架，原生 JS 开发 Markdown 编辑器：化繁为简，拥抱代码之美

2023-11-14 19:58:04

拥抱原生 JavaScript，打造简约实用的 Markdown 编辑器

Markdown 凭借其轻量级、易读性和易转换性，成为撰写文档和博客的热门选择。为了提升 Markdown 体验，我们踏上了打造原生 JavaScript Markdown 编辑器的征程。

Markdown 编辑器概览

Markdown 编辑器提供了一系列功能，包括文本编辑、语法高亮和实时预览。文本编辑区域允许用户输入和编辑 Markdown 文本。语法高亮则用不同的颜色或样式突出显示 Markdown 语法元素，方便用户阅读和理解。实时预览功能实时更新预览区域，让用户随时了解最终渲染效果。

原生 JavaScript 实现

通过以下步骤，我们可以使用原生 JavaScript 实现 Markdown 编辑器：

创建文本编辑区域： 创建一个 JavaScript 对象管理文本编辑区域，并监听输入事件，更新预览区域。
语法高亮： 使用第三方库（如 highlight.js）实现语法高亮。
实时预览： 使用 MutationObserver 监听编辑器变化，实时更新预览区域。

代码实现

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="editor"></div>
    <div id="preview"></div>
    <script src="script.js"></script>
  </body>
</html>

// 文本编辑器逻辑
const editor = document.getElementById('editor');
editor.addEventListener('input', function() {
  const markdownText = editor.value;
  const html = markdownToHtml(markdownText);
  const preview = document.getElementById('preview');
  preview.innerHTML = html;
});

// 语法高亮
hljs.configure({
  languages: ['markdown']
});
editor.addEventListener('input', function() {
  const markdownText = editor.value;
  const html = hljs.highlight('markdown', markdownText).value;
  const preview = document.getElementById('preview');
  preview.innerHTML = html;
});

// 实时预览
const observer = new MutationObserver(function(mutations) {
  const markdownText = editor.value;
  const html = markdownToHtml(markdownText);
  const preview = document.getElementById('preview');
  preview.innerHTML = html;
});

observer.observe(editor, {
  characterData: true,
  subtree: true
});