插件名称 | vue-code-highlight |
---|---|
发布时间 | 2020年5月24日 |
插件作者 | elisiondesign |
Vue.js的漂亮代码语法突出显示组件。
2020/09/17
# NPM
$ npm install vue-code-highlight --save
现在,您可以通过两种不同的方式将此模块用作组件或指令。
2020年8月25日
在任何组件中:
// 必须从模块中提取组件
import { component as VueCodeHighlight } from 'vue-code-highlight';
components:{
VueCodeHighlight,
...
}
<vue-code-highlight>
//在此处粘贴代码
</vue-code-highlight>
您的内容将在更新时动态突出显示。
窗口样式已在组件模式下提供,但是您需要选择并包括一个主题以正确突出显示您的代码。(请参阅主题部分。)
在您的主文件中:
import VueCodeHighlight from 'vue-code-highlight';
Vue.use(VueCodeHighlight) /注册 v-highlight
然后在任何Vue组件中:
<div v-highlight>
...
</div>
具有以下结构的div元素下的所有标记都将突出显示语法。
<pre class="language-javascript">
<code>
//您的代码写在这里
</code>
</pre>
要使荧光笔在指令模式下具有窗口外观,也不要忘记./node_modules/vue-code-highlight/themes/window.css
在应用程序中的某个位置包含文件。
为了直观地显示您的代码,您需要从中选择一个主题./node_modules/vue-code-highlight/themes/
并将其导入到组件/应用程序中的某个位置。这些只是常规的棱镜主题,因此可以即兴创作。
可以使用Prism 支持的任何语言。要启用对它们的支持,必须显式地导入它们以及Prism的标记模板。
例如,要将PHP高亮显示在您的应用程序中:
import 'prism-es6/components/prism-markup-templating';
import 'prism-es6/components/prism-php';