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

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

作为前端开发者,代码是你躲也躲不开的,下面就教你如何在自己的网站里给所有代码块添加高亮效果。而这篇文章要给你介绍的就是这样一个代码高亮插件 prettify.js 。...-- 引入 JS 文件 --> 推荐首选官网下载...,如果找不到官网也可以从 bootcdn 下载或者直接引用prettify.js。...prettyprint :标记作用范围 linenums:是否显示行号 启用完之后,你就可以在你的写文章的时候,用 标签 把代码包裹起来就可以看到美美的高亮效果了 有时候你会遇到一些奇葩的问题...,比如:为什么不是第行前端都会显示行号,而只是每隔五就会出行一个行号,要解决这个问题,你只需要往样式表里面添加下面的样式就可以了: pre.prettyprint ol.linenums li {

2.7K30

使用 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

JS代码超过1000,该怎么维护?

1000JS代码,听起来挺多的,但实际上真不算什么,随便一个功能完备、代码健壮的JS应用或是模块,很轻松的就写出1000多行,看这里,我以前写的一个tabel插件,带有CRUD功能、展开、加载、上传、...所以,现代的大型web应用,1000以上的JS代码我觉得就是“起步价”而已。那么这种大型应用的开发,我们必须对JS的可维护性有一个清醒的认识。 不要觉得,“我写的代码,我还维护不了么”?很有可能。...js代码我个人主观觉得,啰嗦一点会更好些。 然后对于数据的加载和使用,要有一定的适应性,不要搞的json的结构一变,你的js整个不能运行。自己封装一个分析json的公共方法。...新人写js有一个特点,就是一心想着“我赶紧写出来”。就好像在学校上课一样,赶紧完成老师的作业。其它的就不管了,什么格式啊,缩进啊,都不管。但是良好的代码风格本身就是js可维护性的一个组成部分。...不必担心什么变量名太长会增加体积,现在js都是被压缩过的。 还有一个方面就是声明变量时的变量类型。同学们应该都知道,js中的变量声明是没有类型的。搞一个变量出来,什么都可以往里放。

2K70
领券