highlight.js 官网
highlightjs API
安装highlight.js
npm install highlight.js
使用
<template>
<div v-html="result"></div>
</template>
<script setup>
import { ref } from 'vue'
import hljs from 'highlight.js'
// 官网提供多种高亮代码主题(https://highlightjs.org/static/demo/)
import 'highlight.js/styles/github.css'
const result = ref('');
/**
* @param {String} content 代码内容
* @param {String} lang 代码语言
* @returns table标签及内容
*/
const lineNumbers = (content, lang) => {
// 验证当前语言是否存在
const language = hljs.getLanguage(lang) ? lang : 'plaintext';
// 使代码转换成带有标签的节点
const textHtml = hljs.highlight(content, { language }).value;
// 如果不想添加行号可以直接
// return textHtml;
// 返回分割后的数组
const lines = getLines(textHtml);
// 自定义代码块的标签节点
let html = '';
for (var i = 0, l = lines.length; i < l; i++) {
let text = lines[i].length > 0 ? lines[i] : ' '
html += `<tr>
<td class="blob-num" data-line-number="${i}"></td>
<td class="blob-code blob-code-inner">${text}</td>
</tr>`;
}
return `<table class="highlight">${html}</table>`;
}
// 根据换行符或回车分割成字符串数组
const getLines = (text) => {
if (text.length === 0) return [];
return text.split(/\r\n|\r|\n/g);
}
// 要显示的代码内容
const content = `import hljs from 'highlight.js'
const lang = hljs.getLanguage('js') ? 'js' : 'plaintext';
hljs.highlight(str, { lang }).value;`;
result.value = lineNumbers(content, 'js')
</script>
根据自定义代码块的标签类添加自己想要的样式
<style lang="scss">
table.highlight {
border-spacing: 0;
border-collapse: collapse;
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
Liberation Mono, monospace;
}
.blob-num {
position: relative;
width: 1%;
min-width: 50px;
padding-right: 10px;
padding-left: 10px;
font-size: 12px;
line-height: 20px;
color: #6e7781;
text-align: right;
white-space: nowrap;
vertical-align: top;
-webkit-user-select: none;
user-select: none;
}
.blob-num::before {
content: attr(data-line-number);
}
.blob-code-inner {
display: table-cell;
overflow: visible;
font-size: 12px;
color: #24292f;
word-wrap: anywhere;
white-space: pre;
}
.blob-code {
position: relative;
padding-right: 10px;
padding-left: 10px;
line-height: 20px;
vertical-align: top;
}
</style>
结果