# (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:** [January 16, 2017, 5:19am 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:** 1\
**Showing post:** 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:** [January 16, 2017, 5:19am 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!

---

_[View the full topic](https://meta.discourse.org/t/old-method-for-adding-languages-to-highlight-js-on-discourse/55818)._