Broken syntax highlighting for shell scripts

Summary

Broken syntax highlight for shell scripts.

Steps to reproduce

Issues can be observed with the following examples:

What is the current bug behavior?

Syntax highlight is broken for shell scripts within the source code view.

Current view of https://gitlab.com/gitlab-org/gitlab-shell/-/blob/main/support/truncate_repositories.sh

issue

What is the expected correct behavior?

Expected view of https://gitlab.com/gitlab-org/gitlab-shell/-/blob/main/support/truncate_repositories.sh

expected

Possible fixes

We are using Hightlight.JS for syntax highlighter. However, Rouge is still utilised for language detection. In this case, Rouge has suggested the language is shell and passed along this information to Hightlight.JS. Unfortunately, there is a mismatch between the definition of shell between these 2 frameworks.

  • In Rouge, shell means shell scripts (see code)
  • In Highlight.JS, shell means console or shellsession (see code)

The immediate fix would be to fix the mapping between the two languages, that is [rouge]: shell -> [highlight.js]: sh. Additionally, we need to revisit the interaction between Rouge and Hightlight.JS and understand if:

  1. Is there any other gap like this one?
  2. Can we rely solely on Highlight.JS language auto-detection and drop Rouge?
Edited by Tan Le