目录
🎉应用场景
在日常开发中,我们可能会遇到这样一个场景,就是在我们的网站上面显示一些代码片段,为了方便观看,我们肯定是希望代码片段是可以高亮显示的,这时候我们就可以使用highlight.js这个js库,来帮我们解决这样的问题。
像下面这样的代码片段
🎉原生HTML中应用
我们在html文件中需要引入对应的highlight.js文件以及样式表,可以采用CDN引入的方式,或者直接去下载对应的文件。
css样式我是直接复制过来了,highlight.js是采用的CDN引入
<style>
pre code.hljs {
display: block;
overflow-x: auto;
padding: 1em
}
code.hljs {
padding: 3px 5px
}
/*!
Theme: GitHub Dark
Description: Dark theme as seen on github.com
Author: github.com
Maintainer: @Hirse
Updated: 2021-05-15
Outdated base version: https://github.com/primer/github-syntax-dark
Current colors taken from GitHub's CSS
*/
.hljs {
color: #c9d1d9;
background: #0d1117
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
/* prettylights-syntax-keyword */
color: #ff7b72
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
/* prettylights-syntax-entity */
color: #d2a8ff
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
/* prettylights-syntax-constant */
color: #79c0ff
}
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
/* prettylights-syntax-string */
color: #a5d6ff
}
.hljs-built_in,
.hljs-symbol {
/* prettylights-syntax-variable */
color: #ffa657
}
.hljs-comment,
.hljs-code,
.hljs-formula {
/* prettylights-syntax-comment */
color: #8b949e
}
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
/* prettylights-syntax-entity-tag */
color: #7ee787
}
.hljs-subst {
/* prettylights-syntax-storage-modifier-import */
color: #c9d1d9
}
.hljs-section {
/* prettylights-syntax-markup-heading */
color: #1f6feb;
font-weight: bold
}
.hljs-bullet {
/* prettylights-syntax-markup-list */
color: #f2cc60
}
.hljs-emphasis {
/* prettylights-syntax-markup-italic */
color: #c9d1d9;
font-style: italic
}
.hljs-strong {
/* prettylights-syntax-markup-bold */
color: #c9d1d9;
font-weight: bold
}
.hljs-addition {
/* prettylights-syntax-markup-inserted */
color: #aff5b4;
background-color: #033a16
}
.hljs-deletion {
/* prettylights-syntax-markup-deleted */
color: #ffdcd7;
background-color: #67060c
}
.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
/* purposely ignored */
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
1.直接应用
html结构需要使用<pre><code> ... </code></pre>标签包裹起来
<pre><code >
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
background-color: #fff;
}
</code></pre>
最简单的方法就是引入后highlight.js,执行一个函数,他就会自动检测你的代码的语言,给你生成对应的高亮。
<script>
hljs.highlightAll();
</script>
这样子之后,代码就会达到高亮的效果了。
2.AJAX请求数据展示
第二种场景是我们需要的代码片段不是现成的,需要通过一些请求才能拿到,这时候我们可以这样做。
假设这是请求回来的数据
const Code = {
language: 'css',
content:
`*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
background-color: #fff;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
`
}
我们可以使用highlight.js内置的另外一个函数,对代码片段进行解析
const res = hljs.highlight(Code.content, {
language: Code.language
})
console.log(res);
得到的结果:
我们需要的是html结构,所以我们需要value值,然后将其渲染到页面上即可,但是记得需要加上class类名,因为 highlight.js是通过类名来对代码片段进行高亮渲染的
const code = document.querySelector('pre code')
code.innerHTML = res.value
code.className = `hljs language-${Code.language}`
这样也就得到的对应的效果
3.高亮颜色自定义
其实通过观察css和生成的html结构,可以看到每一句代码都是由span标签包裹,且根据不同的代码,添加了不同的class类名
所以我们可以改变css中的颜色,来实现自己定制的特点颜色高亮效果
这样就实现了自定制的代码高亮效果了
🎉Vue3中使用
这里只列举Vue3是因为官方写了一个关于vue3的插件,这样可以让我们更方便的使用,vue2的话可能使用不了此插件,可以像前面那样也是可以实现的。
安装对应的包
npm i highlight.js
npm i @highlightjs/vue-plugin
在main.js中全局注册此插件(类似于组件),并引入对应的js库和css样式表
import { createApp } from 'vue'
import App from './App.vue'
import 'highlight.js/lib/common'
import hljsVuePlugin from '@highlightjs/vue-plugin' //插件
import 'highlight.js/styles/vs2015.css' //样式表,很多可以自己选择或定制
const app = createApp(App)
//注册组件
app.use(hljsVuePlugin)
app.mount('#app')
这样之后我们可以直接使用组件的方式,就不用<pre><code> ... </code></pre>标签包裹了
<template>
<highlightjs autodetect :code="code" />
</template>
<script setup>
import { ref } from 'vue'
const code = ref(
`
<template>
<div>
<h1>吃饭</h1>
<p>睡觉</p>
</div>
</template>
`
)
</script>
效果
🎉结语
更多使用方法可以参考官网
可以对其插件进一步的封装,完成一些小功能,比如代码复制,代码编写等等