概述
在博客或者文档中，通常会需要会需要高亮显示代码，这通常需要满足屏幕大，高刷(...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行高，最终计算出行数，并进行渲染
参考
mdn
