From f8353f70d2c894946fa4445c17304a16eb9115c6 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Wed, 13 Nov 2024 18:25:03 +0100
Subject: [PATCH] fix: scope highlight rules to .rich-text--wrapper-markdown
 parent

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/NcRichText/NcRichText.vue |   5 -
 src/components/NcRichText/highlight.scss | 228 ++++++++++-------------
 src/components/NcRichText/richtext.scss  |  31 ++-
 3 files changed, 131 insertions(+), 133 deletions(-)

diff --git a/src/components/NcRichText/NcRichText.vue b/src/components/NcRichText/NcRichText.vue
index 004bbf2b4d..f3006fed90 100644
--- a/src/components/NcRichText/NcRichText.vue
+++ b/src/components/NcRichText/NcRichText.vue
@@ -577,11 +577,6 @@ export default {
 	},
 }
 </script>
-<style lang="scss">
-/* stylelint-disable-next-line scss/at-import-partial-extension */
-@import './highlight.scss';
-</style>
-
 <style lang="scss" scoped>
 /* stylelint-disable-next-line scss/at-import-partial-extension */
 @import './richtext.scss';
diff --git a/src/components/NcRichText/highlight.scss b/src/components/NcRichText/highlight.scss
index 1fb027d80b..4cde8c69a4 100644
--- a/src/components/NcRichText/highlight.scss
+++ b/src/components/NcRichText/highlight.scss
@@ -12,8 +12,8 @@
 */
 
 @mixin highlight-light-colors {
-	--hljs-color: #24292e;
-	--hljs-background-color: #ffffff;
+	--hljs-color: var(--color-main-text, #24292e);
+	--hljs-background-color: var(--color-background-dark, #ffffff);
 	--hljs-syntax-keyword-color: #d73a49;
 	--hljs-syntax-entity-color: #6f42c1;
 	--hljs-syntax-constant-color: #005cc5;
@@ -33,8 +33,8 @@
 }
 
 @mixin highlight-dark-colors {
-	--hljs-color: #c9d1d9;
-	--hljs-background-color: #0d1117;
+	--hljs-color: var(--color-main-text, #c9d1d9);
+	--hljs-background-color: var(--color-background-dark, #0d1117);
 	--hljs-syntax-keyword-color: #ff7b72;
 	--hljs-syntax-entity-color: #d2a8ff;
 	--hljs-syntax-constant-color: #79c0ff;
@@ -53,143 +53,119 @@
 	--hljs-syntax-markup-deleted-background-color: #67060c;
 }
 
-:root {
-	@include highlight-light-colors;
-}
-
-[data-theme-dark] {
-	@include highlight-dark-colors;
-}
-
-@media (prefers-color-scheme: light) {
-	:root {
-		@include highlight-light-colors;
-	}
-	[data-theme-dark] {
-		@include highlight-dark-colors;
+@mixin highlight-rules {
+	pre:has(.hljs) {
+		color: var(--hljs-color);
+		background: var(--hljs-background-color);
 	}
-}
 
-@media (prefers-color-scheme: dark) {
-	:root {
-		@include highlight-dark-colors;
-	}
-	[data-theme-light] {
-		@include highlight-light-colors;
+	.hljs-doctag,
+	.hljs-keyword,
+	.hljs-meta .hljs-keyword,
+	.hljs-template-tag,
+	.hljs-template-variable,
+	.hljs-type,
+	.hljs-variable.language_ {
+		/* prettylights-syntax-keyword */
+		color: var(--hljs-syntax-keyword-color);
 	}
-}
-
-pre:has(.hljs) {
-	color: var(--color-main-text, var(--hljs-color));
-	background: var(--color-background-dark, var(--hljs-background-color));
-}
 
-.hljs-doctag,
-.hljs-keyword,
-.hljs-meta .hljs-keyword,
-.hljs-template-tag,
-.hljs-template-variable,
-.hljs-type,
-.hljs-variable.language_ {
-	/* prettylights-syntax-keyword */
-	color: var(--hljs-syntax-keyword-color);
-}
-
-.hljs-title,
-.hljs-title.class_,
-.hljs-title.class_.inherited__,
-.hljs-title.function_ {
-	/* prettylights-syntax-entity */
-	color: var(--hljs-syntax-entity-color)
-}
+	.hljs-title,
+	.hljs-title.class_,
+	.hljs-title.class_.inherited__,
+	.hljs-title.function_ {
+		/* prettylights-syntax-entity */
+		color: var(--hljs-syntax-entity-color)
+	}
 
-.hljs-attr,
-.hljs-attribute,
-.hljs-literal,
-.hljs-meta,
-.hljs-number,
-.hljs-operator,
-.hljs-variable,
-.hljs-selector-attr,
-.hljs-selector-class,
-.hljs-selector-id {
-	/* prettylights-syntax-constant */
-	color: var(--hljs-syntax-constant-color);
-}
+	.hljs-attr,
+	.hljs-attribute,
+	.hljs-literal,
+	.hljs-meta,
+	.hljs-number,
+	.hljs-operator,
+	.hljs-variable,
+	.hljs-selector-attr,
+	.hljs-selector-class,
+	.hljs-selector-id {
+		/* prettylights-syntax-constant */
+		color: var(--hljs-syntax-constant-color);
+	}
 
-.hljs-regexp,
-.hljs-string,
-.hljs-meta .hljs-string {
-	/* prettylights-syntax-string */
-	color: var(--hljs-syntax-string-color);
-}
+	.hljs-regexp,
+	.hljs-string,
+	.hljs-meta .hljs-string {
+		/* prettylights-syntax-string */
+		color: var(--hljs-syntax-string-color);
+	}
 
-.hljs-built_in,
-.hljs-symbol {
-	/* prettylights-syntax-variable */
-	color: var(--hljs-syntax-variable-color);
-}
+	.hljs-built_in,
+	.hljs-symbol {
+		/* prettylights-syntax-variable */
+		color: var(--hljs-syntax-variable-color);
+	}
 
-.hljs-comment,
-.hljs-code,
-.hljs-formula {
-	/* prettylights-syntax-comment */
-	color: var(--hljs-syntax-comment-color);
-}
+	.hljs-comment,
+	.hljs-code,
+	.hljs-formula {
+		/* prettylights-syntax-comment */
+		color: var(--hljs-syntax-comment-color);
+	}
 
-.hljs-name,
-.hljs-quote,
-.hljs-selector-tag,
-.hljs-selector-pseudo {
-	/* prettylights-syntax-entity-tag */
-	color: var(--hljs-syntax-entity-tag-color);
-}
+	.hljs-name,
+	.hljs-quote,
+	.hljs-selector-tag,
+	.hljs-selector-pseudo {
+		/* prettylights-syntax-entity-tag */
+		color: var(--hljs-syntax-entity-tag-color);
+	}
 
-.hljs-subst {
-	/* prettylights-syntax-storage-modifier-import */
-	color: var(--hljs-syntax-storage-modifier-import-color);
-}
+	.hljs-subst {
+		/* prettylights-syntax-storage-modifier-import */
+		color: var(--hljs-syntax-storage-modifier-import-color);
+	}
 
-.hljs-section {
-	/* prettylights-syntax-markup-heading */
-	color: var(--hljs-syntax-markup-heading-color);
-	font-weight: bold
-}
+	.hljs-section {
+		/* prettylights-syntax-markup-heading */
+		color: var(--hljs-syntax-markup-heading-color);
+		font-weight: bold
+	}
 
-.hljs-bullet {
-	/* prettylights-syntax-markup-list */
-	color: var(--hljs-syntax-markup-list-color);
-}
+	.hljs-bullet {
+		/* prettylights-syntax-markup-list */
+		color: var(--hljs-syntax-markup-list-color);
+	}
 
-.hljs-emphasis {
-	/* prettylights-syntax-markup-italic */
-	color: var(--hljs-syntax-markup-italic-color);
-	font-style: italic
-}
+	.hljs-emphasis {
+		/* prettylights-syntax-markup-italic */
+		color: var(--hljs-syntax-markup-italic-color);
+		font-style: italic
+	}
 
-.hljs-strong {
-	/* prettylights-syntax-markup-bold */
-	color: var(--hljs-syntax-markup-bold-color);
-	font-weight: bold
-}
+	.hljs-strong {
+		/* prettylights-syntax-markup-bold */
+		color: var(--hljs-syntax-markup-bold-color);
+		font-weight: bold
+	}
 
-.hljs-addition {
-	/* prettylights-syntax-markup-inserted */
-	color: var(--hljs-syntax-markup-inserted-color);
-	background-color: var(--hljs-syntax-markup-inserted-background-color);
-}
+	.hljs-addition {
+		/* prettylights-syntax-markup-inserted */
+		color: var(--hljs-syntax-markup-inserted-color);
+		background-color: var(--hljs-syntax-markup-inserted-background-color);
+	}
 
-.hljs-deletion {
-	/* prettylights-syntax-markup-deleted */
-	color: var(--hljs-syntax-markup-deleted-color);
-	background-color: var(--hljs-syntax-markup-deleted-background-color);
-}
+	.hljs-deletion {
+		/* prettylights-syntax-markup-deleted */
+		color: var(--hljs-syntax-markup-deleted-color);
+		background-color: var(--hljs-syntax-markup-deleted-background-color);
+	}
 
-.hljs-char.escape_,
-.hljs-link,
-.hljs-params,
-.hljs-property,
-.hljs-punctuation,
-.hljs-tag {
-	/* purposely ignored */
+	.hljs-char.escape_,
+	.hljs-link,
+	.hljs-params,
+	.hljs-property,
+	.hljs-punctuation,
+	.hljs-tag {
+		/* purposely ignored */
+	}
 }
diff --git a/src/components/NcRichText/richtext.scss b/src/components/NcRichText/richtext.scss
index 9f758712f7..08cde0dcf2 100644
--- a/src/components/NcRichText/richtext.scss
+++ b/src/components/NcRichText/richtext.scss
@@ -2,11 +2,13 @@
  * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
- 
- /**
+
+/**
  * Styles are extracted to extract scss to dist folder, too.
  */
 
+@import './highlight.scss';
+
 li.task-list-item > ul,
 li.task-list-item > ol,
 li.task-list-item > li,
@@ -216,3 +218,28 @@ li.task-list-item > pre {
 		color: var(--color-text-lighter);
 	}
 }
+
+/**
+* Highlight code syntax in code blocks
+*/
+.rich-text--wrapper-markdown {
+	@include highlight-rules;
+}
+
+@media (prefers-color-scheme: light) {
+	.rich-text--wrapper-markdown {
+		@include highlight-light-colors;
+	}
+	[data-theme-dark] .rich-text--wrapper-markdown {
+		@include highlight-dark-colors;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.rich-text--wrapper-markdown {
+		@include highlight-dark-colors;
+	}
+	[data-theme-light] .rich-text--wrapper-markdown {
+		@include highlight-light-colors;
+	}
+}