首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【CSS】:一种轻量级文字高亮方案——CSS 自定义高亮 API

提要 想要在前端展示一段文本,并对文本中的部分文字实现高亮效果,常规方案是借用像 CKEditor、wangEditor 等 Web 富文本编辑器来实现高亮特性(例如:加粗、下划线、文字颜色、文字底色...这些加粗、文字颜色、下划线、文字底色等特性是通过在原始文本上附加HTML元素和CSS样式来实现的。...怎么用 使用“CSS 自定义高亮 API”,分5步: 为你要进行高亮的**文字区域**,创建 `Range` 对象(一段连续的文字区域,对应一个 Range 对象); 为你的**高亮方式**,创建 `Highlight...` 对象(一种高亮方式,对应一个Highlight 对象); 将这些文字区域对象 Range`分配给相应的高亮方式对象`Hightlight`; 将这些高亮方式 `Highlight` 对象注册给浏览器...这并不意味着“CSS Custom Highlight API”是替换掉富文本编辑器的方案,因为 “CSS Custom Highlight API”只是一种实现文字高亮的方案 。

2K30
您找到你想要的搜索结果了吗?
是的
没有找到

使用 Prism.js 实现漂亮的代码语法高亮

给大家推荐一个代码高亮显示的东东,直接使用一个 JavaScript 库 —— Prism 是一款轻量、可扩展的代码语法高亮库,使用现代化的 Web 标准构建。 为什么选择 Prism.js ?...极致易用引用 prism.css 和 prism.js,使用合适的 HTML5 标签(code.language-xxxx),搞定!...许多网站都在使用 Prism,如果你是前端开发者,那你一定十分熟悉这些网站: 这些网站在使用 Prism.js 连 JavaScript 之父 Brendan Eich 也在个人博客上使用!...如何使用: 你只需要在页面上引入 prism.css 和 prism.js 文件: ......原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:使用 Prism.js 实现漂亮的代码语法高亮

4.3K30

利用Prism.js脚本工具实现网页代码高亮效果

我们要实现代码高亮的方法有很多中,比如WordPress也有代码高亮插件或者是手动实现CSS样式来实现代码高亮。在这篇文章中老蒋要分享的是Prism.js小工具可以实现页面的代码高亮效果。...Prism.js,是一款轻量的可以定制的代码插件效果工具。我们可以使用Prismjs 可以快速为网站添加代码高亮功能。...Prism.js 脚本可以自定义下载,支持超过 100 多种编程语言,还支持很多种插件,这个就不仅仅局限适合哪个CMS,所有的网站页面都可以使用只要我们引用对应的JS文件。...文章目录 隐藏 第一、PrismJS高亮代码下载 第二、引用PrismJS文件 第三、如何使用 第一、PrismJS高亮代码下载 下载地址:https://prismjs.com...第三、如何使用 案例效果:https://prismjs.com/examples.html 本文出处:老蒋部落 » 利用Prism.js脚本工具实现网页代码高亮效果 | 欢迎分享

6.2K20
领券