Add support for markdown > alerts via markdig (#10173)

Add support for markdown > alerts via markdig

Author: kzu

Directory.Packages.props

@@ -33,7 +33,7 @@
     <PackageVersion Include="LibGit2Sharp" Version="0.26.0" />
     <PackageVersion Include="Lucene.Net.Contrib" Version="3.0.3" />
     <PackageVersion Include="Lucene.Net" Version="3.0.3" />
-    <PackageVersion Include="Markdig.Signed" Version="0.30.2" />
+    <PackageVersion Include="Markdig.Signed" Version="0.37.0" />
     <PackageVersion Include="MicroBuild.Core" Version="0.3.0" />
     <PackageVersion Include="Microsoft.ApplicationInsights.AspNetCore" Version="2.21.0" />
     <PackageVersion Include="Microsoft.ApplicationInsights.TraceListener" Version="2.21.0" />

src/Bootstrap/dist/css/bootstrap.css

@@ -72,6 +72,9 @@
   .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
 }
 
+.alert-primary {
+  .alert-variant(@alert-primary-bg; @alert-primary-border; @alert-primary-text);
+}
 
 .alert-brand-a {
   a {

src/Bootstrap/less/alerts.less

@@ -648,6 +648,9 @@
 @alert-danger-text:           #000;
 @alert-danger-border:         #fde7e9;
 
+@alert-primary-bg:             #EFD9FD;
+@alert-primary-text:           #000;
+@alert-primary-border:         #EFD9FD;
 
 //== Progress bars
 //

src/Bootstrap/less/variables.less

@@ -7,6 +7,10 @@
 /*
   Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license
 */
+.markdown-alert > p {
+  color: unset !important;
+}
+
 @keyframes ms-motion-fadeIn {
   from {
     opacity: 0;

src/NuGetGallery/Content/gallery/css/fabric.css

@@ -231,6 +231,7 @@ private RenderedMarkdownResult GetHtmlFromMarkdownMarkdig(string markdownString,
                 .UseTaskLists()
                 .UseEmojiAndSmiley()
                 .UseAutoLinks()
+                .UseAlertBlocks()
                 .UseReferralLinks("noopener noreferrer nofollow")
                 .UseAutoIdentifiers()
                 .UseEmphasisExtras(EmphasisExtraOptions.Strikethrough)

src/NuGetGallery/Services/MarkdownService.cs

@@ -151,7 +151,7 @@ public void ConvertsMarkdownToHtmlWithoutImageDisaplyed(bool isMarkdigMdRenderin
             }
 
             [Fact]
-            public void TestToHtmlWithPipeTable() 
+            public void TestToHtmlWithPipeTable()
             {
                 var originalMd = @"a | b
 -- | -
@@ -263,6 +263,20 @@ public void TestToHtmlWithAutoIdentifiers(string originalMd, string expectedHtml
                 var readMeResult = _markdownService.GetHtmlFromMarkdown(originalMd);
                 Assert.Equal(expectedHtml, readMeResult.Content);
             }
+
+            [Theory]
+            [InlineData("> [!NOTE]\n> This is a note", "<div class=\"markdown-alert markdown-alert-note alert alert-primary\">\n<p class=\"mb-0\">This is a note</p>\n</div>")]
+            [InlineData("> [!TIP]\n> This is a tip", "<div class=\"markdown-alert markdown-alert-tip alert alert-success\">\n<p class=\"mb-0\">This is a tip</p>\n</div>")]
+            [InlineData("> [!IMPORTANT]\n> This is a important", "<div class=\"markdown-alert markdown-alert-important alert alert-info\">\n<p class=\"mb-0\">This is a important</p>\n</div>")]
+            [InlineData("> [!WARNING]\n> This is a warning", "<div class=\"markdown-alert markdown-alert-warning alert alert-warning\">\n<p class=\"mb-0\">This is a warning</p>\n</div>")]
+            [InlineData("> [!CAUTION]\n> This is a caution", "<div class=\"markdown-alert markdown-alert-caution alert alert-danger\">\n<p class=\"mb-0\">This is a caution</p>\n</div>")]
+            public void TestToHtmlWithAlertBlocks(string originalMd, string expectedHtml)
+            {
+                _featureFlagService.Setup(x => x.IsMarkdigMdRenderingEnabled()).Returns(true);
+                var readMeResult = _markdownService.GetHtmlFromMarkdown(originalMd);
+                Assert.Equal(expectedHtml, readMeResult.Content);
+                Assert.False(readMeResult.ImagesRewritten);
+            }
         }
     }
 }