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

技术官方文档中的代码是用什么展示的？代码高亮插件总结

news 2026/2/4 22:09:40
****内容预警****菜鸟教程***大佬绕道

我们经常看到各种技术官方文档，有很多代码展示的区域，用于我们复制粘贴代码，比如vue 的官网

当我们需要自己实现这么一个网站的时候，我就开始手忙脚乱，这到底是咋实现的？

第一想到的就是使用富文本编辑器，常见的富文本编辑器比如quillsj 和tiptap都可以写代码，最终我选择了tiptap实现我想要的功能。

使用tiptap展示代码，并且有高亮的功能需要用这个插件

pnpm i @tiptap/extension-code-block-lowlight

感觉也可以，但是感觉很麻烦，很好奇其他人是咋做的？是不是有更好的插件，我们可以自己来研究一下。

一、vue官网 shikijs

我们打开开发者工具，看到了一个很【可疑的】class，去搜一下，发现果然，是一个很有用的家伙

Shiki is a beautiful syntax highlighter

感觉很好用，可以自己随意打开一个技术官网，然后自己探索一下，他们都是用了什么插件实现展示代码并高亮的。

二、其他的代码高亮插件

  1. prismjs

  1. highlight.js

  1. SyntaxHighlighter

有几个重要的知识点，总结一下

  1. 如果你要实现这种功能，你在浏览器应该搜索【代码高亮插件】而不是【展示代码的插件】

  1. 看了这么多的官网，代码展示都是在<pre><code></code></pre>块中包裹的

  1. 有很多好用代码高亮插件，而且是轻量级的，所以就不要再功能很多笨重的富文本编辑器了（没错。说的就是我自己，赶紧把tiptap给换掉！！）

相关文章：

技术官方文档中的代码是用什么展示的？代码高亮插件总结

****内容预警****菜鸟教程***大佬绕道我们经常看到各种技术官方文档&#xff0c;有很多代码展示的区域&#xff0c;用于我们复制粘贴代码&#xff0c;比如vue 的官网当我们需要自己实现这么一个网站的时候&#xff0c;我就开始手忙脚乱&#xff0c;这到底是咋实现的&#xff1f…...

编程日记 2023/5/31 13:41:03

2023年中职组网络安全竞赛——综合渗透测试解析

综合渗透测试 题目如下： PS:需求环境可私信博主,求个三连吧！ 解析如下: 通过本地PC中的渗透测试平台KALI2020对服务器场景进行渗透攻击，获取到RSYNC服务所开放的端口，将RSYNC服务开放的端口数值进行MD5加密后作为FLAG提交（如MD5加密前：812）；...

编程日记 2023/5/31 13:40:58

【全网最细PAT题解】【PAT乙】1044 火星数字（测试点2，测试点4详细解释）

题目链接 1044 火星数字 题目描述 火星人是以 13 进制计数的&#xff1a;地球人的 0 被火星人称为 tret。 地球人数字 1 到 12 的火星文分别为&#xff1a;jan, feb, mar, apr, may, jun, jly, aug, sep, oct, nov, dec。 火星人将进位以后的 12 个高位数字分别称为&#xff1a…...

编程日记 2023/5/31 13:40:42

rsync+xinetd+inotify+sersync

一、介绍 1.1、rsync 对比 scp 相同&#xff1a; 都有拷贝的功能不同&#xff1a; rsync:具有增量复制&#xff0c;每次复制的时候&#xff0c;会扫描对端是否在同路径下有我要发送的一样的文件或者目录&#xff0c;如果&#xff0c;如果存在&#xff0c;则不进行复制。边复制&…...

编程日记 2023/5/31 13:40:36

CSS - 扫盲

文章目录1. 前言2. CSS2.1 css 的引入方式2.2 选择器2.3 CSS 常用属性2.3.1 字体属性2.3.2 文本属性2.3.3 背景属性2.4 圆角矩形2.5 元素的显示模式2.6 盒子模型2.7 弹性布局1. 前言 上文我们简单 将 HTML 过了一遍 &#xff0c; 知道了 HTML 知识表示页面的结构和内容 &#x…...

编程日记 2023/5/31 13:40:29

ChatGPT能完全取代软件开发吗，看看它怎么回答？

最近网上一直疯传&#xff0c;ChatGPT 最可能取代的 10 种工作。具体包括①、技术类工作&#xff1a;程序员、软件工程师、数据分析师②、媒体类工作&#xff1a;广告、内容创作、技术写作、新闻③、法律类工作&#xff1a;法律或律师助理④、市场研究分析师⑤、教师⑥、金融类…...

编程日记 2023/6/1 5:14:11

Vue3学习笔记

一、Ref ref, isRef, shallowRef, triggerRef, customRef ref返回的是es6的一个class类&#xff0c;取值和修改都要加上.valueref 和 shallowRef不能一起写&#xff0c;会引起shallowRef的视图更新ref shallowRef triggerRef <template><div class"home&quo…...

编程日记 2023/6/1 5:14:08

【React】pro-mobile

1.项目介绍 实现react移动端项目 2.目标&#xff1a; 能够应用CRAReactMobxAntd-mobile开发C端项目掌握基于React的C端项目开发流程学会如何应用next优化项目 3.使用技术栈 脚手架&#xff1a;cra dva-cliumi 脚本&#xff1a;ts react版本&#xff1a;react v18 2022年更…...

编程日记 2023/6/1 7:40:37

Substrate 基础教程（Tutorials） -- 授权特定节点

五、授权特定节点 在添加可信节点中&#xff0c;您看到了如何使用一组已知的验证器节点构建一个简单的网络。该教程演示了一个简化版的许可网络&#xff08;permissioned network&#xff09;。在一个被许可的网络中&#xff0c;只有被授权的节点&#xff08;authorized nodes…...

编程日记 2023/6/1 7:40:35

使用qemu-img转换镜像格式

qemu功能强大&#xff0c;详细了解其功能请到官网查看 https://www.qemu.org/docs/master/system/images.html qemu-img能将RAW、qcow2、VMDK、VDI、VHD&#xff08;vpc&#xff09;、VHDX、qcow1或QED格式的镜像转换成VHD格式&#xff0c;也可以实现RAW和VHD格式的互相转换。 …...

编程日记 2023/6/1 7:40:33

Springboot怎么集成Thymeleaf模板引擎？

Thymeleaf介绍Thymeleaf&#xff0c;是一个XML/XHTML/HTML模板引擎&#xff0c;开源的java库&#xff0c;可以用于SpingMVC项目中&#xff0c;用于代替JSP、FreeMarker或者其他的模板引擎&#xff1b;页面与数据分离&#xff0c;提高了开发效率&#xff0c;让代码重用更容易。S…...

编程日记 2023/5/31 13:40:23

LiveGBS国标GB/T28181视频流媒体平台-功能视频集中录制存储云端录像H264|H265|HEVC视频存储

LiveGBS国标GB/T28181视频流媒体平台-视频集中录制存储云端录像H264|H265|HEVC视频存储1、云端录像存储2、手动配置录像2.1、按需录像2.2、一直录像3、录像计划3.1、录像计划入口3.2、新增录像计划3.3、编辑录像计划3.4、关联通道4、查看云端录像4.1、查看录像4.1.1、时间轴模式…...

编程日记 2023/6/1 7:40:30

IntelliJ IDEA如何整合Maven图文教程详解

Maven 1.Maven简述 Maven是一个构建工具,服务与构建.使用Maven配置好项目后,输入简单的命令,如:mvn clean install,Maven会帮我们处理那些繁琐的任务. Maven是跨平台的. Maven最大化的消除了构建的重复. Maven可以帮助我们标准化构建过程.所有的项目都是简单一致的,简化了学习…...

编程日记 2023/5/31 13:40:18

图数据库认证考试 NGCP 错题解析 vol.02：这 10 道题竟无一人全部答对

如果你读过「NebulaGraph 错题解析第一期」&#xff0c;大概知道在错题解析未出来之前&#xff0c;NebulaGraph 专业技能认证 NGCP&#xff08;全称 NebulaGraph Certified Professional&#xff09;的通过率仅有 16.7%。但是&#xff0c;经过上一轮 NebulaGraph 认证考试出题人…...

编程日记 2023/5/31 18:32:50

188888

81. 一个敏捷项目正在进行八次迭代中的第五次迭代。在最后一次迭代计划之后&#xff0c;团队得知市场上出现一个新的竞争对手&#xff0c;有必要更快地加快进程来确保不失去市场份额。 项目经理应该怎么做&#xff1f; A 将竞争对手的功能添加到产品积压待办清单中&#xff0c;…...

编程日记 2023/5/31 18:32:48

华为机试题：HJ99 自守数（python）

文章目录&#xff08;1&#xff09;题目描述&#xff08;2&#xff09;Python3实现&#xff08;3&#xff09;知识点详解1、input()&#xff1a;获取控制台&#xff08;任意形式&#xff09;的输入。输出均为字符串类型。1.1、input() 与 list(input()) 的区别、及其相互转换方…...

编程日记 2023/5/31 18:32:46

如何提高推广邮件的发送成功率？

随着经济的发展&#xff0c;国际之间的贸易往来越加频繁&#xff0c;很多外贸企业需要发送大量的商业推广邮件&#xff0c;来获得销售订单开拓公司业务市场。 随之而来的问题也是越来越多&#xff0c;给众多的外贸企业带来诸多的困扰。外贸企业在发送推广邮件中究竟会遇到什么问…...

编程日记 2023/5/31 18:32:45

关于提高PX4抗风性

滚转角速率控制器&#xff1a;&#xff08;MC_ROLLRATE_P&#xff0c; MC_ROLLRATE_I&#xff0c; MC_ROLLRATE_D&#xff09; 滚转角速率控制器&#xff1a;&#xff08;MC_PITCHRATE_P&#xff0c; MC_PITCHRATE_I&#xff0c;MC_PITCHRATE_D&#xff09; 滚转角速率控制器…...

编程日记 2023/5/31 18:32:43

AVL 树实现

AVL 树的概念 也许因为插入的值不够随机&#xff0c;也许因为经过某些插入或删除操作&#xff0c;二叉搜索树可能会失去平衡&#xff0c;甚至可能退化为单链表&#xff0c;造成搜索效率低。 AVL Tree 是一个「加上了额外平衡条件」的二叉搜索树&#xff0c;其平衡条件的建立是…...

编程日记 2023/5/30 23:30:39

跟我学c++高级篇——模板元编程之八惰性加载

一、Lazy evaluation 惰性加载或者延迟计算&#xff0c;在前面的文章《跟我学c中级篇——迟延计算》中分析过。叫法怎么叫都可以&#xff0c;只要大家明白这个意思即可。Lazy evaluation一般可用于下面的情况&#xff1a; 1、模板中的对象非立刻的模板实例化&#xff0c;也就是…...

编程日记 2023/5/30 22:35:33

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2026/1/23 19:50:28

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/11/20 7:52:01

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2026/1/26 20:38:50

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2026/2/4 17:52:56

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2026/2/3 19:45:13

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

编程新知 2025/12/4 0:13:33

【MATLAB代码】基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），针对传感器观测数据中存在的脉冲型异常噪声问题，通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现，验证了后者在状态估计鲁棒性方面的显著优…...

编程新知 2026/1/28 9:00:05

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2026/1/31 13:13:28

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

编程新知 2026/1/28 9:22:13

实战设计模式之模板方法模式

概述 模板方法模式定义了一个操作中的算法骨架&#xff0c;并将某些步骤延迟到子类中实现。模板方法使得子类可以在不改变算法结构的前提下&#xff0c;重新定义算法中的某些步骤。简单来说&#xff0c;就是在一个方法中定义了要执行的步骤顺序或算法框架&#xff0c;但允许子类…...

编程新知 2026/1/26 23:42:12