Add new css class for code highlighting

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

cypress/integration/autocompletion.spec.ts

@@ -26,9 +26,7 @@ describe('Autocompletion', () => {
         .should('have.text', '```abnf')
       cy.get('.CodeMirror-code > div:nth-of-type(3) > .CodeMirror-line > span  span')
         .should('have.text', '```')
-      cy.getMarkdownBody()
-        .find('pre > code')
-        .should('exist')
+      cy.getMarkdownBody().find('.code-highlighter').should('exist')
     })
     it('via doubleclick', () => {
       cy.codemirrorFill('```')
@@ -41,9 +39,7 @@ describe('Autocompletion', () => {
         .should('have.text', '```abnf')
       cy.get('.CodeMirror-code > div:nth-of-type(3) > .CodeMirror-line > span  span')
         .should('have.text', '```')
-      cy.getMarkdownBody()
-        .find('pre > code')
-        .should('exist')
+      cy.getMarkdownBody().find('.code-highlighter').should('exist')
     })
   })
 

cypress/integration/highlightedCodeBlock.spec.ts

@@ -5,9 +5,7 @@
  */
 
 const findHljsCodeBlock = () => {
-  return cy.getMarkdownBody()
-           .find('pre > code.hljs')
-           .should('be.visible')
+  return cy.getMarkdownBody().find('.code-highlighter > code.hljs').should('be.visible')
 }
 
 describe('Code', () => {

src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code.scss

@@ -4,14 +4,13 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-.markdown-body {
+.code-highlighter {
   @import '../../../../../../node_modules/highlight.js/styles/github';
 
   body.dark & {
     @import '../../../../../../node_modules/highlight.js/styles/github-dark';
   }
 
-  pre, & {
   code.hljs {
     overflow-x: auto;
     background-color: rgba(27, 31, 35, .05);
@@ -62,5 +61,4 @@
       }
     }
   }
-  }
 }

src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code.tsx

@@ -61,14 +61,14 @@ export const HighlightedCode: React.FC<HighlightedCodeProps> = ({ code, language
   }, [code, language, startLineNumber])
 
   return (
-    <Fragment>
+    <div className={'code-highlighter'}>
       <code className={`hljs ${startLineNumber !== undefined ? 'showGutter' : ''} ${wrapLines ? 'wrapLines' : ''}`}>
         {dom}
       </code>
       <div className={'text-right button-inside'}>
         <CopyToClipboardButton content={code} data-cy='copy-code-button' />
       </div>
-    </Fragment>
+    </div>
   )
 }