制作简易Markdown解析器

目录

• 资源
• 思路
• 过程
• 总结

思路

1.简易markdown部分语法与html中的对应关系

符号 标签内容
# <h1></h1>
## <h2></h2>
### <h3></h3>
(以此类推)

***(多个*或-)分割线 <hr>

** 粗体 <b></b>
*斜体* <i></i>

***斜体加粗*** 组合i、b标签

代码块 <pre></pre>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y6jt5deu-1582509173337)(href)]

img嵌入p标签

[title](href)

a嵌入p标签

2.读取本地md文件
3.html中的开头和结尾代码
4.合成并导出html文件

---

过程

• 搜索参考资源
• debug的过程

js异常处理机制：https://blog.youkuaiyun.com/sdta25196/article/details/78841666

谷歌浏览器控制台：https://blog.youkuaiyun.com/weixin_43645287/article/details/87872109

• 重点的知识
  

---

总结

• 第一次(以前没有)尝到了google浏览器debug的功能，简直美滋滋
• 掌握正则表达式语法以后利用各语言的替换语法替换字符

---

资源

• 正则表达式语法*

https://baijiahao.baidu.com/s?id=1588848792548192879&wfr=spider&for=pc

• 正则表达式之简易Markdown解析器*

https://www.cnblogs.com/woai3c/p/10245792.html

• github上已有的css样式

https://www.cnblogs.com/qj0813/p/5110211.html

• 添加html头部和尾部的代码

https://blog.youkuaiyun.com/marksinoberg/article/details/51863506

• js读取文件数据

https://blog.youkuaiyun.com/qq_29002631/article/details/80341744

• 详细的h5 + js 的文件操作方法

https://segmentfault.com/a/1190000006600936

• 补充js对数据保存处理的方法之一

https://blog.youkuaiyun.com/txp1993/article/details/70046443

• Blob对象

https://www.cnblogs.com/qinmengjiao123-123/p/5603057.html

• 深入理解逻辑符*

https://www.jb51.net/article/88781.htm#

• ES6箭头函数

https://blog.youkuaiyun.com/github_38851471/article/details/79446722

• 补充：

• 水平制表符的空格数
  https://www.cnblogs.com/qingergege/p/6104577.html
• 全局替换制表符
  https://www.cnblogs.com/BobXie85/p/9901104.html

补一个demo