vue+prismjs 网页代码高亮插件

原创

江拥羡橙

发布于 2023-11-04 22:41:46

1K00

代码可运行

文章被收录于专栏：前端二次元前端二次元

运行总次数：0

代码可运行

最近在使用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、静态页直接调用

<template>
  <div>
	<pre class="language-javascript">
      <code class="language-javascript" >
        const editorRef = shallowRef()
        const valueHtml = ref('这是代码演示')
      </code>
    </pre>
  </div>
</template>

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

export default {
  mounted(){
    Prism.highlightAll()
  }
}
</script>

3.2、异步渲染

<div v-html="valueHtml" class="iu-editor-html"></div>

<script>
// 引入
import Prism from "prismjs"; // 引入插件
import 'prismjs/themes/prism.css'; // 引入样式
export default {
  methods: {
    getHtml(){
      // ... do something
      this.$nextTick(() => {
        Prism.highlightAll()
      })
      // 不生效使用setTimeout
      // setTimeout(() => {
	  //   Prism.highlightAll()
	  // }, 100);
    }
  }


}
</script>

OK，over😋

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第三期