一行代码就可以让我的网站支持代码高亮工具库，并且还支持在Vue中使用sublime text vue插件，强烈推荐给大家。

关于 .js

.js是一个使用开发代码高亮的工具库，它可以让网页上的代码显示接近我们常用的代码编辑器的高亮风格，看起来更加舒服，提升阅读体验。

.js官网截图

.js的技术特点 为什么要使用.js

经常浏览我网站的朋友都知道，我的文章里有一个专栏叫“前端”，主要推荐一些实用的前端开源项目或者组件库。写技术文章的时候，难免要贴代码，我的网站是以构建为主的。之前我一直苦恼于找一个代码高亮插件，但是大多都太臃肿，出来的样式也不美观，大多数时候都是截图代码界面，甚至还用这个工具把代码转成图片贴到文章里，这样虽然美观，但是也有两个问题：

最后找到了.js，完美解决了以上两个问题，配置简单，演示美观，自定义方便。不禁感叹：只有用纯前端方案，才能做到精准控制，才能达到想要的效果。

教程：向我的网站添加代码突出显示

下面我以我的网站为例，给大家展示如何在我们的项目中使用.js，首先.js支持直接引入CDN和安装npm，我的网站是基于开发的，主题也是自己写的，最简单的方式就是在文章详情页引入.js和主题样式。

虽然.js支持上百种开发语言，但是为了最小化文件大小，我们可以点击“获取”按钮进入下载页面，通过勾选我们所需要的开发语言来构建最轻量的库。

下载解压后得到的.min.js文件就是我们需要导入的js文件，主题样式都在style文件夹里，我选了一个自己喜欢的主题，只需要一个css文件，然后初始化：

就这么简单。.js 会自动转换

代码识别语言，并高亮显示，就这么简单，为了让代码显示更协调，我用了几行CSS来控制包裹层的圆角，背景色，字体大小等，就搞定了。

.post-content .wp-block-code {
   background-color: #F6F8FF;
   border-radius: 16px;
   font-size: 16px;
   padding: 22px 22px 22px 38px;
   margin-top: 22px;
   margin-bottom: 22px;
}
.post-content .wp-block-code {
   line-height: 1.2;
   font-size: 15px;
   padding: 10px;
   overflow-x: auto;
}
.post-content .wp-block-code code {
   position: relative;
   background-color: unset !important;
}

当然在vue项目中也可以使用.jssublime text vue插件，安装：

npm install highlight.js

在 Vue 文件中使用（通过 Vue 的 .js）：

需要注意的是，自动识别模式并不能 100% 识别代码的开发语言，识别错误会导致高亮样式为其他语言，这种情况下可以手动设置 class 进行精准控制：

...

官网提供了详细的使用文档，也提供了更多的代码高亮控件，不过不足的是.js不支持显示行号，需要引入其他库（-line-.js）或者自行实现。
免费开源说明
.js是一个基于BSD许可的开源工具库，任何个人或公司都可以免费下载并在自己的项目中使用，包括商业项目。
如有侵权请联系删除！
                             
TAGS：