网页代码实现高亮

最新推荐文章于 2024-06-26 09:46:22 发布
最新推荐文章于 2024-06-26 09:46:22 发布
阅读量5.9k 收藏 10
点赞数 2
分类专栏： 适用工具 文章标签： html java javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40826400/article/details/120152198
版权
本文介绍了如何使用highlight.js库在网页中实现代码高亮。该库支持多种编程语言，具有丰富的样式选择，能自动识别代码语言，并兼容主流JS框架。通过下载库文件，选择样式，然后在网页中引入并绑定启动时机，即可实现代码高亮，包括XML、Java等语言的注释部分。
摘要由CSDN通过智能技术生成

实现网页代码高亮

在网页开发过程中，经常会用到代码的展示，而不同颜色的代码，可以让页面看起来更直观，也更美观。highlight.js是一款基于JavaScript的语法高亮库，目前支持125种编程语言，有63种可供选择的样式，而且能够做到语言自动识别，和目前主流的JS框架都能兼容，比较实用。

获取highlight.js库 官网地址：https://highlightjs.org/
在这里插入图片描述
点击Get version按钮进入语言选择，勾选你常用的语言，在使用插件时会自动检测你要展示的代码的语言，并自动让代码高亮。通常common就足够用了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nMobtSju-1630980410250)(C:\Users\CYL\AppData\Roaming\Typora\typora-user-images\image-20210903144147575.png)]

选好后点击下面的download按钮，下载，解压

styles目录下是所有的css样式，决定代码的颜色；highlight.pack.js为库文件，决定代码哪些部分会变高亮。

此处我们只是针对java的相关程序进行高

最低0.47元/天 解锁文章
lovely_biu
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
javascript网页关键字高亮代码
10-30
通过上述分析，我们可以看到这个JavaScript关键字高亮代码实现了对网页文本中指定关键词的自动高亮效果，具有较好的实用性和扩展性。开发者可以根据具体需求调整关键词列表及其属性，进一步优化用户体验。此外，还应...
web页面代码片段高亮显示，highlight.js库的使用方法
m0_64642443的博客
01-23 4579
其实通过观察css和生成的html结构，可以看到每一句代码都是由span标签包裹，且根据不同的代码，添加了不同的class类名所以我们可以改变css中的颜色，来实现自己定制的特点颜色高亮效果这样就实现了自定制的代码高亮效果了更多使用方法可以参考官网highightjs官网highightjs中文官网可以对其插件进一步的封装，完成一些小功能，比如代码复制，代码编写等等。
使用Prismjs让你写的代码高亮起来（以Vue3为例）
三叶雨
07-25 6543
使用Prismjs让你写的代码高亮起来（以Vue3为例）
【开源精选】Enlighter - 让代码高亮点亮你的博客与文档
最新发布
gitblog_00001的博客
06-26 649
【开源精选】Enlighter - 让代码高亮点亮你的博客与文档 项目地址:https://gitcode.com/EnlighterJS/Plugin.WordPress 在技术分享日益频繁的今天，如何优雅地展示代码片段成为了开发者和博主们关注的焦点。今天，我们带来了一款强大的开源工具——Enlighter，它是一款专为WordPress设计的自定义语法高亮器，旨在让每行代码都成为视觉上的享受。...
【前端代码高亮】页面代码高亮展示之Highlight高亮组件应用详解，附多个主题效果
赏樱看雪撸代码
01-11 3958
页面代码高亮展示，Highlight高亮组件应用，highlight多个主题效果，代码高亮美化，前端高亮展示
[ 插件 ] 程序员必备的代码高亮插件 Highlight.JS
记录开发日常
08-14 4114
代码的样式直接的影响了阅读效果，一个好的代码高亮风格将会有好的体验。 所以就需要用到代码高亮这款插件 Highlight.JS 来优化代码阅读的体验。
如何对代码执行高亮显示的方法
安徽锐锋科技-沐雨潇竹
02-16 1097
但是，一些流行的代码高亮插件或库，如Prism.js、Highlight.js等，可以通过将它们嵌入到网页或应用程序中来实现语法高亮的效果。这些插件或库可以识别不同的编程语言，并根据语言的语法规则将代码的不同部分（例如关键字、变量、注释等）显示为不同的颜色或样式，以提高代码的可读性。一些常见的代码高亮库和插件包括 Prism.js、Highlight.js、CodeMirror、Ace Editor等，它们可以集成到各种网页和应用程序中，使得程序员可以在开发和调试代码时更加高效和舒适。
网页代码高亮插件
12-10
标签"网页代码高亮"提示我们关注的核心是关于如何在网页中实现代码的美化和高亮显示。这涉及到HTML、CSS和JavaScript等技术的运用。例如，HTML用于结构化代码内容，CSS用于设置高亮样式，而JavaScript则可能用于动态...
Javascript实现的CSS代码高亮显示
10-29
在网页开发中，代码高亮显示是一种常见的技术，它能帮助用户更清晰地阅读和理解代码，尤其是在展示示例代码或教程时。本篇文章将探讨如何使用JavaScript来实现CSS代码的高亮显示。首先，我们需要了解JavaScript的...
使用SyntaxHighlighter实现HTML高亮显示代码的方法
12-09
//www.jb51.net/jiaoben/15599.htmlsyntaxhighlighter是一个小开源项目，它可以在网页中对各种程序源代码语法进行加亮显示。支持当前流行的各种编程语言： C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、...
ASP语法高亮类代码
10-31
这个类通过使用正则表达式（RegEx）来识别ASP代码中的关键字、对象命令、字符串、注释等元素，并分别用不同颜色进行标记，从而实现代码的高亮显示。以下是对该类的详细解释： 1. **类结构**： 类名为`Wyd_...
代码预览并语法高亮、增加行号
MFWSCQ的博客
12-11 838
原理：highlight.js 将代码格式化以后，可以通过样式设定代码行高，然后计算代码总高度，再用总高度/行高 = 行数，最后生成行号。为什么不把每一行代码放入一个元素呢，因为 highlight.js 格式化后的代码是 span 标签字符组合，也不是使用一个元素包裹一行的，是通过类控制换行。如果需要将一行代码装入一个元素中，需要去了解 highlight.js 中的规则。</code>`;});
Prism & highlight.js高亮代码 & 手动添加行号 & 一键复制
pscool的博客
04-05 3707
/ 使用代码添加行号(这里是使用jquery给所有的 pre标签 加上 line-number 这个类名，也可以如上面自己手动加入这个类名)，然后，再去引入prism.js，让prism生成行号相关的dom结构出来。
JS库之Highlight.js高亮代码
花伤情犹在的博客
10-28 4395
Highlight.js介绍 官网 下载地址：https://highlightjs.org/download/ highlight.js是一个用于在任何web页面上着色显示各种示例源代码语法的JS项目。具有以下特色： 支持 92 种语言，49 种代码格式化风格。 自动检测语言种类 支持多语言混合的代码高亮 支持Node.js 支持使用任何HTML标记 兼容任意js框架 引入 highlight.js 文件 我们需要在页面中同时引入一个 js 文件和一个
【前端】语法高亮 Prism.js 使用
lsdqyz的博客
12-01 3813
Prism 是一款轻量级、可扩展的语法高亮器，根据现代 Web 标准构建，应用广泛。 本文将介绍 Prism.js 的基础使用。
【VSCode】设置关键字高亮的插件 | Highlight Word
热门推荐
wkd_007的博客
06-25 2万+
介绍 VSCode 怎样使单词独立的高亮显示，介绍了 highlight-words 插件，介绍了插件的详细设置设置步骤
网页代码如何设置高亮显示？
长风破浪会有时的博客
04-20 684
是 SyntaxHighlighter 库中提供的默认样式表，它包含了语法高亮显示的基本样式和布局，包括字体、字号、颜色、边框等等。这个样式表可以直接用于大多数的代码高亮显示场景，如果需要进行更改或自定义，可以对其进行调整或者创建自定义样式表。SyntaxHighlighter的使用相对简单，只需要引入相关的JavaScript和CSS文件，然后在代码块所在的HTML标签中添加一些属性即可。文件中的默认参数，如字体、字号、边距等等，来进一步调整代码块的布局和显示效果。等等，来改变代码块的样式风格。
vue3中使用prismjs或者highlight.js实现代码高亮
富朝阳的博客
01-05 4985
我们对显示行数做了扩展，css如下pre {important;important;top: 10px;left: 0;行数以及背景显示样式可以根据自己的需求自定义prismjs和highlight.js两个插件感觉都很不错，个人比较喜欢prismjs，当然萝卜青菜各有所爱，大家根据自己的爱好选择即可。用户体验度又上升啦！YYDS！欢迎在评论区交流。如果文章对你有所帮助，！博主会持续更新。。。。
OneNote支持Markdown：高亮代码
ReaderWithNoEmotion
06-15 5206
- markdown对我来说是伪需求，真正需要的是`高亮代码`，通过[Github/NoteHighlight2016](https://github.com/elvirbrk/NoteHighlight2016)这个开源插件可实现 - 这个插件虽然叫2016，但实测onenote 2013也是可以用的
给出具体代码实现在网页中高亮展示代码
09-05
### 回答1： 可以使用 ```<pre>``` 标签和 ```<code>``` 标签来高亮展示代码。具体实现如下： ```html <pre> <code class="language-javascript"> // 你的代码 </code> </pre> ``` 为了使代码高亮显示，还需要引入一个高亮库，例如：highlight.js 。 ```html <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/default.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> ``` 然后，你可以在你的代码中添加语言类型来高亮显示代码，支持的语言类型可以在官网上查看。 这样就可以在网页上高亮显示代码了。 ### 回答2： 在网页中高亮展示代码可以借助HTML和CSS完成。具体实现步骤如下： 1. 首先，将代码放置在<pre>标签中，该标签用于定义预格式化的文本，以保留文本中原有的空格和换行符。 2. 使用<code>标签将代码包裹起来，该标签用于表示需要高亮的代码。 3. 通过CSS样式来设置代码的高亮效果。可以选择代码高亮的颜色、字体以及背景色等。 以下是一个简单示例的代码实现： ```html <!DOCTYPE html> <html> <head> <style> pre { background-color: #f4f4f4; padding: 10px; font-family: "Courier New", Courier, monospace; } code { color: #000; font-size: 14px; font-weight: bold; } </style> </head> <body> <pre><code> function calculateSum(a, b) { return a + b; } console.log(calculateSum(2, 3)); </code></pre> </body> </html> ``` 以上代码中，`pre`标签用于定义预格式化文本，设置了背景色和内边距；`code`标签用于包裹需要高亮展示的代码，设置了字体颜色、字体大小和字体粗细。 通过以上代码实现，在网页中可以实现代码的高亮展示效果。 ### 回答3： 在网页中实现代码高亮展示，可以通过使用代码高亮库来实现。下面是一个使用highlight.js库来实现代码高亮展示的示例代码： 首先，在网页中引入highlight.js的CSS和JavaScript文件： ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.18.1/styles/default.min.css"> <script src="https://cdn.jsdelivr.net/npm/highlight.js@9.18.1/highlight.min.js"></script> ``` 然后，在需要高亮展示代码的地方，使用`<pre>`和`<code>`标签包裹代码，并添加相应的class（例如`language-javascript`）： ```html <pre><code class="language-javascript"> function greeting() { console.log('Hello, World!'); } </code></pre> ``` 接下来，调用highlight.js的`initHighlighting()`函数来初始化代码高亮： ```html <script> window.onload = function() { hljs.initHighlighting(); }; </script> ``` 最后，通过CSS样式可以对代码高亮进行进一步的定制。 以上就是在网页中实现代码高亮展示的具体代码，当页面加载完成后，highlight.js将会自动对包含`language-*`类名的代码块进行高亮显示。 需要注意的是，highlight.js支持多种语言的代码高亮展示，可以根据实际需要选择对应的语言类名进行使用。如果需要展示其他语言的代码，只需将预设的`language-javascript`替换为对应语言的类名即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lovely_biu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值