一个指示实现 JS 代码高亮显示

前端

2023-11-28 04:59:38

引言

在开发过程中，经常需要在项目中显示代码片段，以便于阅读和理解。为了提高代码的可读性和美观性，可以使用代码高亮显示工具来格式化代码，使代码更易于阅读。

本文将介绍如何使用 Highlight.js 和 js-beautify.js 实现代码格式化高亮显示，并封装成一个 Vue 指令，以便在 Vue 项目中轻松使用。

使用 Highlight.js 实现代码高亮显示

Highlight.js 是一个流行的代码高亮显示库，它支持多种编程语言，并提供多种主题样式。

要使用 Highlight.js，可以按照以下步骤操作：

在项目中安装 Highlight.js 库：

npm install highlight.js

在项目中导入 Highlight.js 库：

import hljs from 'highlight.js';

在需要高亮显示代码的组件中，使用 Highlight.js 的 highlight 方法对代码进行高亮显示：

const result = hljs.highlight('javascript', code);

其中，code 是需要高亮显示的代码，result 是高亮显示后的结果。

将高亮显示后的结果输出到 HTML 中：

<pre><code class="hljs">{result.value}</code></pre>

使用 js-beautify.js 实现代码格式化

js-beautify.js 是一个代码格式化工具，它可以将代码格式化为易于阅读的格式。

要使用 js-beautify.js，可以按照以下步骤操作：

在项目中安装 js-beautify.js 库：

npm install js-beautify

在项目中导入 js-beautify.js 库：

import beautify from 'js-beautify';

在需要格式化代码的组件中，使用 js-beautify.js 的 js_beautify 方法对代码进行格式化：

const formattedCode = beautify(code, {
  indent_size: 2,
  space_in_paren: true
});

其中，code 是需要格式化的代码，formattedCode 是格式化后的代码。

将格式化后的代码输出到 HTML 中：

<pre><code class="hljs">{formattedCode}</code></pre>

封装 Vue 指令

为了在 Vue 项目中轻松使用代码高亮显示和格式化功能，可以将 Highlight.js 和 js-beautify.js 封装成一个 Vue 指令。

创建一个新的 Vue 指令文件，例如 highlight.js：

export default {
  bind(el, binding, vnode) {
    const code = binding.value;

    const result = hljs.highlight('javascript', code);
    const formattedCode = beautify(result.value, {
      indent_size: 2,
      space_in_paren: true
    });

    el.innerHTML = `<pre><code class="hljs">${formattedCode}</code></pre>`;
  }
};