掘金文章中的语法高亮效果是怎么实现的？掘金文章中的语法高亮效果是怎么实现的？讲在前面不知道你有没有好奇过，掘金文章中

掘金文章中的语法高亮效果是怎么实现的？

讲在前面

不知道你有没有好奇过，掘金文章中的代码块是怎么实现语法高亮的？反正我遇见好玩儿的，就去研究下，于是我用开发者工具去审查了元素，就发现了其中的秘密（坏笑）。

看到这个熟悉的hljs类名，我猜它就是实现高亮的类名，于是我就去百度了一下，发现它是一个开源的代码高亮库，叫highlight.js

揭秘

先附个链接：highlight.js

highlight.js 是什么？

highlight.js 其实就是一个用于代码高亮的 JavaScript 库，它支持超过 200 种编程语言，并且支持多种主题。

highlight.js 怎么用？

1、创建一个html文件，引入 highlight.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>highlight js demo</title>
</head>
<body>
</body>
</html>

2. 引入 highlight.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>highlight js demo</title>
    <!-- 引用下 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script>
    <!-- 引用默认的样式 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/default.min.css">
</head>

<body>
</body>
</html>

3. 准备一段 js，并添加`class="javascript"` 并调用`hljs.highlightAll();`

没错，给代码增加class名为javascript，就是告诉highlight.js，将这段代码按照js的语法进行高亮，然后调用hljs.highlightAll();，就可以实现代码高亮了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>highlight js demo</title>
    <!-- 引用下 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script>
    <!-- 引用默认的主题 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/default.min.css">
</head>

<body>
    <!-- 准备一段 js -->
    <pre>
        <code class="javascript">
                // 没错，就是经典的 hello world
                function hello() {
                    console.log('hello world')
                }
        </code>
    </pre>
    <!-- 准备一段 js -->
    <pre>
        <code class="php">
                $_user = "a" // php
        </code>
    </pre>
</body>
<script>
    // 调用 highlightAll 方法
    hljs.highlightAll();
</script>
</html>

效果

简单不，几行代码，就可以实现代码高亮了。奇怪的知识又增加了。

进阶玩法

1、自定义主题

highlight.js 支持多种主题，你可以去官网查看：主题

只需要引入对应的主题样式即可，比如我想要引入atom-one-dark主题，只需要在<link>标签中添加href属性即可。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>highlight js demo</title>
    <!-- 引用下 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script>
    <!-- 引用喜欢的主题 -->
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/atom-one-dark.min.css">
</head>

<body>
<!-- 准备一段 js -->
<pre>
<code class="javascript">// 没错，就是经典的 hello world
function hello() {
    console.log('hello world')
}</code>
</pre>
<!-- 准备一段 php -->
<pre>
<code class="php">$_user = "a" // php
$_gender = "male" // php
</code>
</pre>
</body>
<script>
    // 调用 highlightAll 方法
    hljs.highlightAll();
</script>
</html>

效果

2、与 `vue` 结合使用

vue2 和 vue3 都可以使用，这里以 vue2 为例，vue3 的使用方式类似。

highlightjs的vue2插件文档

示例 1 只加载`javascript`高亮

安装需要的包

npm install highlight.js@^10.7.2 --save
npm install @highlightjs/vue-plugin@1.0.2 --save

引入 highlight.js 和对应的主题，并使用highlightjs插件

// main.js
import Vue from 'vue'
// 引入 highlight.js 核心
import hljs from 'highlight.js/lib/core';
// 引入 highlight.js 的 默认主题
// 所有的主题都在 styles 目录下，可以自行选择
import 'highlight.js/styles/default.css';
// 引入 highlight.js 的 javascript 语言包
import javascript from 'highlight.js/lib/languages/javascript';
// 引入 highlight.js 的 vue 插件
import vuePlugin from "@highlightjs/vue-plugin";
// 注册 highlight.js 的 javascript 语言包
hljs.registerLanguage('javascript', javascript);
Vue.use(vuePlugin);

<template>
    <div>
        <!-- 设置自动识别 使用 code 属性绑定要显示的代码字符串 -->
        <highlightjs autodetect :code="code" />
        <!-- 或者指定语言选项 设置按照 javascript 语法高亮-->
        <highlightjs language='javascript' code="var x = 5; var y = 15;" />
    </div>
</template>

<script>
    export default {
        name: 'App',
        components: {},
        data() {
            return {
                code: `function helloWorld () { \n   console.log('hello world') \n}`,
            }
        },
        methods: {},
    }
</script>

效果

示例 2 加载所有语言

官网说从 v11之后就可以用以下方式加载所有语言，然而@highlightjs/vue-plugin 的 vue2版本是 v1的，貌似不支持这种方式，所以只能手动引入所有语言包。

import hljs from 'highlight.js/lib/common';
import vuePlugin from "@highlightjs/vue-plugin";
Vue.use(vuePlugin);

安装需要的包

npm install highlight.js@^10.7.2 --save
# 为啥用1.0.2这个版本，因为 2.0 以上的是支持 vue3 的
npm install @highlightjs/vue-plugin@1.0.2 --save

引入 highlight.js 和对应的主题，并使用highlightjs插件

// main.js
import Vue from 'vue'
import App from './App.vue'
import 'highlight.js';
import 'highlight.js/styles/default.css';
import vuePlugin from "@highlightjs/vue-plugin";
Vue.use(vuePlugin);

<template>
    <div>
        <!-- 设置自动识别 使用 code 属性绑定要显示的代码字符串 -->
        <h3>java</h3>
        <highlightjs autodetect :code="javaCode" />
        <h3>php</h3>
        <highlightjs language='php' :code="code" />
        <h3>javascript</h3>
        <!-- 或者指定语言选项 设置按照 javascript 语法高亮-->
        <highlightjs language='javascript' code="var x = 5; var y = 15;" />
    </div>
</template>

<script>
    export default {
        name: 'App',
        components: {},
        data() {
            return {
                code: `$_user = "1234567890"; \n$_pwd = "1234567890";`,
                javaCode: `package l2f.gameserver.model;
                \n import java.util.ArrayList;
                \n public abstract class L2Character extends L2Object
                \n {
                \n public static final Short ABNORMAL_EFFECT_BLEEDING = 0x0;
                \n }`
            }
        },
        methods: {},
    }
</script>

效果

vue3 的我就不写了，跟上面差不多

highlightjs的vue3插件插件文档

总结

highlight.js 是一个开源的代码高亮库，支持多种编程语言，并且支持多种主题，使用起来非常简单，只需要引入 highlight.js 和对应的样式，然后给代码块添加对应的class，最后调用hljs.highlightAll();就可以实现代码高亮了。

欢迎关注我的个人公众号「「小枫学幽默」」一起成长，一起分享生活！！

扫码关注我.png

掘金文章中的语法高亮效果是怎么实现的？