vue使用 Highlight.js 实现可编辑的代码高亮功能（js,python,php等）

引言

前端业务中需要高亮其它语言的代码片段，同时要可编辑。
在线编辑器或代码共享平台时。Highlight.js 是一个轻量级的库，可以帮助我们轻松实现代码高亮。

本文将介绍如何使用 highlight.js实现一个可编辑的代码高亮区域，并确保原始数据不会被破坏。

效果

将字符串渲染在网页上，这里渲染的是python代码片段,可以根据需要渲染其它的语言代码片段，实现高亮效果。

同时该高亮字符串是可以编辑的，详细实现看代码

什么是 Highlight.js？

Highlight.js 是一个用于代码高亮的 JavaScript 库，支持多种编程语言。它可以自动检测代码的语言并应用相应的样式，帮助用户更好地阅读和理解代码。

支持美化的代码片段

主流语言都支持的语言highlight.js/SUPPORTED_LANGUAGES.md at main · highlightjs/highlight.js · GitHub

hljs.highlight('语言', this.toolCodeData.toolCode).value;
// 例 python或py都可以
this.toolCodeData.formatToolCode = hljs.highlight('python', this.toolCodeData.toolCode).value; // 高亮处理

项目准备

在开始之前，我们需要安装 Highlight.js。可以通过 npm 进行安装：

npm install highlight.js

代码实现

下面是一个简单的 Vue 组件示例，展示了如何使用 Highlight.js 创建一个可编辑的代码区域，并实现代码高亮。

组件代码

<template>
  <pre 
    @input="preChange" 
    :contenteditable="true" 
    v-html="toolCodeData.formatToolCode" 
    class="tool-code hljs python"
  ></pre>
</template>

<script>
import hljs from 'highlight.js';
import 'highlight.js/styles/default.css'; // 选择合适的样式

export default {
  data() {
    return {
      toolCodeData: {
      // 原始代码，最终可用于数据提交
        toolCode: '',
        // 美化字符串,用于渲染美化效果
        formatToolCode: ''
      },
    };
  },
  methods: {
    preChange(e) {
      let changeVal = e.target.innerText; // 获取编辑区域的文本
      this.toolCodeData.toolCode = changeVal; // 更新原始代码
      this.highlightCode(); // 重新高亮
    },
    highlightCode() {
    // 这里python用于指定，渲染的语言，支持多种,
      this.toolCodeData.formatToolCode = hljs.highlight('python', this.toolCodeData.toolCode).value; // 高亮处理
    }
  },
  mounted() {
    this.highlightCode(); // 初始化高亮
  }
}
</script>

<style>
.tool-code {
  border: 1px solid #ccc;
  padding: 10px;
  min-height: 200px;
  overflow: auto;
  white-space: pre; /* 保持空格和换行 */
}
</style>

代码解析

1. 数据结构：
   • toolCodeData 对象包含 toolCode（原始代码，最终可用于数据提交）和 formatToolCode（高亮后的代码，用于渲染美化效果）。
2. 高亮功能：
   • 在 mounted 钩子中，调用 highlightCode 方法，初始化时对原始代码进行高亮处理。
   • highlightCode 方法使用 Highlight.js 对 toolCode 进行高亮，并将结果存储在 formatToolCode 中。
3. 编辑区域：
   • contenteditable 属性允许用户直接编辑 <pre> 标签的内容。
   • @input 事件监听用户输入，调用 preChange 方法更新原始代码并重新高亮。
4. 高亮更新：
   • 在 preChange 方法中，获取用户输入的文本并更新 toolCode，然后调用 highlightCode 方法重新高亮代码。

注意事项

• 内容安全：使用 v-html 指令进行内容插入时，要确保输入内容不会导致 XSS（跨站脚本）攻击。可以考虑在生产环境中进行更严格的输入过滤。
• 用户体验：可以在样式上进行适当调整，以提升用户编辑体验，比如添加边框、背景色等。

总结

通过使用 Highlight.js 和 Vue，我们可以轻松实现一个可编辑的代码高亮功能。这种实现方式不仅提升了代码的可读性，也允许用户在编辑过程中实时查看代码效果。在实际应用中，可以根据需要扩展更多功能，如保存代码、选择语言等。