代码高亮的可行性方案，highlight.js

概述

在博客或者文档中，通常会需要会需要高亮显示代码，这通常需要满足屏幕大，高刷(...bushi), 应该是配色好看，插件生态丰富。目前实现代码分割的主要是两个库PrismJS,highlight.js 。

vue-highlight-code 实现代码分割用的是 highlight.js

代码高亮相关的三个部分

• 代码分割以及高亮
• 代码行数显示
• 复制按钮

代码分割以及高亮

浏览器最终呈现的 效果 是HTML+CSS，但我们输入的代码格式为字符串。需要一个转化的过程，从字符串 -> 带标签的DOM树。

很方便的是，highlight.js 帮我们实现了一套 split分割+keyword+正则的解析。

帮助我们将代码从字符串转化为DOM

from

const value = `import { HighCode } from 'vue-highlight-code';
import 'vue-highlight-code/dist/style.css';
export default {
    components: {
      HighCode
    },
    data(){
​
    }
}`

to

此外，在highlight 解析过程中,还会给对应的span 打上class 标签，从而满足css 样式渲染, css 样式表最终为 代码提供高亮颜色

最终结果为

字符串解析 -> DOM树 -> DOM树属性安装 -> CSS样式加载

复制选项

剪贴板 Clipboard API 提供了响应剪贴板命令（剪切、复制和粘贴）与异步读写系统剪贴板的能力。从权限 Permissions API 获取权限之后，才能访问剪贴板内容；如果用户没有授予权限，则不允许读取或更改剪贴板内容。

也就是在点击复制按钮后，将相应的内容写入clipboard

navigator.clipboard.writeText(props.codeValue)

代码行数显示

组件中显示代码使用的方法比较简单

首先在nextTick中获取渲染完成后的代码块的 offsetHeight 的高度，并获取代码的line-height行高，最终计算出行数，并进行渲染

参考

vue-highlight-code 代码高亮组件

blog.rexskz

mdn

highlight.js