标签中的代码最后的效果如下图：
怎么才能让代码靠左显示而不是像现在这样显示，一开始通过white-space: normal;可以使代码靠左显示，但是代码也变得不会换行了，
怎么才能实现像vue官网的那种代码展示效果
vue官网代码展示：
使用highlight.js代码高亮展示的格式问题
- 写回答
- 好问题 0 提建议
- 关注问题
分享- 邀请回答
-
2条回答 默认 最新
- 2025-11-24 11:54这包括使用简单的标签包围代码段，并通过JavaScript调用 Highlight.js 的方法来实现动态高亮，或者通过引入预定义好的CSS样式表来快速应用样式。 Highlight.js提供了一个功能全面且可定制性强的代码高亮解决方案，...
- 2025-11-22 01:40Prism.js和highlight.js是当前前端开发中广泛使用的两大代码高亮库，它们能够将代码展示为带有语法着色的格式，提升代码的可读性和美观度。在HTML页面中，使用这些库可以增强代码展示的视觉效果，并且改善用户体验。...
- 2025-11-24 12:18highlight.js是一个广泛使用的JavaScript代码语法高亮库，其特点在于支持超过190种编程语言和90多种主题样式。这个库的设计初衷是为技术博客、文档网站和代码编辑器等提供一个高效的代码展示工具。它之所以受到...
- 2025-12-20 07:04随着技术的发展，多种代码高亮工具应运而生，其中highlight.js凭借其轻量、易于集成及广泛兼容的特点受到开发者青睐。然而，最初版本的highlight.js并不支持行号显示，这对于某些应用场景而言是一个缺憾。为解决这一...
- 2024-11-13 09:29听海边涛声的博客 用 highlight.js 高亮显示代码
- 2022-10-28 20:13六六的小帅的博客 前端使用highlight.js进行代码语法高亮显示；同时代码格式为服务端从数据库中查询到的字符串，需要进行html转译。
- 2020-10-19 08:53总的来说，`highlight.js`是一款强大的代码高亮工具，它能轻松地与各种前端框架和模块化系统集成，提升代码在网页上的展示效果。只需简单的配置和调用，就能让你的代码高亮起来，让读者更容易理解你的代码示例。
- 2022-09-17 15:01小荣的网络开发日志的博客 Vue3+vite使用 Highlight.js代码高亮实现网页显示代码的使用。 Vue使用 Highlight.js，网页显示代码。
- 2025-10-04 16:53July twelve的博客 本文介绍了如何使用highlight.js高亮Vue单文件组件(SFC)代码。 使用@vue/compiler-sfc拆分文件各部分，然后分别用highlight.js高亮不同语言(HTML、JavaScript/TypeScript、CSS)，最后拼接结果。
- 2023-09-18 10:24技术驱动者的博客 通过使用highlight.js库，我们可以在Vue项目中轻松地实现代码高亮的效果。然后，在需要高亮代码的组件中使用。在Vue项目中，我们可以通过在main.js文件中引入highlight.js来全局注册该库。现在，我们可以在Vue组件中...
- 2025-07-23 11:50视频砖家的博客 highlight.js是一个轻量级的代码高亮工具，只需引入CSS和JS文件，通过hljs.highlightAll()方法即可实现自动高亮。使用时将代码包裹在<pre><code class="language-xxx">标签中，其中language-...
- 2023-08-12 17:43一个大不溜w的博客 highlight.js 是一个语法高亮的 JavaScript 库，它可以帮助开发者轻松地为他们的网站或 Web 应用程序添加语法高亮功能。它支持多种编程语言，并提供各种主题和自定义选项。它可以集成到网页中，使代码块更加易于阅读...
- 2019-11-04 18:11wunianisme的博客 1.访问highlight.js官网，勾选你需要的语言，然后点击download按钮开始下载highlight.js插件。 下载地址：...下面的文件和脚本代码： <link rel="stylesheet" href="/highlight/styles/default....
- 2024-10-17 14:48白桃与猫的博客 vue中使用Highlight.js实现格式化代码显示
- 2025-02-14 14:43鱼鱼鱼-YYY的博客 Internet 上最受欢迎的 JavaScript 语法高亮工具，支持 Node.js 和 Web。它里面有多种代码显示主题可供切换。
- 2024-10-28 15:57red润的博客 Highlight.js 是一个用于代码高亮的 JavaScript 库，支持多种编程语言。它可以自动检测代码的语言并应用相应的样式，帮助用户更好地阅读和理解代码。通过使用 Highlight.js 和 Vue，我们可以轻松实现一个可编辑的...
- 2021-06-13 04:56章兮苒的博客 先附上highlight.js的github项目地址废话不多说，直接上操作步骤找到你需要的语言，官网会帮你打包好，下载就完事儿了~image.png2.在你下载好的文件里面，找到 styles/ 目录下面的 monokai-sublime.css。新建一个空...
- 2023-10-19 20:44小贵子的博客的博客 / main中引入语法高亮配置。，在main中引入即可使用，是我的目录 改成自己的;
- 2022-08-17 23:23下一站丶的博客 vue nuxt.js 代码高亮 highlight.js或 prismjs 插件的用法。把第二步替换成 在main.js中引入highlight.js 步骤同上。还有另一个 prismjs 来实现 代码高亮。想要进一步详细的配置 高亮内容 请穿越。如果是 vue 的 ...
- 2023-06-21 14:19彭世瑜的博客 译文：highlight.js为Web突出显示语法文档。
- 没有解决我的问题, 去提问
问题事件
创建了问题
1月19日