web页面代码片段高亮显示，highlight.js库的使用方法

大家好，欢迎来到IT知识分享网。

目录

🎉应用场景

🎉原生HTML中应用

1.直接应用

2.AJAX请求数据展示

3.高亮颜色自定义 

🎉Vue3中使用

🎉结语

🎉应用场景

在日常开发中，我们可能会遇到这样一个场景，就是在我们的网站上面显示一些代码片段，为了方便观看，我们肯定是希望代码片段是可以高亮显示的，这时候我们就可以使用highlight.js这个js库，来帮我们解决这样的问题。

像下面这样的代码片段 

🎉原生HTML中应用

我们在html文件中需要引入对应的highlight.js文件以及样式表，可以采用CDN引入的方式，或者直接去下载对应的文件。

css样式我是直接复制过来了，highlight.js是采用的CDN引入

 <style> pre code.hljs { display: block; overflow-x: auto; padding: 1em } code.hljs { padding: 3px 5px } /*! Theme: GitHub Dark Description: Dark theme as seen on github.com Author: github.com Maintainer: @Hirse Updated: 2021-05-15 Outdated base version: https://github.com/primer/github-syntax-dark Current colors taken from GitHub's CSS */ .hljs { color: #c9d1d9; background: #0d1117 } .hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-variable.language_ { /* prettylights-syntax-keyword */ color: #ff7b72 } .hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__, .hljs-title.function_ { /* prettylights-syntax-entity */ color: #d2a8ff } .hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number, .hljs-operator, .hljs-variable, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id { /* prettylights-syntax-constant */ color: #79c0ff } .hljs-regexp, .hljs-string, .hljs-meta .hljs-string { /* prettylights-syntax-string */ color: #a5d6ff } .hljs-built_in, .hljs-symbol { /* prettylights-syntax-variable */ color: #ffa657 } .hljs-comment, .hljs-code, .hljs-formula { /* prettylights-syntax-comment */ color: #8b949e } .hljs-name, .hljs-quote, .hljs-selector-tag, .hljs-selector-pseudo { /* prettylights-syntax-entity-tag */ color: #7ee787 } .hljs-subst { /* prettylights-syntax-storage-modifier-import */ color: #c9d1d9 } .hljs-section { /* prettylights-syntax-markup-heading */ color: #1f6feb; font-weight: bold } .hljs-bullet { /* prettylights-syntax-markup-list */ color: #f2cc60 } .hljs-emphasis { /* prettylights-syntax-markup-italic */ color: #c9d1d9; font-style: italic } .hljs-strong { /* prettylights-syntax-markup-bold */ color: #c9d1d9; font-weight: bold } .hljs-addition { /* prettylights-syntax-markup-inserted */ color: #aff5b4; background-color: #033a16 } .hljs-deletion { /* prettylights-syntax-markup-deleted */ color: #ffdcd7; background-color: #67060c } .hljs-char.escape_, .hljs-link, .hljs-params, .hljs-property, .hljs-punctuation, .hljs-tag { /* purposely ignored */ } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>

1.直接应用

html结构需要使用<pre><code> … </code></pre>标签包裹起来

 <pre><code > *{ margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; font-size: 16px; line-height: 1.5; color: #333; background-color: #fff; } </code></pre>

最简单的方法就是引入后highlight.js，执行一个函数，他就会自动检测你的代码的语言，给你生成对应的高亮。

<script> hljs.highlightAll(); </script>

这样子之后，代码就会达到高亮的效果了。

2.AJAX请求数据展示

第二种场景是我们需要的代码片段不是现成的，需要通过一些请求才能拿到，这时候我们可以这样做。

假设这是请求回来的数据

 const Code = { language: 'css', content: `*{ margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; font-size: 16px; line-height: 1.5; color: #333; background-color: #fff; } *{ margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } ` }

我们可以使用highlight.js内置的另外一个函数，对代码片段进行解析

const res = hljs.highlight(Code.content, { language: Code.language }) console.log(res);

得到的结果：

我们需要的是html结构，所以我们需要value值，然后将其渲染到页面上即可，但是记得需要加上class类名，因为 highlight.js是通过类名来对代码片段进行高亮渲染的

 const code = document.querySelector('pre code') code.innerHTML = res.value code.className = `hljs language-${Code.language}`

这样也就得到的对应的效果

3.高亮颜色自定义 

其实通过观察css和生成的html结构，可以看到每一句代码都是由span标签包裹，且根据不同的代码，添加了不同的class类名

所以我们可以改变css中的颜色，来实现自己定制的特点颜色高亮效果

这样就实现了自定制的代码高亮效果了

🎉Vue3中使用

这里只列举Vue3是因为官方写了一个关于vue3的插件，这样可以让我们更方便的使用，vue2的话可能使用不了此插件，可以像前面那样也是可以实现的。

安装对应的包

npm i highlight.js npm i @highlightjs/vue-plugin

在main.js中全局注册此插件（类似于组件），并引入对应的js库和css样式表

import { createApp } from 'vue' import App from './App.vue' import 'highlight.js/lib/common' import hljsVuePlugin from '@highlightjs/vue-plugin' //插件 import 'highlight.js/styles/vs2015.css' //样式表，很多可以自己选择或定制 const app = createApp(App) //注册组件 app.use(hljsVuePlugin) app.mount('#app') 

这样之后我们可以直接使用组件的方式，就不用<pre><code> … </code></pre>标签包裹了

<template> <highlightjs autodetect :code="code" /> </template> <script setup> import { ref } from 'vue' const code = ref( ` <template> <div> <h1>吃饭</h1> <p>睡觉</p> </div> </template> ` ) </script>

效果 

🎉结语

更多使用方法可以参考官网

highightjs官网

highightjs中文官网

可以对其插件进一步的封装，完成一些小功能，比如代码复制，代码编写等等