插件名称 | simple-syntax-highlighter |
---|---|
发布时间 | 2020年8月15日 |
插件作者 | antoniandre |
适用于Vue.js开发人员的具有代码复制功能的简单但可自定义的语法突出显示工具。
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