XiangJv

引言

流行的代码语法高亮工具有很多，但我最喜欢Prism，原因很简单：Prism很简单。Prism不仅使用起来简单，而且体积非常小。Prism之所以体积这么小，是因为它使用了非常实用而折中的技术来实现语法高亮——正则表达式。虽然采用这种技术来说不是很严谨，但对于大多数网站来说，足以。使用正则表达式技术的好处就是简单，使得整个javascript插件脚本的体积非常小。

 

 

prism的标准用法 prism 官网

<pre class="language-html">
	....
	这里是HTML代码
	....
</pre>	

 

Prism支持很多种语言高亮，Prism官方主页上列出的支持的语言差不多有100种。相应的，每一种语言对于的class名就是“language-语言名”。

 

 

本文分别用 vue 和 nuxt 实现 网页中的代码高亮

在 vue 中 prism 不是一个组件，它是一个插件

    import Vue from 'vue'
    import VuePrism from 'vue-prism'
    Vue.use(VuePrism)

    import 'prismjs/themes/prism.css'


      const app = new Vue({
          el: "#app",
           router,
           components: {
              MainApp
           }
      });

 

在使用的高亮的时候只需要 pre 标签中带有 language-xxx 皆可以实现对应的代码高亮

   <pre class="language-php">
     <code>
       <?php
           $name="Mohammad";
           ...
      </code>
   </pre>

 

 

在nuxt中使用

在plugin中新建一个prism.js

import Vue from 'vue'


import "prismjs";

// 样式可以有多风格
// import prismcss from 'prismjs/themes/prism.css'
// import prismcss from 'prismjs/themes/prism-twilight.css'
import "prismjs/themes/prism-tomorrow.css";
import Prism from "vue-prism-component";
Vue.component("prism", Prism);

 

配置 nuxt.config.js

  plugins: [
    { src: '@/plugins/element-ui', ssr: true},
    { src: '@/plugins/prism.js', ssr: true} ,    
  ],

 

然后在需要使用代码高亮的地方使用 Prism.highlightAll()

# 在数据渲染完成的地方使用 Prism.highlightAll()
# 
# 即可实现对应代码高亮