Highlight.js 第三方语言语法开发指南

最新推荐文章于 2025-06-01 09:06:34 发布

瞿格女

最新推荐文章于 2025-06-01 09:06:34 发布

阅读量237

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_01192/article/details/148361467

Highlight.js 第三方语言语法开发指南

highlight.js JavaScript syntax highlighter with language auto-detection and zero dependencies. 项目地址: https://gitcode.com/gh_mirrors/hi/highlight.js

前言

Highlight.js 是一个流行的代码语法高亮库，支持超过180种编程语言。随着技术的发展，越来越多的新兴编程语言和领域特定语言(DSL)不断涌现。为了保持项目的可持续发展，Highlight.js 采用了第三方语言语法模块的开发模式。本文将详细介绍如何为 Highlight.js 开发一个第三方语言语法模块。

开发前的准备

1. 理解第三方语法模块的概念

Highlight.js 核心库不再直接合并新的语言语法，而是鼓励开发者以第三方模块的形式开发和维护。这种模式有以下优势：

减轻核心维护团队的工作负担
允许语言专家更好地维护自己熟悉的语言
模块化架构使扩展更加灵活
用户可以按需加载所需语言

第三方语法模块可以托管在 Highlight.js 组织下，也可以由开发者自行托管。无论哪种方式，Highlight.js 都会提供链接支持。

2. 阅读快速入门指南

在开始开发前，建议先阅读 extra/3RD_PARTY_QUICK_START.md 文件，了解第三方语言语法开发的基本流程和关键步骤。

开发语言语法模块

3. 创建语言定义文件

语言定义文件是语法高亮的核心，它定义了如何识别和着色代码中的各种元素。基本结构如下：

export default function(hljs) {
  return {
    name: "Language Name",
    keywords: 'foo bar',
    contains: [ ..., hljs.NUMBER_MODE, ... ]
  }
}

关键点说明：

文件名将作为语言的短标识符，需符合HTML/CSS类名规范
通常放置在 my_new_grammar/src/languages/ 目录下
使用 hljs 参数可以访问内置的模式和正则表达式
函数只需导出，不需要立即调用

4. 添加语言元数据

在文件顶部添加特殊格式的注释，包含语言元数据：

/*
Language: Superlanguage
Requires: java.js, sql.js
Author: John Smith <email@domain.com>
Contributors: Mike Johnson <...@...>, Matt Wilson <...@...>
Description: Some cool language definition
Website: https://superlanguage.example.com
*/

元数据字段说明：