30分钟搭建你自己的简易Typora克隆

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

   创建一个简易Markdown编辑器的starter项目，功能包括：1. 基本编辑区域；2. 实时预览面板；3. 支持常用Markdown语法；4. 主题切换。要求使用最简技术栈（如HTML/CSS/JS），附带详细注释说明每个功能模块的实现原理。

3. 点击'项目生成'按钮，等待项目生成完整后预览效果

最近想了解Markdown编辑器的工作原理，于是尝试用最简单的方式实现一个基础版本。整个过程只用了HTML、CSS和原生JavaScript，非常适合想快速理解编辑器核心逻辑的朋友。下面分享我的实现思路和关键步骤。

1. 项目结构与基础布局

首先创建三个基础文件：index.html、style.css和script.js。HTML里划分两个主要区域：左侧编辑区和右侧预览区，通过CSS设置为左右分栏布局。这里用flexbox实现响应式效果，确保窗口缩放时比例保持不变。

2. 实时预览的核心机制

通过JavaScript监听编辑区的input事件，每当内容变化时：

1. 获取textarea中的原始文本
2. 使用正则表达式将Markdown语法转换为HTML（例如**文本**转<strong>文本</strong>）
3. 将处理后的HTML注入预览区的div元素

这里特别注意防抖处理——设置200毫秒的延迟执行，避免频繁触发DOM操作影响性能。

3. 支持的基础Markdown语法

实现了最常用的五种语法转换：

• 标题（# → h1）
• 加粗/斜体（*包裹）
• 代码块（```包裹）
• 无序列表（* 开头）
• 链接与图片（语法）

每个语法对应一个正则表达式替换规则，按优先级顺序处理避免冲突。

4. 主题切换功能

在CSS中预定义两套颜色方案（light/dark），通过JavaScript完成：

1. 添加主题切换按钮
2. 点击时在body标签切换类名（如theme-dark）
3. 利用CSS变量动态更新背景色、文字颜色等属性

5. 遇到的难点与解决

• 同步滚动问题：编辑区和预览区高度不同导致滚动不同步。解决方案是计算两者的高度比例，在滚动时动态调整另一个区域的scrollTop值。
• 代码块渲染：原生正则难以处理多行代码块。最终采用先按行分割文本，识别到代码块起始标记后累积后续行，直到遇到结束标记再统一处理。
• 移动端适配：在小屏设备改为上下布局，通过媒体查询调整flex方向为column。

项目体验与改进方向

这个简易版已经具备核心编辑-预览功能，后续可考虑：

1. 添加本地存储支持（localStorage保存内容）
2. 实现文件导出为PDF/Markdown
3. 集成更多语法支持（如表格、流程图）

整个过程在InsCode(快马)平台上完成特别顺畅——浏览器里直接写代码就能实时看到效果，调试非常方便。他们的在线编辑器响应速度快，还自带代码提示，比本地开发环境更轻量。对于这种需要快速验证思路的小项目，不用配置环境就能一键运行真的很省时间。

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

   创建一个简易Markdown编辑器的starter项目，功能包括：1. 基本编辑区域；2. 实时预览面板；3. 支持常用Markdown语法；4. 主题切换。要求使用最简技术栈（如HTML/CSS/JS），附带详细注释说明每个功能模块的实现原理。

3. 点击'项目生成'按钮，等待项目生成完整后预览效果