网页代码高亮（网页文字高亮）

今天给各位分享网页代码高亮的知识，其中也会对网页文字高亮进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、代码高亮什么意思
• 2、highlight.js
• 3、如何让页面里面的java代码高亮显示
• 4、如何html里使代码高亮样式
• 5、如何直接在浏览器网页上高亮文本内容？(DIIGO)

代码高亮什么意思

就是代码显示成彩色的，比如关键字显示成蓝色、注释显示为绿色等等，请参考

highlight.js

一行代码就能让我的网站支持代码高亮的工具库，也支持在 Vue 中使用，强烈推荐给大家。

highlight.js 是一款使用 javascript 开发代码高亮工具库，能够让网页上的代码显示接近我们使用的代码编辑器的高亮样式，从而看起来更舒服，增强阅读体验。

常来我网站的小伙伴都知道，我的文章有一个栏目是“前端”，主要推荐一下实用的前端开源项目或者组件库，写技术类文章免不了要贴代码，我的网站基于 wordpress 搭建，此前我一直为找一款代码高亮插件烦恼，但大部分 wordpress 的代码高亮插件实在太臃肿，出来的样式又不美观。大多时候是截图 VsCode 的代码界面，甚至还用过 codepng 这个工具把代码变成图片贴在文章中，但这样做是美观了，但也存在2个问题：

最终还是找到了 highlight.js，完美解决了上面两个问题，而且配置简单，演示漂亮，定制化简单。不禁感叹：用纯前端的方式解决，才能精准控制，实现想要的效果。

下面以我的网站为例，展示将 highlight.js 用在我们的项目上的方法。首先 highlight.js 支持 cdn 直接引入和 npm 安装，我的网站基于 wordpress 开发，主题是自己写的，最简单的方式就是在文章详情页引入 highlight.js 和主题样式。

虽然 highlight.js 支持几百种开发语言，但为了将文件体积控制到最小，我们可以点击“get version”按钮进入下载页，通过勾选我们需要的开发语言，来构建最轻量的库。

下载解压后得到的 highlight.min.js 就是我们需要引入的 js 文件，主题样式都在 style 文件夹里，我选择了一个比较喜欢的 monokai-sublime 主题，只需要一个 css 文件，然后初始化：

就是这么简单，highlight.js 会自动将文章中的

点击查看本次分享的网址以及代码高亮效果

highlight.js - 让网页上的代码高亮美化的免费开源工具库 那些免费的砖

如何让页面里面的java代码高亮显示

我在博客里应用的样式是SublimeText编辑器里面的主题，这跟我用它来编写代码有关。其实如果ST支持复制为富文本形式的话，事情就要方便得多，直接copy然后paste到word里就把样式带上了，包括缩进，代码高亮等。遗憾的是它不支持。所以出路便是找一个可用的ST插件让它支持富文本复制。

好在ST流行度大，社区活跃，插件众多，还真有款能够完成我需求的插件--n1k0/SublimeHighlight。更详细的关于如何安装的问题等可见它的项目页面。

简单点其实跟安装其他ST插件是一样的，先Ctrl+Shift+P调出control panel，然后输入install package，不用输完，当输入了Install后便出来了，然后回车等待插件列表的显示，这个过程大概有个几秒钟的样子。

然后输入插件名称sublimehighlight，选中并进行安装。如果这一步进行顺利，则跳到下一节。

当你进行到上面一步发现搜不出该插件时，需要手动添加该插件的repo到本地。

具体做法是退出刚才的界面重新输入Ctrl+Shift+P调出control panel，输入add repository 选中并回车。

这时界面下方会出现输入repo地址的地方，将输入后回车确定。

当提示添加成功后再次进行上面安装插件的步骤来到插件列表，输入sublimehighlight，选中该插件进行安装，如果一切顺利，恭喜你万里长征第一步走完！

设置喜欢的代码样式

安装完成后，可以设置你喜欢的样式，这个样式是你复制出来的样式，跟你在ST里面用的代码样式是没有关系的。也就是说最终复制出来的代码的样式以这个插件的设置为准。

可选的样式可以在插件的GitHub主页看到，下图直接来自其项目页面，图中包括了主题的名称和预览：

设置方法是依次点开preferences=package settings=sublimehighlight=settings - user

如何html里使代码高亮样式

这是使用的 SyntaxHighlighter  代码高亮插件

还可以使用 富文本编辑器  如 ueditor

下面就是 ueditor 效果

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

titleDocument/title

link rel="stylesheet" href="./css/style.css"

/head

body

如何直接在浏览器网页上高亮文本内容？(DIIGO)

Diigo是一款chrome插件 可以在网页上高亮文本、进行笔记整理等。

    点击 Diigo拓展 进行安装 然后进行注册/登陆

▷高亮 方法1：

▷整理高亮内容：

▷视频截图整理

▷高亮 方法2

▷在文本旁添加笔记

▷在网页上添加笔记

▷复制高亮内容

▷ diigo会自动将高亮过的网页存储在个人的DIigo里以供之后使用 可以添加标签tag以便以后整理使用 也可以删除（删除会自动删除所有高亮内容）

▷ 删除笔记

▷ 删除高亮

网页代码高亮的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于网页文字高亮、网页代码高亮的信息别忘了在本站进行查找喔。