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

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

news 2026/5/31 16:34:31
****内容预警****菜鸟教程***大佬绕道

我们经常看到各种技术官方文档，有很多代码展示的区域，用于我们复制粘贴代码，比如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

机器学习赋能6G近场通信：从信道估计到波束赋形的智能革命

1. 项目概述&#xff1a;当6G遇见近场&#xff0c;为何机器学习成为破局关键&#xff1f;如果你关注过5G到6G的技术演进路线&#xff0c;会发现一个核心趋势&#xff1a;天线阵列的规模正在从“大规模”走向“极大规模”。这不仅仅是数量的堆砌&#xff0c;更是通信物理原理的一…...

编程新知 2026/5/26 3:22:04

别再手动点菜单了！用这招让Cadence Virtuoso Schematic效率翻倍（附Net高亮快捷键配置）

电路设计效率革命&#xff1a;Cadence Virtuoso Schematic高阶快捷键配置指南 在集成电路设计的浩瀚宇宙中&#xff0c;Cadence Virtuoso如同设计师手中的光刻机&#xff0c;每一次精准操作都直接影响最终芯片的性能与可靠性。然而&#xff0c;当面对数百个晶体管组成的复杂模…...

编程新知 2026/5/26 2:49:47

用STM32CubeMX和HAL库快速上手WS2812B：告别手动计算延时，一键生成驱动框架

基于STM32CubeMX的WS2812B智能灯光控制&#xff1a;从零构建现代化驱动方案在智能硬件和物联网设备快速发展的今天&#xff0c;WS2812B可编程LED灯带因其丰富的色彩表现和简单的单线控制方式&#xff0c;成为创客和工程师们最喜爱的显示组件之一。然而&#xff0c;传统的寄存器…...

编程新知 2026/5/26 2:41:39

新手村任务：成为一个架构师需要哪些装备？

新手村任务：成为一个架构师需要哪些装备？ 一、前言 如果你刚入行不久，想成为一名架构师，那这篇文章就是为你写的。 我们把成为架构师比作一个RPG游戏，你是主角，需要收集各种装备、刷经验、升级技能。 新手村的第一个任务就是：了解你需要哪些装备。 二、架构师技能树…...

编程新知 2026/5/26 2:11:26

政企数据安全：危机与出路

随着数字化转型的浪潮席卷全球&#xff0c;公共部门积累的数据量呈爆炸式增长。从公民个人信息到公共服务记录&#xff0c;从财政预算到基础设施管理数据——这些宝贵资源在提升政府治理效率的同时&#xff0c;也悄然成为网络犯罪分子的“新猎物”。当公共数据逐渐成为数字时代…...

编程新知 2026/5/26 1:39:10

告别混乱绑定！在UE5 GAS中优雅管理技能输入（基于GameplayTag）

告别混乱绑定&#xff01;在UE5 GAS中优雅管理技能输入&#xff08;基于GameplayTag&#xff09;当你的UE5 RPG项目发展到中期&#xff0c;技能数量从十几个膨胀到几十个时&#xff0c;最痛苦的莫过于发现InputAction绑定已经变成一团乱麻。每次新增技能都要修改输入绑定逻辑&a…...

编程新知 2026/5/25 23:00:46

紧急预警：DeepSeek代码生成中未公开的3类逻辑漂移现象（附自动化检测脚本+修复模板）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;紧急预警&#xff1a;DeepSeek代码生成中未公开的3类逻辑漂移现象&#xff08;附自动化检测脚本修复模板&#xff09; 近期在多轮生产级代码审计中发现&#xff0c;DeepSeek-R1&#xff08;v2.5&#x…...

编程新知 2026/5/25 20:38:10

如何快速定制Office界面：终极开源工具使用指南

如何快速定制Office界面&#xff1a;终极开源工具使用指南 【免费下载链接】office-ribbonx-editor An overhauled fork of the original Custom UI Editor for Microsoft Office, built with WPF 项目地址: https://gitcode.com/gh_mirrors/of/office-ribbonx-editor O…...

编程新知 2026/5/25 17:50:39

5步彻底解决Windows DLL加载冲突：UE4SS系统故障排查指南

5步彻底解决Windows DLL加载冲突&#xff1a;UE4SS系统故障排查指南 【免费下载链接】RE-UE4SS Injectable LUA scripting system, SDK generator, live property editor and other dumping utilities for UE4/5 games 项目地址: https://gitcode.com/gh_mirrors/re/RE-UE4SS…...

编程新知 2026/5/25 17:38:58

观察Token消耗明细，Taotoken用量看板如何帮助控制预算

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 观察Token消耗明细&#xff0c;Taotoken用量看板如何帮助控制预算 对于个人开发者或项目管理者而言&#xff0c;在使用大模型API时…...

编程新知 2026/5/25 17:15:18