Syntax Highlighting of TypeScript embedded in HTML doesn't work and textmate/html.tmbundle cannot be updated as it has been abandoned #1611
Description
Type: Bug
Steps to reproduce
-
Start a new .HTML file
-
Embed script with
<script type="text/typescript">
addEventListener("load", (event) => {
const templates = document.getElementsByClassName("image-list");
const selected = templates[0] as HTMLElement;
console.log(selected.dataset.tag);
});
</script>- Semantic Highlighting works - but "normal" syntax highlighting does not.
Rationale for using this feature:
Although embedding TypeScript in HTML probably won't work in any browsers. It's very useful if the HTML is to be pre/post-processed before publishing to be able to have all the benefits of TypeScript while writing the scripts and have it compiled as part of the "site build" process.
I have an ESLint extension that validates <script> tags as plain JavaScript. but if the <script> tag is changed to <script type="text/typescript">, it validates it correctly as TypeScript.
Proof of Concept (Quick and Dirty) Fix
Edit the file /usr/share/codium/resources/app/extensions/html/syntaxes/html.tmLanguage.json (which is built from
https://github.com/microsoft/vscode/blob/main/extensions/html/syntaxes/html.tmLanguage.json) and replace the occurance of "livescript" with "typescript"
After saving and restarting, the syntax is highlighted as expected.
Long Term Fix
There is a long and complicated (what seems to be a) regular expression with all the text MIME types that the built-in HTML extension treats as javascript. "javascript", "jscript", "ecmascript", "livescript", etc.
Changing the part of this (very long) line that previously was
| jscript\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | livescript\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t |
to
| jscript\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | typescript\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | livescript\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t |
provides a long term fix.
Your reference material
VSCodium version: VSCodium 1.80.2 (ad2ce925243280c8cd1054a2b27734e2b2e839c5, 2023-07-28T18:27:49.392Z)
OS version: Linux x64 5.15.0-78-generic
Modes:
System Info
| Item | Value |
|---|---|
| CPUs | Intel(R) Core(TM) i7-3630QM CPU @ 2.40GHz (8 x 1300) |
| GPU Status | 2d_canvas: enabled canvas_oop_rasterization: disabled_off direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok video_decode: enabled video_encode: disabled_software vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: disabled_off |
| Load (avg) | 2, 3, 2 |
| Memory (System) | 7.21GB (5.19GB free) |
| Process Argv | --unity-launch |
| Screen Reader | no |
| VM | 0% |
| DESKTOP_SESSION | xfce |
| XDG_CURRENT_DESKTOP | XFCE |
| XDG_SESSION_DESKTOP | xfce |
| XDG_SESSION_TYPE | x11 |
Extensions (28)
| Extension | Author (truncated) | Version |
|---|---|---|
| openscad | Ant | 1.2.1 |
| markdown-mermaid | bie | 1.19.0 |
| better-toml | bun | 0.3.2 |
| arm | dan | 1.4.0 |
| vscode-markdownlint | Dav | 0.49.0 |
| vscode-eslint | dba | 2.4.2 |
| vscode-deno | den | 3.20.0 |
| vscode-phpmd | eco | 1.2.0 |
| prettier-vscode | esb | 10.1.0 |
| vscode-html-validate | htm | 2.8.0 |
| rest-client | hum | 0.25.0 |
| vscode-povray | jma | 0.0.11 |
| mips | kda | 0.1.1 |
| Kotlin | mat | 1.7.1 |
| git-graph | mhu | 1.30.0 |
| pylint | ms- | 2023.6.0 |
| python | ms- | 2023.12.0 |
| hexeditor | ms- | 1.9.9 |
| vetur | oct | 0.37.3 |
| vscode-thunder-client | ran | 1.10.0 |
| vscode-yaml | red | 1.14.0 |
| avr-support | roc | 0.0.1 |
| rust-analyzer | rus | 0.4.1629 |
| trailing-spaces | sha | 0.4.1 |
| phpcs | she | 1.0.8 |
| code-spell-checker | str | 2.20.5 |
| language-pascal | the | 0.1.6 |
| latex-support | tor | 3.10.0 |
(1 theme extensions excluded)