Syntax highlighting in a merge request can be inconsistent
Summary
A customer (internal link only) has reported odd behaviour when viewing some (but not all) TypeScript test files (*.test.ts
). For some files, when viewed side-by-side in a merge request "changes" tab, syntax highlighting can break completely:
Expected | Actual |
---|---|
![]() |
![]() |
Note that things like describe
, VideoTrimAction
, and some contents within these functions are not receiving proper highlighting.
Steps to reproduce
- Import project via URL:
https://github.com/CodelyTV/awesome-typescript-examples.git
as a new project. This was chosen as it has a test TypeScript file in it. - Update
tests/enums/enum-types/numeric/VideoTrimAction.test.ts
with thousands of lines. Seehttps://gitlab.com/benjaminking_ultimate_group/501302-typescript-example-files/-/commit/e18323501ef8106b5af5745c69a14950402ec862
for an example. Save these changes to the "main" default branch directly. - Update
tests/enums/enum-types/numeric/VideoTrimAction.test.ts
with the contents of this file:https://gitlab.com/benjaminking_ultimate_group/501302-typescript-example-files/-/blob/benjaminking-main-patch-90ba/tests/enums/enum-types/numeric/VideoTrimAction.test.ts
. - Start a merge request based off this branch. The Merge Request, one created, should consist of +9 additions, -54 removals to the file.
- Ensure you have Compare changes: Side-by-side set. Consider enabling/disabling whitespace changes.
Example Project
This is not reproducible on GitLab.com (yet), but this project has the example code and setup I used to replicate on Self-Managed: https://gitlab.com/benjaminking_ultimate_group/501302-typescript-example-files
What is the current bug behavior?
There is very inconsistent behaviour on when syntax highlighting will load. This does not appear to be influenced by the maximum file size for highlighting, as the example file provided is 110 KB.
What is the expected correct behavior?
Syntax highlighting should work in almost all situations when it can be rendered.
Relevant logs and/or screenshots
Possible fixes
I did discuss this with the Code Review team in Slack (link), and we considered if the maximum file size could be an issue. Jay mentioned this might be a problem with Rouge itself, but I haven't been able to find a way to test this 'outside' of GitLab. If we can confirm this is tied to Rouge then it might be possible to just raise a bug report upstream.