@qingbing/ts-vue3-highlight v2.0.2

在 vue3+element-plus 的基础上封装的 highlight 指令

version

• 2.0.2
  • 修改类型导入使用 import type
• 2.0.1
  • 自动添加行号
  • highlight.js.css
  • 去除首尾的空行

1. 说明

1.1 主要功能

对在指令 v-highlight 指令下的 code 标签进行代码高亮添加

1.2 特殊功能

• 功能自动添加行号， 个性化样式参考 highlight.js.css

2. 安装

npm install @qingbing/ts-vue3-highlight

3. 并定指令

3.1 全局绑定指令(main.ts)

// 代码高亮指令
import Highlight from '@qingbing/ts-vue3-highlight'
app.directive('highlight', Highlight);

3.2 vue文件绑定指令

import Highlight from "@qingbing/ts-vue3-highlight";
const vHighlight = Highlight;

4. vue文件中使用指令

4.1 内容为标签内容

<pre v-highlight><code>
// 代码高亮指令
import Highlight from '@qingbing/ts-vue3-highlight'
app.directive('highlight', Highlight);
</code></pre>

4.2 v-highlight 配合 v-html 高亮代码

<template>
  <pre v-highlight v-html="coding"></pre>
</template>

<script setup lang="ts">
const coding = "<code>var i = 1;</code>";
</script>