From 9134d6c0370b104406683332c2b945c2f1f41559 Mon Sep 17 00:00:00 2001
From: Yufei Huang <yufeih@live.com>
Date: Fri, 7 Jul 2023 12:39:44 +0800
Subject: [PATCH] fix: remove tab group hash function (#8942)

---
 .../Aggregator/TabGroupAggregator.cs          |  9 -----
 .../TabGroup/HtmlTabGroupBlockRenderer.cs     |  2 +-
 .../TabGroup/TabGroupBlock.cs                 |  5 +--
 .../TabGroup/TabGroupIdRewriter.cs            | 19 +--------
 .../GeneralTest.cs                            | 32 +++++++--------
 .../TabGroupTest.cs                           | 39 +++++++++----------
 .../articles/markdown.html.view.verified.json |  2 +-
 ...pescript-markdown-extensions.verified.html | 32 +++++++--------
 8 files changed, 55 insertions(+), 85 deletions(-)

diff --git a/src/Microsoft.DocAsCode.MarkdigEngine.Extensions/Aggregator/TabGroupAggregator.cs b/src/Microsoft.DocAsCode.MarkdigEngine.Extensions/Aggregator/TabGroupAggregator.cs
index 32f7d138f7c..8237bb36134 100644
--- a/src/Microsoft.DocAsCode.MarkdigEngine.Extensions/Aggregator/TabGroupAggregator.cs
+++ b/src/Microsoft.DocAsCode.MarkdigEngine.Extensions/Aggregator/TabGroupAggregator.cs
@@ -66,10 +66,7 @@ private static void AggregateCore(
         int offset
         )
     {
-        var groupId = GetHashString(items[0]?.Content?.ToString() ?? string.Empty).Replace("/", "-").Remove(10);
-
         context.AggregateTo(new TabGroupBlock(
-                            groupId,
                             items.ToImmutableArray(),
                             startLine,
                             startSpan,
@@ -77,12 +74,6 @@ int offset
                             offset);
     }
 
-    private static string GetHashString(string content)
-    {
-        using var sha256 = SHA256.Create();
-        return Convert.ToBase64String(sha256.ComputeHash(Encoding.UTF8.GetBytes(content)));
-    }
-
     private static TabItemBlock CreateTabItem(
         HeadingBlock headBlock,
         Tuple<string, string, LinkInline> pair,
diff --git a/src/Microsoft.DocAsCode.MarkdigEngine.Extensions/TabGroup/HtmlTabGroupBlockRenderer.cs b/src/Microsoft.DocAsCode.MarkdigEngine.Extensions/TabGroup/HtmlTabGroupBlockRenderer.cs
index 1fd10cf0af6..c6ecc967e4d 100644
--- a/src/Microsoft.DocAsCode.MarkdigEngine.Extensions/TabGroup/HtmlTabGroupBlockRenderer.cs
+++ b/src/Microsoft.DocAsCode.MarkdigEngine.Extensions/TabGroup/HtmlTabGroupBlockRenderer.cs
@@ -11,7 +11,7 @@ public class HtmlTabGroupBlockRenderer : HtmlObjectRenderer<TabGroupBlock>
     protected override void Write(HtmlRenderer renderer, TabGroupBlock block)
     {
         renderer.Write(@"<div class=""tabGroup"" id=""tabgroup_");
-        var groupId = ExtensionsHelper.Escape(block.Id);
+        var groupId = block.Id.ToString();
         renderer.Write(groupId);
         renderer.Write("\"");
         renderer.WriteAttributes(block);
diff --git a/src/Microsoft.DocAsCode.MarkdigEngine.Extensions/TabGroup/TabGroupBlock.cs b/src/Microsoft.DocAsCode.MarkdigEngine.Extensions/TabGroup/TabGroupBlock.cs
index 40978ed65f6..63cc1087302 100644
--- a/src/Microsoft.DocAsCode.MarkdigEngine.Extensions/TabGroup/TabGroupBlock.cs
+++ b/src/Microsoft.DocAsCode.MarkdigEngine.Extensions/TabGroup/TabGroupBlock.cs
@@ -9,15 +9,14 @@ namespace Microsoft.DocAsCode.MarkdigEngine.Extensions;
 
 public class TabGroupBlock : ContainerBlock
 {
-    public string Id { get; set; }
+    public int Id { get; set; }
 
     public int ActiveTabIndex { get; set; }
 
     public ImmutableArray<TabItemBlock> Items { get; set; }
 
-    public TabGroupBlock(string id, ImmutableArray<TabItemBlock> blocks, int startLine, int startSpan, int activeTabIndex) : base(null)
+    public TabGroupBlock(ImmutableArray<TabItemBlock> blocks, int startLine, int startSpan, int activeTabIndex) : base(null)
     {
-        Id = id;
         ActiveTabIndex = activeTabIndex;
         Items = blocks;
         Line = startLine;
diff --git a/src/Microsoft.DocAsCode.MarkdigEngine.Extensions/TabGroup/TabGroupIdRewriter.cs b/src/Microsoft.DocAsCode.MarkdigEngine.Extensions/TabGroup/TabGroupIdRewriter.cs
index 5557ebe36d6..7d37c93adbe 100644
--- a/src/Microsoft.DocAsCode.MarkdigEngine.Extensions/TabGroup/TabGroupIdRewriter.cs
+++ b/src/Microsoft.DocAsCode.MarkdigEngine.Extensions/TabGroup/TabGroupIdRewriter.cs
@@ -8,7 +8,7 @@ namespace Microsoft.DocAsCode.MarkdigEngine;
 
 public class TabGroupIdRewriter : IMarkdownObjectRewriter
 {
-    private Dictionary<string, int> _dict = new();
+    private int _id;
 
     public void PostProcess(IMarkdownObject markdownObject)
     {
@@ -22,22 +22,7 @@ public IMarkdownObject Rewrite(IMarkdownObject markdownObject)
     {
         if (markdownObject is TabGroupBlock block)
         {
-            var groupId = block.Id;
-            while (true)
-            {
-                if (_dict.TryGetValue(groupId, out int index))
-                {
-                    _dict[groupId] += 1;
-                    groupId = $"{groupId}-{index}";
-                    block.Id = groupId;
-                    return block;
-                }
-                else
-                {
-                    _dict.Add(groupId, 1);
-                    return markdownObject;
-                }
-            }
+            block.Id = ++_id;
         }
 
         return markdownObject;
diff --git a/test/Microsoft.DocAsCode.MarkdigEngine.Extensions.Tests/GeneralTest.cs b/test/Microsoft.DocAsCode.MarkdigEngine.Extensions.Tests/GeneralTest.cs
index 8f7402361be..0818b06f74b 100644
--- a/test/Microsoft.DocAsCode.MarkdigEngine.Extensions.Tests/GeneralTest.cs
+++ b/test/Microsoft.DocAsCode.MarkdigEngine.Extensions.Tests/GeneralTest.cs
@@ -234,20 +234,19 @@ public void TestTabGroup()
 # <a id=""x""></a>[title-b](#tab/b/c)
 content-b
 - - -";
-        var groupId = "bHGHmlrG6S";
-        var expected = $@"<div class=""tabGroup"" id=""tabgroup_{groupId}"" sourceFile=""test.md"" sourceStartLineNumber=""1"">
+        var expected = $@"<div class=""tabGroup"" id=""tabgroup_1"" sourceFile=""test.md"" sourceStartLineNumber=""1"">
 <ul role=""tablist"">
 <li role=""presentation"">
-<a href=""#tabpanel_{groupId}_a"" role=""tab"" aria-controls=""tabpanel_{groupId}_a"" data-tab=""a"" tabindex=""0"" aria-selected=""true"" sourceFile=""test.md"" sourceStartLineNumber=""1"">title-a</a>
+<a href=""#tabpanel_1_a"" role=""tab"" aria-controls=""tabpanel_1_a"" data-tab=""a"" tabindex=""0"" aria-selected=""true"" sourceFile=""test.md"" sourceStartLineNumber=""1"">title-a</a>
 </li>
 <li role=""presentation"" aria-hidden=""true"" hidden=""hidden"">
-<a href=""#tabpanel_{groupId}_b_c"" role=""tab"" aria-controls=""tabpanel_{groupId}_b_c"" data-tab=""b"" data-condition=""c"" tabindex=""-1"" sourceFile=""test.md"" sourceStartLineNumber=""3"">title-b</a>
+<a href=""#tabpanel_1_b_c"" role=""tab"" aria-controls=""tabpanel_1_b_c"" data-tab=""b"" data-condition=""c"" tabindex=""-1"" sourceFile=""test.md"" sourceStartLineNumber=""3"">title-b</a>
 </li>
 </ul>
-<section id=""tabpanel_{groupId}_a"" role=""tabpanel"" data-tab=""a"">
+<section id=""tabpanel_1_a"" role=""tabpanel"" data-tab=""a"">
 <p sourceFile=""test.md"" sourceStartLineNumber=""2"">content-a</p>
 </section>
-<section id=""tabpanel_{groupId}_b_c"" role=""tabpanel"" data-tab=""b"" data-condition=""c"" aria-hidden=""true"" hidden=""hidden"">
+<section id=""tabpanel_1_b_c"" role=""tabpanel"" data-tab=""b"" data-condition=""c"" aria-hidden=""true"" hidden=""hidden"">
 <p sourceFile=""test.md"" sourceStartLineNumber=""4"">content-b</p>
 </section>
 </div>
@@ -269,37 +268,36 @@ public void TestTabGroup_2()
 # [title-b](#tab/b/a)
 content-b
 - - -";
-        var groupId = "bHGHmlrG6S";
-        var expected = $@"<div class=""tabGroup"" id=""tabgroup_{groupId}"" sourceFile=""test.md"" sourceStartLineNumber=""1"">
+        var expected = $@"<div class=""tabGroup"" id=""tabgroup_1"" sourceFile=""test.md"" sourceStartLineNumber=""1"">
 <ul role=""tablist"">
 <li role=""presentation"">
-<a href=""#tabpanel_{groupId}_a"" role=""tab"" aria-controls=""tabpanel_{groupId}_a"" data-tab=""a"" tabindex=""0"" aria-selected=""true"" sourceFile=""test.md"" sourceStartLineNumber=""1"">title-a</a>
+<a href=""#tabpanel_1_a"" role=""tab"" aria-controls=""tabpanel_1_a"" data-tab=""a"" tabindex=""0"" aria-selected=""true"" sourceFile=""test.md"" sourceStartLineNumber=""1"">title-a</a>
 </li>
 <li role=""presentation"" aria-hidden=""true"" hidden=""hidden"">
-<a href=""#tabpanel_{groupId}_b_c"" role=""tab"" aria-controls=""tabpanel_{groupId}_b_c"" data-tab=""b"" data-condition=""c"" tabindex=""-1"" sourceFile=""test.md"" sourceStartLineNumber=""3"">title-b</a>
+<a href=""#tabpanel_1_b_c"" role=""tab"" aria-controls=""tabpanel_1_b_c"" data-tab=""b"" data-condition=""c"" tabindex=""-1"" sourceFile=""test.md"" sourceStartLineNumber=""3"">title-b</a>
 </li>
 </ul>
-<section id=""tabpanel_{groupId}_a"" role=""tabpanel"" data-tab=""a"">
+<section id=""tabpanel_1_a"" role=""tabpanel"" data-tab=""a"">
 <p sourceFile=""test.md"" sourceStartLineNumber=""2"">content-a</p>
 </section>
-<section id=""tabpanel_{groupId}_b_c"" role=""tabpanel"" data-tab=""b"" data-condition=""c"" aria-hidden=""true"" hidden=""hidden"">
+<section id=""tabpanel_1_b_c"" role=""tabpanel"" data-tab=""b"" data-condition=""c"" aria-hidden=""true"" hidden=""hidden"">
 <p sourceFile=""test.md"" sourceStartLineNumber=""4"">content-b</p>
 </section>
 </div>
-<div class=""tabGroup"" id=""tabgroup_{groupId}-1"" sourceFile=""test.md"" sourceStartLineNumber=""6"">
+<div class=""tabGroup"" id=""tabgroup_2"" sourceFile=""test.md"" sourceStartLineNumber=""6"">
 <ul role=""tablist"">
 <li role=""presentation"">
-<a href=""#tabpanel_{groupId}-1_a"" role=""tab"" aria-controls=""tabpanel_{groupId}-1_a"" data-tab=""a"" tabindex=""0"" aria-selected=""true"" sourceFile=""test.md"" sourceStartLineNumber=""6"">title-a</a>
+<a href=""#tabpanel_2_a"" role=""tab"" aria-controls=""tabpanel_2_a"" data-tab=""a"" tabindex=""0"" aria-selected=""true"" sourceFile=""test.md"" sourceStartLineNumber=""6"">title-a</a>
 </li>
 <li role=""presentation"">
-<a href=""#tabpanel_{groupId}-1_b_a"" role=""tab"" aria-controls=""tabpanel_{groupId}-1_b_a"" data-tab=""b"" data-condition=""a"" tabindex=""-1"" sourceFile=""test.md"" sourceStartLineNumber=""8"">title-b</a>
+<a href=""#tabpanel_2_b_a"" role=""tab"" aria-controls=""tabpanel_2_b_a"" data-tab=""b"" data-condition=""a"" tabindex=""-1"" sourceFile=""test.md"" sourceStartLineNumber=""8"">title-b</a>
 </li>
 </ul>
-<section id=""tabpanel_{groupId}-1_a"" role=""tabpanel"" data-tab=""a"">
+<section id=""tabpanel_2_a"" role=""tabpanel"" data-tab=""a"">
 
 <p sourceFile=""test.md"" sourceStartLineNumber=""7"">content-a</p>
 </section>
-<section id=""tabpanel_{groupId}-1_b_a"" role=""tabpanel"" data-tab=""b"" data-condition=""a"" aria-hidden=""true"" hidden=""hidden"">
+<section id=""tabpanel_2_b_a"" role=""tabpanel"" data-tab=""b"" data-condition=""a"" aria-hidden=""true"" hidden=""hidden"">
 
 <p sourceFile=""test.md"" sourceStartLineNumber=""9"">content-b</p>
 </section>
diff --git a/test/Microsoft.DocAsCode.MarkdigEngine.Extensions.Tests/TabGroupTest.cs b/test/Microsoft.DocAsCode.MarkdigEngine.Extensions.Tests/TabGroupTest.cs
index 75512569e79..1c6afbd2593 100644
--- a/test/Microsoft.DocAsCode.MarkdigEngine.Extensions.Tests/TabGroupTest.cs
+++ b/test/Microsoft.DocAsCode.MarkdigEngine.Extensions.Tests/TabGroupTest.cs
@@ -11,7 +11,6 @@ public class TabGroupTest
     [Trait("Related", "TabGroup")]
     public void Test_General()
     {
-        var groupId = "bHGHmlrG6S";
         TestMarkupInGeneral(
             @"Tab group test case
 # [title-a](#tab/a)
@@ -20,20 +19,20 @@ public void Test_General()
 content-b
 - - -",
             $@"<p sourceFile=""Topic.md"" sourceStartLineNumber=""1"">Tab group test case</p>
-<div class=""tabGroup"" id=""tabgroup_{groupId}"" sourceFile=""Topic.md"" sourceStartLineNumber=""2"">
+<div class=""tabGroup"" id=""tabgroup_1"" sourceFile=""Topic.md"" sourceStartLineNumber=""2"">
 <ul role=""tablist"">
 <li role=""presentation"">
-<a href=""#tabpanel_{groupId}_a"" role=""tab"" aria-controls=""tabpanel_{groupId}_a"" data-tab=""a"" tabindex=""0"" aria-selected=""true"" sourceFile=""Topic.md"" sourceStartLineNumber=""2"">title-a</a>
+<a href=""#tabpanel_1_a"" role=""tab"" aria-controls=""tabpanel_1_a"" data-tab=""a"" tabindex=""0"" aria-selected=""true"" sourceFile=""Topic.md"" sourceStartLineNumber=""2"">title-a</a>
 </li>
 <li role=""presentation"" aria-hidden=""true"" hidden=""hidden"">
-<a href=""#tabpanel_{groupId}_b_c"" role=""tab"" aria-controls=""tabpanel_{groupId}_b_c"" data-tab=""b"" data-condition=""c"" tabindex=""-1"" sourceFile=""Topic.md"" sourceStartLineNumber=""4"">title-b</a>
+<a href=""#tabpanel_1_b_c"" role=""tab"" aria-controls=""tabpanel_1_b_c"" data-tab=""b"" data-condition=""c"" tabindex=""-1"" sourceFile=""Topic.md"" sourceStartLineNumber=""4"">title-b</a>
 </li>
 </ul>
-<section id=""tabpanel_{groupId}_a"" role=""tabpanel"" data-tab=""a"">
+<section id=""tabpanel_1_a"" role=""tabpanel"" data-tab=""a"">
 
 <p sourceFile=""Topic.md"" sourceStartLineNumber=""3"">content-a</p>
 </section>
-<section id=""tabpanel_{groupId}_b_c"" role=""tabpanel"" data-tab=""b"" data-condition=""c"" aria-hidden=""true"" hidden=""hidden"">
+<section id=""tabpanel_1_b_c"" role=""tabpanel"" data-tab=""b"" data-condition=""c"" aria-hidden=""true"" hidden=""hidden"">
 
 <p sourceFile=""Topic.md"" sourceStartLineNumber=""5"">content-b</p>
 </section>
@@ -46,7 +45,6 @@ public void Test_General()
     [Trait("Related", "TabGroup")]
     public void Test_TabGroup_Combining()
     {
-        var groupId = "bHGHmlrG6S";
         TestMarkupInGeneral(
             @"# [title-a or b](#tab/a+b)
 content-a or b
@@ -58,36 +56,36 @@ public void Test_TabGroup_Combining()
 # [title-b or c](#tab/b+c)
 content-b or c
 - - -",
-            $@"<div class=""tabGroup"" id=""tabgroup_{groupId}"" sourceFile=""Topic.md"" sourceStartLineNumber=""1"">
+            $@"<div class=""tabGroup"" id=""tabgroup_1"" sourceFile=""Topic.md"" sourceStartLineNumber=""1"">
 <ul role=""tablist"">
 <li role=""presentation"">
-<a href=""#tabpanel_{groupId}_a+b"" role=""tab"" aria-controls=""tabpanel_{groupId}_a+b"" data-tab=""a+b"" tabindex=""0"" aria-selected=""true"" sourceFile=""Topic.md"" sourceStartLineNumber=""1"">title-a or b</a>
+<a href=""#tabpanel_1_a+b"" role=""tab"" aria-controls=""tabpanel_1_a+b"" data-tab=""a+b"" tabindex=""0"" aria-selected=""true"" sourceFile=""Topic.md"" sourceStartLineNumber=""1"">title-a or b</a>
 </li>
 <li role=""presentation"">
-<a href=""#tabpanel_{groupId}_c"" role=""tab"" aria-controls=""tabpanel_{groupId}_c"" data-tab=""c"" tabindex=""-1"" sourceFile=""Topic.md"" sourceStartLineNumber=""3"">title-c</a>
+<a href=""#tabpanel_1_c"" role=""tab"" aria-controls=""tabpanel_1_c"" data-tab=""c"" tabindex=""-1"" sourceFile=""Topic.md"" sourceStartLineNumber=""3"">title-c</a>
 </li>
 </ul>
-<section id=""tabpanel_{groupId}_a+b"" role=""tabpanel"" data-tab=""a+b"">
+<section id=""tabpanel_1_a+b"" role=""tabpanel"" data-tab=""a+b"">
 <p sourceFile=""Topic.md"" sourceStartLineNumber=""2"">content-a or b</p>
 </section>
-<section id=""tabpanel_{groupId}_c"" role=""tabpanel"" data-tab=""c"" aria-hidden=""true"" hidden=""hidden"">
+<section id=""tabpanel_1_c"" role=""tabpanel"" data-tab=""c"" aria-hidden=""true"" hidden=""hidden"">
 <p sourceFile=""Topic.md"" sourceStartLineNumber=""4"">content-c</p>
 </section>
 </div>
-<div class=""tabGroup"" id=""tabgroup_{groupId}-1"" sourceFile=""Topic.md"" sourceStartLineNumber=""6"">
+<div class=""tabGroup"" id=""tabgroup_2"" sourceFile=""Topic.md"" sourceStartLineNumber=""6"">
 <ul role=""tablist"">
 <li role=""presentation"">
-<a href=""#tabpanel_{groupId}-1_a"" role=""tab"" aria-controls=""tabpanel_{groupId}-1_a"" data-tab=""a"" tabindex=""0"" aria-selected=""true"" sourceFile=""Topic.md"" sourceStartLineNumber=""6"">title-a</a>
+<a href=""#tabpanel_2_a"" role=""tab"" aria-controls=""tabpanel_2_a"" data-tab=""a"" tabindex=""0"" aria-selected=""true"" sourceFile=""Topic.md"" sourceStartLineNumber=""6"">title-a</a>
 </li>
 <li role=""presentation"">
-<a href=""#tabpanel_{groupId}-1_b+c"" role=""tab"" aria-controls=""tabpanel_{groupId}-1_b+c"" data-tab=""b+c"" tabindex=""-1"" sourceFile=""Topic.md"" sourceStartLineNumber=""8"">title-b or c</a>
+<a href=""#tabpanel_2_b+c"" role=""tab"" aria-controls=""tabpanel_2_b+c"" data-tab=""b+c"" tabindex=""-1"" sourceFile=""Topic.md"" sourceStartLineNumber=""8"">title-b or c</a>
 </li>
 </ul>
-<section id=""tabpanel_{groupId}-1_a"" role=""tabpanel"" data-tab=""a"">
+<section id=""tabpanel_2_a"" role=""tabpanel"" data-tab=""a"">
 
 <p sourceFile=""Topic.md"" sourceStartLineNumber=""7"">content-a</p>
 </section>
-<section id=""tabpanel_{groupId}-1_b+c"" role=""tabpanel"" data-tab=""b+c"" aria-hidden=""true"" hidden=""hidden"">
+<section id=""tabpanel_2_b+c"" role=""tabpanel"" data-tab=""b+c"" aria-hidden=""true"" hidden=""hidden"">
 
 <p sourceFile=""Topic.md"" sourceStartLineNumber=""9"">content-b or c</p>
 </section>
@@ -99,19 +97,18 @@ public void Test_TabGroup_Combining()
     [Fact]
     public void TestTableInTabGroup()
     {
-        var groupId = "bHGHmlrG6S";
         TestMarkupInGeneral(@"# [title](#tab/id)
 
 a | b
 - | -
 c | d",
-$@"<div class=""tabGroup"" id=""tabgroup_{groupId}"" sourceFile=""Topic.md"" sourceStartLineNumber=""1"">
+$@"<div class=""tabGroup"" id=""tabgroup_1"" sourceFile=""Topic.md"" sourceStartLineNumber=""1"">
 <ul role=""tablist"">
 <li role=""presentation"">
-<a href=""#tabpanel_{groupId}_id"" role=""tab"" aria-controls=""tabpanel_{groupId}_id"" data-tab=""id"" tabindex=""0"" aria-selected=""true"" sourceFile=""Topic.md"" sourceStartLineNumber=""1"">title</a>
+<a href=""#tabpanel_1_id"" role=""tab"" aria-controls=""tabpanel_1_id"" data-tab=""id"" tabindex=""0"" aria-selected=""true"" sourceFile=""Topic.md"" sourceStartLineNumber=""1"">title</a>
 </li>
 </ul>
-<section id=""tabpanel_{groupId}_id"" role=""tabpanel"" data-tab=""id"">
+<section id=""tabpanel_1_id"" role=""tabpanel"" data-tab=""id"">
 
 <table sourceFile=""Topic.md"" sourceStartLineNumber=""3"">
 <thead>
diff --git a/test/docfx.Snapshot.Tests/SamplesTest.Seed/articles/markdown.html.view.verified.json b/test/docfx.Snapshot.Tests/SamplesTest.Seed/articles/markdown.html.view.verified.json
index 774548f24d0..35229c757b3 100644
--- a/test/docfx.Snapshot.Tests/SamplesTest.Seed/articles/markdown.html.view.verified.json
+++ b/test/docfx.Snapshot.Tests/SamplesTest.Seed/articles/markdown.html.view.verified.json
@@ -1,5 +1,5 @@
 {
-  "conceptual": "\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"3\"><a href=\"https://daringfireball.net/projects/markdown/\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"3\">Markdown</a> is a lightweight markup language with plain text formatting syntax. Docfx supports <a href=\"https://commonmark.org/\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"3\">CommonMark</a> compliant Markdown parsed through the <a href=\"https://github.com/xoofx/markdig\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"3\">Markdig</a> parsing engine.</p>\n<h2 id=\"alerts\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"5\">Alerts</h2>\n<div class=\"NOTE\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"7\">\n<h5>Note</h5>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"8\">Information the user should notice even if skimming.</p>\n</div>\n<div class=\"TIP\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"10\">\n<h5>Tip</h5>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"11\">Optional information to help a user be more successful.</p>\n</div>\n<div class=\"IMPORTANT\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"13\">\n<h5>Important</h5>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"14\">Essential information required for user success.</p>\n</div>\n<div class=\"CAUTION\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"16\">\n<h5>Caution</h5>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"17\">Negative potential consequences of an action.</p>\n</div>\n<div class=\"WARNING\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"19\">\n<h5>Warning</h5>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"20\">Dangerous certain consequences of an action.</p>\n</div>\n<div class=\"alert alert-secondary\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"22\">\n<h5>MY TODO</h5>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"23\">This is a TODO.</p>\n</div>\n<h2 id=\"image\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"25\">Image</h2>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"27\"><img src=\"https://learn.microsoft.com/en-us/media/learn/not-found/learn-not-found-light-mode.png?branch=main\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"27\" alt=\"alt-text\"></p>\n<h2 id=\"mermaid-diagrams\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"29\">Mermaid Diagrams</h2>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"31\">Flowchart</p>\n<pre><code class=\"lang-mermaid\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"33\">flowchart LR\n\nA[Hard] --&gt;|Text| B(Round)\nB --&gt; C{Decision}\nC --&gt;|One| D[Result 1]\nC --&gt;|Two| E[Result 2]\n</code></pre>\n<h2 id=\"code-snippet\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"42\">Code Snippet</h2>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"44\">The example highlights lines 2, line 5 to 7 and lines 9 to the end of the file.</p>\n<pre><code class=\"lang-csharp\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"46\" highlight-lines=\"2,5-7,9-\">using System;\nusing Azure;\nusing Azure.Storage;\nusing Azure.Storage.Blobs;\n\nclass Program\n{\n    static void Main(string[] args)\n    {\n        // Define the connection string for the storage account\n        string connectionString = &quot;DefaultEndpointsProtocol=https;AccountName=&lt;your-account-name&gt;;AccountKey=&lt;your-account-key&gt;;EndpointSuffix=core.windows.net&quot;;\n\n        // Create a new BlobServiceClient using the connection string\n        var blobServiceClient = new BlobServiceClient(connectionString);\n\n        // Create a new container\n        var container = blobServiceClient.CreateBlobContainer(&quot;mycontainer&quot;);\n\n        // Upload a file to the container\n        using (var fileStream = File.OpenRead(&quot;path/to/file.txt&quot;))\n        {\n            container.UploadBlob(&quot;file.txt&quot;, fileStream);\n        }\n\n        // Download the file from the container\n        var downloadedBlob = container.GetBlobClient(&quot;file.txt&quot;).Download();\n        using (var fileStream = File.OpenWrite(&quot;path/to/downloaded-file.txt&quot;))\n        {\n            downloadedBlob.Value.Content.CopyTo(fileStream);\n        }\n    }\n}\n</code></pre><h2 id=\"math-expressions\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"48\">Math Expressions</h2>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"50\">This sentence uses <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"50\">$</code> delimiters to show math inline:  <span class=\"math\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"50\">\\(\\sqrt{3x-1}+(1+x)^2\\)</span></p>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"52\"><strong sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"52\">The Cauchy-Schwarz Inequality</strong></p>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"54\"><span class=\"math\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"54\">\\(\\left( \\sum_{k=1}^n a_k b_k \\right)^2 \\leq \\left( \\sum_{k=1}^n a_k^2 \\right) \\left( \\sum_{k=1}^n b_k^2 \\right)\\)</span></p>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"56\">This expression uses <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"56\">\\$</code> to display a dollar sign: <span class=\"math\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"56\">\\(\\sqrt{\\$4}\\)</span></p>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"58\">To split <span>$</span>100 in half, we calculate <span class=\"math\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"58\">\\(100/2\\)</span></p>\n<h2 id=\"custom-syntax-highlighting\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"60\">Custom Syntax Highlighting</h2>\n<pre><code class=\"lang-bicep\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"62\">resource storageAccount 'Microsoft.Storage/storageAccounts@2021-06-01' = {\n  name: 'hello'\n  // (...)\n}\n</code></pre>\n<h2 id=\"tabs\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"69\">Tabs</h2>\n<div class=\"tabGroup\" id=\"tabgroup_bHGHmlrG6S\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"71\">\n<ul role=\"tablist\">\n<li role=\"presentation\">\n<a href=\"#tabpanel_bHGHmlrG6S_linux\" role=\"tab\" aria-controls=\"tabpanel_bHGHmlrG6S_linux\" data-tab=\"linux\" tabindex=\"0\" aria-selected=\"true\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"71\">Linux</a>\n</li>\n<li role=\"presentation\">\n<a href=\"#tabpanel_bHGHmlrG6S_windows\" role=\"tab\" aria-controls=\"tabpanel_bHGHmlrG6S_windows\" data-tab=\"windows\" tabindex=\"-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"75\">Windows</a>\n</li>\n</ul>\n<section id=\"tabpanel_bHGHmlrG6S_linux\" role=\"tabpanel\" data-tab=\"linux\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"73\">Content for Linux...</p>\n</section>\n<section id=\"tabpanel_bHGHmlrG6S_windows\" role=\"tabpanel\" data-tab=\"windows\" aria-hidden=\"true\" hidden=\"hidden\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"77\">Content for Windows...</p>\n</section>\n</div>\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"81\">The above tab group was created with the following syntax:</p>\n<pre><code class=\"lang-markdown\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"83\"># [Linux](#tab/linux)\n\nContent for Linux...\n\n# [Windows](#tab/windows)\n\nContent for Windows...\n\n---\n</code></pre>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"95\">Tabs are indicated by using a specific link syntax within a Markdown header. The syntax can be described as follows:</p>\n<pre><code class=\"lang-markdown\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"97\"># [Tab Display Name](#tab/tab-id)\n</code></pre>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"101\">A tab starts with a Markdown header, <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"101\">#</code>, and is followed by a Markdown link <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"101\">[]()</code>. The text of the link will become the text of the tab header, displayed to the customer. In order for the header to be recognized as a tab, the link itself must start with <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"101\">#tab/</code> and be followed by an ID representing the content of the tab. The ID is used to sync all same-ID tabs across the page. Using the above example, when a user selects a tab with the link <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"101\">#tab/windows</code>, all tabs with the link <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"101\">#tab/windows</code> on the page will be selected.</p>\n<h3 id=\"dependent-tabs\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"103\">Dependent tabs</h3>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"105\">It's possible to make the selection in one set of tabs dependent on the selection in another set of tabs. Here's an example of that in action:</p>\n<div class=\"tabGroup\" id=\"tabgroup_bHGHmlrG6S-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"107\">\n<ul role=\"tablist\">\n<li role=\"presentation\">\n<a href=\"#tabpanel_bHGHmlrG6S-1_dotnet_linux\" role=\"tab\" aria-controls=\"tabpanel_bHGHmlrG6S-1_dotnet_linux\" data-tab=\"dotnet\" data-condition=\"linux\" tabindex=\"0\" aria-selected=\"true\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"107\">.NET</a>\n</li>\n<li role=\"presentation\" aria-hidden=\"true\" hidden=\"hidden\">\n<a href=\"#tabpanel_bHGHmlrG6S-1_dotnet_windows\" role=\"tab\" aria-controls=\"tabpanel_bHGHmlrG6S-1_dotnet_windows\" data-tab=\"dotnet\" data-condition=\"windows\" tabindex=\"-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"111\">.NET</a>\n</li>\n<li role=\"presentation\">\n<a href=\"#tabpanel_bHGHmlrG6S-1_typescript_linux\" role=\"tab\" aria-controls=\"tabpanel_bHGHmlrG6S-1_typescript_linux\" data-tab=\"typescript\" data-condition=\"linux\" tabindex=\"-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"115\">TypeScript</a>\n</li>\n<li role=\"presentation\" aria-hidden=\"true\" hidden=\"hidden\">\n<a href=\"#tabpanel_bHGHmlrG6S-1_typescript_windows\" role=\"tab\" aria-controls=\"tabpanel_bHGHmlrG6S-1_typescript_windows\" data-tab=\"typescript\" data-condition=\"windows\" tabindex=\"-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"119\">TypeScript</a>\n</li>\n<li role=\"presentation\">\n<a href=\"#tabpanel_bHGHmlrG6S-1_rest\" role=\"tab\" aria-controls=\"tabpanel_bHGHmlrG6S-1_rest\" data-tab=\"rest\" tabindex=\"-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"123\">REST API</a>\n</li>\n</ul>\n<section id=\"tabpanel_bHGHmlrG6S-1_dotnet_linux\" role=\"tabpanel\" data-tab=\"dotnet\" data-condition=\"linux\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"109\">.NET content for Linux...</p>\n</section>\n<section id=\"tabpanel_bHGHmlrG6S-1_dotnet_windows\" role=\"tabpanel\" data-tab=\"dotnet\" data-condition=\"windows\" aria-hidden=\"true\" hidden=\"hidden\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"113\">.NET content for Windows...</p>\n</section>\n<section id=\"tabpanel_bHGHmlrG6S-1_typescript_linux\" role=\"tabpanel\" data-tab=\"typescript\" data-condition=\"linux\" aria-hidden=\"true\" hidden=\"hidden\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"117\">TypeScript content for Linux...</p>\n</section>\n<section id=\"tabpanel_bHGHmlrG6S-1_typescript_windows\" role=\"tabpanel\" data-tab=\"typescript\" data-condition=\"windows\" aria-hidden=\"true\" hidden=\"hidden\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"121\">TypeScript content for Windows...</p>\n</section>\n<section id=\"tabpanel_bHGHmlrG6S-1_rest\" role=\"tabpanel\" data-tab=\"rest\" aria-hidden=\"true\" hidden=\"hidden\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"125\">REST API content, independent of platform...</p>\n<pre><code class=\"lang-mermaid\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"127\">flowchart LR\n\nA[Hard] --&gt;|Text| B(Round)\nB --&gt; C{Decision}\nC --&gt;|One| D[Result 1]\nC --&gt;|Two| E[Result 2]\n</code></pre>\n</section>\n</div>\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"138\">Notice how changing the Linux/Windows selection above changes the content in the .NET and TypeScript tabs. This is because the tab group defines two versions for each .NET and TypeScript, where the Windows/Linux selection above determines which version is shown for .NET/TypeScript. Here's the markup that shows how this is done:</p>\n<pre><code class=\"lang-markdown\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"140\"># [.NET](#tab/dotnet/linux)\n\n.NET content for Linux...\n\n# [.NET](#tab/dotnet/windows)\n\n.NET content for Windows...\n\n# [TypeScript](#tab/typescript/linux)\n\nTypeScript content for Linux...\n\n# [TypeScript](#tab/typescript/windows)\n\nTypeScript content for Windows...\n\n# [REST API](#tab/rest)\n\nREST API content, independent of platform...\n\n---\n</code></pre>\n",
+  "conceptual": "\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"3\"><a href=\"https://daringfireball.net/projects/markdown/\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"3\">Markdown</a> is a lightweight markup language with plain text formatting syntax. Docfx supports <a href=\"https://commonmark.org/\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"3\">CommonMark</a> compliant Markdown parsed through the <a href=\"https://github.com/xoofx/markdig\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"3\">Markdig</a> parsing engine.</p>\n<h2 id=\"alerts\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"5\">Alerts</h2>\n<div class=\"NOTE\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"7\">\n<h5>Note</h5>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"8\">Information the user should notice even if skimming.</p>\n</div>\n<div class=\"TIP\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"10\">\n<h5>Tip</h5>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"11\">Optional information to help a user be more successful.</p>\n</div>\n<div class=\"IMPORTANT\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"13\">\n<h5>Important</h5>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"14\">Essential information required for user success.</p>\n</div>\n<div class=\"CAUTION\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"16\">\n<h5>Caution</h5>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"17\">Negative potential consequences of an action.</p>\n</div>\n<div class=\"WARNING\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"19\">\n<h5>Warning</h5>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"20\">Dangerous certain consequences of an action.</p>\n</div>\n<div class=\"alert alert-secondary\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"22\">\n<h5>MY TODO</h5>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"23\">This is a TODO.</p>\n</div>\n<h2 id=\"image\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"25\">Image</h2>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"27\"><img src=\"https://learn.microsoft.com/en-us/media/learn/not-found/learn-not-found-light-mode.png?branch=main\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"27\" alt=\"alt-text\"></p>\n<h2 id=\"mermaid-diagrams\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"29\">Mermaid Diagrams</h2>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"31\">Flowchart</p>\n<pre><code class=\"lang-mermaid\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"33\">flowchart LR\n\nA[Hard] --&gt;|Text| B(Round)\nB --&gt; C{Decision}\nC --&gt;|One| D[Result 1]\nC --&gt;|Two| E[Result 2]\n</code></pre>\n<h2 id=\"code-snippet\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"42\">Code Snippet</h2>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"44\">The example highlights lines 2, line 5 to 7 and lines 9 to the end of the file.</p>\n<pre><code class=\"lang-csharp\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"46\" highlight-lines=\"2,5-7,9-\">using System;\nusing Azure;\nusing Azure.Storage;\nusing Azure.Storage.Blobs;\n\nclass Program\n{\n    static void Main(string[] args)\n    {\n        // Define the connection string for the storage account\n        string connectionString = &quot;DefaultEndpointsProtocol=https;AccountName=&lt;your-account-name&gt;;AccountKey=&lt;your-account-key&gt;;EndpointSuffix=core.windows.net&quot;;\n\n        // Create a new BlobServiceClient using the connection string\n        var blobServiceClient = new BlobServiceClient(connectionString);\n\n        // Create a new container\n        var container = blobServiceClient.CreateBlobContainer(&quot;mycontainer&quot;);\n\n        // Upload a file to the container\n        using (var fileStream = File.OpenRead(&quot;path/to/file.txt&quot;))\n        {\n            container.UploadBlob(&quot;file.txt&quot;, fileStream);\n        }\n\n        // Download the file from the container\n        var downloadedBlob = container.GetBlobClient(&quot;file.txt&quot;).Download();\n        using (var fileStream = File.OpenWrite(&quot;path/to/downloaded-file.txt&quot;))\n        {\n            downloadedBlob.Value.Content.CopyTo(fileStream);\n        }\n    }\n}\n</code></pre><h2 id=\"math-expressions\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"48\">Math Expressions</h2>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"50\">This sentence uses <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"50\">$</code> delimiters to show math inline:  <span class=\"math\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"50\">\\(\\sqrt{3x-1}+(1+x)^2\\)</span></p>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"52\"><strong sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"52\">The Cauchy-Schwarz Inequality</strong></p>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"54\"><span class=\"math\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"54\">\\(\\left( \\sum_{k=1}^n a_k b_k \\right)^2 \\leq \\left( \\sum_{k=1}^n a_k^2 \\right) \\left( \\sum_{k=1}^n b_k^2 \\right)\\)</span></p>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"56\">This expression uses <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"56\">\\$</code> to display a dollar sign: <span class=\"math\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"56\">\\(\\sqrt{\\$4}\\)</span></p>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"58\">To split <span>$</span>100 in half, we calculate <span class=\"math\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"58\">\\(100/2\\)</span></p>\n<h2 id=\"custom-syntax-highlighting\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"60\">Custom Syntax Highlighting</h2>\n<pre><code class=\"lang-bicep\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"62\">resource storageAccount 'Microsoft.Storage/storageAccounts@2021-06-01' = {\n  name: 'hello'\n  // (...)\n}\n</code></pre>\n<h2 id=\"tabs\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"69\">Tabs</h2>\n<div class=\"tabGroup\" id=\"tabgroup_1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"71\">\n<ul role=\"tablist\">\n<li role=\"presentation\">\n<a href=\"#tabpanel_1_linux\" role=\"tab\" aria-controls=\"tabpanel_1_linux\" data-tab=\"linux\" tabindex=\"0\" aria-selected=\"true\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"71\">Linux</a>\n</li>\n<li role=\"presentation\">\n<a href=\"#tabpanel_1_windows\" role=\"tab\" aria-controls=\"tabpanel_1_windows\" data-tab=\"windows\" tabindex=\"-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"75\">Windows</a>\n</li>\n</ul>\n<section id=\"tabpanel_1_linux\" role=\"tabpanel\" data-tab=\"linux\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"73\">Content for Linux...</p>\n</section>\n<section id=\"tabpanel_1_windows\" role=\"tabpanel\" data-tab=\"windows\" aria-hidden=\"true\" hidden=\"hidden\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"77\">Content for Windows...</p>\n</section>\n</div>\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"81\">The above tab group was created with the following syntax:</p>\n<pre><code class=\"lang-markdown\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"83\"># [Linux](#tab/linux)\n\nContent for Linux...\n\n# [Windows](#tab/windows)\n\nContent for Windows...\n\n---\n</code></pre>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"95\">Tabs are indicated by using a specific link syntax within a Markdown header. The syntax can be described as follows:</p>\n<pre><code class=\"lang-markdown\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"97\"># [Tab Display Name](#tab/tab-id)\n</code></pre>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"101\">A tab starts with a Markdown header, <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"101\">#</code>, and is followed by a Markdown link <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"101\">[]()</code>. The text of the link will become the text of the tab header, displayed to the customer. In order for the header to be recognized as a tab, the link itself must start with <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"101\">#tab/</code> and be followed by an ID representing the content of the tab. The ID is used to sync all same-ID tabs across the page. Using the above example, when a user selects a tab with the link <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"101\">#tab/windows</code>, all tabs with the link <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"101\">#tab/windows</code> on the page will be selected.</p>\n<h3 id=\"dependent-tabs\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"103\">Dependent tabs</h3>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"105\">It's possible to make the selection in one set of tabs dependent on the selection in another set of tabs. Here's an example of that in action:</p>\n<div class=\"tabGroup\" id=\"tabgroup_2\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"107\">\n<ul role=\"tablist\">\n<li role=\"presentation\">\n<a href=\"#tabpanel_2_dotnet_linux\" role=\"tab\" aria-controls=\"tabpanel_2_dotnet_linux\" data-tab=\"dotnet\" data-condition=\"linux\" tabindex=\"0\" aria-selected=\"true\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"107\">.NET</a>\n</li>\n<li role=\"presentation\" aria-hidden=\"true\" hidden=\"hidden\">\n<a href=\"#tabpanel_2_dotnet_windows\" role=\"tab\" aria-controls=\"tabpanel_2_dotnet_windows\" data-tab=\"dotnet\" data-condition=\"windows\" tabindex=\"-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"111\">.NET</a>\n</li>\n<li role=\"presentation\">\n<a href=\"#tabpanel_2_typescript_linux\" role=\"tab\" aria-controls=\"tabpanel_2_typescript_linux\" data-tab=\"typescript\" data-condition=\"linux\" tabindex=\"-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"115\">TypeScript</a>\n</li>\n<li role=\"presentation\" aria-hidden=\"true\" hidden=\"hidden\">\n<a href=\"#tabpanel_2_typescript_windows\" role=\"tab\" aria-controls=\"tabpanel_2_typescript_windows\" data-tab=\"typescript\" data-condition=\"windows\" tabindex=\"-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"119\">TypeScript</a>\n</li>\n<li role=\"presentation\">\n<a href=\"#tabpanel_2_rest\" role=\"tab\" aria-controls=\"tabpanel_2_rest\" data-tab=\"rest\" tabindex=\"-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"123\">REST API</a>\n</li>\n</ul>\n<section id=\"tabpanel_2_dotnet_linux\" role=\"tabpanel\" data-tab=\"dotnet\" data-condition=\"linux\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"109\">.NET content for Linux...</p>\n</section>\n<section id=\"tabpanel_2_dotnet_windows\" role=\"tabpanel\" data-tab=\"dotnet\" data-condition=\"windows\" aria-hidden=\"true\" hidden=\"hidden\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"113\">.NET content for Windows...</p>\n</section>\n<section id=\"tabpanel_2_typescript_linux\" role=\"tabpanel\" data-tab=\"typescript\" data-condition=\"linux\" aria-hidden=\"true\" hidden=\"hidden\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"117\">TypeScript content for Linux...</p>\n</section>\n<section id=\"tabpanel_2_typescript_windows\" role=\"tabpanel\" data-tab=\"typescript\" data-condition=\"windows\" aria-hidden=\"true\" hidden=\"hidden\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"121\">TypeScript content for Windows...</p>\n</section>\n<section id=\"tabpanel_2_rest\" role=\"tabpanel\" data-tab=\"rest\" aria-hidden=\"true\" hidden=\"hidden\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"125\">REST API content, independent of platform...</p>\n<pre><code class=\"lang-mermaid\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"127\">flowchart LR\n\nA[Hard] --&gt;|Text| B(Round)\nB --&gt; C{Decision}\nC --&gt;|One| D[Result 1]\nC --&gt;|Two| E[Result 2]\n</code></pre>\n</section>\n</div>\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"138\">Notice how changing the Linux/Windows selection above changes the content in the .NET and TypeScript tabs. This is because the tab group defines two versions for each .NET and TypeScript, where the Windows/Linux selection above determines which version is shown for .NET/TypeScript. Here's the markup that shows how this is done:</p>\n<pre><code class=\"lang-markdown\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"140\"># [.NET](#tab/dotnet/linux)\n\n.NET content for Linux...\n\n# [.NET](#tab/dotnet/windows)\n\n.NET content for Windows...\n\n# [TypeScript](#tab/typescript/linux)\n\nTypeScript content for Linux...\n\n# [TypeScript](#tab/typescript/windows)\n\nTypeScript content for Windows...\n\n# [REST API](#tab/rest)\n\nREST API content, independent of platform...\n\n---\n</code></pre>\n",
   "type": "Conceptual",
   "source": {
     "remote": {
diff --git a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.html b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.html
index 74f10385ce0..d8916d8cbfd 100644
--- a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.html
+++ b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.html
@@ -388,20 +388,20 @@ <h2 id="custom-syntax-highlighting">Custom Syntax Highlighting<a class="anchorjs
 }
 </code><a class="btn border-0 code-action" title="copy" href="#"><i class="bi bi-clipboard"></i></a></pre>
 <h2 id="tabs">Tabs<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="#" href="#tabs" style="margin-left: 0.1875em; padding-right: 0.1875em; padding-left: 0.1875em;"></a></h2>
-<div class="tabGroup" id="tabgroup_bHGHmlrG6S" data-bi-name="tab-group">
+<div class="tabGroup" id="tabgroup_1" data-bi-name="tab-group">
 <ul role="tablist" class="nav nav-tabs">
 <li role="presentation" class="nav-item">
-<a href="#tabpanel_bHGHmlrG6S_linux" role="tab" aria-controls="tabpanel_bHGHmlrG6S_linux" data-tab="linux" tabindex="-1" aria-selected="false" class="nav-link" data-bi-name="tab">Linux</a>
+<a href="#tabpanel_1_linux" role="tab" aria-controls="tabpanel_1_linux" data-tab="linux" tabindex="-1" aria-selected="false" class="nav-link" data-bi-name="tab">Linux</a>
 </li>
 <li role="presentation" class="nav-item">
-<a href="#tabpanel_bHGHmlrG6S_windows" role="tab" aria-controls="tabpanel_bHGHmlrG6S_windows" data-tab="windows" tabindex="0" class="nav-link active" data-bi-name="tab" aria-selected="true">Windows</a>
+<a href="#tabpanel_1_windows" role="tab" aria-controls="tabpanel_1_windows" data-tab="windows" tabindex="0" class="nav-link active" data-bi-name="tab" aria-selected="true">Windows</a>
 </li>
 </ul>
-<section id="tabpanel_bHGHmlrG6S_linux" role="tabpanel" data-tab="linux" class="card" hidden="hidden" aria-hidden="true">
+<section id="tabpanel_1_linux" role="tabpanel" data-tab="linux" class="card" hidden="hidden" aria-hidden="true">
 
 <p>Content for Linux...</p>
 </section>
-<section id="tabpanel_bHGHmlrG6S_windows" role="tabpanel" data-tab="windows" class="card">
+<section id="tabpanel_1_windows" role="tabpanel" data-tab="windows" class="card">
 
 <p>Content for Windows...</p>
 </section>
@@ -424,41 +424,41 @@ <h2 id="tabs">Tabs<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-ic
 <p>A tab starts with a Markdown header, <code>#</code>, and is followed by a Markdown link <code>[]()</code>. The text of the link will become the text of the tab header, displayed to the customer. In order for the header to be recognized as a tab, the link itself must start with <code>#tab/</code> and be followed by an ID representing the content of the tab. The ID is used to sync all same-ID tabs across the page. Using the above example, when a user selects a tab with the link <code>#tab/windows</code>, all tabs with the link <code>#tab/windows</code> on the page will be selected.</p>
 <h3 id="dependent-tabs">Dependent tabs<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="#" href="#dependent-tabs" style="margin-left: 0.1875em; padding-right: 0.1875em; padding-left: 0.1875em;"></a></h3>
 <p>It's possible to make the selection in one set of tabs dependent on the selection in another set of tabs. Here's an example of that in action:</p>
-<div class="tabGroup" id="tabgroup_bHGHmlrG6S-1" data-bi-name="tab-group">
+<div class="tabGroup" id="tabgroup_2" data-bi-name="tab-group">
 <ul role="tablist" class="nav nav-tabs">
 <li role="presentation" class="nav-item" hidden="hidden" aria-hidden="true">
-<a href="#tabpanel_bHGHmlrG6S-1_dotnet_linux" role="tab" aria-controls="tabpanel_bHGHmlrG6S-1_dotnet_linux" data-tab="dotnet" data-condition="linux" tabindex="-1" aria-selected="false" class="nav-link" data-bi-name="tab">.NET</a>
+<a href="#tabpanel_2_dotnet_linux" role="tab" aria-controls="tabpanel_2_dotnet_linux" data-tab="dotnet" data-condition="linux" tabindex="-1" aria-selected="false" class="nav-link" data-bi-name="tab">.NET</a>
 </li>
 <li role="presentation" class="nav-item">
-<a href="#tabpanel_bHGHmlrG6S-1_dotnet_windows" role="tab" aria-controls="tabpanel_bHGHmlrG6S-1_dotnet_windows" data-tab="dotnet" data-condition="windows" tabindex="-1" class="nav-link" data-bi-name="tab" aria-selected="false">.NET</a>
+<a href="#tabpanel_2_dotnet_windows" role="tab" aria-controls="tabpanel_2_dotnet_windows" data-tab="dotnet" data-condition="windows" tabindex="-1" class="nav-link" data-bi-name="tab" aria-selected="false">.NET</a>
 </li>
 <li role="presentation" class="nav-item" hidden="hidden" aria-hidden="true">
-<a href="#tabpanel_bHGHmlrG6S-1_typescript_linux" role="tab" aria-controls="tabpanel_bHGHmlrG6S-1_typescript_linux" data-tab="typescript" data-condition="linux" tabindex="-1" class="nav-link" data-bi-name="tab" aria-selected="false">TypeScript</a>
+<a href="#tabpanel_2_typescript_linux" role="tab" aria-controls="tabpanel_2_typescript_linux" data-tab="typescript" data-condition="linux" tabindex="-1" class="nav-link" data-bi-name="tab" aria-selected="false">TypeScript</a>
 </li>
 <li role="presentation" class="nav-item">
-<a href="#tabpanel_bHGHmlrG6S-1_typescript_windows" role="tab" aria-controls="tabpanel_bHGHmlrG6S-1_typescript_windows" data-tab="typescript" data-condition="windows" tabindex="0" class="nav-link active" data-bi-name="tab" aria-selected="true">TypeScript</a>
+<a href="#tabpanel_2_typescript_windows" role="tab" aria-controls="tabpanel_2_typescript_windows" data-tab="typescript" data-condition="windows" tabindex="0" class="nav-link active" data-bi-name="tab" aria-selected="true">TypeScript</a>
 </li>
 <li role="presentation" class="nav-item">
-<a href="#tabpanel_bHGHmlrG6S-1_rest" role="tab" aria-controls="tabpanel_bHGHmlrG6S-1_rest" data-tab="rest" tabindex="-1" class="nav-link" data-bi-name="tab" aria-selected="false">REST API</a>
+<a href="#tabpanel_2_rest" role="tab" aria-controls="tabpanel_2_rest" data-tab="rest" tabindex="-1" class="nav-link" data-bi-name="tab" aria-selected="false">REST API</a>
 </li>
 </ul>
-<section id="tabpanel_bHGHmlrG6S-1_dotnet_linux" role="tabpanel" data-tab="dotnet" data-condition="linux" class="card" hidden="hidden" aria-hidden="true">
+<section id="tabpanel_2_dotnet_linux" role="tabpanel" data-tab="dotnet" data-condition="linux" class="card" hidden="hidden" aria-hidden="true">
 
 <p>.NET content for Linux...</p>
 </section>
-<section id="tabpanel_bHGHmlrG6S-1_dotnet_windows" role="tabpanel" data-tab="dotnet" data-condition="windows" class="card" hidden="hidden" aria-hidden="true">
+<section id="tabpanel_2_dotnet_windows" role="tabpanel" data-tab="dotnet" data-condition="windows" class="card" hidden="hidden" aria-hidden="true">
 
 <p>.NET content for Windows...</p>
 </section>
-<section id="tabpanel_bHGHmlrG6S-1_typescript_linux" role="tabpanel" data-tab="typescript" data-condition="linux" aria-hidden="true" hidden="hidden" class="card">
+<section id="tabpanel_2_typescript_linux" role="tabpanel" data-tab="typescript" data-condition="linux" aria-hidden="true" hidden="hidden" class="card">
 
 <p>TypeScript content for Linux...</p>
 </section>
-<section id="tabpanel_bHGHmlrG6S-1_typescript_windows" role="tabpanel" data-tab="typescript" data-condition="windows" class="card">
+<section id="tabpanel_2_typescript_windows" role="tabpanel" data-tab="typescript" data-condition="windows" class="card">
 
 <p>TypeScript content for Windows...</p>
 </section>
-<section id="tabpanel_bHGHmlrG6S-1_rest" role="tabpanel" data-tab="rest" aria-hidden="true" hidden="hidden" class="card">
+<section id="tabpanel_2_rest" role="tabpanel" data-tab="rest" aria-hidden="true" hidden="hidden" class="card">
 
 <p>REST API content, independent of platform...</p>
 <pre><code class="lang-mermaid">flowchart LR