个人博客的markdown渲染-CSDN博客

如何让你的页面渲染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>
复制代码

好啦，这就实现啦！！！

个人博客的markdown渲染

如何让你的页面渲染markdown代码更加漂亮 ^-^!

先来看一下效果掘金的效果把~

“相关推荐”对你有帮助么？