如何让你的页面渲染markdown代码更加漂亮 ^-^!
先来看一下效果掘金的效果把~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>hello</title>
</head>
<body>
<main>
<p> hello my friend !!! </p>
</main>
</body>
</html>
我们来实现它！
安装
npm install highlight.js [--save-dev]
使用
在你的import 文件入口引入
vue -> main.js nuxt -> plugins 下的js
import hljs from 'highlight.js' // 引入JS
import 'highlight.js/styles/googlecode.css' //样式文件
Vue.directive('highlight',function (el) {
let blocks = el.querySelectorAll('pre code');
blocks.forEach((block)=>{
hljs.highlightBlock(block)
})
})
<!-- 在pre code的父容器上添加v-highlight指令 -->
<p v-html="markdownhtml" v-highlight></p>
好啦，这就实现啦！！！
