鸿蒙开发-如何实现语法高亮，如何拿到json文件中的数据定义语法高亮：在一段代码中将某种语言（例如：ArkTS、TS

定义

语法高亮： 在一段代码中将某种语言（例如：ArkTS、TS、JAVA）的关键字提炼出来后，在关键词外面添加html标签以不同颜色显示在用户眼前。

效果展示

步骤分析

1.首先你有一段代码字符串

'<html></html>'

2.通过前端提供好的htlm文件，js文件，css文件调用中的一个方法实现代码高亮展示

具体实现逻辑

1.首先，通过上下文拿到文件夹下的json数据

// 获取资源路径
const mgr = getContext().resourceManager
// 读取resource文件夹下的 word.json 文件
let arr = await mgr.getRawFileContent('word.json')

我们拿到是一串二进制数据 2.将二进制数据转换为字符串

// 创建一个文本解码器
const tool = new util.TextDecoder()
// 解析二进制数据 将二进制数据转换为字符串
let wordJson = tool.decodeWithStream(arr)
Logger.info(JSON.stringify(wordJson))

3.将字符串数据转换为对象

// 将字符串转对象
this.words = JSON.parse(wordJson)

4.通过web组件将数据渲染

Web({
  src: $rawfile('word.html'),
  controller: this.webViewController
})
  .width('100%')
  .height(400)// 页面加载完成触发回调
  .onPageEnd(() => {
    // 获取到单词详细代码后，调用js方法写入到webview中
    this.webViewController.runJavaScript(`writeCode(`${this.currentCode}`)`)
  })