如何把markdown转换成HTML?
描述: 网页上的博客都是.html文件,要把.md文件转换成HTML是上传前的第一步
使用github上的开源库,提供了markdown语法转换为HTML
markdown转换为HTML的原理
其实就是一个通过一个转换器函数marked,接收MarkDown文本作为输入,输出一段HTML。
markdown的内容本质就是一个大字符串,转换器函数使用正则表达式对这些特殊的标识符进行解析,比如 # ## + - > 。比如 对“# ”【#号后紧跟一个空格的,#号前面没内容,#号作为一行文本的开头,注意前面连空格都不能有】解析就会用一个\标签替换并填充内容,如何判断到哪结束呢? 解析回车换行符…
注意:对一些特殊字符的解析必须是在开头才有效
#表示标题 >表示引用,对于>这种字符的替换要格外注意,这里需要转义,防止XSS。
最后把返回的内容通过操作DOM方式进行文本插值(innerHTML)的方式插入到div容器中.(index.html内)
而node环境下因为没有DOM操作,用模板替换的方式,使用正则把内容替换掉占位符。
md 问题汇总
md 插图
注意,要在网页上插图,本地的图片是不行的,必须先把本地图片上传到互联网上通过链接的形式插入。
3.2插图时如何自定义图片的宽高?
使用md语法进行插图是没办法自定义图片的宽高,但是别忘了,md支持HTML标签的,直接通过img标签的方式设置图片的宽高,md它的本质只是为了让我们抛弃鼠标
在线HTML写md动态转换为真正的HTML
1.把MarkDown放在一个容器盒子里面
2.DOM操作获取盒子内容
3.用转换器函数转为HTML,再插入盒子
遇到的问题
等解析到脚本的时候转换才开始,那么页面会显示一段原始的文档,如果把脚本位置放在盒子前面,又获取不到文本内容。
md 添加样式
反正最终md会被转换为html,在html文件中通过link标签引入一段样式即可。
md 内部添加一些样式
可以使用md支持的font标签,支持color,size,face等样式。
所以,总体的样式可以用外部css设置,简单的添加样式可以使用font标签
离线书写md,批量自动转换为HTML
描述:
如果通过每次在html页面中书写md,再转换的话,每次会这样,复制一遍之前的html(因为里面包含了css和转换器脚本),复制自己的md文件内容,覆盖html中的md,然后另存为一个新的html。很费劲… 如何可以根据我们的md文件自动生成对应的html文件呢???
使用Node ,Node是一个JavaScript运行时,提供了我们不依赖浏览器允许脚本的能力,同时它还提供了一些操作文件的API。使用这些API编写脚本可以自动地完成我们的需求。
前置工作:
1.编写一个index.html文件作模板,里面把样式和js加载写好,并设置一个容器盒子,里面放上占位符
2.在博客项目的目录下新建一个md文件夹,用来管理存放所有的md文件。
注意:好的习惯可以屏蔽掉一些不必要的操作。
使用文件夹分类管理的思路就是使用软件中的分而治之思想
如果把项目目录抽象成一个大object,那么以下的每个文件夹就是子object或者Array。
比如 src目录 就是一个子object,里面可以用css,js,image这些文件夹进行分类管理。而类似于md这种文件夹就像Array,里面就存放了同一类内容,就是我们的博客文件。
利用node 读写目录和文件的API完成自动转换的任务
1.读md目录下的文件
2.读取md文件的内容和模板的内容
3.使用正则对模板和内容进行替换
4.保存(写入文件)