From b16af66fe2d71997308d87ad07dc96f29062a595 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 19 Oct 2021 18:43:29 +0100 Subject: [PATCH] Fix conflicting CSS on syntax highlighted blocks (#6991) Fixes https://github.com/vector-im/element-web/issues/19445 --- res/css/views/rooms/_EventTile.scss | 4 ---- src/components/views/messages/TextualBody.tsx | 7 +++++-- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 540b7d89af..ea53cc4f13 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/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 diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx index 941c269991..b8e068ed75 100644 --- a/src/components/views/messages/TextualBody.tsx +++ b/src/components/views/messages/TextualBody.tsx @@ -232,7 +232,6 @@ export default class TextualBody extends React.Component { ); 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 { // 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; } }