Vue中使用 Prism 实现代码高亮

香菊网 发表于: 2020-01-20 分类: 前端front  HTML&CSS  ssr  H5部分  

引言

流行的代码语法高亮工具有很多,但我最喜欢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()
# 
# 即可实现对应代码高亮

 

 

标签: 前端frontHTML&CSSssrH5部分
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮