Skip to content

Commit

Permalink
fix: scope highlight rules to .rich-text--wrapper-markdown parent
Browse files Browse the repository at this point in the history 
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
  • Loading branch information
@Antreesy
Antreesy committed Nov 19, 2024
1 parent 6d29b57 commit f8353f7
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 133 deletions.
5 changes: 0 additions & 5 deletions src/components/NcRichText/NcRichText.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
228 changes: 102 additions & 126 deletions src/components/NcRichText/highlight.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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 */
}
}
31 changes: 29 additions & 2 deletions src/components/NcRichText/richtext.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
}
}

0 comments on commit f8353f7

Please sign in to comment.