Markdown syntax highlighting issue with TypeScript code blocks (fences) using ligatures (Fira Code)

[Xunnamius]

Type: Bug

1. Run cd `mktemp -d` (creates a new temporary dir and changes directories to it)
2. Run code --disable-extensions --user-data-dir . .
   2. Add the following settings to settings.json (must have Fira Code font installed):
   ```json
   {
   "editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace",
   "editor.fontLigatures": true,
   "editor.fontSize": 13
   }
   ``` (turns out this happens on a fresh vscode install without ligatures activated)
3. Create a new file called README.md with the following content:

// NTARH also supports typed response data via TypeScript generics:
await testApiHandler<{ hello: string }>({
  // The next line would cause TypeScript to complain:
  // handler: (_, res) => res.status(200).send({ hello: false }),
  handler: (_, res) => res.status(200).send({ hello: 'world' }),
  requestPatcher: (req) => (req.headers = { key: process.env.SPECIAL_TOKEN }),
  test: async ({ fetch }) => {
    const res = await fetch({ method: 'POST', body: 'data' });
    // The next line would cause TypeScript to complain:
    // const { goodbye: hello } = await res.json();
    const { hello } = await res.json();
    expect(hello).toBe('world'); // ◄ Passes!
  }
});

4. Notice that all of the > characters in the => ligatures are strangely colored, where the = is blue (the correct color) but the > is red (incorrect color).

This just started happening a few updates ago. I hoped it would go away on its own, but here we are. I'm not sure exactly what changed that caused this. It has nothing to do with any of my extensions (all disabled) or my vscode settings (using blank user data directory).

This syntax highlighting issue does not happen with actual TypeScript code in .ts files, and it goes away if I change the code fence flag from typescript to javascript.

Using typescript code fence flag in README.md (renders incorrectly):

Using javascript code fence flag in README.md (renders correctly):

Using a TypeScript file ending in .ts (renders correctly):

---

VS Code version: Code 1.72.1 (129500e, 2022-10-10T17:23:00.760Z)
OS version: Linux x64 5.15.0-48-generic
Modes: Restricted
Sandboxed: No

System Info

Item	Value
CPUs	AMD Ryzen Threadripper 3970X 32-Core Processor (64 x 4149)
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 skia_renderer: enabled_on video_decode: disabled_software video_encode: disabled_software vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: disabled_off
Load (avg)	5, 6, 6
Memory (System)	125.67GB (35.38GB free)
Process Argv	--crash-reporter-id ac330e88-bd69-4507-b330-7c870afb9c07
Screen Reader	no
VM	0%
DESKTOP_SESSION	plasma
XDG_CURRENT_DESKTOP	KDE
XDG_SESSION_DESKTOP	KDE
XDG_SESSION_TYPE	x11

Extensions: none

A/B Experiments

vsliv368cf:30146710
vsreu685:30147344
python383cf:30185419
vspor879:30202332
vspor708:30202333
vspor363:30204092
vslsvsres303:30308271
pythonvspyl392:30443607
vserr242:30382549
pythontb:30283811
vsjup518:30340749
pythonptprofiler:30281270
vshan820:30294714
vstes263:30335439
pythondataviewer:30285071
vscod805:30301674
binariesv615:30325510
bridge0708:30335490
bridge0723:30353136
cmake_vspar411:30581797
vsaa593:30376534
pythonvs932:30410667
cppdebug:30492333
vscaat:30438848
vsclangdf:30486550
c4g48928:30535728
dsvsc012:30540252
azure-dev_surveyone:30548225
i497e931:30553904
pyindex848:30577860
nodejswelcome1cf:30587006
fc301958:30573243

[VSCodeTriageBot]

Thanks for creating this issue! It looks like you may be using an old version of VS Code, the latest stable release is 1.72.2. Please try upgrading to the latest version and checking whether this issue remains.

Happy Coding!

[Xunnamius]

Still happens in the latest version.

[mjbvz]

Possible duplicate of #157322