作品十八：Markdown笔记应用
掌握了状态管理和数据筛选后，我们来学习如何处理文本编辑和实时预览 。
Markdown 是程序员最常用的文档格式
做一个 Markdown 笔记应用可以让你学习如何处理文本编辑 、实时预览等功能。
这个项目要实现一个完整的 Markdown 笔记应用 。用户可以创建笔记，输入标题和内容 。界面采用左右分栏，左侧是编辑器，右侧实时预览渲染后的效果 。左侧还要显示笔记列表，支持搜索 。数据保存在LocalStorage ，支持删除笔记 。代码块要有语法高亮，这样看起来更专业。
🎈
技术选型上前端用 React + TypeScript + Vite ，Markdown 解析用 react-markdown ，代码高亮用react-syntax-highlighter ，样式用 Tailwind CSS ，数据存储用 LocalStorage。
开发步骤
1） 实现基础布局
开发的第一步是实现基础布局，创建左右分栏的布局，左侧是编辑器，右侧是预览区 。
这个布局用 Tailwind CSS 的 Flex 或 Grid 很容易实现。
可以这样告诉 AI：
代码块
Plain Text
创建左右分栏布局，左侧是 Markdown 编辑器（ 大文本框），右侧是预览区 。使用 Tailwind CSS 实现响应式布局。
AI 会创建一个美观的分栏布局，在电脑上是左右分栏，在手机上会自动变成上下布局。
2）集成 Markdown 解析
然后集成 Markdown 解析 。使用 react-markdown 这个库，可以很方便地将 Markdown 文本转换为HTML 。你只需要把文本传给这个组件， 它就会自动渲染。
告诉 AI：
代码块
Plain Text
使用 react-markdown 将 Markdown 文本转换为 HTML，在预览区显示渲染后的效果。
这个提示词很简洁，但 AI 知道要做什么 。它会安装 react-markdown 库，导入组件，然后在预览区使用 。
3） 实现实时预览
接下来实现实时预览 。这个功能的关键是监听编辑器的输入变化，实时更新预览区 。当用户在左侧编辑时，右侧要同步显示渲染后的效果。
告诉 AI：
代码块
Plain Text
监听编辑器的输入变化，实时更新预览区 。用户在左侧编辑时，右侧同步显示 Markdown 渲染后的效果。
这个功能用 React 的状态管理很容易实现 。AI 会把编辑器的内容存储在 state 中，然后传给预览组件，每次内容变化都会自动更新预览。
4）添加代码高亮
代码高亮也很重要，让代码块看起来更专业 。告诉 AI：
代码块
Plain Text
配置 react-syntax-highlighter，让代码块支持语法高亮 。支持多种编程语言， 比如JavaScript、Python、Java 等。
AI 会配置 react-syntax-highlighter， 当 Markdown 中有代码块时，会用语法高亮来渲染，不同的语法元素会显示不同的颜色。
5）添加笔记管理功能
最后添加笔记管理功能 。告诉 AI：
代码块
Plain Text
实现笔记管理功能：
- 左侧添加笔记列表，显示所有笔记的标题
- 点击笔记可以切换到该笔记
这个提示词包含了所有的功能要求，AI 会一次性实现所有功能。
关键技术点
这个项目的关键是实现 Markdown 的实时预览 。当用户在左侧编辑时，右侧要实时显示渲染后的效果 。
这个功能用 react-markdown 库可以很容易实现。
代码高亮也很重要，可以让 AI 帮你配置 react-syntax-highlighter ，支持多种编程语言的语法高亮 。
为了更好的用户体验，可以让 AI 添加一些优化
比如 Tab 键插入空格而不是切换焦点，支持 Ctrl+B 加粗等快捷键， 自动保存草稿等。
扩展思路
基础版完成后，可以继续扩展功能 。
比如支持图片上传，让笔记可以插入图片；
添加目录导航， 自动生成文章大纲；
支持导出为 PDF ，方便分享；
添加主题切换，提供多种编辑器主题；
支持多种 Markdown 风格，比如 GitHub 风格 、标准风格等