个人博客的markdown渲染

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


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

易山博客效果


<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>hellotitle>
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)
  })
})
复制代码

<p v-html="markdownhtml" v-highlight>p>
复制代码

好啦,这就实现啦!!!

转载于:https://juejin.im/post/5cde2d0f51882525da3a9920

你可能感兴趣的:(个人博客的markdown渲染)