JS库之Highlight.js的用法详解

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 库,支持多种编程语言的语法高亮功能并且提供了多种样式主题,用户在使用中需要根据自己的需要进行调整。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS库之Highlight.js的用法详解 - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • CSS实现两个元素相融效果(粘滞效果)

    下面是详细讲解“CSS实现两个元素相融效果(粘滞效果)”的完整攻略。 介绍 CSS实现两个元素相融效果(粘滞效果)是一种常见的页面设计效果,也是前端开发中需要掌握的一项技能。本攻略将介绍这种效果的实现方法。 实现步骤 创建两个元素。这两个元素需要有一定的重叠,才能实现相融效果。 利用position属性来控制这两个元素的位置。将其中一个元素定位到页面最上方,…

    css 2023年6月10日
    00
  • CSS教程:scrollbar的属性知识及样式分类介绍

    下面是“CSS教程:scrollbar的属性知识及样式分类介绍”的完整攻略: 简介 滚动条是网页中常见的元素之一,随着浏览器的升级,我们可以使用CSS的样式来修改滚动条的样式,使网站更加美观。本文将介绍关于CSS滚动条的属性和样式分类。 CSS滚动条样式属性 我们可以使用伪类来修改滚动条的样式,以下是常见的CSS滚动条样式属性: ::-webkit-scro…

    css 2023年6月9日
    00
  • HTML 注释标签的深层次作用分析

    HTML中的注释标签 <!– … –> 是用于在HTML代码中添加注释的。这些注释并不会在网页上显示,而是会被浏览器忽略,只有HTML代码的编写者可以看到。这篇攻略将会深入讨论这个标签的一些深层次的作用。 1. 隐藏HTML代码 注释标签可以用来隐藏HTML代码。例如,有些情况下我们需要从HTML中删除一些网页元素,但不想彻底删除它们,如…

    css 2023年6月9日
    00
  • CSS定义超链接样式的顺序及四个伪类的用法示例介绍

    下面是关于“CSS定义超链接样式的顺序及四个伪类的用法示例介绍”的完整攻略: 一、CSS定义超链接样式的顺序 在HTML中,超链接是通过<a>标签来实现的。想要修改超链接的样式,就要使用CSS。在CSS中,我们可以通过以下顺序来定义超链接的样式,这个顺序可以确保我们的样式能够按照我们想要的方式生效。 定义超链接的状态(link、visited、h…

    css 2023年6月10日
    00
  • Bootstrap CSS布局之表格

    下面就是Bootstrap CSS布局之表格的完整攻略。 Bootstrap CSS布局之表格 Bootstrap是一个流行的CSS框架, 提供了大量预设的CSS样式和JavaScript插件。其中,表格是Bootstrap提供的一种常用的布局方式。Bootstrap表格具有响应式设计,能够适应各种大小的屏幕,如手机和平板电脑。 一个简单的表格 下面是一个简…

    css 2023年6月10日
    00
  • Bootstrap CSS布局之列表

    以下是Bootstrap CSS布局之列表的详细攻略。 什么是Bootstrap CSS布局之列表? Bootstrap CSS布局之列表是指使用Bootstrap框架中的列表组件进行页面布局的一种方法。Bootstrap提供了多种列表样式,可以快速创建符合设计规范的列表。 如何使用Bootstrap CSS布局之列表? 下面我们来介绍如何使用Bootstr…

    css 2023年6月10日
    00
  • 如何用js控制css中的float的代码

    要用 JavaScript 控制 CSS 中的 float 属性,我们可以使用 DOM 操作来访问和修改元素的样式。下面是一个完整攻略,包含了如何使用 JavaScript 控制 CSS 中的 float 属性的过程和两个示例说明。 使用 JavaScript 控制 CSS 中的 float 属性 步骤一:使用 JavaScript 访问元素 要使用 Jav…

    css 2023年5月18日
    00
  • Dreamweaver CS3网页制作之CSS布局规则

    Dreamweaver CS3网页制作之CSS布局规则攻略 CSS布局是网页开发的重要组成部分。在使用Dreamweaver CS3进行网页制作时,掌握CSS布局规则可以帮助我们更高效地构建网页。 1. CSS布局的基本原理 在CSS布局中,通过设置样式来控制HTML元素的位置、大小、对齐和显示效果。CSS布局的基本原理有以下几点: 盒模型:每个HTML元素…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部