html展示值 vue_vue中使用markdown富文本，并在html页面中展示

想给自己的后台增加一个markdown编辑器，下面记录下引用的步骤

引入组件mavon-editor

// 插件下载

npm install mavon-editor -S

// 引入组件

import { mavonEditor } from 'mavon-editor'

import 'mavon-editor/dist/css/index.css'

comoponents: {

mavonEditor

}

//html引入

效果展示：

前台展示

后台录入markdowN语法后，获取文章，此时数据如下，是markdown语法格式。在前台展示需要利用marked插件和highlight.js处理

marked将markdown语法渲染成html语法

npm install marked -S

import marked from 'marked'

var markdowncontent = "console.log('hello.word')"

this.content = marked(markdowncontent)

代码高亮

npm install highlight.js

import '@/assets/css/markdown/dark.css' //引入代码高亮的css

import hljs from 'highlight.js'

//封装成一个指令

Vue.directive('highlight', (el) => {

let blocks = el.querySelectorAll('pre code')

blocks.forEach((block) => {

hljs.highlightBlock(block)

})

})

mardown文章样式

/*添加自己喜欢的样式，也可以去网找一份*/

.content {

h1, h2, h3, h4 {

color: #111111;

font-weight: 400;

margin-top: 1em;

}

h1, h2, h3, h4, h5 {

font-family: Georgia, Palatino, serif;

}

h1, h2, h3, h4, h5, dl{

margin-bottom: 16px;

padding: 0;

}

p {

margin: 8px 0;

}

h1 {

font-size: 48px;

line-height: 54px;

}

h2 {

font-size: 36px;

line-height: 42px;

}

h1, h2 {

border-bottom: 1px solid #EFEAEA;

padding-bottom: 10px;

}

h3 {

font-size: 24px;

line-height: 30px;

}

h4 {

font-size: 21px;

line-height: 26px;

}

h5 {

font-size: 18px;

list-style: 23px;

}

a {

color: #0099ff;

margin: 0;

padding: 0;

vertical-align: baseline;

}

a:hover {

text-decoration: none;

color: #ff6600;

}

a:visited {

/*color: purple;*/

}

ul, ol {

padding: 0;

padding-left: 24px;

margin: 0;

}

li {

line-height: 24px;

}

p, ul, ol {

font-size: 16px;

line-height: 24px;

}

ol ol, ul ol {