Vue使用Prism實(shí)現(xiàn)頁面代碼高亮展示示例

目錄 引言 1、 安裝依賴 2、配置插件 3、代碼片段 引言 之前用 Ace 高亮代碼，但依賴包過大，本身需要的功能也不是很多，只有代碼高亮、顯示行號(hào)、高亮某行。就用一下 Prismjs，現(xiàn)記

目錄

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

引言

之前用 Ace 高亮代碼，但依賴包過大，本身需要的功能也不是很多，只有代碼高亮、顯示行號(hào)、高亮某行。就用一下 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 寫在同一行（不然行號(hào)會(huì)錯(cuò)亂
<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(); // 異步請(qǐng)求的數(shù)據(jù)，可在獲取數(shù)據(jù)后調(diào)用此方法
  });
});
</script>

以上就是Vue使用Prism實(shí)現(xiàn)頁面代碼高亮展示示例的詳細(xì)內(nèi)容，更多關(guān)于Vue Prism頁面代碼高亮的資料請(qǐng)關(guān)注技圈網(wǎng)其它相關(guān)文章！

【轉(zhuǎn)自：濱海網(wǎng)站設(shè)計(jì)公司 http://www.1234xp.com/binhai.html 歡迎留下您的寶貴建議】