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小时内删除。