多种代码高亮实现方式一、前言由于最近开发openApi新文档系统有涉及到code view 的需求虽然有很多工具可以实现开发需求但对于看脸的时代code也是有属于自己的颜值本文会对其中几种实现方式进行Demo尝试并简述其特点和缺点。highlight.jsPrismjsvue-codemirrorVue Code View(VCV)google-code-prettifyRainbowCrayon Syntax HighlighterACE…下面一起来看看以上的哪个才是高能帅二、highlight.js官方网址https://highlightjs.readthedocs.io/en/latest/官方网址中文http://highlight.cndoc.wiki/doc2.1 安装npm install highlight.js2.2 引入使用(1)在入口文件创建指令//导入代码高亮文件importhljsfromhighlight.js;import{lineNumberInit}fromhighlightjs-line-numbers.js;//导入代码高亮样式importhighlight.js/styles/a11y-dark.css;lineNumberInit(hljs,window,window.document);//定义一个代码高亮指令app.directive(highlight,function(el){lethighlightel.querySelectorAll(pre code);highlight.forEach((block){hljs.highlightElement(block);hljs.lineNumbersBlock(block);});});(2) 在组件使用divv-highlightprecode!-- highlight.js --const queue new Queue(); queue.enqueue(); queue.enqueue(); console.log(queue.size); // 2 console.log(...queue); // console.log(queue.dequeue());/code/pre/div效果图2.3 引入行数(1)安装// 代码高亮npm install highlightjs-line-numbers.js(2)引入使用// 行数import{lineNumberInit}fromhighlightjs-line-numbers.js;// 使用lineNumberInit(hljs,window,window.document);这时会发现没有找到lineNumberInit()方法咋回事赶紧去node_modules/highlightjs-line-numbers看看这才知道原来该文件压根就没有导出该方法接下来就只能自己根据原本代码封装到方法里面导出使用创建highlightjs-line-numbers.js声明方法并导出由于第一个参数是传入hljs对象就不需要从w去取将w.hljs替换为hljs添加以下代码functionlineNumberInit(hljs,w,d){varTABLE_NAMEhljs-ln,LINE_NAMEhljs-ln-line,CODE_BLOCK_NAMEhljs-ln-code,NUMBERS_BLOCK_NAMEhljs-ln-numbers,NUMBER_LINE_NAMEhljs-ln-n,DATA_ATTR_NAMEdata-line-number,BREAK_LINE_REGEXP/\r\n|\r|\n/g;if(hljs){hljs.initLineNumbersOnLoadinitLineNumbersOnLoad;hljs.lineNumbersBlocklineNumbersBlock;hljs.lineNumbersValuelineNumbersValue;addStyles();}else{w.console.error(highlight.js not detected!);}// 将node_modules/highlightjs-line-numbers.js/src/highlightjs-line-numbers.js文件的方法原封不动CV进来// ......}export{lineNumberInit};再将创建的highlightjs-line-numbers.js文件导入使用import{lineNumberInit}from./components/login/highlightjs-line-numbers;效果图2.4 实现基本原理简介highlinght的代码高亮实现主要由代码分割高亮和代码行数显示组成代码分割以及高亮浏览器最终呈现出来的是HTMLCSS但传入的是代码格式是字符串类型也就是说highlight.js将字符串经过一系列过程最终转化成了DOM树给浏览器去渲染想看看渲染出来的HTMLCSS是怎么样的可以看到highlight.js对对字符串进行了split分割通过正则或是哪些手段【没去看源码】进行解析获得keyword给keyword对应的span打上class标签也就有了CSS DOM为代码提供颜色。** 大致的流程也就是 **字符串解析 - DOM - DOM树添加属性 - CSS DOM加载。而代码行数的显示实现也是比较简便的在$nextTick中获取渲染后的offsetHeight的高度并获取到line-height行高来计算出行数再通过构造DOM树的方法进行渲染由于没深入理解源码是具体如何实现的有兴趣的童鞋可以去官网冲冲浪尝试下载源码调试看看真面目。三、prismjs3.1 简介官网地址https://prismjs.com/index.htmlPrism是一个轻量级的/可扩展的语法高亮器它是根据现代web标准构建的。它被用于数百万个网站包括一些你每天访问的网站。除了简单小巧之外还有以下优点易用引用prism.css和prism.js使用合适的HTML5标签伶俐语言的css类是可继承的定义一次可应用多个代码片段极快支持web Workers实现并行轻小代码压缩只消费1.6KB每添加一种语言只增加0.30.5KB主题在1K±可扩展支持新语言或扩展现有语法或新增功能颜值在线所有样式包括主题都是通过.css完成也可以使用.commemnt, .string, .property等等className源码解析nice~的文章推荐https://juejin.cn/post/6844903874529083400?searchId20231125141341CBD9FDBCEEC18597BF273.2 安装引入(1)安装//安装prismjs插件npm install prismjs-S//安装prismjs的编译器插件npm install babel-plugin-prismjs-D(2)配置插件在vite.config.js文件/babel.config.js/.babelrc中配置使用该插件plugins:[[prismjs,{languages:[javascript,css,markup,python],plugins:[line-numbers],theme:tomorrow,css:true,},],];3在模块中引用importPrismfromprismjs;// 在Vue的mounted()钩子函数中调用this.$nextTick((){Prism.highlightAll();});4tpl使用preclasslanguage-js line-numberscode{{ codeContent }}/code/pre效果示意图四、vue-codemirror 【个人推荐】4.1 简介CodeMirror是一个多功能的文本编辑器使用JavaScript为浏览器实现。它专门用于编辑代码并配有许多语言模式和插件可实现更高级的编辑功能。丰富的编程API和CSS主题化系统可用于自定义CodeMirror以适应您的应用程序并使用新功能扩展它。除了颜值在线外还具有多种功能可供选择开箱即用支持100多种语言;一个强大的、可组合的语言模式系统;自动完成XML;代码折叠;可配置的密钥绑定;Vim、Emacs和Sublime文本绑定;搜索和替换界面;括号和标签匹配;支持拆分视图;Linter集成;混合字体大小和样式;各种主题;能够根据内容调整大小;内联和块小部件;可编程排水沟;使文本范围具有样式、只读或原子;双向文本支持。除此以上基础功能之外还提供许多其他方法和插件可供扩展,详细请看用户手册和参考指南。4.2、安装使用安装npm install--save codemirror4.0.6【注意这里是使用4版本目前已经升级到5版本各项引用的文件路径会有所不同】引入使用template:codemirrorrefcodeMirrorRefv-modelcode:optionscmOptionsinputinputChange/codemirrorscript:import{codemirror}fromvue-codemirror;// 核心样式importcodemirror/lib/codemirror.css;importcodemirror/addon/selection/active-line.js;// 基础配置constcmOptions{tabSize:2,styleActiveLine:true,lineNumbers:true,line:true,showDifferences:true,// 当为true(默认值)时, 更改的文本片段将高亮显示collapseIdentical:false,// 当为true(默认为false)时未修改的文本段将被折叠。connect:center,// 设置用于连接更改的代码块的样式mode:text/javascript,theme:solarized,hintOptions:{},};// 初始化CodeMirror.fromTextArea(this.$refs.codeMirrorRef,{mode:{name:javascript,globalVars:true},indentWithTabs:true,smartIndent:true,lineNumbers:true,matchBrackets:true,autoRefresh:true,extraKeys:{Ctrl:autocomplete},// 自定义快捷键hintOptions:{// 自定义提示选项tables:{users:[name,score,birthDate],countries:[name,population,size],},},});// 输入事件inputChange(){// console.log(code: this.code);},可以通过api提供的setValue()和getValue()来设置更新和获取当前代码4.2 vue-codemirror的封装保持vue-codemirror原有的可配置功能加入Menu的code-type代码切换主题切换Select和可复制其中的lang和theme由于无法批量导入抽出配置文件引入。需要注意的是在code重复赋值的情况下需要监听code的change事件用多一个载体去赋值避免重复赋值卡顿现象。codeMirrorObj.on(change,(cm){this.codecm.getValue();// 这里要用多一个载体去获取值,不然会重复赋值卡顿});theme切换可参考https://codemirror.net/5/theme/code lang切换可参考https://codemirror.net/5/mode/效果图五、总结本文对highlightjs、Prismjs、codemirror进行了简单的实现有需要的童鞋可以根据自己的应用场景去选择自己最为适合的实现方式无LICENSE问题都是属于MIT许可证比如codemirror协议、BSD、ApacheLicence、GPLV2、GPLV3和LGPL等开源协议。还有其他的实现方式有兴趣的童鞋可以尝试以下的实现方式。欢迎评论区吹水~Vue Code View(VCV)一个基于 vue 2.x的轻量代码交互组件vue 3.x正在开发中在网页中可以编辑、运行并实时预览代码效果展示。官网https://andurils.github.io/vue-code-view/#/guide/project-intro在线测试DemoCode-viewer ExampleSyntaxHighlighterSyntaxHighlighter是一款用于web页面的代码着色工具可以用来着色多种语言可以是HTML,CSS,Javascript,还可以是C,JAVA等编程语言。它可以在网页中对各种程序源代码语法进行加亮显示。google-code-prettify一个可嵌入的脚本使 HTML 中的源代码片段更漂亮。AceAjax.org Cloud9 编辑器Ace 是一个用 JavaScript 编写的独立代码编辑器。我们的目标是创建一个基于浏览器的编辑器匹配并扩展现有本机编辑器例如 TextMate、Vim 或 Eclipse的功能、可用性和性能。它可以轻松嵌入到任何网页或 JavaScript 应用程序中。Crayon Syntax Highlighter支持多种语言、主题、字体、URL 突出显示、本地文件或帖子文本。