JavaScript之Highlight.js语法高亮显示神器集成说明

文章目录

JavaScript之Highlight.js语法高亮显示神器集成说明1. highlight.js1. 官网2. what is highlight.js?

2. 基本使用1. 作为一个模块使用2. 作为HTML标签使用1. cdnjs2. jsdelivr3. unpkg4. Self hosted(自主管理)

3. 支持的语言(190+)Alias Overlap(别名重叠)

1. highlight.js

1. 官网

官网： highlight.js (highlightjs.org)

npmjs: highlight.js - npm (npmjs.com)

2. what is highlight.js?

Highlight.js是一个用JavaScript编写的语法高亮器。它在浏览器和服务器上都能工作。它几乎可以处理任何标记，不依赖于任何框架，并且具有自动语言检测功能。

<code>截止到2024-03-07，最新版本为: 11.9.0,且具有以下特性

192种语言和496个主题

自动语言检测

适用于任何HTML标记

零依赖项

兼容任何JS框架

支持Node.js和Deno

2. 基本使用

highlight.js可以以不同的方式使用，例如使用 CDN、自己托管捆绑包、作为 Vue 插件，作为 ES6 模块，带有 Node.js 和 Web Worker。

有关详细信息，请参阅我们在 GitHub 上的自述文件。

1. 作为一个模块使用

Highlight.js可以与服务器上的 Node 一起使用。第一步是从 npm 安装包：

npm install highlight.js

# or

yarn add highlight.js

现在，可以使用 or 来使用该库。默认情况下，当您导入 主包，所有 192 种语言将自动加载。require``import

// Using require

const hljs = require('highlight.js');

// Using ES6 import syntax

import hljs from 'highlight.js';

但是，导入我们所有的语言会增加捆绑包的大小。如果您只需要几种语言， 您可以单独导入它们：

// Using require

const hljs = require('highlight.js/lib/core');

// Load any languages you need

hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));

// Using ES6 import syntax

import hljs from 'highlight.js/lib/core';

import javascript from 'highlight.js/lib/languages/javascript';

// Then register the languages you need

hljs.registerLanguage('javascript', javascript);

最后，无论以何种方式导入库，都可以使用 or 函数突出显示代码：highlight``highlightAuto

const highlightedCode = hljs.highlight(

'<span>Hello World!</span>',

{ language: 'xml' }

).value

有关详细信息，请参阅自述文件的“导入库”部分。

2. 作为HTML标签使用

1. cdnjs

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">code>

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>code>

<!-- and it's easy to individually load additional languages -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>code>

<script>hljs.highlightAll();</script>code>

2. jsdelivr