码迷,mamicode.com
首页 > Web开发 > 详细

使用 prismjs 在网页中高亮显示代码

时间:2018-12-12 10:32:09      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:rem   you   网页   tca   模板   样式   rop   conf   slot   

最近在总结这一年来制作的网页模块,网站风格统一的情况下,网站页面结构不会改变,因此想记录一部分网站中统一的结构,方便日后维护。

用到的相关技术:

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‘]

 

很简单。

 

使用 prismjs 在网页中高亮显示代码

标签:rem   you   网页   tca   模板   样式   rop   conf   slot   

原文地址:https://www.cnblogs.com/baiyygynui/p/10106685.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!