引言
之前用 Ace 高亮代码，但依赖包过大，本身需要的功能也不是很多，只有代码高亮、显示行号、高亮某行。就用一下 Prismjs，现记录一下使用方法
1、 安装依赖
1 2 | yarn add prismjs // 安装 prismjs 组件yarn add babel-plugin-prismjs --dev // 安装编译器插件 |
2、配置插件
1 2 3 4 5 6 7 8 9 10 11 | // .babelrc 或 babel.config.js 文件里配置以下内容{ "plugins": [ ["prismjs", { "languages": ["javascript", "css", "php"], // 需要的语言 "plugins": ["line-numbers", "line-highlight"], // 引入的插件 // "theme": "twilight", // 自定义主题 "css": true }] ]} |
3、代码片段
注意看注释，非常重要
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // pre 和 code 写在同一行（不然行号会错乱<pre><code>{{props.code}}</code></pre><p>import { defineProps, onMounted } from "vue;<br>import Prism from 'prismjs';<br>import 'prismjs/themes/prism.css';<br>const props = defineProps ( {<br> code: String,<br> language: String,<br> lineNumber: {<br> type: Number,<br> defalut: 0,<br> },<br>});<br>onMounted(() => {<br> setTimeout(() => // 必须加（获取不到高亮行的高度和宽度<br> Prism.highlightAll(); // 异步请求的数据，可在获取数据后调用此方法<br> });<br>});</p> |
以上就是Vue使用Prism实现页面代码高亮展示示例的详细内容，更多关于Vue Prism页面代码高亮的资料请关注IT俱乐部其它相关文章！
