关于前端渲染 MarkDown 样式
1.使用 showdown
使用 showdown,可以将 markdown语法的内容转换为 html格式的内容
# hello
=><h1>hello</h1>
引入: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);
})
})
<article v-html="htmlCode" v-highlight class="markdown-body"></article>
渲染的位置。
4.完整代码示例
<template>
<div>
<article v-html="htmlText" class="markdown-body"></article>
<article v-html="htmlCode" v-highlight class="markdown-body"></article>
</div>
</template>
<script>
import "/node_modules/github-markdown-css/github-markdown.css"
import showdown from 'showdown';
let converter = new showdown.Converter();
// 显示表格
converter.setOption("tables",true);
export default {
name: "Home",
data(){
return{
htmlText: '',
htmlCode: ''
}
},
mounted(){
this.test();
},
methods: {
test(){
let text= `# hello`;
let htmlText = converter.makeHtml(text);
this.htmlText = htmlText;
let code = `
public void main(){
System.out.println();
}`;
this.htmlCode=converter.makeHtml(code);
}
}
}
</script>
<style scoped>
</style>