highlight.js 在 Vue 中使用的一点儿经验

使用 markdown 来给程序写文档是非常方便的,自从用顺了 markdown 之后,都很久没打开过 Word 了。

既然是程序的文档,少不了需要插入一些示例代码,而对代码进行语法高亮渲染并配以合适的颜色主题,会让文档显得更炫,也更便于阅读。

要实现文档代码高亮渲染其实并不难。

实现方法

首先,把 markdown 文件加载为 vue 组件,这需要一个合适的 loader,自己目前使用 vue-markdown-loader。webpack 配置的 module.rules 中进行如下配置:

{
    test: /\.md$/,
    loader: 'vue-markdown-loader',
    options: {
        preset: 'default',
        breaks: true,
        preventExtract: true
    }
}

然后就可以在项目中直接 import md 文件了。比如:

<template>
    <MyMarkdown/>
</template>

<script>
export default {
    components: {
        'MyMarkdown': () => import('xxx.md')
    }
}
</script>

当然,通常情况下,我们会与 vue-router 一起使用,把 md 文件作为一个视力组件加载到 router-view 中去。

{
    path: 'path/home',
    component: () => import('../markdown/home.md')
},

看到这里可能奇怪,这些与文题中提到的 highlight.js 有毛关系?这是因为,vue-markdown-loader 中已经内置了对代码高这的支持。你只需要在页面中引入相关的样式,例如:

import 'highlight.js/styles/atom-one-dark.css'

然后主可以看到代码高亮的效果,通常是这样的。

看起来还不错,但这样的高亮有个问题,那就是他的背景色并不随着你所加载了 highlight.js 主题样式而改变,而且不同语言的代码在配色上的一些差异也没有很好的渲染出来。而从 highlight.js 官网示例可以看到,这些问题本不应该出现的。

为了实现与 highlight.js 官网示例中的主题效果,可以在页面中自己完成代码高亮的渲染。

<script>
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
    
const highlightCode = () => {
    const preEl = document.querySelectorAll('pre')
    preEl.forEach((el) => {
        hljs.highlightBlock(el)
  })
}
  
export default {
   mounted () {
      highlightCode()
   },

   updated () {
      highlightCode()
   }
}
</script>

可以看到,代码中使用了 highlight.js 的 highlightBlock()方法而不是官方默认示例里提到的 initHighlighting(),因为后者一般用于静态页面的渲染。如果使用它,当使用 vue-router 导航到一个新的‘页面’之后,新页面中的代码块可能无法被正确渲染。这也是为什么在 updated 钩子中再次调用 highlightCode()的原因。(实际上自己在此坑了很久,查阅不少文档才找到这一原因)

做完这些之后再看渲染效果:

果然好多了!

后记

既然是自己渲染代码高亮,那么其实 loader 中对代码块块的处理就不必要或者显得有点儿多余了,因为这些处理会增加一些计算量。所以你也可以找一些别的 loader 来替代 vue-markdown-loader,甚至尝试自己写一个 loader。

对于一个软件,官方文档是有必要仔细读的,就像前面提到的 highlight.js 中 initHighlighting() 方法的问题,其实在官方文档中也有解释。

给大家送上 EasyWeChat 教程 ¥20 元优惠码:NY2018 有效期到今年6月底,送亲友,送朋友,都可以,直接在 https://www.easywechat.com 即可使用!

原文发布于微信公众号 - 假装我会写代码(bugszoo)

原文发表时间:2018-03-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

Webpack+Babel+React开发环境搭建

前言 我们知道前端的框架纷繁复杂,各有各的优点。而我们选择使用React作为开发框架的时候,往往会选择Webpack+Babel+React来开始我们的项目。之...

25160
来自专栏前端说吧

CSS-三栏响应式布局(左右固宽,中间自适应)的五种方法

40030
来自专栏mySoul

微信小程序插件

微信小程序插件是对一组js接口,自定义组件或页面的封装,用来嵌入微信小程序中,用来被开发者调用。

2.1K30
来自专栏云计算教程系列

如何在Apache上部署多个Wordpress站点

WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统。WordPress具有插件架构和模板系统。Alexa排行前100万的网站中...

42550
来自专栏前端架构

再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询、监听用户事件。

1.9K150
来自专栏前端架构与工程

Node.js建站笔记-使用react和react-router取代Backbone

斟酌之后,决定在《嗨猫》项目中引入react,整体项目偏重spa模式,舍弃部分server端的模板渲染,将一部分渲染工作交给前端react实现。 react拥有...

26690
来自专栏拂晓风起

双击bat用CMD窗口打开jar (专为没有界面的java程序设计的)

15530
来自专栏Android知识点总结

01-React搭建react环境及SCSS的配置

64620
来自专栏進无尽的文章

兼容-记录Xcode8.0恢复插件全过程

Xcode 的插件大大丰富了 Xcode 的功能,而且有了 Alcatraz ,插件的管理也非常容易,但是有个非常恼人的问题:一旦升级 Xcode ,插件就失效...

16920
来自专栏微信小程序开发

小程序开发注意点儿,新手入门基础

1、域名配置,不配置无法访问 小程序开发,要调用API,就必须把域名填写在配置里面,这点儿一定要记住,万一服务端突然上线一次,发现线上服务出问题了,很有可能就...

545110

扫码关注云+社区

领取腾讯云代金券