16

Right now, the default language formatter used for posts using the tag is JavaScript, not TypeScript. As a result, TypeScript isn't very well formatted sometimes (an image because the tag doesn't work on MSE; it does on Stack Overflow):

TypeScript code formatted as JavaScript

Highlight.js does a better job, though, when it knows that it's dealing with TypeScript:

function exampleOverload(a: number): number;
function exampleOverload(a: number[]): number[];
function exampleOverload(a: number | number[]): number | number[] {
    if (Array.isArray(a)) {
        return a.map(v => v * 2);
    }
    return a * 2;
}

TypeScript questions often also have JavaScript code in them, but that's okay: TypeScript is a superset of JavaScript, so formatting JavaScript as TypeScript works just fine.

Please:

  1. Change the default language for the tag to TypeScript, and

  2. If a question is tagged with both and , hint both to highlight.js. Josh Goebel (a member of the highlight.js project) says it's quite good at auto-detection when hinted so specifically. If that's not possible, just tell it to use TypeScript formatting, since that will look just fine for any JavaScript in the post while handling the TypeScript better.

Here's an example of how highlight.js handles formatting TypeScript as JavaScript, TypeScript formatted as TypeScript, and JavaScript formatted as TypeScript:

hljs.initHighlightingOnLoad();
body {
    font-family: sans-serif;
}
h1 {
    font-size: 16px;
    font-weight: normal;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.0/styles/default.min.css" rel="stylesheet"/>

<h1>TypeScript formatted as JavaScript:</h1>
<pre><code class="javascript">function exampleOverload(a: number): number;
function exampleOverload(a: number[]): number[];
function exampleOverload(a: number | number[]): number | number[] {
    if (Array.isArray(a)) {
        return a.map(v => v * 2);
    }
    return a * 2;
}
</code></pre>

<h1>TypeScript formatted as TypeScript:</h1>
<pre><code class="typescript">function exampleOverload(a: number): number;
function exampleOverload(a: number[]): number[];
function exampleOverload(a: number | number[]): number | number[] {
    if (Array.isArray(a)) {
        return a.map(v => v * 2);
    }
    return a * 2;
}
</code></pre>

<h1>JavaScript formatted as TypeScript:</h1>
<pre><code class="typescript">function exampleOverload(a) {
    if (Array.isArray(a)) {
        return a.map(v => v * 2);
    }
    return a * 2;
}
</code></pre>

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.0/highlight.min.js"></script>


Workaround: Until/unless the change is made, if you want to have TypeScript formatted properly in TypeScript posts, explicitly use lang-typescript in the code fences (thank you Martijn Pieters!), like this:

```lang-typescript
function exampleOverload(a: number): number;
function exampleOverload(a: number[]): number[];
function exampleOverload(a: number | number[]): number | number[] {
    if (Array.isArray(a)) {
        return a.map(v => v * 2);
    }
    return a * 2;
}
```

Note that it has to be lang-typescript, not just typescript. Without the lang- prefix, ```typescript tells the site to use the default formatting for the tag (thank you for that info animuson!), which is (again) JavaScript, not TypeScript. With the lang- prefix, it's explicitly saying to format it as TypeScript code.


¹ Using its generic engine I think, given there's no language-specific project listed next to it. But as noted above, that generic engine does a better job than when it thinks the code is JavaScript.

  • Note that the FAQ on highlighting here has not yet been fully updated. I didn't alter that section of the FAQ (where you presumably found the link to prettify-full.en.js) because I don't yet know where to link that section to instead. I've poked the developer that promised to update the FAQs on the subject to give us an ETA. I don't think that prettify-full.en.js is actually still in use. – Martijn Pieters Sep 28 at 9:42
  • @MartijnPieters - Thanks. :-) (Also thanks for pointing my MSO question at that other FAQ.) It doesn't affect the above, since it's clear that SE is telling highlight.js that TypeScript code is JavaScript code, and highlight.js does a better job when it knows it's TypeScript. :-) So hopefully a very simple change to pass on that information to highlight.js. – T.J. Crowder Sep 28 at 9:45
  • I've now located the highlight.js loader. Not 100% certain that's the full config but I don't see any specific TS handling in it. – Martijn Pieters Sep 28 at 10:06
  • Right, so the typescript tag is currently set to lang-js. That's where the alias is set, not in the source code. There currently is no option to set it to lang-typescript, unfortunately. What is needed is an update to the lang-... options to use the highlight.js supported languages list, so we can switch the typescript tag to lang-typescript. – Martijn Pieters Sep 28 at 10:21
  • @MartijnPieters - Thanks!! So we can workaround by using code fences with lang-typescript (at least, it seems to work; I've updated the title). Those changes are on the SE side, right? 1. Making code fences with typescript or ts work, and 2. Changing the default language for typescript? – T.J. Crowder Sep 28 at 13:40
  • @MartijnPieters Not sure if it's changed since your comment but the current loader is definitely including TypeScript... – Josh Goebel Oct 17 at 21:13
  • 1
    @JoshGoebel that’s not the issue, the problem is that is moderators can’t set the tag default highlighting language as the list for that setting does not include typescript. The fact that the loader includes typescript is what makes using lang-typescript manually work. – Martijn Pieters Oct 17 at 21:57
4

There is a separate list hard-coded into the system of the languages that are allowed to be selected for a tag, and all that needs to happen is for that list to be updated to include TypeScript. It can then be selected by any moderator as the default for the tag.

However, that is not going to happen, even if we add the option. The way the system is designed to work, we revert to "default" if there are two tags on a question that have different highlighters set. Doing a quick check, there are over 80,000 questions tagged with both typescript and javascript, which accounts for about 3/4 of all questions tagged typescript.

Because the javascript tag would be set to lang-js, setting the typescript tag to lang-typescript would only cause that huge portion of questions to revert to default highlighting, and not get highlighted as either JavaScript or TypeScript, which is not ideal. If TypeScript highlighting is better for a particular question, you can manually specify it for that code block. But overall, leaving the typescript tag as lang-js is far more beneficial for the majority of questions.

| improve this answer | |
  • 4
    Using the typescript formatter for plain javascript as well might be an option, that would remove the conflict that would result in reverting to auto-detection. I haven't looked into the formatter, but in general typescript formatting should be a superset of javascript formatting. – Mad Scientist Sep 28 at 18:33
  • 3
    Lots of questions get multiple tags, and the default language detector seems to be not so accurate. I think the ideal solution would be to be able to pass highlight.js multiple languages, and have it choose one given a code block, rather than giving it no suggestions and having it choose a random likely-incorrect language. This will require work on highlight.js's part first. – CertainPerformance Sep 28 at 22:53
  • 1
    The request has two parts. (It didn't originally, but replying to Martijns comments I ended up with two points). This answer relates only to #2. All due respect to SE, but there aren't that many language tags in the world, it shouldn't be hard to figure out that if something is tagged both javascript and typescript, the default barring something explicit from the author should be TypeScript. – T.J. Crowder Sep 29 at 5:55
  • 1
    #1 still applies regardless. I shouldn't have had to spend all this time figuring this stuff out. A code fence with typescript or ts should have just worked -- and it was the first thing I tried. But given this answer, I think I'll split #1 off into its own FR. – T.J. Crowder Sep 29 at 5:56
  • 1
    @T.J.Crowder Not including the lang-in the front triggers a tag lookup. So it would lookfor the typescript tag, see lang-js is set there, and use that. #1 can only ever work if the typescript tag gets set to lang-typescript, which as I explained, would only break things in the current setup. (Making plain "ts" work is a no-go because there is no corresponding tag, you must include the lang- prefix.) – animuson Sep 29 at 6:01
  • @animuson - Thanks for your insights into how this works at SE. Very much appreciated. I may sound a bit irritated above, but that irritation is directed at SE, not you. :-) – T.J. Crowder Sep 29 at 6:19
  • 5
    My earlier comment is wrong. The problems with language auto-detecting are not so much on highlight.js's side, but on how SE's JS is interacting with the library. And it's pretty easy to fix, which would allow for TypeScript to be highlighted properly without causing language-collision problems. cc @T.J.Crowder – CertainPerformance Sep 30 at 16:22
  • Using the typescript formatter for plain javascript as well might be an option The TS grammar is almost built entirely on top of the JS grammar so currently there would be very little harm (OTTOMH) in someone only building TS (if they were tight on space) but of course you'd need to manually add the "js", "javascript" aliases back if you wanted those manual names to point to TS... auto-detect would of course (in many cases) just figure it out and use TypeScript. – Josh Goebel Oct 17 at 21:16
2

Given the popularity of TypeScript on Stack Overflow, this is definitely a change worth doing. TypeScript is not a niche language.

Although those of us who are aware of the JavaScript default for TypeScript questions and of the difference between ```typescript and ```lang-typescript can be sure to use the lang- code fence, most people won't be aware of those aspects of SE and will just use Ctrl-K, raw code fences, or (in my case before I learned the difference) they'll accidentally use tag-based code fences.

It seems that this may require some changes beyond just changing the default formatting language for given that a lot of questions are tagged both and , but again, TypeScript isn't a niche language nor is it likely to become one any time soon.

| improve this answer | |
  • and of the difference between typescript *and* lang-typescript Could someone please explain this different to me, I'd love to know? – Josh Goebel Oct 17 at 21:17
  • 1
    @JoshGoebel using typescript means use the setting found on the typescript tag. Using lang-typescript means: ignore the tag, tell highlight to use typescript. – Martijn Pieters Oct 17 at 22:00
  • I think you mean that the "typescript" tag now (or previously) pointed to "javascript", yes? That simply sounds wrong (if SO is already loading the TS grammar). The typescript tag should really point to the typescript grammar. – Josh Goebel Oct 17 at 23:22
  • @JoshGoebel - Yes, the typescript tag does indeed use JavaScript formatting. This request is to change that so it uses TypeScript formatting. – T.J. Crowder Oct 18 at 7:16
  • @JoshGoebel check the other answer as to why JavaScript is set for the typescript tag. – Luuklag Oct 18 at 11:48
  • Yeah I think I understand what it does now, I'm just don't understand the historical context of why. :-) I'm guessing that the prior highlighter had no TS support and this just carried over into the new implementation. – Josh Goebel Oct 18 at 12:16
  • @JoshGoebel no it has to do with the fact that when two tags on a question have conflicting highlighting languages set it defaults to default. By setting JavaScript for the typescript tag they avoid going to default highlighting when tagged in combination with JavaScript. – Luuklag Oct 18 at 14:45
  • 1
    THANKs. I completely understand the rational now. The fix advocated in "better auto-detection" thread here is the far more correct fix though... They should tell Highlight.js "this is either JS or TS" (based on the tags) and then let us figure it out. We're quite good when hinted so specifically. – Josh Goebel Oct 18 at 14:56
  • 1
    @BenKelly If SO continues with the "two languages cancel out" strategy (which you should really, really re-consider and instead tell the library about both and let us figure it out) then you definitely should change your JS mapping to TS... so that both JS/TS point to TS and do not cancel. – Josh Goebel Oct 19 at 21:56

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .