vue中使用＜pre＞＜code＞标签插入演示代码的高亮插件-vue-highlight的使用

npm install vue-code-highlight --save

局部引入

import { component as VueCodeHighlight } from 'vue-code-highlight';

components:{
  VueCodeHighlight,
  ...
}

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

全局引入

import VueCodeHighlight from 'vue-code-highlight';
import 'vue-code-highlight/themes/prism-coy.css'

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

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

可选用的主题有：

1. duotone-sea
   

2. prism-coy
   

3. prism-dark
   
   4.prism-funky
   
   5.prism-okaidia
   
   6.prism-solarizedlight
   
   7.prism-tomorrow
   
   8.prism-twilight
   
   9.prism
   
   10.window