Vue中使用Prism来显示代码高亮

话不多少先看效果

 显示效果

项目中有一个需求是在线预览算法文件，最简单的实现就是拿到数据后直接纯文本显示出来，但是作为开发者看习惯了IDE中代码高亮怎么能忍受的了裸眼纯文本呢，所以打算以更美观的方式显示。

Prism是什么？

Prism是一个轻量级的、可扩展的语法高亮器，它是根据现代web标准构建的。它被用于数百万个网站，包括一些你每天访问的网站。

Prism官网

使用步骤

一、安装插件

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

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

二、配置插件

在项目的.babelrc文件或babel.config.js中配置使用该插件：

  plugins: [
    ['prismjs', {
      'languages': ['javascript', 'css', 'markup', 'python'],
      'plugins': ['line-numbers'],
      'theme': 'tomorrow',
      'css': true
    }]
  ]

三、在需要展示代码的模块中引用

import Prism from 'prismjs'

在Vue钩子mounted ()中调用

Prism.highlightAll()

四、HTML

1、静态文件直接引用即可

      <pre>
        <code class="language-py line-numbers">
              handleFileClick (a, b, c) {
                if (
                  a['type'] === 'file' &&
                  !a['name'].match('.pyc') &&
                  !a['name'].match('.pth')
                ) {
                  this.showPreview = false
                  this.loadCodePreview(a['path'])
                }
              }
        </code>
      </pre>

2、如果是从服务器请求的数据，那么需要在响应请求后手动再调用Prism.highlightAll()，并且<pre>和<code>最好写在一行，否则代码可能会显示错乱。

<pre><code class="language-py line-numbers">{{ codeContent }}</code></pre>

    loadCodePreview (id, path) {
      this.getAlgorithmPreview({
        id: id,
        path: path
      }).then((res) => {
        this.codeContent = res.data.content
        this.$nextTick(() => {
          Prism.highlightAll()
        })
      }).catch((e) => {
        console.log(e)
        this.$message({
          showClose: true,
          message: '内容获取失败',
          type: 'error'
        })
      })
    }

其中主题和是否显示行号都可自己选。

OK，完