# 为代码提示添加 hljs 别名支持

**URL:** https://meta.discourse.org/t/add-support-for-hljs-aliases-for-code-hints/81298
**Category:** Feature
**Tags:** pr-welcome
**Created:** [2018年二月23日 10:52 UTC](https://meta.discourse.org/t/add-support-for-hljs-aliases-for-code-hints/81298 "2018-02-23T10:52:19Z")
**Posts on this page:** 18
**Page:** 1

<div class="post-metadata">

### Author: ![Aerijo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aerijo/32/105751_2.png) [@Aerijo](https://meta.discourse.org/u/Aerijo)
#### Post date: [2018年二月23日 10:52 UTC](https://meta.discourse.org/t/add-support-for-hljs-aliases-for-code-hints/81298/1 "2018-02-23T10:52:19Z")

</div>

When assigning a language to code blocks, I often use `js` to mean `javascript` . This is not recognised by the markdown engine(?) these forums use, so I am forced to go back and replace it with `javascript` . Having `js` as an alias would help a lot, especially as it is valid in other markdown places (like GitHub).

It’s also fairly unambiguous, as JavaScript is almost always shortened to JS when the name will be used frequently.

---

<div class="post-metadata">

### Author: ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [2018年二月23日 17:14 UTC](https://meta.discourse.org/t/add-support-for-hljs-aliases-for-code-hints/81298/2 "2018-02-23T17:14:04Z")

</div>

Pretty sure the syntax is specified by highlight.js, not markdown. Per [highlight.js](https://highlightjs.org/usage/) you need to specify the language, which the library calls `javascript`, not `js`.

FWIW, I’ve made the same mistake with C++. I thought it would be `c++`, not `cpp`

---

<div class="post-metadata">

### Author: ![Aerijo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aerijo/32/105751_2.png) [@Aerijo](https://meta.discourse.org/u/Aerijo)
#### Post date: [2018年二月23日 21:20 UTC](https://meta.discourse.org/t/add-support-for-hljs-aliases-for-code-hints/81298/3 "2018-02-23T21:20:21Z")

</div>

Thanks for the pointer. I followed the link, and it says

> The list of supported language classes is available in the [class reference](http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html)

The class reference it links to has a table of supported languages, and recognised keywords to select each one. I believe the “bottleneck” is happening on the discourse side, where it’s only passing a limited subset of language keywords to Highlight.JS.

In fact, it would be great if all the supported keywords were allowed, as some look quite interesting.

FYI, it has `js` for JavaScript, and `c++` for C++. So I think this is definitely worth looking into.

---

<div class="post-metadata">

### Author: ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [2018年二月23日 21:26 UTC](https://meta.discourse.org/t/add-support-for-hljs-aliases-for-code-hints/81298/4 "2018-02-23T21:26:37Z")

</div>

> [@Aerijo](#):
>
> FYI, it has js for JavaScript, and c++ for C++. So I think this is definitely worth looking into.

Ooh, interesting. Perhaps we only pull the first alias for each language? An engineer would know more.

> [@Aerijo](#):
>
> In fact, it would be great if all the supported keywords were allowed, as some look quite interesting.

It is intentional that we do not. Including all languages affected performance. Admins can configure the highlighted languages on their site via the `highlighted languages` site setting. I’ve included the languages that are enabled here on Meta for you below:

 ![image](https://global.discourse-cdn.com/meta/original/3X/3/9/39ab306078d9a62bf00887eebefc7fa2beb3b047.png)

---

<div class="post-metadata">

### Author: ![Aerijo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aerijo/32/105751_2.png) [@Aerijo](https://meta.discourse.org/u/Aerijo)
#### Post date: [2018年二月23日 21:39 UTC](https://meta.discourse.org/t/add-support-for-hljs-aliases-for-code-hints/81298/5 "2018-02-23T21:39:26Z")

</div>

OK, what should I do from here? Raise an issue on the repository, or let a discourse staff member take over?

---

<div class="post-metadata">

### Author: ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [2018年二月23日 21:42 UTC](https://meta.discourse.org/t/add-support-for-hljs-aliases-for-code-hints/81298/6 "2018-02-23T21:42:52Z")

</div>

You’ll need to wait for one of the engineers to see this (we track issues here, they’re disabled on Github) Keep in mind it’s late Friday (or even Saturday) for most of the team, so this may not be seen until Monday.

---

<div class="post-metadata">

### Author: ![supermathie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/supermathie/32/507518_2.png) [@supermathie](https://meta.discourse.org/u/supermathie)
#### Post date: [2018年二月23日 22:19 UTC](https://meta.discourse.org/t/add-support-for-hljs-aliases-for-code-hints/81298/7 "2018-02-23T22:19:55Z")

</div>

On a whim I just added `js` and `c++` to the `highlighted langugages` site setting here on Meta and that appears to have done the right thing:

js:

```js
  (function() {
    var ps = require('preload-store').default;

    Discourse.CDN = 'https://d11a6trkgmumsb.cloudfront.net';
    Discourse.BaseUrl = 'meta.discourse.org'.replace(/:[\d]*$/,"");
    Discourse.start();
    Discourse.set('assetVersion','367b6f2f4971d9a8e8f7c712cd0de182');
    Discourse.Session.currentProp("disableCustomCSS", false);
    Discourse.HighlightJSPath = "/highlight-js/meta.discourse.org/7b8d9ac1f45289d14ec6dc64f8a0891c61ec77a5.js";
    Discourse.S3CDN = 'https://d11a6trkgmumsb.cloudfront.net';
    Discourse.S3BaseUrl = '//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com';

```

c++:

```c++
  (function() {
    var ps = require('preload-store').default;

    Discourse.CDN = 'https://d11a6trkgmumsb.cloudfront.net';
    Discourse.BaseUrl = 'meta.discourse.org'.replace(/:[\d]*$/,"");
    Discourse.start();
    Discourse.set('assetVersion','367b6f2f4971d9a8e8f7c712cd0de182');
    Discourse.Session.currentProp("disableCustomCSS", false);
    Discourse.HighlightJSPath = "/highlight-js/meta.discourse.org/7b8d9ac1f45289d14ec6dc64f8a0891c61ec77a5.js";
    Discourse.S3CDN = 'https://d11a6trkgmumsb.cloudfront.net';
    Discourse.S3BaseUrl = '//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com';

```

(that said, I can certainly agree that we SHOULD be pulling in the synonyms and allowing those for enabled languages)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2018年二月23日 23:13 UTC](https://meta.discourse.org/t/add-support-for-hljs-aliases-for-code-hints/81298/8 "2018-02-23T23:13:29Z")

</div>

Not necessary, the workaround is trivial, so use the workaround.

Most sites use auto highlighting 99% of the time so this is a non-issue:

````
```

````

versus

````
``` bleh

````

---

<div class="post-metadata">

### Author: ![Aerijo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aerijo/32/105751_2.png) [@Aerijo](https://meta.discourse.org/u/Aerijo)
#### Post date: [2018年二月23日 23:32 UTC](https://meta.discourse.org/t/add-support-for-hljs-aliases-for-code-hints/81298/9 "2018-02-23T23:32:48Z")

</div>

I don’t think the auto highlighting is working then. Even on this site, observe the following

No language name:

```plaintext
let x = 10;

function root(n) {
  return Math.sqrt(n);
}

console.log(root(x));

```

`javascript` as language name:

```javascript
let x = 10;

function root(n) {
  return Math.sqrt(n);
}

console.log(root(x));

```

There is a difference in appearance, indicating a different set of rules is being applied (even though both are identical JavaScript). And it’s not just these two language that would benefit from allowing synonyms; there are quite a few that offer alternative naming.

---

<div class="post-metadata">

### Author: ![riking](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/riking/32/170938_2.png) [@riking](https://meta.discourse.org/u/riking)
#### Post date: [2018年二月23日 23:51 UTC](https://meta.discourse.org/t/add-support-for-hljs-aliases-for-code-hints/81298/10 "2018-02-23T23:51:08Z")

</div>

It appears to be due to some rules trying to undo certain highlighting on Javascript. It’s different because the top is marked as `hljs javascript` versus the second which is `lang-javascript hljs`.

```plaintext
.hljs-keyword,
.javascript .hljs-title,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
    color: #333;
    font-weight: bold;
}
.javascript .hljs-title,
.lisp .hljs-title,
.clojure .hljs-title,
.hljs-subst {
    font-weight: normal;
}

```

---

<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: [2018年二月24日 00:15 UTC](https://meta.discourse.org/t/add-support-for-hljs-aliases-for-code-hints/81298/11 "2018-02-24T00:15:15Z")

</div>

If we wanted a special case it belongs here

[https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/engines/discourse-markdown/code.js.es6](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/engines/discourse-markdown/code.js.es6)

But making auto work better is probably a better first approach, if your site is all about js you can just default to it

---

<div class="post-metadata">

### Author: ![Aerijo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aerijo/32/105751_2.png) [@Aerijo](https://meta.discourse.org/u/Aerijo)
#### Post date: [2018年二月24日 00:20 UTC](https://meta.discourse.org/t/add-support-for-hljs-aliases-for-code-hints/81298/12 "2018-02-24T00:20:31Z")

</div>

I originally posted this [on the Atom forums](https://discuss.atom.io/t/make-js-alias-for-javascript/52711), and was directed here. Atom package development is heavily JS orientated, but also has a lot of CoffeeScript (that’s in the process of being phased out).

---

<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: [2018年二月24日 00:35 UTC](https://meta.discourse.org/t/add-support-for-hljs-aliases-for-code-hints/81298/13 "2018-02-24T00:35:36Z")

</div>

Oh why not suggest they make the change to `default code lang` to javascript? That is the vast majority of code pasted in anyway (and you can override per snippet where needed)

Also they could cut down on the languages supported to make auto detection more reliable.

That said, I would like to investigate with [GitHub - highlightjs/highlight.js: JavaScript syntax highlighter with language auto-detection and zero dependencies. · GitHub](https://github.com/isagalaev/highlight.js/) why that snippet is not auto detected properly, perhaps open an issue there.

One minor issue with making `js` a shortcut for `javascript` is that I would assume you would also want `cs` to be shore for `coffeescript` but that would clash with c sharp.

---

<div class="post-metadata">

### Author: ![Aerijo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aerijo/32/105751_2.png) [@Aerijo](https://meta.discourse.org/u/Aerijo)
#### Post date: [2018年二月24日 00:39 UTC](https://meta.discourse.org/t/add-support-for-hljs-aliases-for-code-hints/81298/14 "2018-02-24T00:39:26Z")

</div>

I believe `coffee` is the normal shortcut for CoffeeScript (probably for that reason). Additionally, the Highlight.JS docs I linked to still consider `cs` to be C#.

I don’t know anything about the internals here, and didn’t understand the workaround that was supplied above (I assume any maintainer would though), but I would have thought just adding `js` and `c++` to the list of languages passed to Highlight.JS would work. No special handling should be needed, as the docs list them as recognised aliases.

---

<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: [2018年二月24日 00:41 UTC](https://meta.discourse.org/t/add-support-for-hljs-aliases-for-code-hints/81298/15 "2018-02-24T00:41:41Z")

</div>

Oh if it is a recognized alias then sure we should support all aliases defined in highlight. Which brings us back to [https://meta.discourse.org/t/add-js-alias-for-javascript/81298/11?u=sam](https://meta.discourse.org/t/add-js-alias-for-javascript/81298/11) which would need some tlc.

If you are feeling brave why not try hacking on it. First step if finding a list of all the official aliases.

---

<div class="post-metadata">

### Author: ![Aerijo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aerijo/32/105751_2.png) [@Aerijo](https://meta.discourse.org/u/Aerijo)
#### Post date: [2018年二月24日 00:47 UTC](https://meta.discourse.org/t/add-support-for-hljs-aliases-for-code-hints/81298/16 "2018-02-24T00:47:18Z")

</div>

This appears to be the complete list of aliases for languages.

> **[Scope Reference — highlight.js 11.9.0 documentation](https://highlightjs.readthedocs.io/en/latest/css-classes-reference.html)**

I’m not familiar at all with the discourse repository though, so I don’t think I can contribute much beyond this.

---

<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: [2018年二月24日 00:50 UTC](https://meta.discourse.org/t/add-support-for-hljs-aliases-for-code-hints/81298/17 "2018-02-24T00:50:58Z")

</div>

I can see this in the source and lots of these we would like to support `docker` is much nicer than `dockerfile` for example.

[https://github.com/isagalaev/highlight.js/search?utf8=✓&q=aliases&type=](https://github.com/isagalaev/highlight.js/search?utf8=%E2%9C%93&q=aliases&type=)

Putting a #pr-welcome on this.

The only simple way of doing this would be to send a different var to pretty text with list of allowed aliases instead of allowed languages.

---

<div class="post-metadata">

### Author: ![riking](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/riking/32/170938_2.png) [@riking](https://meta.discourse.org/u/riking)
#### Post date: [2018年二月24日 01:02 UTC](https://meta.discourse.org/t/add-support-for-hljs-aliases-for-code-hints/81298/18 "2018-02-24T01:02:38Z")

</div>

> [@sam](#):
>
> That said, I would like to investigate with GitHub - isagalaev/highlight.js: Javascript syntax highlighter why that snippet is not auto detected properly, perhaps open an issue there.

It is being detected properly, it’s just applying different CSS classes:

> [@riking](#):
>
> It appears to be due to some rules trying to undo certain highlighting on Javascript. It’s different because the top is marked as hljs javascript versus the second which is lang-javascript hljs.

The hljs `<span>` elements are identical, only the coloring differs.
