Markdown是什么？
如果你用过微信聊天的加粗功能，你就已经接触过类似的东西了。Markdown是一种特别简单的写作格式——你在文字前面加个井号就是标题，加两个星号就是加粗，写起来比Word快多了。
程序员写文档、博主写文章、学生记笔记都爱用它。今天我们来做一个在线的Markdown编辑器，左边打字，右边实时看效果。
整体设计
想象一下：打开网页，屏幕分成左右两半。左边是一个文本框，你在里面用Markdown语法写东西；右边立刻显示排版好的效果。就像一面神奇的镜子，你写什么，它就帮你美化什么。
第一步：搭建页面结构
创建 index.html 文件：
display: flex 的意思是让两个元素并排显示，就像把两张桌子并在一起。
第二步：引入Markdown解析库
把Markdown语法变成漂亮的网页需要一个翻译官。我们用一个叫 marked 的工具库，它就像一个翻译，把Markdown翻译成浏览器能显示的格式。
在HTML的body结束标签前加上：
第三步：实现实时预览
继续在script标签后面加上我们自己的代码：
这段代码做了一件事：每当你在左边打字（input事件），就把内容交给marked翻译，然后显示在右边。
第四步：加一些默认内容
打开编辑器空空的不好看，我们在textarea里预填一些示例文本，让用户一看就知道怎么用：
# 欢迎使用Markdown编辑器
## 这是二级标题
这是加粗文字
- 列表项1
- 列表项2
同时在页面加载时触发一次渲染，这样预览区域一开始就有内容。
第五步：美化样式
给预览区域加上漂亮的排版样式：标题用深色，段落有行间距，列表有缩进，代码块有灰色背景。这样右边看起来就像一篇排版好的文章。
第六步：加上保存功能
用localStorage保存用户写的内容，下次打开还能看到。在input事件里加一行保存代码，在页面加载时读取之前保存的内容：
// 保存
localStorage.setItem("md-content", editor.value);
// 读取
var saved = localStorage.getItem("md-content");
if (saved) editor.value = saved;
可以继续改进的地方
一个实用的Markdown编辑器就这么做好了。虽然功能比不上专业软件，但它是你自己写的，想加什么功能都可以。