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