第 2 章：搭建 Markdown 编辑器的基础界面

🎯 本章目标：

创建一个简单直观的 Markdown 编辑器界面
实现编辑区（输入框）+ 实时预览区
引入 marked.js 将 Markdown 渲染为 HTML

🧱 一、项目结构准备

在上一章的基础上，我们继续完善项目结构：

electron-md-editor/
├── main.js
├── index.html      ← UI 页面
├── renderer.js     ← 渲染进程逻辑（Markdown渲染等）
├── package.json
└── node_modules/

请新建一个 renderer.js 文件，用于处理网页逻辑。

🎨 二、设计界面布局（index.html）

我们使用基本的 HTML + CSS，将界面分为两部分：

左边：输入 Markdown 的文本框（<textarea>）
右边：显示渲染出来的 HTML（<div>）

更新你的 index.html 如下：

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Markdown 编辑器</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; display: flex; height: 100vh; font-family: sans-serif; }
    textarea, #preview {
      width: 50%;
      padding: 15px;
      border: none;
      font-size: 16px;
      height: 100%;
      resize: none;
    }
    #preview {
      background-color: #f4f4f4;
      overflow-y: auto;
    }
  </style>
</head>
<body>
  <textarea id="editor" placeholder="在这里输入 Markdown 文本..."></textarea>
  <div id="preview">👉 右侧是预览区</div>

  <!-- 引入 marked 库（用来渲染 Markdown） -->
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script src="renderer.js"></script>
</body>
</html>

💡解释：

textarea：左边输入区，用于写 Markdown
#preview：右边展示区，用于实时显示转换后的 HTML
引入了 marked.js：这是一个轻量的 Markdown 渲染器，性能好、支持基本语法
renderer.js 会监听输入并触发渲染

🧠 三、添加逻辑（renderer.js）

新建 renderer.js 文件，写入以下代码：

// renderer.js

const editor = document.getElementById('editor');
const preview = document.getElementById('preview');

// 监听用户输入，实时渲染 Markdown
editor.addEventListener('input', () => {
  const markdownText = editor.value;               // 获取输入内容
  const html = marked.parse(markdownText);         // 转换为 HTML
  preview.innerHTML = html;                        // 显示在预览区域
});

✅ 说明：

每当你在 textarea 输入时，input 事件会触发
使用 marked.parse() 把 Markdown 转成 HTML
innerHTML 更新预览区的显示内容

🧪 四、运行效果演示

在项目目录下运行：

npm start

你将看到一个窗口：

左边是输入框
右边是 Markdown 渲染结果

试试输入如下内容：

# 一级标题
## 二级标题

**加粗**，*斜体*，`代码`

- 列表1
- 列表2

[链接](https://example.com)

右侧会实时更新为格式化后的内容！

🔧 五、可选美化建议（建议尝试）

你可以进一步修改 CSS：

给预览区加边框或阴影
让输入框使用等宽字体（font-family: monospace;）
添加暗色模式切换（后续我们会教）

🧼 六、错误排查

窗口白屏：确认 renderer.js 和 marked.min.js 路径无误
无响应：检查是否忘记给 <textarea> 设置 id="editor"
marked 未定义：确保 CDN 正确加载，或使用 npm install marked 本地引入也可以

✅ 小结

这一章你实现了：

Markdown 编辑器的基本界面
左侧编辑 + 右侧实时预览
使用 marked.js 实时转换 Markdown

你现在已经有了一个基础的、能用的编辑器雏形！