highlightjs 是一个用于在网页上显示代码高亮的 JavaScript 库。它简单易用,支持超过 180 种编程语言的代码高亮,包括常见的 Python、Java、C++ 等,同时也支持一些 less 常见的语言,如 Br本人nfuck、Moonscript 等。
highlightjs 的用法非常简单,只需要在页面中引入对应的 JavaScript 与 CSS 文件,然后在需要显示代码高亮的地方使用特定的 HTML 结构即可。以下是具体的用法介绍:
引入 highlightjs
需要在页面中引入 highlightjs 的 JavaScript 文件和样式文件。你可以选择下载 highlightjs 的压缩包,也可以直接引入 CDN 上的资源。下载压缩包后,将其中的 highlight.pack.js 与 styles 目录下的样式文件引入到页面中。如果选择使用 CDN,则只需要引入对应的信息即可。
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="path/to/styles/default.css">
<script src="path/to/highlight.pack.js"></script>
</head>
<body>网页html下载
</body>
</html>
```
添加代码块
在需要显示代码高亮的位置,使用 `<pre><code>` 标签包裹代码。并且,给 `<code>` 标签添加对应的语言类名,这样 highlightjs 就会根据类名来自动识别代码的语言,进行相应的高亮。
```html
<pre><code class="language-python">
def binary_search(arr, low, high, x):
if high >= low:
mid = (high + low) // 2
if arr[mid] == x:
return mid
elif arr[mid] > x:
return binary_search(arr, low, mid-1, x)
else:
return binary_search(arr, mid + 1, high, x)
else:
return -1
</code></pre>
```
初始化 highlightjs
在页面加载完成后,调用 `hljs.initHighlighting()` 方法初始化 highlightjs。
```html
<script>
document.addEventListener('DOMContentLoaded', (event) => {
hljs.initHighlightingOnLoad();
});
</script>
```
到此为止,已经完成了使用 highlightjs 显示代码高亮的基本用法。当页面加载完成后,highlightjs 就会自动识别带有语言类名的代码块,并对其进行高亮显示。
除了基本用法之外,highlightjs 还提供了一些自定义的配置选项,可以对高亮效果进行调整。可以自定义样式、用于处理不支持的语言等等。
highlightjs 是一个非常方便实用的代码高亮库,使用起来简单快捷,同时支持众多编程语言的高亮显示。如果你有需要在网页中展示代码,并且希望让代码看上去更加美观、易读,不妨考虑使用 highlightjs。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论