[dev-v5] Add markdown shortcuts [!NOTE], [!TIP] and [!WARNING] (#3770)

* Add [!NOTE] [!TIP] [!WARNING]

* Update md files

---------

Co-authored-by: Vincent Baaij <[email protected]>

Author: dvoituron

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Dialog/FluentDialog.md

@@ -72,7 +72,7 @@ It is then retrieved in the `DialogResult` like in the example below.
 }
 ```
 
-> **Note:**  
+> [!NOTE]
 > 1. The `FluentDialogBody` component is required to display the dialog window correctly.
 > 2. ⚠️ If you override the `OnInitializedAsync` method, **you must call** the `base.OnInitializedAsync()` method,
 >    in addition to your personalized code.

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Dialog/FluentDrawer.md

@@ -23,7 +23,8 @@ Once the user closes the dialog window, the `ShowDrawerAsync` method returns a `
 
 👉 See the [Dialog](/Dialog) documentation for more information.
 
-> **Note:** The `ShowDrawerAsync` method is identical to the `ShowDialogAsync` method.
+> [!NOTE]
+> The `ShowDrawerAsync` method is identical to the `ShowDialogAsync` method.
 > With the exception of the **default value** of the `options.Alignment` property, which is `DialogAlignment.End`.
 > And the resulting HTML code is slightly different, using a `fluent-drawer` instead of a `fluent-dialog`.
 > The visual rendering and animation of opening and closing is also different.

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Field/FluentField.md

@@ -64,7 +64,7 @@ the default text and icon (or add an icon in the case of `MessageState = null`).
 
 {{ FieldStatesExample }}
 
-⚠️ **Note** that the `MessageCondition` attribute must be set to
+[!NOTE] that the `MessageCondition` attribute must be set to
 `(i) => true` or identical to `FluentFieldCondition.Always`.
 This enables the message to be displayed, which is not the case by default.
 

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Layout/FluentLayout.md

@@ -42,7 +42,7 @@ using the [@container](https://developer.mozilla.org/en-US/docs/Web/CSS/@contain
 
 Each time the breakpoint is reached, the layout will be updated to reflect the new layout, and the event `OnBreakpointEnter` will be triggered.
 
-**💡 Note**: The `FluentLayout` component can be used with a Blazor static web app or a Blazor interactive app.
+[!TIP] The `FluentLayout` component can be used with a Blazor static web app or a Blazor interactive app.
 The hamburger menu is available in all modes, but the event `OnBreakpointEnter` and the `MenuDeferredLoading` parameter are only available in "interactive mode".
 
 ## Sticky Panels

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Tabs/FluentTabs.md

@@ -13,7 +13,7 @@ and require less scrolling.
 For navigation beyond closely related categories, use a [FluentLink](/link) instead.
 To initiate an action, use a [FluentButton](/button) instead.
 
-> **note**: For the moment, there are no 'scrolling' functions when the number of tabs is too large
+> [!NOTE] For the moment, there are no 'scrolling' functions when the number of tabs is too large
 > in relation to the size of the container or screen.
 
 ## Default

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Localization.md

@@ -44,8 +44,7 @@ Here's a step-by-step guide:
     }
     ```
 
-   > **Note:**
-   >
+   > [!NOTE]   
    > The list of keys can be found in the `Core\Microsoft.FluentUI.AspNetCore.Components\Localization\LanguageResource.resx` file.  
    > Or you can use a constant from the `Microsoft.FluentUI.AspNetCore.Components.Localization.LanguageResource` class.
    > Example: `Localization.LanguageResource.MessageBox_ButtonOk`.

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/CopilotInstructionsContent.md

@@ -12,8 +12,7 @@ Example benefits:
 - Migrate complete file following new namespacing and new parameters
 - Renaming old names from v3-v4 to v5
 
-> ⚠️ Note
->
+> [!NOTE]
 > - This feature is currently in public preview and is subject to change.
 > - Custom instructions are currently only supported for **Copilot Chat** in **VS Code** and **Visual Studio**.
 

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationFluentProgressRing.md

@@ -7,7 +7,7 @@ hidden: true
 The component itself has been renamed from `FluentProgressRing` to `FluentSpinner`
 to be coherent with the Web Components and React naming conventions.
 
-> **Note:** The new component `FluentSpinner` cannot be paused. It must always be spinning.
+> [!NOTE] The new component `FluentSpinner` cannot be paused. It must always be spinning.
 > So, the `Paused`, `Min`, `Max`, `Value` properties has been removed.
 
 ### New properties

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Styles.md

@@ -54,7 +54,7 @@ If you are creating a site by using our [Templates package](https://www.fluentui
 this is already set up for you.
 You can <a href="/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" target="_blank">download the file</a> to see what's inside.
 
-> **Note**: It is entirely possible to build a site **without using Reboot** but you will have to do more styling yourself.
+> [!NOTE] It is entirely possible to build a site **without using Reboot** but you will have to do more styling yourself.
 
 ## Approach
 

examples/Tools/FluentUI.Demo.DocViewer/Components/MarkdownViewer.razor.css

@@ -50,8 +50,35 @@
     border-left: 6px solid var(--colorBrandBackground);
   }
 
-  /* Code */
+  /* Keywords */
+  .doc-viewer ::deep span[keyword] {
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    column-gap: 4px;
+  }
+
+  .doc-viewer ::deep blockquote:has(span[keyword="note"]) {
+    background-color: var(--colorBrandBackground2);
+    border-left: 6px solid var(--colorBrandBackground);
+  }
+
+  .doc-viewer ::deep blockquote:has(span[keyword="tip"]) {
+    background-color: var(--colorPaletteDarkGreenBackground2);
+    border-left: 6px solid var(--colorPaletteDarkGreenBorderActive);
+  }
+
+  .doc-viewer ::deep blockquote:has(span[keyword="warn"]) {
+    background-color: var(--colorPaletteGoldBackground2);
+    border-left: 6px solid var(--colorPaletteGoldBorderActive);
+  }
 
+    .doc-viewer ::deep span[keyword] svg {
+      fill: var(--colorNeutralForeground1);
+      width: 20px;
+      height: 20px;
+    }
+  /* Code */
   .doc-viewer ::deep code {
     font-weight: 500;
     background-color: var(--colorNeutralBackground5);
@@ -87,9 +114,7 @@
         .doc-viewer ::deep pre code[source][class*="hljs"] {
           display: block;
         }
-
   /* Demo Section */
-
   .doc-viewer ::deep .demo-tabs {
     min-height: 100px;
   }
@@ -100,9 +125,7 @@
     padding: 16px 16px;
     margin: 8px 0px;
   }
-
   /* API Summary */
-
   .doc-viewer ::deep .api-summary {
     background-color: var(--colorNeutralBackground4);
     max-width: calc(100vw - 32px);
@@ -112,9 +135,7 @@
     .doc-viewer ::deep .api-summary * {
       margin: 0px;
     }
-
   /* API table */
-
   .doc-viewer ::deep .api-table {
     width: 100%;
     max-width: calc(100vw - 32px);
@@ -170,7 +191,6 @@
         width: 20px;
         height: 20px;
       }
-
     /* No Columns, for Methods view (same styles as Mobile */
     .doc-viewer ::deep .api-table[no-col] tr {
       display: flex;
@@ -179,8 +199,7 @@
       margin-bottom: 10px;
     }
 
-    .doc-viewer ::deep .api-table[no-col] td,
-    .doc-viewer ::deep .api-table[no-col] th {
+    .doc-viewer ::deep .api-table[no-col] td, .doc-viewer ::deep .api-table[no-col] th {
       display: none;
       flex-wrap: wrap;
       white-space: normal;
@@ -204,9 +223,7 @@
         display: block;
         margin-left: 24px;
       }
-
 /* Mobile */
-
 @media(max-width: 768px) {
 
   .doc-viewer ::deep .api-table tr {

examples/Tools/FluentUI.Demo.DocViewer/Models/Section.cs

@@ -133,7 +133,7 @@ public Task<Section> ReadAsync(string content)
         // Text / HTML section
         else
         {
-            Value = content;
+            Value = ReplaceMarkupKeyWord(content);
             Type = SectionType.Html;
             Arguments = new Dictionary<string, string>();
         }
@@ -173,4 +173,23 @@ private static (string Name, Dictionary<string, string> Arguments) ParseComponen
 
         return (componentName, dict);
     }
+
+    /// <summary />
+    private static string ReplaceMarkupKeyWord(string content)
+    {
+        const string NOTE_ICON = "<svg viewBox=\"0 0 16 16\"><path d=\"M8 2a6 6 0 1 1 0 12A6 6 0 0 1 8 2Zm0 1a5 5 0 1 0 0 10A5 5 0 0 0 8 3Zm0 7a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Zm0-5.5a.5.5 0 0 1 .5.41V8.5a.5.5 0 0 1-1 .09V5c0-.28.22-.5.5-.5Z\" /></svg>";
+        const string WARN_ICON = NOTE_ICON;
+        const string TIP_ICON = "<svg viewBox=\"0 0 16 16\"><path d=\"M4.5 6.5A3.5 3.5 0 1 1 10.45 9c-.19.19-.36.43-.44.73L9.66 11H6.34l-.35-1.27c-.08-.3-.25-.54-.44-.73A3.49 3.49 0 0 1 4.5 6.5ZM6.6 12h2.8l-.18.63a.5.5 0 0 1-.48.37H7.26a.5.5 0 0 1-.48-.37L6.61 12ZM8 2a4.5 4.5 0 0 0-3.16 7.7c.1.1.16.2.19.3l.79 2.9c.17.65.77 1.1 1.44 1.1h1.48a1.5 1.5 0 0 0 1.44-1.1l.8-2.9c.02-.1.08-.2.18-.3A4.49 4.49 0 0 0 8 2Z\" /></svg>";
+
+        content = Regex.Replace(content, @"\[!NOTE\]", $"<span keyword=\"note\">{NOTE_ICON}Note</span>", RegexOptions.IgnoreCase);
+        content = Regex.Replace(content, @"\[!NOTE_ICON\]", $"<span keyword=\"note\">{NOTE_ICON}</span>", RegexOptions.IgnoreCase);
+
+        content = Regex.Replace(content, @"\[!WARNING\]", $"<span keyword=\"warn\">{WARN_ICON}Warning</span>", RegexOptions.IgnoreCase);
+        content = Regex.Replace(content, @"\[!WARNING_ICON\]", $"<span keyword=\"warn\">{WARN_ICON}</span>", RegexOptions.IgnoreCase);
+
+        content = Regex.Replace(content, @"\[!TIP\]", $"<span keyword=\"tip\">{TIP_ICON}Tip</span>", RegexOptions.IgnoreCase);
+        content = Regex.Replace(content, @"\[!TIP_ICON\]", $"<span keyword=\"tip\">{TIP_ICON}</span>", RegexOptions.IgnoreCase);
+
+        return content;
+    }
 }