fix(css): Move code highlighting CSS to prosemirror.scss

Fixes syntax highlighting in readonly and non-file editors. Signed-off-by: Jonas <[email protected]>
nextcloud · Aug 10, 2023 · d24d262 · d24d262
1 parent 9c786ef
commit d24d262
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 60 deletions.
diff --git 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
@@ -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 {