代码高亮显示以及点击复制

2023-10-08 05:38:16

在 Vue 项目中集成代码高亮和复制功能

在 Vue.js 项目中，代码高亮和复制功能对于增强开发人员体验和用户交互至关重要。通过集成 highlight.js 和 clipboard.js ，您可以轻松地在您的应用中实现这些功能。

安装和配置 highlight.js

首先，使用以下 npm 命令安装 highlight.js：

npm install highlight.js clipboard

接下来，创建一个名为 highlight.js 的 JavaScript 文件，并将其添加到 src 目录中：

import hljs from 'highlight.js';

// 加载语言
hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));
hljs.registerLanguage('python', require('highlight.js/lib/languages/python'));

// 设置默认语言
hljs.configure({
  defaultLanguage: 'javascript'
});

在该文件中，我们引入了 highlight.js，注册了支持的语言，并设置了默认语言为 JavaScript。

使用 highlight.js

要使用 highlight.js，请在 Vue 组件中使用 v-highlight 指令：

<pre v-highlight>{{ code }}</pre>

在 <pre> 标签内放置您的代码，highlight.js 将自动对其进行高亮显示。

安装和配置 clipboard.js

接下来，安装 clipboard.js：

npm install highlight.js clipboard

在 src 目录中，创建一个名为 clipboard.js 的 JavaScript 文件：

import ClipboardJS from 'clipboard';

// 创建一个新的实例
const clipboard = new ClipboardJS('.btn-copy');

// 监听复制事件
clipboard.on('success', function(e) {
  console.log('复制成功！');
});

在该文件中，我们创建了一个 clipboard.js 实例，并为其添加了一个监听器来处理复制事件。

使用 clipboard.js

要使用 clipboard.js，请使用 v-clipboard 指令：

<pre v-highlight v-clipboard>{{ code }}</pre>
<button class="btn-copy" type="button">复制</button>

使用此代码，您可以单击“复制”按钮来复制高亮的代码片段。

示例代码

<template>
  <div>
    <pre v-highlight v-clipboard>{{ code }}</pre>
    <button class="btn-copy" type="button">复制</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: `
        function sayHello() {
          console.log('Hello, world!');
        }
      `
    }
  }
}
</script>