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

风雨润木易成林

引言

之前用 Ace 高亮代码，但依赖包过大，本身需要的功能也不是很多，只有代码高亮、显示行号、高亮某行。就用一下 Prismjs，现记录一下使用方法

1、 安装依赖

1. yarn add prismjs // 安装 prismjs 组件
   
2. yarn add babel-plugin-prismjs --dev // 安装编译器插件

复制代码

2、配置插件

1. // .babelrc 或 babel.config.js 文件里配置以下内容
   
2. {
   
3.   "plugins": [
   
4.     ["prismjs", {
   
5.         "languages": ["javascript", "css", "php"], // 需要的语言
   
6.         "plugins": ["line-numbers", "line-highlight"], // 引入的插件
   
7.         // "theme": "twilight", // 自定义主题
   
8.         "css": true
   
9.     }]
   
10.   ]
    
11. }

复制代码

3、代码片段

注意看注释，非常重要

1. // pre 和 code 写在同一行（不然行号会错乱
   
2. <template>
   
3.   <pre
   
4.     :data-line="props.lineNumber"
   
5.     :class="[`language-${props.language}`, 'highlight-code line-numbers']"><code :class="[`language-${props.language}`]">{{props.code}}</code></pre>
   
6. </template>
   
7. <script lang="ts" setup>
   
8. import { defineProps, onMounted } from "vue;
   
9. import Prism from 'prismjs';
   
10. import 'prismjs/themes/prism.css';
    
11. const props = defineProps ( {
    
12.   code: String,
    
13.   language: String,
    
14.   lineNumber: {
    
15.     type: Number,
    
16.     defalut: 0,
    
17.   },
    
18. });
    
19. onMounted(() => {
    
20.   setTimeout(() => // 必须加（获取不到高亮行的高度和宽度
    
21.     Prism.highlightAll(); // 异步请求的数据，可在获取数据后调用此方法
    
22.   });
    
23. });
    
24. </script>

复制代码

以上就是Vue使用Prism实现页面代码高亮展示示例的详细内容，更多关于Vue Prism页面代码高亮的资料请关注脚本之家其它相关文章！

来源:https://www.jb51.net/javascript/292121lph.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！