在博客或者文档中,通常需要对代码进行高亮显示,通常需要满足大屏高刷的要求(...bushi),应该是彩色的搭配好看,插件生态丰富。目前实现代码拆分的主要有PrismJS和highlight.js这两个库。vue-highlight-code实现代码切分使用highlight.js代码高亮相关三部分代码切分高亮代码行数显示复制按钮代码切分高亮浏览器最终渲染效果是HTML+CSS,但是代码我们输入的格式为字符串。需要一个转换过程,从string->taggedDOMtree。非常方便,highlight.js帮我们实现了一套拆分+关键字+正则分析。帮助我们将代码从字符串转换为DOM,data(){}}`to另外,在高亮解析过程中,对应的span会打上class标签,以满足css样式渲染,css样式表最终会提供一个高亮颜色对于代码,最终的结果是字符串解析->DOM树->DOM树属性安装->CSS样式加载复制选项剪贴板剪贴板API提供了响应剪贴板命令(剪切、复制、粘贴)和异步的能力读写系统剪贴板。在从PermissionsAPI获得权限之前,无法访问剪贴板内容;如果用户不授予权限,则不允许读取或更改剪贴板内容。即点击复制按钮后,将相应的内容写入clipboardnavigator.clipboard.writeText(props.codeValue)代码行显示组件中显示代码的方法比较简单。首先在nextTick高度中获取渲染代码块的offsetHeight,并获取代码的line-height行高,最后计算行数,渲染vue-highlight-code代码高亮组件参考blog.rexskzmdnhighlight。js
