关于前端渲染 MarkDown 样式

1.使用 showdown

引入：npm install showdown

使用：

main.js

import showdown from "showdown";
Vue.use(showdown);

视图
import showdown from "showdown";
let converter = new showdown.Converter();
// 显示表格
converter.setOption("tables",true);

let text= `# hello`;
let htmlText = converter.makeHtml(text); 

<div v-html="htmlText"></div>

显示经过处理的 markdown 语法的内容。

2. 使用github-markdown-css

用于修饰经过处理的 markdown内容，尽管我们对内容进行了处理，但有些内容是没办法通过设置标签进行展示的，比如说引入，原生的html没有这种样式。通过引入github-markdown-css，我们可以正常的显示引入的样式。

引入：npm install github-markdown-css

使用：

<article v-html="" class="markdown-body"><article>
<script>
	import "../node_modules/github-markdown-css/github-markdown.css"
</script>

3.使用highlight

用于渲染代码

引入：npm install highlight

使用：

main.js

import hljs from "highlight.js";
import "highlight.js/styles/default.css";

// 代码高亮
Vue.directive("highlight"，function(el){
    let blocks = el.querySelectorAll("pre code");
    blocks.forEach((block)=>{
        hljs.highlightBlock(block);
    })
})

<div v-highlight></div> 渲染的位置。