当前位置: 首页 > news >正文

vue+prismjs 网页代码高亮插件

最近在使用wangEditor的过程中发现编辑器中代码块展示没有问题,但是预览编辑器中的内容样式丢失,看过wangEditor的文档后发现用到了Prism.js,现将使用的经验分享。

使用步骤

1、安装prismjs插件

// 1. 安装prismjs 插件
npm install prismjs -S// 2. 安装prismjs 编译器插件
npm install babel-plugin-prismjs -D

 2、插件配置

打开 babel.config.js ,在module.exports中的plugins添加以下配置,如果原本没有plugins可以手动添加

// babel.config.js
["prismjs", {"languages": ["javascript", "css", "markup"],"plugins": ["line-numbers"],"theme": "twilight","css": true}
]

配置后 babel.config.js 的内容

module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: ["@vue/babel-plugin-jsx", ["prismjs", {"languages": ["javascript", "css", "markup"],"plugins": ["line-numbers"], //配置显示行号插件"theme": "twilight", //主体名称"css": true}]]
}

3、在VUE中使用

// 引入
import Prism from "prismjs"; // 引入插件
import 'prismjs/themes/prism.css'; // 引入样式

3.1、静态页直接调用

<template><div><pre class="language-javascript"><code class="language-javascript" >const editorRef = shallowRef()const valueHtml = ref('这是代码演示')</code></pre></div>
</template><script>
// 引入
import Prism from "prismjs"; // 引入插件
import 'prismjs/themes/prism.css'; // 引入样式export default {mounted(){Prism.highlightAll()}
}
</script>

3.2、异步渲染

<div v-html="valueHtml" class="iu-editor-html"></div><script>
// 引入
import Prism from "prismjs"; // 引入插件
import 'prismjs/themes/prism.css'; // 引入样式
export default {methods: {getHtml(){// ... do somethingthis.$nextTick(() => {Prism.highlightAll()})// 不生效使用setTimeout// setTimeout(() => {//   Prism.highlightAll()// }, 100);}}}
</script>

OK,over😋

相关文章:

vue+prismjs 网页代码高亮插件

最近在使用wangEditor的过程中发现编辑器中代码块展示没有问题&#xff0c;但是预览编辑器中的内容样式丢失&#xff0c;看过wangEditor的文档后发现用到了Prism.js&#xff0c;现将使用的经验分享。 使用步骤 1、安装prismjs插件 // 1. 安装prismjs 插件 npm install prismj…...

【软件测试】其实远远不止需求文档这么简单

我们都知道&#xff0c;软件测试是一门依赖性很强的综合技术&#xff0c;软件测试工程师在施行自己的工作时&#xff0c;总是要依赖其他团队的产出。 比如&#xff0c;我们要依赖着需求团队给出的需求分析说明书来确定测试的方向&#xff0c;又要依赖开发团队产出的实际代码产品…...

SAP-PP-常用TCODE

PP主数据管理MM01/MM02物料主数据维护/修改 MM17物料主数据部分字段批量修改 /sapapo/mat1PPDS查看物料主数据 /sapapo/Res01PPDS查看资源主数据 BOM管理CS01/CS02维护/修改/删除BOM 超级BOM涉及到物料分类类型001 &#xff0c;CT04 创建特性&#xff0c;CL01 创建类 工作中…...

第六章认识Node.js服务器开发

目录 Node.js同步和异步编程 基本概念 执行方式 获取异步API的返回值 网页基础扩展 项目 Node.js同步和异步编程 基本概念 同步API(应用程序编程接口)是指只有当前API执行完毕后才能继续执行下一个API。形象的说同步模式就是一个服务员在某一个时间段内只服务一个客人…...

Ubuntu 增加服务 比如openfire

在Ubuntu上&#xff0c;可以使用systemd来管理和配置服务。下面是将命令添加为服务的一般步骤&#xff1a; 创建一个.service文件&#xff0c;该文件描述了您要添加的服务。打开终端&#xff0c;并使用以下命令创建一个新的服务文件&#xff1a; sudo nano /etc/systemd/syst…...

海康Visionmaster-全局变量:全局变量关联流程中具体 模块结果的方法

将视觉流程中模板匹配算法模块运行的结果数据&#xff1a;特征匹配点 X 关联全局变量 MatchResultX。 在流程运行的主界面中&#xff0c;按照下面 1&#xff0c;2&#xff0c;3&#xff0c;4 步骤操作&#xff0c;第一步选中算法模块&#xff0c;第二步择模块结果 Tab 页&#…...

Eureka介绍和使用

Eureka介绍和使用 一、基本介绍1. Eureka是什么?2. Eureka的作用3. 常用使用场景4. Eureka的工作原理5. Eureka的优点6. 使用Eureka的注意事项 二、eureka配置项解释1. eureka.instance.hostname2. eureka.instance.appname3. eureka.instance.instance-id4. eureka.client.se…...

Incremental Object Detection via Meta-Learning【论文解析】

Incremental Object Detection via Meta-Learning 摘要1 介绍2 相关工作3 方法3.1 问题描述3.2元学习梯度预处理3.3增量式目标检测器摘要 摘要:在真实世界的情境中,目标检测器可能会不断遇到来自新类别的物体实例。当现有的目标检测器应用于这种情景时,它们对旧类别的性能会…...

AI大模型时代网络安全攻防对抗升级,瑞数信息变革“下一代应用与数据安全”

AI与大模型技术加速普及&#xff0c;安全领域也在以创新视角聚焦下一代应用安全WAAP变革&#xff0c;拓展新一代数据安全领域。近日瑞数信息重磅发布了瑞数全新API扫描器、API安全审计、数据安全检测与应急响应系统及分布式数据库备份系统四大新品。此次发布在延续瑞数信息Bot自…...

后端接口接收对象和文件集合,formdata传递数组对象

0 问题 后端接口需要接收前端传递过来的对象和文件集合&#xff1b;对象中存在数组对象 1 前端和后端 前端只能使用formdata来传递参数&#xff0c;后端不使用RequestBody注解 2 formdata传递数组对象 2.1 多个参数对象数组 addForm: {contactInfo: [{contactPerson: ,…...

python json包

当前大语言模型比较火热&#xff0c;很多数据是以json格式进行数据传递的。python包中的json包就是一个处理Json格式数专业包。 本文主要介绍这个包中的四个函数&#xff0c;dump,dumps,load,loads 序列化为Json dump&#xff1a;将Python对象序列化为Json文件 案例 我们有如…...

基于 NGram 分词,优化 Es 搜索逻辑,并深入理解了 matchPhraseQuery 与 termQuery

基于 NGram 分词&#xff0c;优化 Es 搜索逻辑&#xff0c;并深入理解了 matchPhraseQuery 与 termQuery 前言问题描述排查索引库分词&#xff08;发现问题&#xff09;如何去解决这个问题&#xff1f;IK 分词器NGram 分词器使用替换 NGram 分词器后进行测试matchPhraseQuery 查…...

PivotNet:Vectorized Pivot Learning for End-to-end HD Map Construction

参考代码&#xff1a;BeMapNet。PS&#xff1a;代码暂未放出&#xff0c;关注该仓库动态 动机和主要贡献 在MapTR系列的算法中将单个车道线建模为固定数量的有序点集&#xff08;对应下图Evenly-based&#xff09;&#xff0c;这样的方式对于普通道路场景具备一定适应性。但是…...

阿里云安全恶意程序检测

阿里云安全恶意程序检测 赛题理解赛题介绍赛题说明数据说明评测指标 赛题分析数据特征解题思路 数据探索数据特征类型数据分布箱型图 变量取值分布缺失值异常值分析训练集的tid特征标签分布测试集数据探索同上 数据集联合分析file_id分析API分析 特征工程与基线模型构造特征与特…...

Xcode中如何操作Git

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的编码爱好者 大家好&#xff0c;我是全栈工…...

浅述边缘计算场景下的云边端协同融合架构的应用场景示例

云计算正在向一种更加全局化的分布式节点组合形态进阶&#xff0c;而边缘计算是云计算能力向边缘侧分布式拓展的新触角。随着城市建设进程加快&#xff0c;海量设备产生的数据&#xff0c;若上传到云端进行处理&#xff0c;会对云端造成巨大压力。如果利用边缘计算来让云端的能…...

C++中禁止在栈中实例化的类

C中禁止在栈中实例化的类 栈空间通常有限。如果您要编写一个数据库类&#xff0c;其内部结构包含数 TB 数据&#xff0c;可能应该禁止在栈上实例化它&#xff0c;而只允许在自由存储区中创建其实例。为此&#xff0c;关键在于将析构函数声明为私有的&#xff1a; class Monst…...

MsgPack和Protobuf

MsgPack可以在C下序列化类&#xff0c;Protobuf只能在C#下序列化类 Cocos Creator安装msgpack-lite 项目文件夹执行 rpm -i msgpack-lite...

自定义类型联合体

目录 联合体联合体类型的声明联合体的特点相同成员的结构体和联合体对比联合体大小的计算联合体的应用联合的一个练习 感谢各位大佬对我的支持,如果我的文章对你有用,欢迎点击以下链接 &#x1f412;&#x1f412;&#x1f412; 个人主页 &#x1f978;&#x1f978;&#x1f…...

【Shell 系列教程】Shell printf 命令( 六)

文章目录 往期回顾Shell printf 命令printf 的转义序列 往期回顾 【Shell 系列教程】shell介绍&#xff08;一&#xff09;【Shell 系列教程】shell变量&#xff08;二&#xff09;【Shell 系列教程】shell数组&#xff08;三&#xff09;【Shell 系列教程】shell基本运算符&a…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...