nuxt使用prism.js

无标签

文档

发布日期: 2020-04-21

文章字数: 118

阅读时长: 1 分

阅读次数:

vue-cil使用这个比较简单。。
可以参考：https://juejin.im/post/5c6826a65188256ec63ef901

但是nuxt的代码我研究了半天，最后终于可以实现这个效果了

先安装 prism.js

cnpm i --save Prismjs 
cnpm i --save babel-plugin-prismjs

然后配置一下nuxt.config.js文件

在这个位置

babel: {
           plugins: [
               [
                   'prismjs',
                   {
                       languages: [
                           'html',
                           'css',
                           'javascript',
                           'php',
                           'dart',
                           'bash',
                           'nginx',
                           'sql',
                           'c',
                           'cpp',
                           'python',
                           'go',
                           'java'
                       ],
                       plugins: [
                           'line-numbers',
                           'show-language',
                           'copy-to-clipboard'
                       ],
                       theme: 'coy',
                       css: true
                   }
               ]
           ]
       }