vue2使用MarkDown的回显与生成自定义目录

最终实现效果图：

1.回显markdown

1.1安装mark

npm install marked -s

1.2使用

//导入
import {
		marked
	} from 'marked'
//
data(){
    return{
        textDatas: "",
    }
},
    methods: {
        getData() {//获取数据
            axios({
                url: "http://localhost:8889/articles/view/1585140205713166338",
                method: "post"
            }).then(res => {
                if (res.status == 200) {
                    this.textDatas = res.data.data.body.content
                }
            })
        }
    },
        computed: {
            content() {//使用计算属性渲染
                var reg =new RegExp("<pre","g")//这里是处理使用prism插件后显示行号
                var content=marked(this.textDatas)
                var str=content.replace(reg,`<pre class='line-numbers'`)
                return str
            }
        }

<template>
	<div class="content">
		<div>
			<div v-html="content" class="markdown-body html-content"></div>
		</div>
	</div>
</template>

此时页面应渲染出来了，但是没有markdown的样式！

1.3下载样式并导入

#下载样式
npm install github-markdown-css
#导入
import "github-markdown-css"
#并使用类名
<div v-html="content"  class="markdown-body"></div>

扩展：如果还是觉得默认的效果不满意，可以去这里：Themes Gallery — Typora 选择你想要的主题换上去。使用也很简单，选择自己想要的模板，点击下载样式就好了。

1.4代码高亮(1)

官网地址：Prism

//安装prismjs插件
npm install prismjs -S
 
//安装prismjs的编译器插件
npm install babel-plugin-prismjs -D

安装完毕会生成一个babel.config.js

//修改对应配置，重启项目
module.exports = {
	presets: [
		'@vue/cli-plugin-babel/preset'
	],
	plugins: [
		["prismjs",
			{
				languages: ["javascript", "css", "markup",
					"html", "php", "dart", "bash", "nginx", "sql", "c",
					"cpp", "python", "go", "java", "bash", "json"
				],
				plugins: [
					"line-numbers",
					"show-language",
					"copy-to-clipboard"
				], //配置显示行号插件
				theme: "okaidia", //主体名称 coy tomorrow 或者看官网选主题
				css: true
			}
		]
	]
}

//导入
import prism from "prismjs";

//调用
prism.highlightAll()

注意prism.highlightAll()并不会自己生效，所以我们需要监听对应显示的数据调用该方法。  

watch: {
			textDatas() {
				this.$nextTick(() => {
					setTimeout(() => {
						prism.highlightAll()