JS库之Highlight.js的用法详解

2023-12-14css教程

493

JS库之Highlight.js的用法详解

Highlight.js 是一个轻量级、易于使用且支持语法高亮的 JavaScript 库。它适用于各种开发语言，并且内置大量的代码样式和主题，用户可以自定义自己需要的样式。

安装

安装 Highlight.js 非常简单，可以通过 CDN 或者直接下载源代码来引用。可以在 HTML 文件中直接引用 Highlight.js 的 CSS 和 JavaScript 文件，例如：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/lib/highlight.min.js"></script>

使用

基本用法

使用 Highlight.js 需要在 HTML 文件中标记出需要高亮的代码块，并在 JavaScript 中调用 highlightBlock 方法，例如：

<pre><code class="html">Hello, World!</code></pre>

<script>
  hljs.highlightBlock(document.querySelector('code'));
</script>

注意，code 标签中需要设置 class 为要高亮的语言名称，例如上面的例子中使用了 html 的语言名称。

更多实例

下面是一个更加复杂的实例，可以参考 Highlight.js 的官方示例：https://highlightjs.org/static/demo/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Highlight.js Demo</title>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/10.7.2/styles/vs2015.min.css">
  <script src="//cdn.jsdelivr.net/highlight.js/10.7.2/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
  <h1>My Awesome Site</h1>

  <h2>JavaScript Example</h2>
  <pre><code class="javascript">
    function highlightMyCode() {
      var codeBlocks = document.querySelectorAll('pre code');
      for (var i = 0; i < codeBlocks.length; i++) {
        hljs.highlightBlock(codeBlocks[i]);
      }
    }

    highlightMyCode();
  </code></pre>

  <h2>HTML Example</h2>
  <pre><code class="html">
    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
      &lt;head&gt;
        &lt;title&gt;My Cool Site&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;p&gt;Welcome to my cool site!&lt;/p&gt;
      &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
</body>
</html>

在这个例子中，我们使用了 VS2015 这个主题，同时定义了两个代码块并使用了 JavaScript 自动高亮功能。

自定义

除了使用内置的主题外，用户还可以使用 CSS 和 JavaScript 自定义 Highlight.js 的样式。具体的可以参考官方文档或者其他教程。

结论

Highlight.js 是一个功能完善且易于使用的 JavaScript 库，支持多种编程语言的语法高亮功能并且提供了多种样式主题，用户在使用中需要根据自己的需要进行调整。

The End

相关推荐

背景图片自适应浏览器分辨率大小并自动拉伸全屏代码

简单但很实用的5个css属性

我的css框架——base.css(重设浏览器默认样式)

兼做美工之导航条制作过程分享

JS 控制CSS样式表

Html5实现首页动态视频背景的示例代码

热门文章

热门精品源码

最新VIP资源