html语言怎么用（highlight.js的使用）

时间2025-05-06 05:11:30分类IT科技浏览3589

导读：基本用法...

基本用法

在浏览器中使用

在网页上使用highlight.js的最小限度是链接到一个主题库并调用highlightAll：

自动检测语言找到并高亮显示<pre><code>标签内的代码。如果自动检测不到，或者你更喜欢直接的，你可以在class属性中手动指定语言：

纯文本

使用plaintext来处理纯文本：

忽略高亮

使用nohighlight来跳过代码高亮：

在Node.js中使用

// load the library and ALL languages const hljs = require(highlight.js); const html = hljs.highlightAuto(<h1>Hello World!</h1>).value

一般只需要加载通用语言处理即可：

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

要使用特定语言高亮显示代码，请使用 highlight：

const html = hljs.highlight(<h1>Hello World!</h1>, {language: xml}).value

更多使用请参考 API文档。

语言支持

Highlight.js 支持 180 多种语言。您可以在 SUPPORTED_LANGUAGES 中找到支持的语言。

自定义

如果您需要对 Highlight.js 的初始化进行更多控制，可以使用 highlightElement 和 configure 函数。这使您可以更好地控制要高亮显示的内容。例如：

document.addEventListener(DOMContentLoaded, (event) => { document.querySelectorAll(pre code).forEach((el) => { hljs.highlightElement(el); }); });

更多配置选项。

自定义HTML

强烈建议 <pre><code> 对代码块进行包装。因为这非常语义化，开箱即用，零污染。也可以使用其他 HTML 元素，但您可能需要特别注意保留换行符。

假设使用div进行包装：

那么其高亮脚本就需要如下处理：

// first, find all the div.code blocks document.querySelectorAll(div.code).forEach(el => { // then highlight each hljs.highlightElement(el); });

在不使用<pre>的情况下，通过CSS中的white-space: pre也可以实现代码换行，如下：

div.code { white-space: pre; }

在Vue.js中使用

下载 highlightjs/vue-plugin ，这是用 highlight.js 封装好的 vue 插件

<template> <highlightjs language="js" code="console.log(Hello World);" /> </template> <script> import highlight.js/lib/common; import hljsVuePlugin from "@highlightjs/vue-plugin"; export default { components: { highlightjs: hljsVuePlugin.component } } </script>

在 Web Worker 中使用

如果要高亮显示的代码内容非常多，您可以使用 Web Worker 来处理

window.addEventListener(load, () => { const code = document.querySelector(#code); const worker = new Worker(worker.js); worker.onmessage = (event) => { code.innerHTML = event.data; } worker.postMessage(code.textContent); });

在 worker.js 中：

worker.onmessage = (event) => { importScripts(<path>/highlight.min.js); const result = self.hljs.highlightAuto(event.data); postMessage(result.value); };

加载highlight.js

首先，您可能会通过 npm 或 yarn 来获取 highlight.js 。

Node.js / require

// require the highlight.js library, including all languages const hljs = require(./highlight.js); const highlightedCode = hljs.highlightAuto(<span>Hello World!</span>).value

一般只需要加载公用语言处理即可。

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

当然也可以按需加载指定语言：

const hljs = require(highlight.js/lib/core); hljs.registerLanguage(xml, require(highlight.js/lib/languages/xml)); const highlightedCode = hljs.highlight(<span>Hello World!</span>, {language: xml}).value

ES6 模块 / import

注意

您也可以直接从完全静态的 URL 引入，例如： ES6 模块 CDN 资源。

默认引入将加载全部语言：

import hljs from highlight.js;

按需要引入指定语言：

import hljs from highlight.js/lib/core; import javascript from highlight.js/lib/languages/javascript; hljs.registerLanguage(javascript, javascript);

指定引入 CSS 主题样式：

import hljs from highlight.js; import highlight.js/styles/github.css;

获取highlight.js

highlight.js支持AMD和CommonJS规范，开箱即用，像通过RequireJS 或 Browserify获取，不需要做任何其他操作，当然您也可以使用r.js来构建：

r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js

通过 CDN 获取

cdnjs

普通JS

ES6 模块

jsdelivr

普通JS

ES6 模块

unpkg

普通JS

ES6 模块

注意

CDN 托管的 highlight.min.js 可能不是最新版本，以致不能包含到所有语言

官网下载

下载地址：Getting highlight.js

下载页面可以快速生成自定义的单文件压缩包，其中仅包含您想要的语言。

通过 NPM 安装

使用 NPM 或 Yarn 安装：

npm install highlight.js # or yarn add highlight.js

或者您可以从源代码构建 NPM 包。

从源代码构建

node tools/build.js -t node node tools/build.js -t browser :common node tools/build.js -t cdn :common

环境要求

Highlight.js 适用于所有现代浏览器和当前支持的 Node.js 版本。

Node.js >= 12.x npm >= 6.x

展开全文READ MORE

云服务器默认端口（云服务器本地端口不通怎么解决）

html语言怎么用（highlight.js的使用）

基本用法​

在浏览器中使用​

在Node.js中使用​

语言支持​

自定义​

自定义HTML​

在Vue.js中使用​

在 Web Worker 中使用​

加载highlight.js​

Node.js / require​

ES6 模块 / import​

获取highlight.js​

通过 CDN 获取​

官网下载​

通过 NPM 安装​

从源代码构建​

环境要求​

基本用法

在浏览器中使用

在Node.js中使用

语言支持

自定义

自定义HTML

在Vue.js中使用

在 Web Worker 中使用

加载highlight.js

Node.js / require

ES6 模块 / import

获取highlight.js

通过 CDN 获取

官网下载

通过 NPM 安装

从源代码构建

环境要求