From d24d262bb2e95770e5d0cf54c313ef18e8054a2e Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Mon, 7 Aug 2023 14:53:46 +0200
Subject: [PATCH] fix(css): Move code highlighting CSS to `prosemirror.scss`

Fixes syntax highlighting in readonly and non-file editors.

Signed-off-by: Jonas <jonas@freesources.org>
---
 css/prosemirror.scss      | 54 +++++++++++++++++++++++++++++++++++
 src/components/Editor.vue | 60 ---------------------------------------
 2 files changed, 54 insertions(+), 60 deletions(-)

diff --git a/css/prosemirror.scss b/css/prosemirror.scss
index 0f57b5821cd..ff1be29c6f3 100644
--- a/css/prosemirror.scss
+++ b/css/prosemirror.scss
@@ -174,6 +174,60 @@ div.ProseMirror {
 		border-radius: var(--border-radius);
 		padding: 1em 1.3em;
 		margin-bottom: 1em;
+
+		&::before {
+			content: attr(data-language);
+			text-transform: uppercase;
+			display: block;
+			text-align: right;
+			font-weight: bold;
+			font-size: 0.6rem;
+		}
+		code {
+			.hljs-comment,
+			.hljs-quote {
+				color: #999999;
+			}
+			.hljs-variable,
+			.hljs-template-variable,
+			.hljs-attribute,
+			.hljs-tag,
+			.hljs-name,
+			.hljs-regexp,
+			.hljs-link,
+			.hljs-selector-id,
+			.hljs-selector-class {
+				color: #f2777a;
+			}
+			.hljs-number,
+			.hljs-meta,
+			.hljs-built_in,
+			.hljs-builtin-name,
+			.hljs-literal,
+			.hljs-type,
+			.hljs-params {
+				color: #f99157;
+			}
+			.hljs-string,
+			.hljs-symbol,
+			.hljs-bullet {
+				color: #99cc99;
+			}
+			.hljs-title,
+			.hljs-section {
+				color: #ffcc66;
+			}
+			.hljs-keyword,
+			.hljs-selector-tag {
+				color: #6699cc;
+			}
+			.hljs-emphasis {
+				font-style: italic;
+			}
+			.hljs-strong {
+				font-weight: 700;
+			}
+		}
 	}
 
 	pre.frontmatter {
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 72cdcbc544b..041107c7bb2 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -810,66 +810,6 @@ export default {
 	.text-editor__wrapper {
 		@import './../../css/prosemirror';
 
-		.ProseMirror {
-			pre {
-				background-color: var(--color-main-background);
-
-				&::before {
-					content: attr(data-language);
-					text-transform: uppercase;
-					display: block;
-					text-align: right;
-					font-weight: bold;
-					font-size: 0.6rem;
-				}
-				code {
-					.hljs-comment,
-					.hljs-quote {
-						color: #999999;
-					}
-					.hljs-variable,
-					.hljs-template-variable,
-					.hljs-attribute,
-					.hljs-tag,
-					.hljs-name,
-					.hljs-regexp,
-					.hljs-link,
-					.hljs-selector-id,
-					.hljs-selector-class {
-						color: #f2777a;
-					}
-					.hljs-number,
-					.hljs-meta,
-					.hljs-built_in,
-					.hljs-builtin-name,
-					.hljs-literal,
-					.hljs-type,
-					.hljs-params {
-						color: #f99157;
-					}
-					.hljs-string,
-					.hljs-symbol,
-					.hljs-bullet {
-						color: #99cc99;
-					}
-					.hljs-title,
-					.hljs-section {
-						color: #ffcc66;
-					}
-					.hljs-keyword,
-					.hljs-selector-tag {
-						color: #6699cc;
-					}
-					.hljs-emphasis {
-						font-style: italic;
-					}
-					.hljs-strong {
-						font-weight: 700;
-					}
-				}
-			}
-		}
-
 		// relative position for the alignment of the menububble
 		.text-editor__main {
 			&.draggedOver {