uni-app 代码高亮插件需求

高亮什么代码？

在uni-app项目中实现代码高亮功能，通常可以通过集成第三方代码高亮库来实现，比如highlight.js或prism.js。以下是一个使用highlight.js在uni-app中实现代码高亮的示例。

步骤一：安装highlight.js

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

npm install highlight.js --save

步骤二：引入highlight.js

在你的uni-app项目中，找到需要展示代码高亮的页面或组件，并在其中引入highlight.js。以下是一个在pages/index/index.vue文件中引入并使用highlight.js的示例：

<template>
  <view class="container">
    <view class="code-block">
      <pre><code ref="codeBlock" class="javascript">{{ code }}</code></pre>
    </view>
  </view>
</template>

<script>
import hljs from 'highlight.js';
import 'highlight.js/styles/default.css'; // 可以根据需要引入不同的主题样式

export default {
  data() {
    return {
      code: `
function helloWorld() {
  console.log('Hello, world!');
}
helloWorld();
      `
    };
  },
  mounted() {
    this.highlightCode();
  },
  methods: {
    highlightCode() {
      const codeBlock = this.$refs.codeBlock;
      hljs.highlightBlock(codeBlock);
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.code-block {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto;
}
pre {
  margin: 0;
}
code {
  display: block;
}
</style>

说明

1. 模板部分：使用<pre><code>标签包裹代码内容，并给<code>标签设置一个ref属性，以便在JavaScript中访问它。
2. 脚本部分：导入highlight.js及其默认样式（可以根据需要更改为其他样式），在mounted生命周期钩子中调用highlightCode方法，该方法使用hljs.highlightBlock对代码块进行高亮处理。
3. 样式部分：添加了一些基本的样式来美化代码块的外观。

通过上述步骤，你就可以在uni-app中实现代码高亮功能了。如果你需要支持更多的编程语言或自定义高亮样式，可以参考highlight.js的官方文档进行进一步配置。