highlight.js

JavaScript08

highlight.js,第1张

一行代码就能让我的网站支持代码高亮的工具库,也支持在 Vue 中使用,强烈推荐给大家。

highlight.js 是一款使用 javascript 开发代码高亮工具库,能够让网页上的代码显示接近我们使用的代码编辑器的高亮样式,从而看起来更舒服,增强阅读体验。

常来我网站的小伙伴都知道,我的文章有一个栏目是“前端”,主要推荐一下实用的前端开源项目或者组件库,写技术类文章免不了要贴代码,我的网站基于 wordpress 搭建,此前我一直为找一款代码高亮插件烦恼,但大部分 wordpress 的代码高亮插件实在太臃肿,出来的样式又不美观。大多时候是截图 VsCode 的代码界面,甚至还用过 codepng 这个工具把代码变成图片贴在文章中,但这样做是美观了,但也存在2个问题:

最终还是找到了 highlight.js,完美解决了上面两个问题,而且配置简单,演示漂亮,定制化简单。不禁感叹:用纯前端的方式解决,才能精准控制,实现想要的效果。

下面以我的网站为例,展示将 highlight.js 用在我们的项目上的方法。首先 highlight.js 支持 cdn 直接引入和 npm 安装,我的网站基于 wordpress 开发,主题是自己写的,最简单的方式就是在文章详情页引入 highlight.js 和主题样式。

虽然 highlight.js 支持几百种开发语言,但为了将文件体积控制到最小,我们可以点击“get version”按钮进入下载页,通过勾选我们需要的开发语言,来构建最轻量的库。

下载解压后得到的 highlight.min.js 就是我们需要引入的 js 文件,主题样式都在 style 文件夹里,我选择了一个比较喜欢的 monokai-sublime 主题,只需要一个 css 文件,然后初始化:

就是这么简单,highlight.js 会自动将文章中的

点击查看本次分享的网址以及代码高亮效果

highlight.js - 让网页上的代码高亮美化的免费开源工具库 那些免费的砖

前言: 现在前端写项目估计都是使用 NodeJs 来构建,一般在安装 npm 包的时候,我们会对项目进行初始化,这是输入命令: npm init 或 npm init -y 。接下来就是几个交互命令,输入完成就会创建一个依赖文件: package.json 。

但如果想自己做一个脚手架或者在某些时候在 CMD 窗口进行交互,这个时候就可以使用 inquirer.js 。

首先 npm init 初始化一个文件夹,来测试这个库,然后安装包:

再在文件夹里面新建一个 app.js ,接下来的所有测试均在这个文件里面。

运行测试结果:

程序运行结果:

接下来如果你想要一百个输入那?肯定是。。。(情商)

看看 validate 是啥样?

测试结果:

看看三种不同输入结果有啥变化?

list 一般配合 choices 使用:

查看动图效果:

list 改成 rawlist

自己可以试试按下 h/H 回车的页面是啥。

如果不想自定义还可以:

使用首选编辑器打开一个临时文件,用户退出编辑器后,将读取临时文件的内容。首选编辑器可以指定。

用来更改显示行数只对 list, rawList, expand 或 checkbox 有效。

只有一行,通过上下方向键来选择:

2019年10月14日23:09:42