Fix conflicting CSS on syntax highlighted blocks (#6991)

Fixes element-hq/element-web#19445

res/css/views/rooms/_EventTile.scss

@@ -589,10 +589,6 @@ $hover-select-border: 4px;
     padding: 0 10px;
 }
 
-.mx_EventTile_content .markdown-body .hljs {
-    display: inline !important;
-}
-
 /*
 // actually, removing the Italic TTF provides
 // better results seemingly

src/components/views/messages/TextualBody.tsx

@@ -232,7 +232,6 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
             );
             return;
         }
-        console.log('highlighting');
 
         let advertisedLang;
         for (const cl of code.className.split(/\s+/)) {
@@ -258,7 +257,11 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
             // User has language detection enabled and the code is within a pre
             // we only auto-highlight if the code block is in a pre), so highlight
             // the block with auto-highlighting enabled.
-            highlight.highlightElement(code);
+            // We pass highlightjs the text to highlight rather than letting it
+            // work on the DOM with highlightElement because that also adds CSS
+            // classes to the pre/code element that we don't want (the CSS
+            // conflicts with our own).
+            code.innerHTML = highlight.highlightAuto(code.textContent).value;
         }
     }