Vue解析markdown字符串，并且将其展示到页面(代码高亮+代码行号显示)，具体步骤如下：
(1) 安装依赖
// marked用于将markdown转换成html
cnpm install marked -S
// 用于代码高亮显示
cnpm install highlight.js -S
// 代码行号显示插件
cnpm install highlightjs-line-numbers.js(2) 在main.js文件中引入highlight.js
import highlight from 'highlight.js';
Vue.use(highlight);(3) 创建一个全局指令，用于代码高亮显示
在main.js文件中，创建一个自定义全局指令，如下所示：
//封装成一个指令
Vue.directive('highlight', (el) => {
let blocks = el.querySelectorAll('pre code')
blocks.forEach((block) => {
highlight.highlightBlock(block)
})
})在vue组件中，只需要使用 v-highlight 指令即可。
(4) 创建一个vue组件，用于展示markdown内容
<template>
<div>
<!-- vue展示markdown内容 -->
<div v-highlight v-html="msg" class="styleClass"></div>
</div>
</template>
<script>
export default {
name: "markdown-test",
data() {
return {
msg:'```\n' +
'public static void main(String[] args) {\n' +
'\tSystem.out.println("Hello World!!!");\n' +
'}\n' +
'```'
};
}
}
</script>
<style scoped>
.styleClass{
width: 400px;
height: 400px;
border: 1px solid red;
margin: 0 auto;
padding: 20px;
text-align: left;
}
</style>(5) 通过步骤(4)，访问的效果如下图所示
(6) 引入代码高亮插件
<script>
// 将markdown转换成html
import marked from 'marked';
// 引入样式
import "highlight.js/styles/darcula.css";
export default {
name: "markdown-test",
data() {
return {
msg:'```\n' +
'public static void main(String[] args) {\n' +
'\tSystem.out.println("Hello World!!!");\n' +
'}\n' +
'```'
};
},
mounted() {
this.msg = marked(this.msg); // 将markdown转换成html
}
}
</script>注意：如果没有引入highlight.js对应的css样式，则可能不会有高亮显示的效果。highlight.js有多种css样式，可以选择自己喜欢的样式引入。
以上代码效果如图所示：
highlight.js常见css样式如下所示
-
atelier-cave-light.css对应效果如下：
-
pojoaque.css对应效果如下：
-
kimbie.light.css对应效果如下：
-
atelier-forest-dark.css对应效果如下：
-
arduino-light.css对应效果如下：
(7) 代码行号显示
整了好久，没整出来行号。。。后面再补上。。。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/134805.html
