9.vwe开发之支持markdown

目的

网站需要支持markdown语法，博客的显示内容支持markdown语法。

解决方案

根据网络的调查，站点支持markdown的方式是将markdown语法转化为html来显示，那么我们改怎么做才能
视线这个功能呢？根据网络查询我们有一下几个选择，这里我们参考了让你的站点也支持MarkDown

1. showdown.js
2. marked.js
3. 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

不指定版本就是最新版本。

已知条件

1. 已经有List/view/add的express接口
2. 支持页面显示数据

解决路程

待解决的问题：

1. markdown的本质，为什么网站能支持markdown呢？
   markdown本质是将markdown文本根据语法转化为html和css语法，从而实现各种效果

2. 那么如何能将markdown语法文本转化为html呢？

   借助showdown.js中的Convert对象，我们可以实现markdown和html之间相互转化。

3. 如何使用？

   1. 在前端页面中引入shown.js中的Converter
   2. 新建一个Converter对象
   3. 调用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可以显示边框等等。

下一篇：10.vwe开发之mongo数据库开发