Vue3+highlight.js实现代码高亮 + 行号

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>

结果