Vue.js的漂亮的代码高亮组件 - vue-code-highlight

Vue.js的漂亮的代码高亮组件 - vue-code-highlight
插件名称 vue-code-highlight
发布时间 2020年5月24日
插件作者 elisiondesign

Vue.js的漂亮代码语法突出显示组件。

变更日志:

2020/09/17

  • v0.7.6

安装和下载:

# NPM
$ npm install vue-code-highlight --save

现在,您可以通过两种不同的方式将此模块用作组件或指令。

变更日志:

2020年8月25日

  • v0.7.5

组件:

在任何组件中:

// 必须从模块中提取组件
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';