Vue使用Prism實(shí)現(xiàn)頁面代碼高亮展示示例
更新時間：2023年07月14日 10:12:15 作者：圈圈
這篇文章主要為大家介紹了Vue使用Prism實(shí)現(xiàn)頁面代碼高亮展示示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
引言
之前用 Ace 高亮代碼，但依賴包過大，本身需要的功能也不是很多，只有代碼高亮、顯示行號、高亮某行。就用一下 Prismjs，現(xiàn)記錄一下使用方法
1、 安裝依賴
yarn add prismjs // 安裝 prismjs 組件 yarn add babel-plugin-prismjs --dev // 安裝編譯器插件
2、配置插件
// .babelrc 或 babel.config.js 文件里配置以下內(nèi)容
{
"plugins": [
["prismjs", {
"languages": ["javascript", "css", "php"], // 需要的語言
"plugins": ["line-numbers", "line-highlight"], // 引入的插件
// "theme": "twilight", // 自定義主題
"css": true
}]
]
}3、代碼片段
注意看注釋，非常重要
// pre 和 code 寫在同一行（不然行號會錯亂
<template>
<pre
:data-line="props.lineNumber"
:class="[`language-${props.language}`, 'highlight-code line-numbers']"><code :class="[`language-${props.language}`]">{{props.code}}</code></pre>
</template>
<script lang="ts" setup>
import { defineProps, onMounted } from "vue;
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
const props = defineProps ( {
code: String,
language: String,
lineNumber: {
type: Number,
defalut: 0,
},
});
onMounted(() => {
setTimeout(() => // 必須加（獲取不到高亮行的高度和寬度
Prism.highlightAll(); // 異步請求的數(shù)據(jù)，可在獲取數(shù)據(jù)后調(diào)用此方法
});
});
</script>以上就是Vue使用Prism實(shí)現(xiàn)頁面代碼高亮展示示例的詳細(xì)內(nèi)容，更多關(guān)于Vue Prism頁面代碼高亮的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue關(guān)于自定義指令與v-if沖突的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue3監(jiān)聽reactive對象中屬性變化的方法
在 Vue 3 中,如果你想監(jiān)聽 reactive 對象中的某個屬性發(fā)生的變化,你可以使用 watch 函數(shù)進(jìn)行監(jiān)聽,watch 函數(shù)允許你觀察 reactive 對象的某個屬性或者整個對象,所以本文給大家介紹了Vue3監(jiān)聽reactive對象中屬性變化的方法,需要的朋友可以參考下2024-08-08
vue2.0$nextTick監(jiān)聽數(shù)據(jù)渲染完成之后的回調(diào)函數(shù)方法
今天小編就為大家分享一篇vue2.0$nextTick監(jiān)聽數(shù)據(jù)渲染完成之后的回調(diào)函數(shù)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue使用Echarts實(shí)現(xiàn)數(shù)據(jù)可視化的方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue使用Echarts實(shí)現(xiàn)數(shù)據(jù)可視化的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
vue表單驗(yàn)證rules及validator驗(yàn)證器的使用方法實(shí)例
在vue開發(fā)中,難免遇到各種表單校驗(yàn),下面這篇文章主要給大家介紹了關(guān)于vue表單驗(yàn)證rules及validator驗(yàn)證器使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue的全選組件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
Vue3中使用mock.js模擬數(shù)據(jù)的示例詳解
前后端同時開發(fā)的時候,后端接口數(shù)據(jù)沒有出來,前端可以使用mock模擬假數(shù)據(jù),所以下面小編就來為大家詳細(xì)介紹一下如何在Vue3中使用mock.js模擬數(shù)據(jù)吧2025-03-03
這篇文章主要為大家詳細(xì)介紹了Vue通過v-for實(shí)現(xiàn)年份自動遞增，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
Vue使用Print.js打印div方式(選中區(qū)域的html)
這篇文章主要介紹了Vue使用Print.js打印div方式(選中區(qū)域的html),具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue+webpack模擬后臺數(shù)據(jù)的示例代碼
這篇文章主要介紹了vue+webpack模擬后臺數(shù)據(jù)的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07