作品二：笔记Markdown

​

做一个 Markdown 笔记应用可以让你学习如何处理文本编辑 、实时预览等功能。​

​

​

​

​

​

40%

​

​

​

​

60%

​

​

这个项目要实现一个完整的 Markdown 笔记应用 。用户可以创建笔记，输入标题和内容 。​

•

界面采用左右分栏，左侧是编辑器，右侧实时预览渲染后的效果 。​

•

左侧还要显示笔记列表，支持搜索 。​

•

数据保存在LocalStorage ，支持删除笔记 。​

•

代码块要有语法高亮，这样看起来更专业。​

​

🎈

技术选型上前端用 React + TypeScript + Vite ，Markdown 解析用 react-markdown ，代码高亮用react-syntax-highlighter ，样式用 Tailwind CSS ，数据存储用 LocalStorage。​

​

开发步骤​

1） 实现基础布局​

​

🔔

开发的第一步是实现基础布局，创建左右分栏的布局，左侧是编辑器，右侧是预览区 。这个布局用 Tailwind CSS 的 Flex 或 Grid 很容易实现。​

​

​

代码块​

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

​

AI 会配置 react-syntax-highlighter， 当 Markdown 中有代码块时，会用语法高亮来渲染，不同的语法元素会显示不同的颜色。​

5）添加笔记管理功能​

最后添加笔记管理功能 。告诉 AI：​

​

代码块​

Plain Text

实现笔记管理功能：​

- 左侧添加笔记列表，显示所有笔记的标题​

- 点击笔记可以切换到该笔记​

- 支持创建新笔记 、删除笔记​

- 支持搜索笔记（按标题搜索）​

- 数据保存在 LocalStorage​

​

这个提示词包含了所有的功能要求，AI 会一次性实现所有功能。​

关键技术点​

这个项目的关键是实现 Markdown 的实时预览 。当用户在左侧编辑时，右侧要实时显示渲染后的效果 。这个功能用 react-markdown 库可以很容易实现。​

代码高亮也很重要，可以让 AI 帮你配置 react-syntax-highlighter ，支持多种编程语言的语法高亮 。为了更好的用户体验，可以让 AI 添加一些优化， 比如 Tab 键插入空格而不是切换焦点，支持 Ctrl+B 加粗等快捷键， 自动保存草稿等。​

扩展思路​

基础版完成后，可以继续扩展功能 。比如支持图片上传，让笔记可以插入图片； 添加目录导航， 自动生成文章大纲；支持导出为 PDF ，方便分享；添加主题切换，提供多种编辑器主题；支持多种 Markdown 风格，​

比如 GitHub 风格 、标准风格等。​

​

​