最近在使用wangEditor的過(guò)程中發(fā)現(xiàn)編輯器中代碼塊展示沒(méi)有問(wèn)題，但是預(yù)覽編輯器中的內(nèi)容樣式丟失，看過(guò)wangEditor的文檔后發(fā)現(xiàn)用到了Prism.js，現(xiàn)將使用的經(jīng)驗(yàn)分享。
使用步驟
1、安裝prismjs插件
// 1. 安裝prismjs 插件
npm install prismjs -S
// 2. 安裝prismjs 編譯器插件
npm install babel-plugin-prismjs -D?2、插件配置
打開(kāi)?babel.config.js ，在module.exports中的plugins添加以下配置，如果原本沒(méi)有plugins可以手動(dòng)添加
// babel.config.js
["prismjs", {
"languages": ["javascript", "css", "markup"],
"plugins": ["line-numbers"],
"theme": "twilight",
"css": true
}
]
配置后 babel.config.js?的內(nèi)容文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-743271.html
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: ["@vue/babel-plugin-jsx",
["prismjs",
{
"languages": ["javascript", "css", "markup"],
"plugins": ["line-numbers"], //配置顯示行號(hào)插件
"theme": "twilight", //主體名稱
"css": true
}
]
]
}3、在VUE中使用
// 引入
import Prism from "prismjs"; // 引入插件
import 'prismjs/themes/prism.css'; // 引入樣式3.1、靜態(tài)頁(yè)直接調(diào)用
<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??文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-743271.html
到了這里，關(guān)于vue+prismjs 網(wǎng)頁(yè)代碼高亮插件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
