General: Add support for markdown callouts (#10158)

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",

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.
  */
@@ -66,12 +66,13 @@ 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, {
             enableMathInlineInHtml: true,
         })
+        .use(MarkdownItGitHubAlerts)
         .use(markdownItClass, classMap);
     let markdownRender = md.render(markdownText);
     if (markdownRender.endsWith('\n')) {

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
 * {