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()
+      cy.getMarkdownBody().find('.code-highlighter').should('exist')
-        .find('pre > code')
-        .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()
+      cy.getMarkdownBody().find('.code-highlighter').should('exist')
-        .find('pre > code')
-        .should('exist')
     })
   })
 

cypress/integration/highlightedCodeBlock.spec.ts

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

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

@@ -4,62 +4,60 @@
  * 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 {
-    code.hljs {
+    overflow-x: auto;
-      overflow-x: auto;
+    background-color: rgba(27, 31, 35, .05);
-      background-color: rgba(27, 31, 35, .05);
 
-      body.dark & {
+    body.dark & {
-        background-color: rgb(27, 31, 35);
+      background-color: rgb(27, 31, 35);
+    }
+
+    body.dark &, & {
+      padding: 16px;
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+
+      .codeline {
+        grid-column: 2;
+        white-space: pre;
       }
 
-      body.dark &, & {
+      .linenumber {
-        padding: 16px;
+        grid-column: 1;
-        display: grid;
+        position: relative;
-        grid-template-columns: auto minmax(0, 1fr);
+        cursor: default;
-
+        z-index: 4;
-        .codeline {
+        padding: 0 8px 0 0;
-          grid-column: 2;
+        min-width: 20px;
-          white-space: pre;
+        box-sizing: content-box;
-        }
+        color: #afafaf;
+        border-right: 3px solid #6ce26c;
+        flex-direction: column;
+        overflow: hidden;
+        user-select: none;
+        align-items: flex-end;
+        display: none;
+      }
 
+      &.showGutter {
         .linenumber {
-          grid-column: 1;
+          display: flex;
-          position: relative;
-          cursor: default;
-          z-index: 4;
-          padding: 0 8px 0 0;
-          min-width: 20px;
-          box-sizing: content-box;
-          color: #afafaf;
-          border-right: 3px solid #6ce26c;
-          flex-direction: column;
-          overflow: hidden;
-          user-select: none;
-          align-items: flex-end;
-          display: none;
         }
+      }
 
-        &.showGutter {
+      &.showGutter .codeline {
-          .linenumber {
+        margin: 0 0 0 16px;
-            display: flex;
+      }
-          }
-        }
 
-        &.showGutter .codeline {
+      &.wrapLines .codeline {
-          margin: 0 0 0 16px;
+        white-space: pre-wrap;
-        }
-
-        &.wrapLines .codeline {
-          white-space: pre-wrap;
-        }
       }
     }
   }

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>
   )
 }