使用 prismjs 在網頁中高亮顯示代碼

最近在總結這一年來制作的網頁模塊，網站風格統一的情況下，網站頁面結構不會改變，因此想記錄一部分網站中統一的結構，方便日后維護。

用到的相關技術：

vue, element-ui, prismjs, vue-prism-editor, vue-router

做成的效果如圖：

因為是在 vue 環境下，因此需要安裝以下插件：

npm i prismjs
npm i vue-prism-editor
npm i element-ui

制作過程中有三個知識點：

1. element-ui 菜單
2. 展示代碼通過組件間傳值
3. prismjs 代碼皮膚

菜單

sibar.js 菜單結構是通過一個json實現的，數據結構使用類似 router 的組件嵌套方式，方便維護：

//外層的數組代表一級菜單，內層sub數組代表二級菜單。
module.exports = [{
    name: 'Anviz Module',
    id:'anviz',
    sub: [{
        name: 'layout 布局',
        componentName: 'AnvizLayout'
        }, {
        name: 'container 布局容器',
        componentName: 'AnvizContainer'
    }]
},{
    name: 'Module',
    id: 'utec',
    sub: [{
            name: 'details',
            componentName: 'ProductCard'
        }, {
            name: 'table',
            componentName: 'Table'
    }]
}]

在 Sidebar 組件中加載這個 sibar.js ，通過遍歷這個數組，制作菜單：

 

　import menu from '@/config/sibar.js；

<el-submenu v-for="item in menu" :index="item.id" :key="item.id">
     <template slot="title">
         <i class="icon icon-rem-twentyfour icon-dashbord"></i>
         <span v-text="item.name"></span>
     </template>
     <div class="normal-padding" v-for="sub in item.sub" :key="sub.componentName">
         <el-menu-item :index="sub.componentName" v-text="sub.name"></el-menu-item>
     </div>
</el-submenu>

代碼皮膚

代碼顯示區域為一個 CodeView 的子組件，使用 prism-editor 的方法顯示相關代碼。 prism-editor 支持將 code 定義為變量，通過改變 code 的不同的值來顯示不同的內容。

<prism-editor :code="htmlCode" language="html" class="my-editor"></prism-editor>

傳值

而父組件給子組件傳的值是定義不同的顯示內容，比如 html/css/js等，顯示的內容直接使用模板字符串的方式，將整個結構或結構所需樣式傳遞。

<template>
 <div>
     <codeView :htmlCode="htmlCode" :jsCode="jsCode" :cssCode="cssCode"></codeView>
 </div>
</template>

let htmlCode = ``
let jsCode = ``
let cssCode = ``

//子組件接收並給組件變量賦值
props:['htmlCode','jsCode','cssCode']

 

很簡單。