# cangjie-highlight

**Repository Path**: jmsword/cangjie-highlight

## Basic Information

- **Project Name**: cangjie-highlight
- **Description**: 为 highlight.js 增加对华为仓颉（cangjie）编程语言语法高亮的支持。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-05
- **Last Updated**: 2026-03-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

为 highlight.js 增加对华为仓颉（cangjie）编程语言语法高亮的支持。

- [highlight.js](https://highlightjs.org/)
- [Cangjie](https://cangjie-lang.cn/)

已在 [v1.0.0](https://gitee.com/jmsword/cangjie-highlight/tree/v1.0.0) 的基础上，根据 ES6 模块化语法优化了 highlight 和 cangjie 的 js 导入。

工程结构：

```txt
- src 源代码
  - cangjie-highlight-export.min.js
    来自仓颉官网页面的引用：https://docs.cangjie-lang.cn/docs/1.0.5/cangjie-highlight-export.js
    这儿只是备份

- dist
  - cangjie.js 仓颉语法解析
  - cangjie-es6.js 仓颉语法解析（用于 main.js 的 es6 版本）
- demo 演示
  - index1_1.html 最简单的示例
  - index1_2.html
  - index1_3.html
  - index2_1.html 基于ES6 语法改进版最简单的实例
  - index2_2.html 增加了调试代码

   index1_2.html 和 index1_3.html 均加入了额外的页面测试、调试代码。两者区别只在于代码块中的示例。
```

## 使用方法

html 中 cangjie 代码块包裹在下面标签中：

```html
<pre><code class="language-cangjie">
代码...
</code></pre>
```

然后依次：

1. 引入 highlightjs 的 css (可选，可自定义)。
2. 引入 main.js 文件。

    引入方式
    ```html
    <!-- 主模块脚本 -->
    <script type="module" src="../dist/main.js"></script>
    ```

注意：main.js 中使用 ES6 import 语法引入 `highlight.js` 和 `cangjie-es6.js`，如下所示：

```javascript
// 动态导入 highlight.js
const hljs = await import('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/es/highlight.min.js');

// 动态导入仓颉语言定义
const cangjieModule = await import('./cangjie-es6.js');
```

因此你只需引入 main.js 文件即可。