目的
网站需要支持markdown语法,博客的显示内容支持markdown语法。
解决方案
根据网络的调查,站点支持markdown的方式是将markdown语法转化为html来显示,那么我们改怎么做才能
视线这个功能呢?根据网络查询我们有一下几个选择,这里我们参考了让你的站点也支持MarkDown
- showdown.js
- marked.js
- pagedown.js
在git上它们的star/forked情形是:
project | star | forked |
---|---|---|
showdown.js | 8880 | 1233 |
marked.js | 19238 | 2538 |
pagedown.js | 457 | 272 |
本着选择用的人最多的一般最简单,想选marked.js的,但是博客是showdown.js,那么就用showdown吧,执行下面
代码安装showdown.js
npm i --save-dev showdown
不指定版本就是最新版本。
已知条件
- 已经有List/view/add的express接口
- 支持页面显示数据
解决路程
待解决的问题:
-
markdown的本质,为什么网站能支持markdown呢?
markdown本质是将markdown文本根据语法转化为html和css语法,从而实现各种效果 -
那么如何能将markdown语法文本转化为html呢?
借助showdown.js中的Convert对象,我们可以实现markdown和html之间相互转化。 -
如何使用?
- 在前端页面中引入shown.js中的Converter
- 新建一个Converter对象
- 调用makeHtml来转化为html
代码如下:
import {Converter} from 'showdown'; let converter = new Converter({tables: true}); //方法定义,提供调用,但是生成的是html文本,需要声明文本为html,在vue中将dom节点声明为v-html就好了了 convertMarkdown(context) { return converter.makeHtml(context); },
支持tables、emoji等功能
markdown中如果有支持table/emoji等功能,需要在初始化converter中传入extension的参数,具体的可以参考
设置extensions
代码如下:
import {Converter} from 'showdown';
let converter = new Converter({tables: true});
自定义css
和通常的html没什么区别,只要在css/style.css中定义相应的css就好了,例如table中显示border,在css中增加如下
代码。
table, td, th {
border: 1px solid black;
}
可以给table自定义border等属性,table可以显示边框等等。