vue+prismjs 网页代码高亮插件

最近在使用wangEditor的过程中发现编辑器中代码块展示没有问题，但是预览编辑器中的内容样式丢失，看过wangEditor的文档后发现用到了Prism.js，现将使用的经验分享。

使用步骤

1、安装prismjs插件

// 1. 安装prismjs 插件
npm install prismjs -S

// 2. 安装prismjs 编译器插件
npm install babel-plugin-prismjs -D

 2、插件配置

打开 babel.config.js ，在module.exports中的plugins添加以下配置，如果原本没有plugins可以手动添加

// babel.config.js
["prismjs", {
    "languages": ["javascript", "css", "markup"],
    "plugins": ["line-numbers"],
    "theme": "twilight",
    "css": true
  }
]

配置后 babel.config.js 的内容

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: ["@vue/babel-plugin-jsx", 
    ["prismjs", 
      {
        "languages": ["javascript", "css", "markup"],
        "plugins": ["line-numbers"], //配置显示行号插件
        "theme": "twilight", //主体名称
        "css": true
      }
    ]
  ]
}

3、在VUE中使用

// 引入
import Prism from "prismjs"; // 引入插件
import 'prismjs/themes/prism.css'; // 引入样式

3.1、静态页直接调用

3.2、异步渲染

OK，over