静态页面代码高亮的一些尝试

4,009 阅读2分钟

前几天在公司实习接了一个小需求,写一个静态的 API 文档页面,本身也没什么难度,无非就是一些表格,折叠,以及样式排版。但是!其中的实现代码高亮,我觉着还是蛮有意思的,于是记录一下。

因为这个项目是敏捷开发,API 文档页面也是临时加进来的,所以并没有 UI,基本就是我想写成啥样就啥样,我呢写代码也是能省事就省事,所以我会介绍几种我的逐步实现历程。(公司内网截图不能传到外网,效果图用手机拍的,小糊)

1. 手动高亮

到底还是太天真,开始以为的高亮是代码和背景明显区分,所以一开始我是这样写的(伪代码)

<pre class="jsonCode">{{rescode1}}</pre>
<style lang="less">
    .jsonCode {
        background:black;
        color: green;
        filter: brightness(1.5);
    }
</style>

为什么要用 <pre> 标签呢,因为它可定义预格式化的文本,元素中的文本通常会保留空格和换行符。然后用 brightness 函数直接调亮度。效果如图

IMG_20220111_201322.jpg

看到这个效果,leader 并不满意,说“我要那种 MarkDown 格式的高亮,你这太丑了 ”,于是有了下一版

2.使用 vue-json-viewer

这是专门展示 json 数据的一个库,用起来也很简单(伪代码)如下:

<json-viewer
    :value="rescode1"
    :expand-depth="1"
    copyable
    boxed
    sort
    >
</json-viewer>
import JsonViewer from "vue-json-viewer";

一些配置选项可以参考官方文档,json 数据嵌套杂乱,混淆不清的时候用这个模板,支持折叠,真的好的鸭皮

效果如图

QQ图片20220111230607.jpg

然后这个效果 leader 是满意了,但是他还要增加一些示例代码,还有 Python、Java、PHP、Golang 不同版本的,支持不同语言的代码高亮,没办法只能上 Codemirror 了。因为项目技术栈是 Vue ,所以用的 vue-codemirror

3. 使用 vue-codemirror

vue-codemirror 可就牛了,支持上百种代码的高亮,还能用来实现编辑器,在我这做个高亮工具,着实有些委屈了。只不过配置有一些麻烦,但也只是小麻烦,(伪代码)如下:

<div class="codemirrorStyle">
    <!--在外面套一个div是要解决codemirror组件的高度问题,用的时候你就知道了-->
    <codemirror 
        v-model="exampleRequestCode" 
        :options="cmOptions1">
    </codemirror>
</div><script>
import { codemirror } from 'vue-codemirror';//不是全局引入就要记得注册组件
import 'codemirror/lib/codemirror.css';//codemirror样式文件,不能忘
import 'codemirror/mode/python/python.js';//各种语言的样式
import 'codemirror/mode/clike/clike.js';
import 'codemirror/mode/php/php.js';
import 'codemirror/mode/go/go.js';
import 'codemirror/theme/monokai.css';//主题样式文件
import "codemirror/addon/hint/show-hint.css";
​
 export default {
     data(){
         return {
             cmOptions1: {
              tabSize: 2,
              styleActiveLine: true,
              mode: 'text/x-python',//哪种语言,怎么写,可以参照官网
              theme: 'monokai',//主题
              lineNumbers: true,
              line: true,
              addModeClass: false
            }
         }
     }
 }
</script><style lang="less">
.codemirrorStyle {
    margin-top:-30px;
    font-size: 1.2rem;
    margin-bottom: 30px;
    .CodeMirror {
      height: auto !important;
      /*高度自适应,很重要哦*/
    }
}
</style>

这是一部分 PHP 代码展示,可以看到已经实现了代码高亮,所以也算合格的完成了 leader 想要的效果

IMG_20220111_203710.jpg

4. 总结

写完感觉自己写的代码也没有什么技术含量,也是在使用别人的库,但也算一番新的尝试,大伙如果感兴趣,还可以试一试别的工具,像 heightlight.js 等。以前没做这类的东西,如果以后让我实现一个编辑器,我想上手也能容易一些。

然后就是有一个忠告,yarn 和 npm 千万不能混用,会变得不幸的。平常我不会混用,一天在公司 yarn 网络连接不上了,只能用了下 npm。于是悲剧就开始了,呜呜呜~

参考: