From 88ad3bb95b52debe6deba1880c7e4ced1e0e9199 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pablo=20V=C3=A9lez?= <pablovv2012@gmail.com>
Date: Tue, 24 Sep 2024 15:28:35 +0200
Subject: [PATCH] MM-60419 - fix styling regression by adding back placeholder
 injection link element (#28219)

* MM-60419 - fix styling regression by adding back placeholder injection link

* add relevant comment

* add more details to how the link element work

* Update webapp/channels/src/root.html

---------

Co-authored-by: Harrison Healey <harrisonmhealey@gmail.com>
Co-authored-by: Mattermost Build <build@mattermost.com>
---
 webapp/channels/src/root.html | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/webapp/channels/src/root.html b/webapp/channels/src/root.html
index 14d73dd718..0f615ca080 100644
--- a/webapp/channels/src/root.html
+++ b/webapp/channels/src/root.html
@@ -19,6 +19,15 @@
     <link rel="icon" type="image/png" href="/static/images/favicon/favicon-default-64x64.png" sizes="64x64">
     <link rel="icon" type="image/png" href="/static/images/favicon/favicon-default-96x96.png" sizes="96x96">
 
+    <!--
+        This "empty" link element is used as a dynamic inject placeholder for the syntax highlighting css styles:
+        1. The highlight.js lib finds this element by its 'code_theme' class.
+        2. The lib dynamically defines the 'href' attribute and its value to load the required CSS for the detected language by its detection logic.
+        3. This allows it to do at runtime theme switching without havint to modifying the DOM structure.
+        4. The 'href' attribute is empty to prevent unnecessary HTTP requests.
+    -->
+    <link rel='stylesheet' class='code_theme'>
+
     <!-- We need this CSS first to show the initial loading screen -->
     <link id="initialLoadingScreenCSS" rel='stylesheet' href='/static/css/initial_loading_screen.css'>
 </head>