简单的Vue代码高亮插件/组件（simple-syntax-highlighter）

 website 下载

介绍

适用于Vue.js开发人员的具有代码复制功能，简单但可自定义的代码高亮显示工具。

支持的语言：
XML
HTML
HTML Vue JS Template
Pug
Javascript
JSON
CSS
PHP
MySQL

基本用法：

1.导入简单语法突出显示器。

import SshPre from 'simple-syntax-highlighter'
import 'simple-syntax-highlighter/dist/sshpre.css'

2.注册组件。

export default {
  components: { SshPre }
}

3.将代码片段包装到ssh-pre组件中，并language按照以下步骤确定语言：

<ssh-pre language="js" label="Javascript">
  Code Here
</ssh-pre>

4. 在代码框中显示一个复制按钮。

<ssh-pre language="javascript" copy-button @copied="onCopiedDoSomething">
  <template v-slot:copy-button>
    Copy Button Here
  </template>
  Code Here
</ssh-pre>

5. 启用暗模式。

<ssh-pre language="js" dark label="Javascript">
  Code Here
</ssh-pre>

6. Make the code box reactive to variable changes.

<ssh-pre language="js" reactive label="Javascript">
  Code Here
</ssh-pre>