实时Markdown编辑器 分割视图与Marked.js库的应用

分割视图实时Markdown编辑器的实现

分割视图实时Markdown编辑器通常由两个面板组成：左侧为Markdown源码编辑区，右侧为实时渲染预览区。核心实现需要以下技术栈：

• 前端框架：Vue.js/React/Angular等（可选）
• Markdown解析库：Marked.js/Showdown.js
• 编辑器组件：CodeMirror/Monaco Editor（或简单textarea）
• 双向绑定：通过JavaScript事件监听实现内容同步

// 基础实现示例
const editor = document.getElementById('editor');
const preview = document.getElementById('preview');

editor.addEventListener('input', () => {
  preview.innerHTML = marked.parse(editor.value);
});

Marked.js核心配置方法

Marked.js提供多种配置选项来自定义解析行为，常用配置包括：

marked.setOptions({
  breaks: true,      // 将换行符转换为<br>
  gfm: true,         // 启用GitHub风格Markdown
  sanitize: false,   // 禁用HTML标签过滤
  highlight: function(code) {
    return hljs.highlightAuto(code).value;
  }
});

对于高级用户，可以通过自定义渲染器（renderer）修改元素生成规则：

const renderer = new marked.Renderer();
renderer.heading = (text, level) => {
  return `<h${level} class="custom-heading">${text}</h${level}>`;
};
marked.use({ renderer });

性能优化技巧

高频输入场景下需要避免频繁重渲染，可通过以下方式优化：

• 防抖处理：延迟渲染执行
• 局部更新：仅更新变化的DOM节点
• Worker线程：将解析工作移至Web Worker

let timer;
editor.addEventListener('input', () => {
  clearTimeout(timer);
  timer = setTimeout(() => {
    preview.innerHTML = marked.parse(editor.value);
  }, 300);
});

扩展功能实现

现代编辑器通常需要集成以下功能：

• 表格工具：通过Markdown Extra语法支持
• 流程图/甘特图：集成mermaid.js
• 数学公式：配合KaTeX或MathJax
• 代码高亮：使用highlight.js

// 数学公式支持示例
marked.setOptions({
  extensions: [{
    name: 'latex',
    level: 'inline',
    start(src) { return src.indexOf('$'); },
    tokenizer(src) {
      const rule = /^\$([^$]*)\$/;
      const match = rule.exec(src);
      if (match) {
        return {
          type: 'latex',
          raw: match[0],
          formula: match[1]
        };
      }
    },
    renderer(token) {
      return katex.renderToString(token.formula);
    }
  }]
});

常见问题解决方案

内容闪烁问题：在CSS中为预览容器添加最小高度避免布局跳动

#preview {
  min-height: 300px;
  border: 1px solid #ddd;
  padding: 10px;
}

XSS防护：启用sanitize选项或使用DOMPurify

import DOMPurify from 'dompurify';
preview.innerHTML = DOMPurify.sanitize(marked.parse(editor.value));

语法扩展冲突：通过正则表达式预处理特殊语法

function preprocess(text) {
  return text.replace(/:::(.*?)\n([\s\S]*?)\n:::/g, '<div class="$1">$2</div>');
}