Right now, the default language formatter used for posts using the typescript 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):
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:
Change the default language for the typescript tag to TypeScript, and
If a question is tagged with both typescript and javascript, 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 typescript 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.
highlight.js
loader. Not 100% certain that's the full config but I don't see any specific TS handling in it.typescript
tag is currently set tolang-js
. That's where the alias is set, not in the source code. There currently is no option to set it tolang-typescript
, unfortunately. What is needed is an update to thelang-...
options to use the highlight.js supported languages list, so we can switch thetypescript
tag tolang-typescript
.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 withtypescript
orts
work, and 2. Changing the default language for typescript?lang-typescript
manually work.