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

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';