vue.js 组件化代码_漂亮的代码荧光笔作为Vue.js组件-CSDN博客

vue.js 组件化代码

VUE代码突出 (vue-code-highlight)

Beautiful code syntax highlighting as Vue.js component.

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

用法 (Usage)

npm install vue-code-highlight --save

Now, you can use this module in two diferrent ways, as a component or as a directive.

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

零件 (Component)

In any component:

在任何组件中：

// You have to extract the component from the module
import { component as VueCodeHighlight } from 'vue-code-highlight';

components:{
  VueCodeHighlight,
  ...
}

<vue-code-highlight>
 //Paste your code here
</vue-code-highlight>

Window styles are already present in a component mode, but you will need to select and include a theme to properly highlight your code. (See the themes section.)

窗口样式已在组件模式下提供，但是您需要选择并包括一个主题以正确突出显示您的代码。 (请参阅主题部分。)

指示 (Directive)

In your main file:

在您的主文件中：

import VueCodeHighlight from 'vue-code-highlight';

Vue.use(VueCodeHighlight) //registers the v-highlight directive

And then in any Vue component:

然后在任何Vue组件中：

<div v-highlight >
 ...
</div>

All markup under the div element having the following structure will be syntax highlighted.

具有以下结构的div元素下的所有标记都将突出显示语法。

<pre class="language-javascript">
  <code>
    //your code goes here
  </code>
</pre>

To give the highlighter a window look in a directive mode, also don't forget to include the ./node_modules/vue-code-highlight/themes/window.css file somewhere in your app.

要使荧光笔在指令模式下具有窗口外观，也不要忘记在应用程序中的某个位置包含./node_modules/vue-code-highlight/themes/window.css文件。

主题 (Themes)

In order to visually higlight your code, you need to select a theme from ./node_modules/vue-code-highlight/themes/ and import it somewhere into your component/application. These are just regular prism themes, so feel free to improvise.

为了直观地显示代码，您需要从./node_modules/vue-code-highlight/themes/选择一个主题，然后将其导入到组件/应用程序中。这些只是常规的棱镜主题，因此可以即兴创作。