适用于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

变更日志：

v1.4.7 (06/06/2021)

• 更新

v1.4.6（05/13/2021）

• 更新

v1.4.5（04/24/2021）

• 改善全局布局。

v1.4.4（2020年10月20日）

• 更新

v1.4.3（2020年10月4日）

• 如果没有标签，则删除数据标签属性。

---

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

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