IT俱乐部 JavaScript Vue使用Prism实现页面代码高亮展示示例

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

引言

之前用 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 写在同一行(不然行号会错乱
{{props.code}}

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(); // 异步请求的数据,可在获取数据后调用此方法
});
});

以上就是Vue使用Prism实现页面代码高亮展示示例的详细内容,更多关于Vue Prism页面代码高亮的资料请关注IT俱乐部其它相关文章!

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/js/8507.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部