Fix conflicting CSS on syntax highlighted blocks (#6991)

Fixes https://github.com/vector-im/element-web/issues/19445
This commit is contained in:
David Baker 2021-10-19 18:43:29 +01:00 committed by RiotRobot
parent 10ed592a55
commit b16af66fe2
2 changed files with 5 additions and 6 deletions

View file

@ -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

View file

@ -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;
}
}