溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關vue項目實現頁面嵌入代碼塊vue-prism-editor的方法，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
1.安裝vue-prism-editor
npm install vue-prism-editor
由于vue-prism-editor需要依賴 prismjs，所以還需要安裝prismjs
npm install prismjs
2.在需要使用vue-prism-editor的組件中引入
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
// import highlighting library (you can use any library you want just return html string)
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles3.html代碼
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter" :line-numbers="lineNumbers" ></prism-editor>
code----為需要高亮顯示的代碼內容
highlighter----定義在methods中的一個方法，用于把code高亮顯示
lineNumbers----是否可編輯標識
4.js代碼
export default {
components: {
PrismEditor
},
data: () => ({
code: 'console.log("Hello World")',
lineNumbers: true, // true為編輯模式， false只展示不可編輯
}),
methods: {
highlighter(code) {
return highlight(code, languages.js); //returns html
}
}
};5.css代碼
<style lang="scss">
/* required class */
.my-editor {
background: #2d2d2d;
color: #ccc;
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
/* optional */
.prism-editor__textarea:focus {
outline: none;
}
/* not required: */
.height-300 {
height: 300px;
}
</style>注意： css樣式必寫，不然編輯器沒有樣式，只是純白頁面展示
“height-300” 是給編輯器設置高度的，高度可自行設置，也可以不設置，這個樣式非必需
到這里，功能基本就實現了。
但是在過程中遇到一些問題，這里也一并總結。
問題
1.如果僅安裝vue-prism-editor，沒有安裝prismjs，會報以下錯誤，npm install prismjs即可
2.如果報錯中有提示升級或者安裝ajv或者vue2.6.X版本，根據提示安裝即可
npm install ajv@^6.9.1 npm install vue@^2.6.11
個人理解，如果ajv和vue版本過低，可能會導致vue-prism-editor依賴的相關東西安裝不上，建議升級完ajv和vue之后，再重新安裝vue-prism-editor和prismjs.
3.vue與vue-template-compiler版本不一致
卸載低版本vue-template-compiler
npm uninstall vue-template-compiler
然后安裝跟vue同樣版本的vue-template-compiler
npm install vue-template-compiler@2.6.11
上述就是小編為大家分享的vue項目實現頁面嵌入代碼塊vue-prism-editor的方法了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
