简介
昨天写了一篇关于strapdown.js转化markdown语法的用法介绍,今天我将给大家简单介绍markdown.convert.js的使用。
正文
markdown.convert.js和strapdown最大的不同就是markdown.convert.js并没有集成样式,也就是说markdown.convert.js只负责将markdown语法转化为HTML语法,是真的非常简单。相比strapdown.js,他更适合需要高度自定义markdown的同学。
用法
- 插入script标签,引入markdown.convert.js库
<script src="http://cdn.bootcss.com/pagedown/1.0/Markdown.Converter.js"></script>
2.书写一个wrapper包装HTML语法,放在body中即可,例如
<xmp>
# Markdown text goes in here
## Chapter 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
## Chapter 2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.## Chapter 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</xmp>
xmp标签可以替换成其他任何的HTML标签,添加任何CSS选择器,这里我只是沿用了strapdown.js的使用方法而已。
- 用markdown.convert.js语法进行转化
<script >
var target = document.querySelector("xmp")
var c = new Markdown.Converter()
var html = c.makeHtml(document.querySelector("xmp").innerText)
document.body.innerHTML = html
</script>
这样就可以了
放在浏览器运行的结果如下:
是不是很简单啊!
CSS样式表
这样做确实很简单,不给自己写CSS依然让人痛苦,所以我在其他markdown编辑器中发现了以下几个CSS文件样式表,效果图如下:
以下是CSS源码百度网盘地址:
链接: https://pan.baidu.com/s/1PHYFk98FkTfcvPX_LKTOPA 密码: vmzx