highlight.js 代码高亮插件的使用详解

Highlight.js 代码高亮插件的使用详解

什么是 highlight.js

highlight.js 是一个用于 Web 页面的 JavaScript 代码高亮库。它支持超过 180 种编程语言和文档格式的语法高亮。

如何使用 highlight.js

安装

你可以通过 NPM 安装 highlight.js:

npm install highlight.js

或者你也可以在官网下载 highlight.js 的压缩包,然后将 highlight.min.jshighlight.min.css 文件添加到你的项目中。

引入

<!-- 加载 highlight.js 的 CSS 文件 -->
<link rel="stylesheet" href="/path/to/highlight.min.css">

<!-- 加载 highlight.js 的 JavaScript 文件 -->
<script src="/path/to/highlight.min.js"></script>

高亮代码

方式一:自动检测语言并高亮

你可以通过下面的代码来自动检测代码的语言并高亮:

<pre><code>
// Your code here
</code></pre>

<script>
// 在页面加载完成之后,对所有 pre code 进行高亮
document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((el) => {
    hljs.highlightElement(el);
  });
});
</script>

方式二:指定语言类型并高亮

你也可以通过下面的代码来指定代码的语言类型并进行高亮:

<pre><code class="html">
// Your code here
</code></pre>

<script>
// 在页面加载完成之后,对所有 pre code 进行高亮
document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((el) => {
    hljs.highlightElement(el);
  });
});
</script>

上面的 class="html" 即指定了代码的类型为 HTML。

示例说明

示例一:高亮 HTML 代码

下面是一个简单的 HTML 页面示例,演示如何高亮 HTML 代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Highlight.js 示例一:高亮 HTML 代码</title>
  <link rel="stylesheet" href="./node_modules/highlight.js/styles/atom-one-dark.min.css">
</head>
<body>
  <pre><code class="html">
    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Hello World&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;Hello World!&lt;/h1&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>

  <script src="./node_modules/highlight.js/lib/highlight.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
</body>
</html>

上面的代码通过指定 class="html" 来高亮 HTML 代码。在 script 标签的最后,使用 hljs.initHighlightingOnLoad() 使高亮库能够自动检测语言并高亮所有代码块。

示例二:高亮 JavaScript 代码

下面是一个简单的 JavaScript 页面示例,演示如何高亮 JavaScript 代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Highlight.js 示例二:高亮 JavaScript 代码</title>
  <link rel="stylesheet" href="./node_modules/highlight.js/styles/vs2015.min.css">
</head>
<body>
  <pre><code class="javascript">
    function helloWorld() {
      console.log('Hello, World!');
    }
    helloWorld();
  </code></pre>

  <script src="./node_modules/highlight.js/lib/highlight.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
</body>
</html>

上面的代码通过指定 class="javascript" 来高亮 JavaScript 代码。在 script 标签的最后,使用 hljs.initHighlightingOnLoad() 使高亮库能够自动检测语言并高亮所有代码块。

总结

以上就是 highlight.js 代码高亮插件的使用详解。通过正确地使用 highlight.js,我们可以很容易地在我们的网站或博客中显示高亮的代码。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:highlight.js 代码高亮插件的使用详解 - Python技术站

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

相关文章

  • 前端面试题及答案整理(二)

    “前端面试题及答案整理(二)”是一篇介绍常见前端面试题的文章,涵盖了HTML、CSS、JavaScript等多个方面的知识点。下面是题目和答案整理的攻略: 标题 文章的标题应该简洁明了,并包含主要内容,以吸引读者的注意。 示例 前端面试题及答案整理(二) – HTML、CSS、JavaScript面试题 目录 为方便读者快速了解文章内容,应该包含详细的目录,…

    css 2023年6月9日
    00
  • 8条非常实用的设计字体规则详解

    8条非常实用的设计字体规则详解 在网页设计中,合理的字体选择与配置是非常重要的一环,它直接影响网页的美观度和易读性。以下是8条非常实用的设计字体规则。 1. 最多使用三种字体 在同一页面内,最好只使用2-3种字体,以免造成视觉混乱。其中一种字体应该是主要字体,可以用于标题、正文等,另一种或两种字体是用于配合主要字体,强化视觉效果,例如用一种不同的字体突出强调…

    css 2023年6月10日
    00
  • 浅谈ng-zorro使用心得

    浅谈ng-zorro使用心得 简介 ng-zorro 是一款基于 Angular 框架的 UI 组件库,提供了丰富的 UI 组件和工具,可以帮助我们快速地构建企业级应用。本篇文章将带大家深入地了解 ng-zorro 的使用心得。 安装和使用 想要使用 ng-zorro,首先需要在项目中安装 ng-zorro 的依赖。可以通过 npm 或 yarn 等包管理工…

    css 2023年6月9日
    00
  • 使用Angular 6创建各种动画效果的方法

    让我来给你详细讲解使用Angular 6创建各种动画效果的方法的完整攻略。 1. 了解Angular动画 Angular动画是指在Angular应用程序中引入动态效果的一种方式。它是利用CSS样式和JavaScript脚本来增强用户体验的。Angular动画可以用来添加过渡效果、触发元素状态的变化、创建自定义动画等。 要使用Angular动画,需要先使用An…

    css 2023年6月9日
    00
  • JS实现简单的todoList(记事本)效果

    下面我会给你讲解JS实现简单的todoList(记事本)效果的完整攻略。 1. 界面部分 首先,我们需要搭建好页面框架。可以使用HTML和CSS实现一个简单的布局,其中包括待办事项输入框、已完成事项展示区域、未完成事项展示区域等。 <body> <div id="app"> <h1>Todo List&…

    css 2023年6月10日
    00
  • Bootstrap每天必学之导航条

    Bootstrap每天必学之导航条 什么是导航条? 导航条是指用于网站或应用程序的主要导航展示的水平条,通常包含网站的标志、菜单和其他导航链接。 Bootstrap导航条 Bootstrap是一个广泛使用的前端框架,提供了许多基本的UI组件,其中之一就是导航条。使用Bootstrap可以轻松创建具有响应式布局的漂亮的导航条,并使网站风格统一。 创建基本导航条…

    css 2023年6月11日
    00
  • jQuery和CSS仿京东仿淘宝列表导航菜单

    下面是详细讲解“jQuery和CSS仿京东仿淘宝列表导航菜单”的完整攻略。 一、需求分析 设计导航菜单,包含点击切换功能 实现鼠标悬停展开子菜单 导航菜单需要响应式布局 二、技术选型 HTML CSS jQuery 三、技术实现 HTML结构和CSS样式编写 1.1 HTML结构编写 <nav> <ul class="navLis…

    css 2023年6月10日
    00
  • 利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)

    下面是“利用纯CSS3实现文字向右循环闪过效果实例”的完整攻略: 一、概述 这里介绍的是一种利用纯CSS3实现文字向右循环闪过效果的方法,这种效果在移动端上可以很好地展现,同时也很常见。其实现基于CSS3的动画属性,如animation-duration、animation-delay、animation-iteration-count等。 二、实现步骤 (…

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