前几天在公司实习接了一个小需求,写一个静态的 API 文档页面,本身也没什么难度,无非就是一些表格,折叠,以及样式排版。但是!其中的实现代码高亮,我觉着还是蛮有意思的,于是记录一下。
因为这个项目是敏捷开发,API 文档页面也是临时加进来的,所以并没有 UI,基本就是我想写成啥样就啥样,我呢写代码也是能省事就省事,所以我会介绍几种我的逐步实现历程。(公司内网截图不能传到外网,效果图用手机拍的,小糊)
1. 手动高亮
到底还是太天真,开始以为的高亮是代码和背景明显区分,所以一开始我是这样写的(伪代码)
<pre class="jsonCode">{{rescode1}}</pre>
<style lang="less">
.jsonCode {
background:black;
color: green;
filter: brightness(1.5);
}
</style>
为什么要用 <pre>
标签呢,因为它可定义预格式化的文本,元素中的文本通常会保留空格和换行符。然后用 brightness
函数直接调亮度。效果如图
看到这个效果,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 数据嵌套杂乱,混淆不清的时候用这个模板,支持折叠,真的好的鸭皮
效果如图
然后这个效果 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 想要的效果
4. 总结
写完感觉自己写的代码也没有什么技术含量,也是在使用别人的库,但也算一番新的尝试,大伙如果感兴趣,还可以试一试别的工具,像 heightlight.js 等。以前没做这类的东西,如果以后让我实现一个编辑器,我想上手也能容易一些。
然后就是有一个忠告,yarn 和 npm 千万不能混用,会变得不幸的。平常我不会混用,一天在公司 yarn 网络连接不上了,只能用了下 npm。于是悲剧就开始了,呜呜呜~
参考: