From f9369e8177e151db3e6a1e66c866019abd87f6fc Mon Sep 17 00:00:00 2001 From: Tobias Lippert Date: Mon, 13 Jan 2025 12:41:51 +0100 Subject: [PATCH 1/3] use markdown-it plugin to render callouts --- package-lock.json | 13 +++++++++++++ package.json | 1 + .../app/shared/util/markdown.conversion.util.ts | 3 ++- src/main/webapp/content/scss/global.scss | 4 ++++ 4 files changed, 20 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index a543cb1fb222..cc072c934318 100644 --- a/package-lock.json +++ b/package-lock.json @@ -58,6 +58,7 @@ "lodash-es": "4.17.21", "markdown-it": "14.1.0", "markdown-it-class": "1.0.0", + "markdown-it-github-alerts": "^0.3.0", "markdown-it-highlightjs": "4.2.0", "mobile-drag-drop": "3.0.0-rc.0", "monaco-editor": "0.52.2", @@ -16062,6 +16063,18 @@ "integrity": "sha512-CVDYqSgmErLAqInwWu8WmAR2nX6MMIBIt8LB6qg8DNldca9+aoC6ZyuY0lvBMsaTSHNFJRkcHVR1XjLw9nr9qQ==", "license": "MIT" }, + "node_modules/markdown-it-github-alerts": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/markdown-it-github-alerts/-/markdown-it-github-alerts-0.3.0.tgz", + "integrity": "sha512-qyIuDyfdrVGHhY+E/44yMyNA3ZnayaT/KKT2VgkIz1nmrgiuPkdgPUh4YBZwgJ9VKEGJvGd82Ndrc4oGftrJWg==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "markdown-it": "^14.0.0" + } + }, "node_modules/markdown-it-highlightjs": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/markdown-it-highlightjs/-/markdown-it-highlightjs-4.2.0.tgz", diff --git a/package.json b/package.json index d392de262aa4..50b2bbed72da 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "lodash-es": "4.17.21", "markdown-it": "14.1.0", "markdown-it-class": "1.0.0", + "markdown-it-github-alerts": "^0.3.0", "markdown-it-highlightjs": "4.2.0", "mobile-drag-drop": "3.0.0-rc.0", "monaco-editor": "0.52.2", diff --git a/src/main/webapp/app/shared/util/markdown.conversion.util.ts b/src/main/webapp/app/shared/util/markdown.conversion.util.ts index d5166b70d690..ddefdca5dfe7 100644 --- a/src/main/webapp/app/shared/util/markdown.conversion.util.ts +++ b/src/main/webapp/app/shared/util/markdown.conversion.util.ts @@ -6,7 +6,7 @@ import markdownItClass from 'markdown-it-class'; import markdownItKatex from '@vscode/markdown-it-katex'; import markdownItHighlightjs from 'markdown-it-highlightjs'; import TurndownService from 'turndown'; - +import MarkdownItGitHubAlerts from 'markdown-it-github-alerts'; /** * Add these classes to the converted html. */ @@ -72,6 +72,7 @@ export function htmlForMarkdown( .use(markdownItKatex, { enableMathInlineInHtml: true, }) + .use(MarkdownItGitHubAlerts) .use(markdownItClass, classMap); let markdownRender = md.render(markdownText); if (markdownRender.endsWith('\n')) { diff --git a/src/main/webapp/content/scss/global.scss b/src/main/webapp/content/scss/global.scss index 0f0cb5e6705d..227f3f2590e0 100644 --- a/src/main/webapp/content/scss/global.scss +++ b/src/main/webapp/content/scss/global.scss @@ -10,6 +10,10 @@ @import 'node_modules/@siemens/ngx-datatable/themes/bootstrap'; // Needed for emojis in metis reactions @import 'node_modules/@ctrl/ngx-emoji-mart/picker'; +// Needed for markdown-it-github-alerts and markdown callouts +@import 'markdown-it-github-alerts/styles/github-colors-light.css'; +@import 'markdown-it-github-alerts/styles/github-colors-dark-media.css'; +@import 'markdown-it-github-alerts/styles/github-base.css'; // Smooth transition between themes * { From feccb91a4e7311c493884563c27a3096c795f8e4 Mon Sep 17 00:00:00 2001 From: Tobias Lippert Date: Thu, 16 Jan 2025 20:25:49 +0100 Subject: [PATCH 2/3] extend comment --- src/main/webapp/app/shared/util/markdown.conversion.util.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/webapp/app/shared/util/markdown.conversion.util.ts b/src/main/webapp/app/shared/util/markdown.conversion.util.ts index ddefdca5dfe7..07e5640c4207 100644 --- a/src/main/webapp/app/shared/util/markdown.conversion.util.ts +++ b/src/main/webapp/app/shared/util/markdown.conversion.util.ts @@ -66,7 +66,7 @@ export function htmlForMarkdown( md.use(extension); } - // Add default extensions (Code Highlight, Latex) + // Add default extensions (Code Highlight, Latex, Alerts) md.use(markdownItHighlightjs) .use(formulaCompatibilityPlugin.getExtension()) .use(markdownItKatex, { From 371bcd9e74317ce760219c7f0c0bd5697523eebc Mon Sep 17 00:00:00 2001 From: Tobias Lippert Date: Fri, 17 Jan 2025 11:18:53 +0100 Subject: [PATCH 3/3] pin dependency version --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 76a3bfa097e3..2778b13e2a54 100644 --- a/package-lock.json +++ b/package-lock.json @@ -58,7 +58,7 @@ "lodash-es": "4.17.21", "markdown-it": "14.1.0", "markdown-it-class": "1.0.0", - "markdown-it-github-alerts": "^0.3.0", + "markdown-it-github-alerts": "0.3.0", "markdown-it-highlightjs": "4.2.0", "mobile-drag-drop": "3.0.0-rc.0", "monaco-editor": "0.52.2", diff --git a/package.json b/package.json index 2ac409373026..77f09e64b2d4 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ "lodash-es": "4.17.21", "markdown-it": "14.1.0", "markdown-it-class": "1.0.0", - "markdown-it-github-alerts": "^0.3.0", + "markdown-it-github-alerts": "0.3.0", "markdown-it-highlightjs": "4.2.0", "mobile-drag-drop": "3.0.0-rc.0", "monaco-editor": "0.52.2",