uni-app 有没有代码高亮的插件

有没有支持多端的代码高亮的插件

phonegap100 1楼•7 天前

在 uni-app 中，虽然官方并没有直接提供一个内置的代码高亮插件，但我们可以通过集成第三方代码高亮库来实现这一功能。一个常用的方法是使用 highlight.js，它是一个广泛使用的、功能强大的代码高亮库。

以下是如何在 uni-app 中集成 highlight.js 的步骤和示例代码：

安装 highlight.js：首先，你需要在项目中安装 highlight.js。由于 uni-app 通常使用 npm 或 yarn 进行依赖管理，你可以通过以下命令安装：
```
npm install highlight.js --save
```

引入和配置 highlight.js：在你的 uni-app 项目中，找到需要显示代码高亮的页面或组件，并在其中引入 highlight.js。通常，你会在页面的 script 部分进行引入，并在 mounted 生命周期钩子中初始化高亮。

<template>
  <view class="container">
    <view v-html="highlightedCode"></view>
  </view>
</template>

<script>
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css'; // 选择一个你喜欢的样式

export default {
  data() {
    return {
      code: `// 这是一个示例代码\nfunction helloWorld() {\n  console.log('Hello, World!');\n}`,
      highlightedCode: ''
    };
  },
  mounted() {
    this.highlightedCode = hljs.highlightAuto(this.code).value;
  }
};
</script>

<style>
.container {
  padding: 20px;
}
</style>

在页面中显示高亮代码：在上面的示例中，我们使用 v-html 指令将高亮后的代码渲染到页面上。注意，由于 v-html 会将字符串作为 HTML 插入，因此要确保你的代码是安全的，避免 XSS 攻击。
自定义样式： highlight.js 提供了多种内置样式，你可以通过引入不同的 CSS 文件来改变代码高亮的样式。例如，上面的示例中使用了 github.css 样式，你也可以尝试其他样式，如 monokai.css、tomorrow.css 等。

通过上述步骤，你就可以在 uni-app 中实现代码高亮功能。这种方法不仅适用于网页端，也适用于小程序（由于小程序对 DOM 操作有限制，但 v-html 在小程序中通常会被编译为相应的视图层操作）。当然，对于更复杂的需求，你可能需要进一步自定义或扩展 highlight.js 的功能。