如何用Prism在Vue页面实现长尾词代码的高亮展示？

本文共计437个文字，预计阅读时间需要2分钟。

目录+引言+1. 安装依赖+2. 配置插件+3. 代码片段+引言+使用Ace进行代码高亮，但依赖包过大，本身需要的功能也不多，只需代码高亮、显示行号、高亮某行。因此，使用Prism.js。

目录

• 引言
• 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页面代码高亮的资料请关注自由互联其它相关文章！