Automatic code highlighting broken in fullscreen code view

Arkshine · April 23, 2024, 6:07am

I made a PR . Hopefully, the tests are good enough!

github.com/discourse/discourse

FIX: Automatic code highlighting not applied in fullscreen modal

discourse:main ← Arkshine:fix-highlighted-code-in-fullscreen

opened 06:05AM - 23 Apr 24 UTC

Arkshine

+32 -1

Meta: https://meta.discourse.org/t/automatic-code-highlighting-broken-in-fullscr…een-code-view/304879 This PR fixes the code highlighting not applied in the fullscreen modal. #### Explanation A `lang-auto` classname name is added to the `<code>` element when no language is provided. The library highlight.js can then guess the language. If found, `lang-auto` is removed, and a `language-<name>` class name is added (from the library). After clicking on fullscreen, the current element classnames are used in the modal template (see [here](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/codeblock-buttons.js#L171-L176)). Because no `lang-<name>` class name exists, the `lang` variable is always _undefined_, resulting in the highlighting being skipped. #### Proposed fix The `language-<name>` classname is used to retrieve the language name if no `lang-<name>` is present. #### Screenshots <details> <summary>Before</summary> ![image](https://github.com/discourse/discourse/assets/360640/df74722d-ba94-459d-bc67-e9bdf84bab69) </details> <details> <summary>After</summary> ![image](https://github.com/discourse/discourse/assets/360640/52f75c04-dec8-4e57-a62f-9bc0c6f14ca8) </details>

Topic		Replies	Views
Support auto-highlighting for preformatted code feature	11	2995	October 1, 2014
Code highlighting happening when auto-highlighting not enabled bug	19	1030	September 29, 2020
Why isn't HTML code highlighted in codeblocks on meta? site feedback	4	1313	February 23, 2023
Code Highlighting with Escaped Quotes support	6	484	August 12, 2022
How to change default colours of the code block provides? support	13	1017	November 4, 2023

Automatic code highlighting broken in fullscreen code view

Related Topics