vue中的markdown

本文介绍vue中markdown的使用，极简，三行代码搞定！

这里使用marked.js解析markdown代码

惯例先安装：

cnpm install marked

具体代码如下：

<div class="article" v-html="compiledMarkdown"></div>

data () {
 return {
   context: ""
 }
}

computed:{
   compiledMarkdown () {
     return marked(this.context, { sanitize: true })
   }
 }

搞定！

其中this.context就是获取markdown编写的文档字符串。

这个字符串怎么来的不再本文讨论范围内，写demo的时候可以写成静态字符串就OK了

最后，由markdown语法生成的HTML样式比较丑，我主要对标签pre、code、blockquote样式进行重写，效果如下：

markdown语法：

> 老夫看你骨骼清奇，根骨奇佳，必成大事，是万中无一的武学奇才，维护世界和平就靠你了，我这有本秘籍《如来神掌》，见与你有缘，就十块卖给你了！
>
> >——《功夫》•周星驰

其中最后一行> >两个，这里主要是想最后一行实现居左的布局

CSS语法：

blockquote{
 border-left: 6px solid #ddd;
 margin: 30px 0;
 padding-left: 20px;
}
blockquote blockquote{
 border: none;
 text-align: right;
}

markfdown语法（部分）：

```
<div class="article" v-html="compiledMarkdown"></div>
```

CSS语法：

pre{
 background-color: #666;
 padding: 10px 10px;
}
code {
 color: #fff;
}