阿瑞斯的BLOG

使用markdown遇到的问题

记录一下使用md时遇到的问题

如何把markdown转换成HTML?

描述: 网页上的博客都是.html文件,要把.md文件转换成HTML是上传前的第一步

使用github上的开源库,提供了markdown语法转换为HTML

https://github.com/chjj/marked

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.保存(写入文件)