Repository: kestra-io/kestra
Issue: UI - Alert block in the documentation are not rendered
Labels: bug

### Expected Behavior

When using an alert block in the documentation of a task it should be properly rendered.

### Actual Behaviour

The alert block is not properly rendered.

For example, from the Documentation page:
![image](https://user-images.githubusercontent.com/1819009/235880329-0de1a35e-5699-4e3f-9bce-dabe68fb0cad.png)

And from the editor documentation pane:
![image](https://user-images.githubusercontent.com/1819009/235880583-cd6490d0-471f-454c-b5c1-225d16d2b7a1.png)


### Steps To Reproduce

_No response_

### Environment Information

- Kestra Version: 0.9.0-SNAPSHOT
- Operating System (OS / Docker / Kubernetes):
- Java Version (If not docker):


### Example flow

_No response_

Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 0a2b263357..4b8a9d17a5 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -25,6 +25,7 @@
         "lodash": "4.17.21",
         "markdown-it": "^13.0.1",
         "markdown-it-anchor": "^8.6.6",
+        "markdown-it-container": "^3.0.0",
         "markdown-it-mark": "^3.0.1",
         "markdown-it-meta": "0.0.1",
         "md5": "^2.3.0",
@@ -3007,6 +3008,11 @@
         "markdown-it": "*"
       }
     },
+    "node_modules/markdown-it-container": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-container/-/markdown-it-container-3.0.0.tgz",
+      "integrity": "sha512-y6oKTq4BB9OQuY/KLfk/O3ysFhB3IMYoIWhGJEidXt1NQFocFK2sA2t0NYZAMyMShAGL6x5OPIbrmXPIqaN9rw=="
+    },
     "node_modules/markdown-it-mark": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/markdown-it-mark/-/markdown-it-mark-3.0.1.tgz",
diff --git a/ui/package.json b/ui/package.json
index 0b9ab82a63..697ccd25ac 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -29,6 +29,7 @@
     "markdown-it-anchor": "^8.6.6",
     "markdown-it-mark": "^3.0.1",
     "markdown-it-meta": "0.0.1",
+    "markdown-it-container": "^3.0.0",
     "md5": "^2.3.0",
     "moment": "^2.29.4",
     "moment-range": "4.0.2",
diff --git a/ui/src/components/layout/Markdown.vue b/ui/src/components/layout/Markdown.vue
index 7fd2b18546..d03f11d790 100644
--- a/ui/src/components/layout/Markdown.vue
+++ b/ui/src/components/layout/Markdown.vue
@@ -54,6 +54,18 @@
             font-size: var(--font-size-md);
             font-weight: normal;
         }
+
+        .warning {
+            background-color: var(--el-color-warning-light-9);
+            border: 1px solid var(--el-color-warning-light-5);
+            padding: 8px 16px;
+            color: var(--el-color-warning);
+            border-radius: var(--el-border-radius-base);
+
+            p:last-child {
+                margin-bottom: 0;
+            }
+        }
     }
 
     .markdown-tooltip {
diff --git a/ui/src/utils/markdown.js b/ui/src/utils/markdown.js
index b4262d3230..5915c17e84 100644
--- a/ui/src/utils/markdown.js
+++ b/ui/src/utils/markdown.js
@@ -2,6 +2,7 @@ import markdownIt from "markdown-it";
 import mark from "markdown-it-mark";
 import meta from "markdown-it-meta";
 import anchor from "markdown-it-anchor";
+import container from "markdown-it-container";
 
 export default class Markdown {
     static render(markdown, options) {
@@ -16,6 +17,8 @@ export default class Markdown {
                     placement: "before"
                 }) : undefined
             })
+            // if more alert types are used inside the task documentation, they need to be configured here also
+            .use(container, 'warning')
 
         md.set({
             html: true,
diff --git a/webserver/src/main/java/io/kestra/webserver/controllers/PluginController.java b/webserver/src/main/java/io/kestra/webserver/controllers/PluginController.java
index 7d4b416eab..9c2bac52d6 100644
--- a/webserver/src/main/java/io/kestra/webserver/controllers/PluginController.java
+++ b/webserver/src/main/java/io/kestra/webserver/controllers/PluginController.java
@@ -130,9 +130,13 @@ public HttpResponse<Doc> pluginDocumentation(
             allProperties
         );
 
+        var doc = DocumentationGenerator.render(classPluginDocumentation);
+        doc = doc.replaceAll("\n::alert\\{type=\"(.*)\"\\}\n", "\n::: $1\n");
+        doc = doc.replaceAll("\n::\n", "\n:::\n");
+
         return HttpResponse.ok()
             .body(new Doc(
-                DocumentationGenerator.render(classPluginDocumentation),
+                doc,
                 new Schema(
                     classPluginDocumentation.getPropertiesSchema(),
                     classPluginDocumentation.getOutputsSchema(),


Test patch: