feat(NcRichText): highlight code syntax if language provided

Signed-off-by: Maksim Sukharev <[email protected]>

jest.config.js

@@ -15,6 +15,7 @@ const ignorePatterns = [
 	'hast-*',
 	'is-*',
 	'longest-streak', // ESM dependency of remark-gfm
+	'lowlight', // ESM dependency of rehype-highlight
 	'markdown-table', // ESM dependency of remark-gfm
 	'mdast-util-*',
 	'micromark',

src/components/NcRichText/NcRichText.vue

@@ -65,7 +65,7 @@ textarea {
 ### Flavored Markdown
 
 This component can support [Github Flavored Markdown](https://github.github.com/gfm/).
-It adds such elements, as tables, task lists, strikethrough, and supports autolinks by default
+It adds such elements, as tables, task lists, strikethrough, and supports code syntax highlighting and autolinks by default
 
 It is also possible to make a rendered content interactive and listen for events
 
@@ -94,6 +94,17 @@ It is also possible to make a rendered content interactive and listen for events
 Table header | Column A | Column B
 -- | -- | --
 Table row | value A | value B
+
+---
+
+\`\`\`js
+const GenRandomId = (length) => {
+\treturn Math.random()
+\t\t.toString(36)
+\t\t.replace(/[^a-z]+/g, '')
+\t\t.slice(0, length || 5)
+}
+\`\`\`
 `,
 			}
 		},
@@ -105,7 +116,7 @@ Table row | value A | value B
 					return
 				}
 				let checkBoxIndex = 0
-				lines = this.text.split('\n')
+				let lines = this.text.split('\n')
 				for (let i = 0; i < lines.length; i++) {
 					if (lines[i].includes('[ ]') || lines[i].includes('[x]')) {
 						if (checkBoxIndex === index) {
@@ -302,6 +313,7 @@ import remarkParse from 'remark-parse'
 import remarkGfm from 'remark-gfm'
 import breaks from 'remark-breaks'
 import remark2rehype from 'remark-rehype'
+import rehypeHighlight from 'rehype-highlight'
 import rehype2react from 'rehype-react'
 import rehypeExternalLinks from 'rehype-external-links'
 import { RouterLink } from 'vue-router'
@@ -447,6 +459,7 @@ export default {
 						},
 					},
 				})
+				.use(this.useExtendedMarkdown ? rehypeHighlight : undefined)
 				// .use(rehypeAddClasses, this.markdownCssClasses)
 				.use(remarkPlaceholder)
 				.use(rehypeExternalLinks, {
@@ -564,6 +577,11 @@ 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';

src/components/NcRichText/highlight.scss

@@ -0,0 +1,195 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/**
+* Colors and class selectors are extracted from source code of:
+* - library: highlight.js (v11.10.0)
+* - light theme: highlight.js/styles/github.css
+* - dark theme: highlight.js/styles/github-dark.css
+* and reworked to use with Nextcloud dark and light theme
+*/
+
+@mixin highlight-light-colors {
+	--hljs-color: #24292e;
+	--hljs-background-color: #ffffff;
+	--hljs-syntax-keyword-color: #d73a49;
+	--hljs-syntax-entity-color: #6f42c1;
+	--hljs-syntax-constant-color: #005cc5;
+	--hljs-syntax-string-color: #032f62;
+	--hljs-syntax-variable-color: #e36209;
+	--hljs-syntax-comment-color: #6a737d;
+	--hljs-syntax-entity-tag-color: #22863a;
+	--hljs-syntax-storage-modifier-import-color: #24292e;
+	--hljs-syntax-markup-heading-color: #005cc5;
+	--hljs-syntax-markup-list-color: #735c0f;
+	--hljs-syntax-markup-italic-color: #24292e;
+	--hljs-syntax-markup-bold-color: #24292e;
+	--hljs-syntax-markup-inserted-color: #22863a;
+	--hljs-syntax-markup-inserted-background-color: #f0fff4;
+	--hljs-syntax-markup-deleted-color: #b31d28;
+	--hljs-syntax-markup-deleted-background-color: #ffeef0;
+}
+
+@mixin highlight-dark-colors {
+	--hljs-color: #c9d1d9;
+	--hljs-background-color: #0d1117;
+	--hljs-syntax-keyword-color: #ff7b72;
+	--hljs-syntax-entity-color: #d2a8ff;
+	--hljs-syntax-constant-color: #79c0ff;
+	--hljs-syntax-string-color: #a5d6ff;
+	--hljs-syntax-variable-color: #ffa657;
+	--hljs-syntax-comment-color: #8b949e;
+	--hljs-syntax-entity-tag-color: #7ee787;
+	--hljs-syntax-storage-modifier-import-color: #c9d1d9;
+	--hljs-syntax-markup-heading-color: #1f6feb;
+	--hljs-syntax-markup-list-color: #f2cc60;
+	--hljs-syntax-markup-italic-color: #c9d1d9;
+	--hljs-syntax-markup-bold-color: #c9d1d9;
+	--hljs-syntax-markup-inserted-color: #aff5b4;
+	--hljs-syntax-markup-inserted-background-color: #033a16;
+	--hljs-syntax-markup-deleted-color: #ffdcd7;
+	--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;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		@include highlight-dark-colors;
+	}
+	[data-theme-light] {
+		@include highlight-light-colors;
+	}
+}
+
+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-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-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-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-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-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-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-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+	/* purposely ignored */
+}