# 通过主题组件为 Highlight.JS 安装新语言

**URL:** https://meta.discourse.org/t/install-a-new-language-for-highlight-js-via-a-theme-component/292480
**Category:** Developer Guides
**Tags:** how-to, theme-guides
**Created:** [2019年一月3日 16:47 UTC](https://meta.discourse.org/t/install-a-new-language-for-highlight-js-via-a-theme-component/292480 "2019-01-03T16:47:47Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [2019年一月3日 16:47 UTC](https://meta.discourse.org/t/install-a-new-language-for-highlight-js-via-a-theme-component/292480/1 "2019-01-03T16:47:47Z")

</div>

我刚刚向我们的 HighlightJS 代码添加了一个钩子，因此现在您可以使用插件 API 为 Highlight.JS 添加自定义语言。

示例（使用 beancount 语言定义）：

````plaintext
const beancountLang = function(e){var c="[A-Z][A-Za-z0-9-]*",a="[0-9]{4}[-|/][0-9]{2}[-|/][0-9]{2}",b="(balance|commodity|custom|document|event|note|open|pad|price|query)",t={cN:"literal",b:/([\\-|\\+]?)([\\d]+[\\.]?[\\d]*)/,r:0},n={cN:"string",b:'\"',e:'\"',r:0,c:[e.BE]},s={cN:"name",b:"\\\\{\",e:\"\\\\}\",c:[{cN:"literal",b:a},t,n,{cN:"subst",b:"[A-Z][A-Z0-9'._-]{0,22}[A-Z0-9]\"}]};return{aliases:[\"beancount\",\"bean\",\"ledger\"],c:[{cN:"built_in",b:"^(include|option|plugin|popmeta|poptag|pushmeta|pushtag)",r:0},{b:"^"+a+"\\\\s+"+b,rB:!0,r:10,c:[{cN:"type",b:a,e:/\\s+/,eE:!0},{cN:"keyword",b:b}]},{b:"^"+a+"\\\\s+.\\\\s",rB:!0,r:10,c:[{cN:"type",b:a,e:"\\\\s+",eE:!0},{cN:"variable",b:".\",endsParent:!0}]},e.C(\";\",\"$\"),{cN:"meta",b:/^\\s{2,}[a-z][A-Za-z0-9\\-_]+:/},s,{cN:"name",b:"@"},{cN:"type",b:c+\":\",r:0,c:[{cN:"subst",b:c+\"(:\"+c+\")?\"}]},{cN:"section",b:/^\\*\\s+?.*/},{cN:"link",b:/\\^[A-Za-z0-9\\-_\\/.]+/},{cN:[\"emphasis\"],b:/#[A-Za-z0-9\\-_\\/.]+/},n,t]}}\napi.registerHighlightJSLanguage(\"beancount\", beancountLang);\n```

使用此 API 的官方主题组件：

- https://github.com/discourse/discourse-highlightjs-glimmer

- https://github.com/discourse/discourse-highlightjs-structured-text

---

<small>本文档已版本控制 - 在 [github](https://github.com/discourse/discourse/blob/main/docs/developer-guides/docs/05-themes-components/24-highlight-js-language.md) 上建议更改。</small>
````
