转化Markdown语法—— Markdown.Converter.js(附markdown相关CSS样式表)

简介

昨天写了一篇关于strapdown.js转化markdown语法的用法介绍,今天我将给大家简单介绍markdown.convert.js的使用。

正文

markdown.convert.js和strapdown最大的不同就是markdown.convert.js并没有集成样式,也就是说markdown.convert.js只负责将markdown语法转化为HTML语法,是真的非常简单。相比strapdown.js,他更适合需要高度自定义markdown的同学。

用法

  1. 插入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的使用方法而已。

  1. 用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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容