淄博安监局网站两体系建设,做网站定制开发的公司哪家好,wordpress 后台主题不显示,汽车网址大全软件下载****内容预警****菜鸟教程***大佬绕道我们经常看到各种技术官方文档#xff0c;有很多代码展示的区域#xff0c;用于我们复制粘贴代码#xff0c;比如vue 的官网当我们需要自己实现这么一个网站的时候#xff0c;我就开始手忙脚乱#xff0c;这到底是咋实现的#xff1f…****内容预警****菜鸟教程***大佬绕道我们经常看到各种技术官方文档有很多代码展示的区域用于我们复制粘贴代码比如vue 的官网当我们需要自己实现这么一个网站的时候我就开始手忙脚乱这到底是咋实现的第一想到的就是使用富文本编辑器常见的富文本编辑器比如quillsj 和tiptap都可以写代码最终我选择了tiptap实现我想要的功能。使用tiptap展示代码并且有高亮的功能需要用这个插件pnpm i tiptap/extension-code-block-lowlight感觉也可以但是感觉很麻烦很好奇其他人是咋做的是不是有更好的插件我们可以自己来研究一下。一、vue官网 shikijs我们打开开发者工具看到了一个很【可疑的】class去搜一下发现果然是一个很有用的家伙Shiki is a beautiful syntax highlighter感觉很好用可以自己随意打开一个技术官网然后自己探索一下他们都是用了什么插件实现展示代码并高亮的。二、其他的代码高亮插件prismjshighlight.jsSyntaxHighlighter有几个重要的知识点总结一下如果你要实现这种功能你在浏览器应该搜索【代码高亮插件】而不是【展示代码的插件】看了这么多的官网代码展示都是在precode/code/pre块中包裹的有很多好用代码高亮插件而且是轻量级的所以就不要再功能很多笨重的富文本编辑器了没错。说的就是我自己赶紧把tiptap给换掉
