这个编辑器将采用分栏布局，左侧是 Markdown 实时预览区，右侧是编辑区，这符合大多数现代 Markdown 编辑器的使用习惯。
（图片来源网络，侵删）
功能特点
- 实时预览: 在左侧编辑区输入 Markdown，右侧会实时渲染成 HTML。
- 分栏布局: 使用 Flexbox 布局，编辑区和预览区可以自由调整大小。
- 代码高亮: 使用
highlight.js库，支持多种编程语言的语法高亮。 - 响应式设计: 在小屏幕设备上，编辑区和预览区会自动切换为上下布局。
- 简洁美观: 使用原生 CSS，不依赖 UI 框架，代码轻量且易于理解和修改。
第一步：创建项目文件
创建一个项目文件夹,markdown-editor，并在其中创建以下三个文件：
index.html(网页结构)style.css(样式表)script.js(JavaScript 逻辑)
第二步：编写 HTML 代码 (index.html)
这个文件定义了编辑器的基本结构,包括一个标题、一个可拖动的分隔栏，以及两个主要的内容区域（编辑区和预览区）。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Markdown 编辑器</title>
<link rel="stylesheet" href="style.css">
<!-- 引入 highlight.js 的 CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
</head>
<body>
<header>
<h1>Markdown 实时预览编辑器</h1>
</header>
<main class="editor-container">
<!-- 可拖动的分隔栏 -->
<div class="resizer" id="resizer"></div>
<!-- Markdown 编辑区 -->
<section class="editor" id="editor">
<textarea id="markdown-input" placeholder="在这里输入 Markdown..."># 欢迎使用 Markdown 编辑器
这是一个功能简单的实时预览编辑器。
## 功能特点
* 实时预览
* 代码高亮
* 响应式布局
### 代码示例
你可以在这里写代码，并实现语法高亮：
```javascript
function hello(name) {
console.log(`Hello, ${name}!`);
}
hello("World");
引用
这是引用的内容,你可以用它来强调某段文字。
加粗 和 斜体 也是支持的。
（图片来源网络，侵删）
祝您使用愉快！
<!-- HTML 预览区 -->
<section class="preview" id="preview">
<!-- 预览内容将在这里渲染 -->
</section>
</main>
<!-- 引入 marked.js 用于解析 Markdown -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!-- 引入 highlight.js 用于代码高亮 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<!-- 引入 marked 的 highlight.js 插件 -->
<script src="https://cdn.jsdelivr.net/npm/marked-highlight/lib/index.umd.min.js"></script>
<!-- 引入自定义的 JavaScript -->
<script src="script.js"></script>