更新记录

1.0.2（2025-08-01） 下载此版本

• 优化高亮处理性能

1.0.1（2025-07-16） 下载此版本

• 优化单行代码高亮的解析性能

1.0.0（2025-06-09） 下载此版本

• 实现多平台代码高亮支持

平台兼容性

uni-app x(4.61)

其他

uni-highlight

本插件支持基于 TextMate 语法规则（如 javascript.tmLanguage.json）的前端代码高亮渲染，与 VS Code 的语法高亮引擎相同。

功能介绍

• 用于代码文本高亮

Grammars

使用指南：基于 TextMate Grammar 的前端语法高亮插件

本插件支持基于 TextMate 语法规则（如 javascript.tmLanguage.json）的前端代码高亮渲染。

快速开始

1. 引入uni-modules插件

   import { createHighLighter } from "../../uni_modules/uni-highlight

2. 准备语法定义文件（.tmLanguage.json）

准备好你需要的语法定义文件，例如：

• JavaScript.tmLanguage.json
• TypeScript.tmLanguage.json
• ...

确保你的语法文件使用 JSON 格式，只要有符合TextMate语法规则的定义文件，即可支持任意语言的代码高亮。

语法定义文件可从vscode源码仓库中获取，如：

• TypeScript.tmLanguage.json
• JavaScript.tmLanguage.json
• css.tmLanguage.json
• html.tmLanguage.json
• ...

3. 初始化高亮器

import grammar from './javascript.tmLanguage.json'
    let uniCodeHighlighter = await createHighLighter({
        languages: {
            'javascript': grammar
        }
    })

注意：引入.tmLanguage.json时，不同平台为不同的引入方式

// #ifdef WEB || APP-IOS  || MP-WEIXIN
import grammar from './javascript.tmLanguage.json'
...
// #endif

// #ifdef APP-ANDROID || APP-HARMONY
let fileManager = uni.getFileSystemManager()
let content = fileManager.readFileSync('xxxx.tmLanguage.json', 'utf-8') as string
let grammar = JSON.parse(content)
...
// #endif

let uniCodeHighlighter = await createHighLighter({
    languages: {
        'javascript': grammar
    }
})

4. 传入代码文本进行高亮

const sourceCode =
`
import App from './App.uvue'

import { createSSRApp } from 'vue'
export function createApp() {
    const app = createSSRApp(App)
    return {
        app
    }
}
`

let tokens:[] as Array<IToken> = []

let ILineTokensList = await uniCodeHighlighter.tokenizeFullText('javascript', sourceCode)

const text = sourceCode.split(/\r|\n|\r\n/)

ILineTokensList.forEach((line, i) => {
    line.tokens.forEach((tk) => {
        tokens.push({
            text: text[i].substring(tk.startIndex, tk.endIndex),
            // 'entity'
            className: tk.scopes[tk.scopes.length - 1].split(".")[0]
        })
    })
    tokens.push({
        text: "\n",
        className: "eol"
    });
})

// 在uvue的template中使用:
<template>
    <view>
    <template v-for="token in tokens">
        <view v-if="token.text == '\n'" class="br"></view>
        <text v-else class="code-text" :class="token.className">{{token.text}}</text>
    </template>
    </view>
</template>

5. 配置样式（CSS）

你可以为不同 scope 定义样式类，例如：

.entity { color: #4ec9b0; } // 实体使用青色
.support { color: #4ec9b0; } // 支持类使用青色
.constant { color: #b5cea8; } // 常量使用浅绿色
.variable { color: #9cdcfe; } // 变量使用浅蓝色
.punctuation { color: #d4d4d4; } // 标点符号使用默认文本颜色
.function { color: #dcdcaa; } // 函数使用黄色

IToken 数据结构说明

高亮器返回的 token 结构如下：

export interface IToken {
  readonly startIndex: number
  readonly endIndex: number
  readonly scopes: string[]
}

export interface ILineTokens {
  readonly tokens: IToken[]
  readonly state: any  // 用于跨行状态管理（如多行注释）
}

注意：此插件在用于Android/ios/鸿蒙等平台时，调试前需要制作自定义调试基座才能生效。