Vue解析markdown,并将其展示到页面
编辑
63
2023-04-20
- 安装依赖
在vue项目下打开命令窗口,并输入以下命令:
// marked 用于将markdown转换成html
npm install -g marked
// 用于代码高亮显示
npm install highlight.js
// 代码行号显示插件
npm install highlightjs-line-numbers.js
- 在main.js文件中引入highlight.js
import hljs from 'highlight.js';
Vue.use(hljs);
- 同样在main.js文件中,创建一个自定义的全局指令
//封装成一个指令,highlight是指令的名称
Vue.directive('highlight', (el) => {
let blocks = el.querySelectorAll('pre code')
blocks.forEach((block) => {
// 创建ol标签元素
let ol = document.createElement("ol");
// 2.根据换行符获取行数,根据获取的行数生成行号
let rowCount = block.outerHTML.split('\n').length;
for(let i=1;i < rowCount;i++){
// 创建li标签元素
let li = document.createElement("li");
let text = document.createTextNode(i);
// 将生成的行号添加到li标签中
li.appendChild(text);
// 将li标签添加到ol标签中
ol.appendChild(li);
}
// 为ol标签添加class名
ol.className = 'pre-numbering';
block.parentNode.appendChild(ol);
hljs.highlightBlock(block)
})
- 在vue组件中,只需使用 v-highlight 指令即可。
<template>
<div class="article">
<!-- vue展示markdown内容,v-highlight自定义指令 -->
<<div v-highlight v-html="article" class="markdown-body" id="content"></div>
</div>
</template>
注意:添加 markdown-body 类名
- 解析markdown转换为html
<script>
// 将marked 引入
import { marked }from 'marked';
// 引入代码高亮样式
import "highlight.js/styles/darcula.css";
export default {
name: "article",
data() {
return {
article: '```\n' +
'<p>显示代码高亮</p>\n' +
'<p>显示代码行号</p>\n' +
'```'
};
},
mounted() {
// 调用marked()方法,将markdown转换成html
this.article= marked(this.article);
}
}
</script>
- 添加样式
.article {
width: 1200px;
margin: 30px auto;
overflow: hidden;
}
/* markdown 行号的样式 */
#content li {
list-style: decimal;
}
.article-con div pre {
position: relative;
padding: 0 29px;
overflow: hidden;
font-size: 90%;
line-height: 1.9;
background: #282c34;
}
.article-con div pre code {
padding: 0.4em;
}
.article-con div .pre-numbering {
position: absolute;
top: 0;
left: 0;
width: 29px;
padding: 9px 7px 12px 0;
border-right: 1px solid #C3CCD0;
background: #282c34;
text-align: right;
font-size: 16px;
line-height: 1.45;
}
.pre-numbering li{
list-style:none;
font-family: Menlo, monospace;
color: #abb2bf;
}
注意:如果没有引入highlight.js对应的css样式,则不会有代码高亮显示的效果。highlight.js有多种css样式, highlight.js对应的css样式在–node_modules–>highlight.js–>styles 目录下,可以选择自己喜欢的样式引入。
- 0
- 0
-
分享