# Automatic code highlighting broken in fullscreen code view

**URL:** https://meta.discourse.org/t/automatic-code-highlighting-broken-in-fullscreen-code-view/304879
**Category:** Bug
**Created:** [April 22, 2024, 9:52am UTC](https://meta.discourse.org/t/automatic-code-highlighting-broken-in-fullscreen-code-view/304879 "2024-04-22T09:52:20Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![oskar1](https://avatars.discourse-cdn.com/v4/letter/o/35a633/32.png) [@oskar1](https://meta.discourse.org/u/oskar1)
#### Post date: [April 22, 2024, 9:52am UTC](https://meta.discourse.org/t/automatic-code-highlighting-broken-in-fullscreen-code-view/304879/1 "2024-04-22T09:52:20Z")

</div>

**Priority/Severity** :  
Low  
**Platform** :  
Chrome 124, Ubuntu 22  
**Version** :  
Discourse v3.3.0.beta2-dev  
**Description** :  
Discourse performs automatic code highlighting with hljs, even when no language was specified. This feature works in normal topic view, but not when viewing the code in fullscreen.  
**Reproducible steps** :

1. Create a topic with a code block, without specifying the language

```plaintext
System.out.println("hello world");

```

1. View the topic and see that hljs detected a language and applies highlighting.
2. Click the fullscreen button at the top right of the code block.
3. See that hljs language detection failed and no highlighting is applied

Here are some screenshots in one big image, because of new user restrictions 😕.

 ![discourse-new-user-limit](https://global.discourse-cdn.com/meta/original/4X/8/4/1/8412e5fd9220acabd3aa8cf03b8c289099ec3b69.png)

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [April 22, 2024, 12:38pm UTC](https://meta.discourse.org/t/automatic-code-highlighting-broken-in-fullscreen-code-view/304879/2 "2024-04-22T12:38:32Z")

</div>

Thanks for the report, @oskar1, I can confirm this bug locally. (It’s harder to reproduce this on meta because we use `text` not `auto` as the `default code lang` on meta.)

We will take a look at fixing this soon.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 22, 2024, 1:27pm UTC](https://meta.discourse.org/t/automatic-code-highlighting-broken-in-fullscreen-code-view/304879/3 "2024-04-22T13:27:37Z")

</div>

I think the issue is here 🤔 :

[https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/highlight-syntax.js#L36-L52](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/highlight-syntax.js#L36-L52)

You have `lang-auto` class name applied with markdown code and automatically removed here so the library can guess the language.

However, when you go fullscreen, `lang-auto` is no longer in the element, and you have only `language-<detected-language-here>` class name here. Thus, `lang` is undefined.

A maybe fix could be here – if `lang-auto` is not found, look for `language-<..>`

`const m = className.match(/^lang-(.+)$/);`  
 →   
`const m = className.match(/^`(?:lang|language)-(.+)$/);`

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [April 22, 2024, 7:24pm UTC](https://meta.discourse.org/t/automatic-code-highlighting-broken-in-fullscreen-code-view/304879/4 "2024-04-22T19:24:55Z")

</div>

Happy to review a PR if you’d like to submit one @Arkshine, you’ve done a good part of the work already 😉.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 23, 2024, 6:07am UTC](https://meta.discourse.org/t/automatic-code-highlighting-broken-in-fullscreen-code-view/304879/5 "2024-04-23T06:07:20Z")

</div>

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

[https://github.com/discourse/discourse/pull/26710](https://github.com/discourse/discourse/pull/26710)

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [April 23, 2024, 4:38pm UTC](https://meta.discourse.org/t/automatic-code-highlighting-broken-in-fullscreen-code-view/304879/6 "2024-04-23T16:38:56Z")

</div>

Thanks @Arkshine, fix looks great, will merge it once tests pass in CI.

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [April 24, 2024, 12:00pm UTC](https://meta.discourse.org/t/automatic-code-highlighting-broken-in-fullscreen-code-view/304879/7 "2024-04-24T12:00:24Z")

</div>

This topic was automatically closed after 18 hours. New replies are no longer allowed.
