Vue使用Prism实现页面代码高亮展示示例

admin JavaScript

2023-12-01 0 375

引言

之前用 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>