首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

使用 prettify.js 实现网站代码高亮

作为前端开发者,代码是你躲也躲不开的,下面就教你如何在自己的网站里给所有代码块添加高亮效果。而这篇文章要给你介绍的就是这样一个代码高亮插件 prettify.js 。...-- 引入 JS 文件 --> 推荐首选官网下载...代码引入之后,你就可以通过代码启用 prettify 了 $(window).load(function(){ $("pre").addClass("prettyprint linenums..."); prettyPrint();} ) 这行代码的意思就是启用 prettify.js ,其实就是给标签添加 class 类 prettyprint 和 linenums...prettyprint :标记作用范围 linenums:是否显示行号 启用完之后,你就可以在你的写文章的时候,用 标签 把代码包裹起来就可以看到美美的高亮效果了 有时候你会遇到一些奇葩的问题

2.7K30

Chrome扩展JSON代码格式化高亮推荐-JSON-Handle

前几天推荐的 Chrome 代码格式化高亮扩展,作者更新添加了排除 JSON 文件的选项,或者换句话说就是只能判断以.json 结尾的文件,今天再推荐一个格式化高亮 JSON 代码的扩展,可以支持直接输入...未格式化之前的 JSON 数据 格式化之后的 JSON 数据 左边为以树形图样式展示的 JSON 数据,右边为使用扩展以后的整理的 JSON 数据样式。...也可以点击右上角的插件图标,直接输入未格式化之前的 JSON 数据,同样也会给你美化到以树形图展示的 JSON 数据: 直接输入未格式化的 JSON 数据 安装 直接拖进 Chrome 浏览器的扩展程序进行安装...原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:Chrome扩展JSON代码格式化高亮推荐-JSON-Handle

1.4K40

Chrome代码格式化高亮扩展推荐-JavaScript and CSS Code Beautifier

无论是作为一名开发人员,还是折腾 WordPress 博客都少不了看一些 CSS、JS 文件,如果自己写的时候注意一下格式可能会看的清楚,如果不是自己写的样式直接在网页上打开看真是难受。...这个扩展是一款 JavaScript 代码格式化、解密、反混淆和 CSS 代码高亮扩展,当你访问 CSS、JavaScript、JSON 文件时,自动格式化高亮代码。...功能 格式化 CSS、JavaScript、JSON 代码 JavaScript 代码解密、反混淆 30 多种代码高亮主题 丰富的自定义选项 截图 检测到代码时的提示 格式化高亮代码 Code Beautifier...v2.0 使用 CodeMirror 代码高亮编辑器 更新格式化代码 v1.0.5 程序优化 打开弹出面板时自动粘贴剪贴板内容 沈唁志|一个PHPer的成长之路!...原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:Chrome代码格式化高亮扩展推荐-JavaScript and CSS Code Beautifier

2.9K40

轻量级Web代码语法高亮库 highlight.js

介绍 如果是编写个人网站内容的时候,往往会需要面临代码高亮显示需求。 而网上有不少的前端的代码高亮库,例如https://github.com/PrismJS/prism-themes 。...而没有扩展针对最新代码的支持。 会造成一种现象,就是你选择一个语言之后代码中的关键字并没有高亮显示,全部代码都显示灰色或者默认颜色。 给我们一种,代码块样式没有生效的感觉。...所以,现在推荐一个库:highlight.js (highlightjs.org) 一直维护到现在, 并且还在不断迭代更新的代码高亮库 highlight.js 官网地址:https://highlightjs.org...多语言代码高亮显示 可以直接用在node.js 适用于任何标记 兼容任何js框架 支持的语言 默认支持的语言Common:(只要集成就支持以下的语言识别并高亮显示) Bash C C# C++ CSS...让我们知道集成后的代码高亮的显示效果。

91830

如何优雅的将代码粘贴到报告上(高亮+格式化+行号)

作为一个严格要求自己的(强迫症)程序员,怎么可以容忍看到自己辛辛苦苦写的代码被粘贴成这个样子呢? ? 不行不行,太丑了,简直侮辱我的代码,所以怎么搞呢?...当然前提是在用这些工具写代码,直接粘过来,方便快捷。 ? 推荐二:高亮代码专用网址 http://www.planetb.ca/syntax-highlight-word 转为word文档设计 ?...可以选用多种语言,根据指定的语言格式进行高亮 ? 将代码复制到文本框中,show highlight,就好了 ?...而且复制到word是有行号的(并且别人如果抄你代码可能会很尴尬的一点点去除行号,防抄袭) 写在最后 咳咳咳,当然不可避免,你可能之后会看自己的代码,拿回来跑一跑,为了快速去除行号,参考该文章: https

1.8K10

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

给大家推荐一个代码高亮显示的东东,直接使用一个 JavaScript 库 —— Prism 是一款轻量、可扩展的代码语法高亮库,使用现代化的 Web 标准构建。 为什么选择 Prism.js ?...极致易用引用 prism.css 和 prism.js,使用合适的 HTML5 标签(code.language-xxxx),搞定!...天生伶俐语言的 CSS 类是可继承的,所以你只需定义一次就能应用到多个代码片段。轻如鸿毛代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB,主题在 1KB 左右。... 遵循 HTML5 标准,Prism 使用语义化的 元素和 元素来标记代码区块:...原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:使用 Prism.js 实现漂亮的代码语法高亮

4.2K30

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

如果我们是站长相关的网站博客,如果需要引用一些脚本代码的时候一般看到的都是代码高亮效果,这样的用户体验更好一些。...我们要实现代码高亮的方法有很多中,比如WordPress也有代码高亮插件或者是手动实现CSS样式来实现代码高亮。在这篇文章中老蒋要分享的是Prism.js小工具可以实现页面的代码高亮效果。...Prism.js,是一款轻量的可以定制的代码插件效果工具。我们可以使用Prismjs 可以快速为网站添加代码高亮功能。...文章目录 隐藏 第一、PrismJS高亮代码下载 第二、引用PrismJS文件 第三、如何使用 第一、PrismJS高亮代码下载 下载地址:https://prismjs.com...第三、如何使用 案例效果:https://prismjs.com/examples.html 本文出处:老蒋部落 » 利用Prism.js脚本工具实现网页代码高亮效果 | 欢迎分享

6.1K20
领券