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

支持的语言：

• XML
• HTML
• HTML Vue JS 模板
• 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 }
}

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

<ssh-pre language="js" label="Javascript">
  这里是代码
</ssh-pre>

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

<ssh-pre language="javascript" copy-button @copied="onCopiedDoSomething">
  <template v-slot:copy-button>
    此处复制按钮
  </template>
  这里是代码
</ssh-pre>

5.启用暗模式。

<ssh-pre language="js" dark label="Javascript">
  这里是代码
</ssh-pre>

6.使代码箱对变量更改有反应。

<ssh-pre language="js" reactive label="Javascript">
  这里是代码
</ssh-pre>

安装和下载：

# NPM
$ npm i simple-syntax-highlighter --save

---

官网：https://github.com/antoniandre/simple-syntax-highlighter

GitHub下载：https://github.com/antoniandre/simple-syntax-highlighter/archive/master.zip