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

目录

🎉应用场景

🎉原生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中文官网

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