js简单网页代码大全(js简单网页代码大全图片) 收藏 0

Highlight.js – 前端的代码语法高亮库

千辛万苦写了篇技术分享，贴了一堆代码，兴高采烈地发到了自己的博客网站上。结果却发现代码全是白底黑字，字体还难看得很，你瞬间就没了兴致。能不能让网页也能像 IDE 那样，做带语法高亮的炫酷显示呢？来看一看 Highlight.js 吧，看这个语法高亮库如何点亮你的代码。

Highlight.js

Highlight.js，是在 Github 上由 highlight.js 组织开源的前端代码语法高亮库，代码仓库在 https://github.com/highlightjs/highlight.js，目前版本为 10.1.0。其不依赖于任何框架，自带对于大量编程语言和标记语言的语法高亮规则，和主流的高亮色彩方案，且可以自由扩展。其支持自动语言检测，使用极为方便，是在网页上进行语法高亮的不二之选。

highlight.js语法高亮库

Highlight.js 的 CSS 文件的选择决定高亮配色方案，默认为 Default，另外还有如 Monokai Sublime、Ocean、Solarized Dark、Tomorrow 等经典的主流配色方案。

而 JS 文件的选择决定可以支持的语言。主要的 highlight.min.js 包含了一些主流的语言，包括 C++、XML、Markdown、Java 等。如果需要一些其他的语言，则要另外引用该语言对应JS文件。

Highlight.js 在浏览器中可以简单的引用 CDN 来使用：

Highlight.js 使用十分简单，在引用了 CSS 和 JS 后，执行

Highlight.js就会自动查找网页中以标签 pre 和 code 所包裹的代码

并自动检测代码语言，进行高亮渲染。我们也可以为 code 标签添加语言名称的 class，来显式地标明代码语言。我们可以看一个使用示例，注意实际代码中尖括号等 HTML 转义字符需要进行转义处理：

该网页对于 C++ 语言片段使用了 Monokai Sublime 主题进行了语法高亮渲染：

使用Highlight.js渲染C++代码

可以看到，包括关键字、注释和字面值等都有了不同颜色的渲染，输出十分美观。以下则是使 Dracula 主题对 Javascript 代码渲染的例子：

使用Highlight.js渲染Javascript代码

我们也可以不使用 pre 和 code 标签来包裹代码，改为使用自定义的容器，使用时需要注意换行和等宽字体的问题。

在渲染大量代码时，为避免浏览器卡死，可以使用 Web Worker 来在后台进行渲染：

Highlight.js 使得在前端页面进行语法高亮变得十分方便，为在网页显示的代码增添了颜色和生机。

Highlight.js 文档详尽，设计简洁，为编写新的语言支持和配色方案提供了很大支持，定制化能力和可扩展性极强。Highlight.js 的代码包含了对于各种语言的语法解析，和不同配色方案的设计，对于对编程语言和语法高亮领域感兴趣的开发者是一座珍贵的宝库。

应该学会的20个JavaScript代码写法

当元素滚动到可视区之后，给元素添加一个动画

代码如下：

代理如何使用，相信大家都会，下面这段代码我也演示了

代码如下：

模块化导出，是JS代码必备技能

代码如下：

用过的数据，进行缓存，下次再循环使用，想到递归了吗？

代码如下：

写过闭包的同学都知道，闭包的其中一个作用就是保护变量

代码如下：

最简洁处理异步变同步的方式就是`async/await`

代码如下：

debugger的时候，更友好的信息输出，会提升我们效率

代码如下：

在转化JSON数据时，同时可以将数据处理成你想要的样子

代码如下：

正则表达式的强大之处，大家都应该知道，我们需要善于使用正则表达式帮我们解决问题

代码如下：

可选链处理未定义的值，是处理ifelse多嵌套的方式之一，也是最简洁的方式之一

代码如下：

变量类型判断越准确，代码安全性越高

代码如下：

ES6给出字符串拼接优雅的处理方式${}

代码如下：

给对象设置动态属性名称，也是我们日常代码里经常碰到的问题

代码如下：

同时处理多个Promises的方式，是使用`Promise.all`

代码如下：

箭头函数 ( () => {}) 不仅简洁，而且还保留this值

代码如下：

使用setTimeout封装一个延迟操作函数

代码如下：

使用&&和||创建清晰简洁的条件语句

代码如下：

map()方法是转换数据的最好方式

代码如下：

不管是对象还是数组，都可以使用扩展符来进行数据添加

代码如下：

解构允许您轻松地从数组或对象中获取值

代码如下：

33个非常实用的JavaScript一行代码，建议收藏

该方法用于检测给出的日期是否有效：

该方法用于计算两个日期之间的间隔时间：

距离过年还有90天~

该方法用于检测给出的日期位于今年的第几天：

2021年已经过去300多天了~

该方法可以用于将时间转化为hour:minutes:seconds的格式：

该方法用于将英文字符串的首字母大写处理：

该方法用于将一个字符串进行翻转操作，返回翻转后的字符串：

该方法用于生成一个随机的字符串：

该方法可以从指定长度处截断字符串:

该方法用于去除字符串中的HTML元素：

该方法用于移除数组中的重复项：

该方法用于判断一个数组是否为空数组，它将返回一个布尔值：

可以使用下面两个方法来合并两个数组：

该方法用于判断一个数字是奇数还是偶数：

该方法用于获取两个整数之间的随机整数

该方法用于将一个数字按照指定位进行四舍五入：

该方法可以将一个RGB的颜色值转化为16进制值：

该方法用于获取一个随机的十六进制颜色值：

该方法使用 navigator.clipboard.writeText 来实现将文本复制到剪贴板：

该方法可以通过使用 document.cookie 来访问 cookie 并清除存储在网页中的所有 cookie：

该方法通过内置的 getSelection 属性获取用户选择的文本：

该方法用于检测当前的环境是否是黑暗模式，它是一个布尔值：

该方法用于在页面中返回顶部：

该方法用于检测当前标签页是否已经激活：

该方法用于检测当前的设备是否是苹果的设备：

该方法用于判断页面是否已经底部：

该方法用于重定向到一个新的URL：

该方法用于打开浏览器的打印框：

该方法可以返回一个随机的布尔值，使用Math.random()可以获得0-1的随机数，与0.5进行比较，就有一半的概率获得真值或者假值。

可以使用以下形式在不适用第三个变量的情况下，交换两个变量的值：

该方法用于获取一个变量的类型：

该方法用于摄氏度和华氏度之间的转化：

该方法用于检测一个JavaScript对象是否为空：

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com