利用highlight.js和marked渲染和解析markdown文档

1.markdown

在后台富文本框中，编辑好markdwon格式的文本，保存进数据库

2.marked.js

在页面中展示时，需要首先将markdown格式转为带有html标签的文本，这里选用了marked.js
安装：npm install marked --save

2.1 marked的使用

<script>
 import marked from 'marked'
 marked.setOptions({
      renderer: new marked.Renderer(),
      highlight: function(code,lang) {
        if (lang && hljs.getLanguage(lang)) {
          //用了highlight.js，就需要在这里显示
	  //return hljs.highlight(lang, code, true).value;
        } else {
          //return hljs.highlightAuto(code).value;
        }
      },
      pedantic: false,
      gfm: true,
      tables: true,
      breaks: false,
      sanitize: false,
      smartLists: true,
      smartypants: false,
      xhtml: false
    }
  );
this.content = marked(this.content)//渲染文本
</script>
``` 

做完上面这步后，就已经把`markdwon`文档解析成了`html`，显示出来是没有样式的    
##### a.原始代码：  
![15737864251.png](https://image.hr2812.cn/Fqno8fLWt0ihb9HU611IBbGqzD8T)  
##### b.解析后的`html`代码  
![15737868561.png](https://image.hr2812.cn/FvJcgoKW3kq2NVPP5t457WKhU8qX)  
可以看到解析后的标签里面是没有样式的，显示的效果如下  
##### c.解析后无代码高亮效果   
![15737869541.png](https://image.hr2812.cn/FiAHwknAWSgm3O5st9OzxD7Ym61j)  
这里显示出了`markdown`的引用、和行内代码、代码块的样式，这些样式是`github`提供的。如果项目里面没有引入`github`相关的`css`，就没有这种效果。  
#### 3.highlight.js  
把上面的注释放开，安装和引用`highlight.js`、和你选择的样式

npm install highlight.js
import hljs from “highlight.js”
import ‘highlight.js/styles/atelier-forest-light.css

```

d.加入后的效果

可以看到代码块里面的代码关键字有颜色了。