目錄引言1、 安裝依賴2、配置插件3、代碼片段引言

之前用 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頁面代碼高亮的資料請關注好吧啦網其它相關文章！