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