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

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

news 2026/3/31 15:23: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

Bootstrap 下拉菜单：全面解析与应用指南

Bootstrap 下拉菜单&#xff1a;全面解析与应用指南 引言 Bootstrap 是一个流行的前端框架&#xff0c;它提供了丰富的组件和工具来帮助开发者快速构建响应式、美观的网页。其中&#xff0c;下拉菜单是 Bootstrap 中一个常用且重要的组件&#xff0c;它能够帮助用户在有限的空间…...

编程新知 2026/3/31 14:58:16

Natapp内网穿透避坑指南：Windows系统常见报错解决方案（2024最新版）

Natapp内网穿透避坑指南&#xff1a;Windows系统常见报错解决方案&#xff08;2024最新版&#xff09; 在开发过程中&#xff0c;内网穿透工具如Natapp已成为连接本地开发环境与外部网络的必备利器。然而&#xff0c;对于初次接触Natapp的Windows用户来说&#xff0c;从安装配…...

编程新知 2026/3/31 14:54:15

如何将 iQOO 手机备份到Mac

iQOO是vivo旗下的智能手机品牌&#xff0c;以其强劲的性能、出色的游戏体验和极具竞争力的价格而闻名。它深受那些希望以合理价格购买高性能Android手机的用户欢迎。然而&#xff0c;由于缺乏官方的 macOS 管理工具&#xff0c;许多用户发现将 iQOO 手机备份到Mac并非易事。幸运…...

编程新知 2026/3/31 14:46:12

有偿求助 如何使用openclaw 来实现办公自动化

本地部署openclaw 需要让他帮我下载企业微信里的客户聊天记录...

编程新知 2026/3/31 14:26:03

原创：光刻机中下游质量约束框架：从底层落地破局芯片制造困局

光刻机中下游质量约束框架&#xff1a;从底层落地破局芯片制造困局 作者&#xff1a;华夏之光永存 摘要 当下国内芯片产业陷入一个普遍误区&#xff1a;将攻克EUV光刻机整机视为破局“卡脖子”的唯一核心&#xff0c;大量资源集中投入上游光刻机研发&#xff0c;却严重忽视中下…...

编程新知 2026/3/31 14:23:40

CVPR 2026 | 全架构通吃！MatchED 插件式模块，CNN/Transformer/扩散模型都能无缝集成

点击上方“小白学视觉”&#xff0c;选择加"星标"或“置顶” 重磅干货&#xff0c;第一时间送达边缘检测是计算机视觉领域的基石任务&#xff0c;从图像分割、深度估计到3D重建&#xff0c;几乎所有高阶视觉任务都依赖精准的边缘信息。但长期以来&#xff0c;一个核心…...

编程新知 2026/3/31 13:39:04

11.0592MHz晶振在51单片机串口通信中的优势解析

1. 为什么11.0592MHz晶振成为单片机工程师的首选在嵌入式系统设计中&#xff0c;晶振的选择往往决定了整个系统的稳定性和精度。作为一名从事单片机开发多年的工程师&#xff0c;我发现11.0592MHz的晶振在51单片机项目中出现的频率异常高。这绝非偶然&#xff0c;而是由一系列精…...

编程新知 2026/3/31 13:30:55

TVBoxOSC：电视盒子全能播放解决方案终极指南

TVBoxOSC&#xff1a;电视盒子全能播放解决方案终极指南 【免费下载链接】TVBoxOSC TVBoxOSC - 一个基于第三方项目的代码库&#xff0c;用于电视盒子的控制和管理。 项目地址: https://gitcode.com/GitHub_Trending/tv/TVBoxOSC 你是否曾经为电视盒子播放视频时遇到格式…...

编程新知 2026/3/31 13:26:54

别再手动改稿了！用LaTeX的soul包搞定论文批注（删除线/高亮/引用兼容）

LaTeX高效批注指南&#xff1a;用soul包实现学术协作的优雅排版 当导师的红色批注铺满论文初稿&#xff0c;或是合作者发来二十处修改意见时&#xff0c;大多数研究者都会面临一个共同困境——如何在保留原始内容的同时清晰标记修改痕迹&#xff1f;传统的手动添加删除线或高亮…...

编程新知 2026/3/31 12:56:36

GLM-4-9B-Chat-1M惊艳效果：碳中和白皮书（120页）中的技术路径拆解、时间节点校验与政策匹配度评分

GLM-4-9B-Chat-1M惊艳效果&#xff1a;碳中和白皮书&#xff08;120页&#xff09;中的技术路径拆解、时间节点校验与政策匹配度评分 1. 项目背景与核心能力 今天要给大家展示一个让人眼前一亮的技术应用场景——用GLM-4-9B-Chat-1M这个本地部署的大模型&#xff0c;来深度分…...

编程新知 2026/3/31 12:33:51