之前用 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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。