Merge pull request #4645 from nextcloud/fix/code_syntax_css

fix(css): Move code highlighting CSS to `prosemirror.scss`
nextcloud · Aug 7, 2023 · 267bf3a · 267bf3a
2 parents 44235cb + c4b9f7f
commit 267bf3a
Show file tree

Hide file tree

Showing 16 changed files with 75 additions and 81 deletions.
diff --git a/js/editor.js b/js/editor.js
diff --git a/js/editor.js.map b/js/editor.js.map
diff --git a/js/files-modal.js b/js/files-modal.js
diff --git a/js/files-modal.js.map b/js/files-modal.js.map
diff --git a/js/text-editors.js b/js/text-editors.js
diff --git a/js/text-editors.js.map b/js/text-editors.js.map
diff --git a/js/text-files.js b/js/text-files.js
diff --git a/js/text-files.js.map b/js/text-files.js.map
diff --git a/js/text-public.js b/js/text-public.js
diff --git a/js/text-public.js.map b/js/text-public.js.map
diff --git a/js/text-text.js b/js/text-text.js
diff --git a/js/text-text.js.map b/js/text-text.js.map
diff --git a/js/text-viewer.js b/js/text-viewer.js
diff --git a/js/text-viewer.js.map b/js/text-viewer.js.map
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
@@ -813,66 +813,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 {

diff --git a/src/css/prosemirror.scss b/src/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 {