# (old) method for adding languages to highlight.js on Discourse

**URL:** https://meta.discourse.org/t/old-method-for-adding-languages-to-highlight-js-on-discourse/55818
**Category:** Development
**Created:** [2017年一月16日 05:19 UTC](https://meta.discourse.org/t/old-method-for-adding-languages-to-highlight-js-on-discourse/55818 "2017-01-16T05:19:36Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![henriquebastos](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/henriquebastos/32/119496_2.png) [@henriquebastos](https://meta.discourse.org/u/henriquebastos)
#### Post date: [2017年一月16日 05:19 UTC](https://meta.discourse.org/t/old-method-for-adding-languages-to-highlight-js-on-discourse/55818/1 "2017-01-16T05:19:36Z")

</div>

> ⚠ This method doesn’t work any more. See This method no longer works. Please see [Install a new language for Highlight.JS via a theme component](https://meta.discourse.org/t/install-a-new-language-for-highlight-js-via-a-theme-component/292480) instead.

> **Original Post**
>
> **Warning:** _This is a crazy hack!_
> 
> I’m just sharing because _(1)_ it maybe helpful to someone and _(2)_ hopefully you will teach me a better way.
> 
> I hired a _“Discourse as a Service”_ instance, so I don’t control the source code, nor can install plugins.
> 
> I wanted my forum to highlight the [Beancount language](http://furius.ca/beancount/).
> 
> First [I wrote the syntax definition](https://github.com/henriquebastos/highlight.js/blob/master/src/languages/beancount.js) and sent it to upstream, but I didn’t want to wait for a Highlight.JS and Discourse release, and for my host to upgrade my instance.
> 
> Then I went to `Admin -> Customize -> CSS/HTML -> </head>` and added this hack to inject the Beancount language into Discourse’s Highlight.JS.
> 
> ```plaintext
> <script>
> // Crazy hack to install Beancount syntax.
> function waitForHighlightJS() {
> if(typeof hljs !== "undefined"){
> console.debug('HighlightJS ready... installing Beancount syntax.');
>         
> // Install Beancount syntax.
> //Got this building highlight.js with: node tools/build.js -t cdn
> hljs.registerLanguage("beancount",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]}});
>         
> // Realod syntax for codeblocks.
> $("pre code[class]").each(function(i, e){
> hljs.highlightBlock(e);
> })
>         
> console.debug('HighlightJS updated. Everything should look good.');
> }
> else{
> console.debug('HighlightJS not ready yet.')
> setTimeout(waitForHighlightJS, 250);
> }
> }
> setTimeout(waitForHighlightJS, 250);
> </script>
> 
> ```
> 
> Works for me. If you have any suggestions I would be glad to hear. Mainly if you know how it can be done without the `setTimeout`.
> 
> 's!

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2017年一月17日 21:38 UTC](https://meta.discourse.org/t/old-method-for-adding-languages-to-highlight-js-on-discourse/55818/2 "2017-01-17T21:38:56Z")

</div>

Ideally I would prefer simply to upgrade highlight and make the brand new languages an option. This hack is very very very hacky.

---

<div class="post-metadata">

### Author: ![henriquebastos](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/henriquebastos/32/119496_2.png) [@henriquebastos](https://meta.discourse.org/u/henriquebastos)
#### Post date: [2017年一月18日 02:42 UTC](https://meta.discourse.org/t/old-method-for-adding-languages-to-highlight-js-on-discourse/55818/3 "2017-01-18T02:42:26Z")

</div>

Me too! 😃 Unfortunately this is not under my control.

I was wandering… Discourse’s HLJS plugin already allow some customization on _init_. Maybe it would be useful to not limit this customization to languages. Maybe passing an object that would be merged with the _config_ object could do this trick and more.

However, I don’t think ppl need this very much. I’ll stick with my hack until (1) HLJS is released and (2) Discourse updated.

---

<div class="post-metadata">

### Author: ![gigperformer](https://avatars.discourse-cdn.com/v4/letter/g/94ad74/32.png) [@gigperformer](https://meta.discourse.org/u/gigperformer)
#### Post date: [2018年十月12日 18:00 UTC](https://meta.discourse.org/t/old-method-for-adding-languages-to-highlight-js-on-discourse/55818/4 "2018-10-12T18:00:13Z")

</div>

How do you indiciate which syntax highlighter to use when you insert code into a post?

---

<div class="post-metadata">

### Author: ![henriquebastos](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/henriquebastos/32/119496_2.png) [@henriquebastos](https://meta.discourse.org/u/henriquebastos)
#### Post date: [2018年十月12日 19:56 UTC](https://meta.discourse.org/t/old-method-for-adding-languages-to-highlight-js-on-discourse/55818/5 "2018-10-12T19:56:46Z")

</div>

AFAIK HighlightJS uses the first language that match.

However, every language has a “registration name”.

`hljs.registerLanguage("beancount",function(e){...})`

So if you want to explicitly define the language, inform the name after the triple ```.

````
``` python
Some code
```

````

---

<div class="post-metadata">

### Author: ![gigperformer](https://avatars.discourse-cdn.com/v4/letter/g/94ad74/32.png) [@gigperformer](https://meta.discourse.org/u/gigperformer)
#### Post date: [2018年十月12日 20:34 UTC](https://meta.discourse.org/t/old-method-for-adding-languages-to-highlight-js-on-discourse/55818/6 "2018-10-12T20:34:30Z")

</div>

Thanks - I had seen the registration name but it wasn’t clear how to specify that name when posting code.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [2024年一月22日 10:21 UTC](https://meta.discourse.org/t/old-method-for-adding-languages-to-highlight-js-on-discourse/55818/7 "2024-01-22T10:21:13Z")

</div>

一个帖子被拆分到一个新主题：[通过主题组件为 Highlight.JS 安装新语言](https://meta.discourse.org/t/install-a-new-language-for-highlight-js-via-a-theme-component/292480)

---

<div class="post-metadata">

### Author: ![BradCray](https://avatars.discourse-cdn.com/v4/letter/b/7feea3/32.png) [@BradCray](https://meta.discourse.org/u/BradCray)
#### Post date: [2020年十月30日 16:54 UTC](https://meta.discourse.org/t/old-method-for-adding-languages-to-highlight-js-on-discourse/55818/11 "2020-10-30T16:54:01Z")

</div>

我在研究如何为我们的 [Chapel 语言 Discourse 站点](https://chapel.discourse.group/) 添加 [Chapel](https://chapel-lang.org) 语法高亮支持时，看到了这篇文章。我们计划使用一个第三方的 Chapel 版 highlight.js 扩展来实现。

在 @pmusaraj 上面的示例中，我明白如何将其修改为用 Chapel 替换 beancount。但作为 Discourse 的新手，我不清楚接下来该如何处理脚本块，以便在我们的 Discourse 站点上启用该功能。能否有人为像我这样的新手提供一些进一步的指导？

谢谢！

---

<div class="post-metadata">

### Author: ![justin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/justin/32/157614_2.png) [@justin](https://meta.discourse.org/u/justin)
#### Post date: [2020年十月30日 17:16 UTC](https://meta.discourse.org/t/old-method-for-adding-languages-to-highlight-js-on-discourse/55818/12 "2020-10-30T17:16:52Z")

</div>

您可以在 管理 \> 自定义 \> 主题 下创建一个新的主题组件，然后将该代码粘贴到 `<head>` 部分。之后根据需要对其进行修改和调整。

更多信息：

[Discourse 主题使用入门指南](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)  
[Discourse 主题开发者指南](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648)

---

<div class="post-metadata">

### Author: ![BradCray](https://avatars.discourse-cdn.com/v4/letter/b/7feea3/32.png) [@BradCray](https://meta.discourse.org/u/BradCray)
#### Post date: [2020年十月31日 00:29 UTC](https://meta.discourse.org/t/old-method-for-adding-languages-to-highlight-js-on-discourse/55818/13 "2020-10-31T00:29:01Z")

</div>

谢谢 @justin，这正是我所缺少的（而且如果不是在放弃之前尝试，我根本不可能自己找到这个方案）！我们的 Discourse 现在可以正确渲染 Chapel 代码了（或者说，至少在我的 `highlight.js` 脚本能做到的范围内正确渲染，这已经是个很好的开始了……）。

即使经过一些试错，仍有几点我不太清楚：

1. 对于三重引号代码块上的语言标签，例如：

2. 是否还需要将语言添加到站点的“高亮语言”设置中，代码块才能被识别？并且该名称必须与传递给 `registerHighlightJSLanguage()` 的字符串完全一致？

再次感谢。

---

<div class="post-metadata">

### Author: ![meglio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meglio/32/71444_2.png) [@meglio](https://meta.discourse.org/u/meglio)
#### Post date: [2021年十月18日 14:58 UTC](https://meta.discourse.org/t/old-method-for-adding-languages-to-highlight-js-on-discourse/55818/14 "2021-10-18T14:58:41Z")

</div>

我为 `Jai` 创建了新的语法高亮：[GitHub - Jai-Community/discourse-highlightjs-jai: Discourse theme component to highlight Jai syntax · GitHub](https://github.com/Jai-Community/discourse-highlightjs-jai)

然而，当我安装它并进入主题预览模式，然后创建一个新主题并添加一些代码，例如：

````
```jai
#run {}
```

````

…它确实检测到了语言（请查看 `class` 属性），但未能解析任何内容：

```plaintext
<pre><code class="lang-jai hljs">#run {}
</code></pre>

```

而在本地环境中运行相同的语言定义时，却能成功高亮 Jai 语法：

 ![image](https://global.discourse-cdn.com/meta/original/3X/b/4/b4491606fc2fefce8e5d35ce7130cd549003c02d.png)

您可以在浏览器中打开 `_dev/test-syntax-highlight.html` 自行测试。

有什么建议吗？

---

<div class="post-metadata">

### Author: ![meglio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meglio/32/71444_2.png) [@meglio](https://meta.discourse.org/u/meglio)
#### Post date: [2021年十月19日 01:35 UTC](https://meta.discourse.org/t/old-method-for-adding-languages-to-highlight-js-on-discourse/55818/15 "2021-10-19T01:35:06Z")

</div>

原来 Discourse 使用的是旧版 Highlight.js，与当前版本不兼容。因此，我不得不修正我的语言定义，结果非常顺利。

如果您对完整的语法高亮主题组件仓库示例感兴趣，可以参考以下内容：

> **[GitHub - Jai-Community/discourse-highlightjs-jai: Discourse theme component to highlight Jai syntax](https://github.com/Jai-Community/discourse-highlightjs-jai)**
>
> Discourse theme component to highlight Jai syntax

---

<div class="post-metadata">

### Author: ![what](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/what/32/264194_2.png) [@what](https://meta.discourse.org/u/what)
#### Post date: [2024年一月22日 02:42 UTC](https://meta.discourse.org/t/old-method-for-adding-languages-to-highlight-js-on-discourse/55818/18 "2024-01-22T02:42:14Z")

</div>

![Screenshot 2024-01-21 at 8.41.45 PM](https://global.discourse-cdn.com/meta/original/4X/a/1/f/a1fdadf1779656b5943cb7c864bbf096fcf2247f.png)

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [2024年一月22日 10:23 UTC](https://meta.discourse.org/t/old-method-for-adding-languages-to-highlight-js-on-discourse/55818/19 "2024-01-22T10:23:44Z")

</div>

你好 @what，此主题的 OP 已过时。我已将有效的说明提取到一个新主题中：

> [@Install a new language for Highlight.JS via a theme component](https://meta.discourse.org/t/install-a-new-language-for-highlight-js-via-a-theme-component/292480):
>
> I’ve just added a hook to our HighlightJS code so now you can use the plugin API to add a custom language for Highlight.JS. Example (using the beancount language definition): 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,{c…