Markdown - demos - descriptions added.

Author: gvreddy04

BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor

@@ -11,43 +11,66 @@
 
 <SectionHeading Size="HeadingSize.H2" Text="Live preview" PageUrl="@pageUrl" HashTagName="live-preview" />
 <div class="mb-3"></div>
-<Demo Type="typeof(Markdown_Demo_00_Preview)" Tabs="true" />
-
-<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
-<div class="mb-3"></div>
-<Demo Type="typeof(Markdown_Demo_01_Examples)" Tabs="true" />
+<Demo Type="typeof(Markdown_Demo_01_Preview)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Headers" PageUrl="@pageUrl" HashTagName="headers" />
-<div class="mb-3"></div>
+<div class="mb-3">
+    Use headers to structure your content. Start a line with `#` for a heading. Add more `#` characters for subheadings, up to six levels.
+</div>
 <Demo Type="typeof(Markdown_Demo_02_Headers)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Paragraphs and line breaks" PageUrl="@pageUrl" HashTagName="paragraphs-and-line-breaks" />
-<div class="mb-3"></div>
+<div class="mb-3">
+    Break your text into paragraphs or line breaks for easier reading.
+</div>
 <Demo Type="typeof(Markdown_Demo_03_Paragraphs_and_Line_Breaks)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Blockquotes" PageUrl="@pageUrl" HashTagName="blockquotes" />
-<div class="mb-3"></div>
+<div class="mb-3">
+    Quote text with `>` before it. Use more `>` characters to nest quotes. For blocks of text, use `>` at the start of each line.
+</div>
 <Demo Type="typeof(Markdown_Demo_04_Blockquotes)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Horizontal rules" PageUrl="@pageUrl" HashTagName="horizontal-rules" />
-<div class="mb-3"></div>
+<div class="mb-3">
+    Add a horizontal rule with a line of `---`.
+</div>
 <Demo Type="typeof(Markdown_Demo_05_Horizontal_Rules)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Emphasis (bold, italics, strikethrough)" PageUrl="@pageUrl" HashTagName="emphasis-bold-italics-strikethrough" />
-<div class="mb-3"></div>
+<div class="mb-3">
+    Emphasize text with bold, italics, or strikethrough: <br />
+    - Italics: `*text*` or `_text_` <br />
+    - Bold: `**text**` <br />
+    - Strikethrough: `~~text~~` <br />
+    - Combine for more emphasis.
+</div>
 <Demo Type="typeof(Markdown_Demo_06_Emphasis_bold_italics_strikethrough)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Code highlighting" PageUrl="@pageUrl" HashTagName="code-highlighting" />
 <div class="mb-3"></div>
 <Demo Type="typeof(Markdown_Demo_07_Code_Highlighting)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Tables" PageUrl="@pageUrl" HashTagName="tables" />
-<div class="mb-3"></div>
+<div class="mb-3">
+    Tables help organize structured data. <br />
+    - Place each row on its own line. <br />
+    - Separate cells with `|`. Escape `|` with `\|` if used within a cell. <br />
+    - The first two lines set headers and alignment. <br />
+    - Use `<br />` for new lines within a cell. <br />
+    - End each row with a carriage return (CR) or line feed (LF). <br />
+</div>
 <Demo Type="typeof(Markdown_Demo_08_Tables_A_Example)" Tabs="true" />
 <div class="mb-3"></div>
 <Demo Type="typeof(Markdown_Demo_08_Tables_B_Custom_CssClass)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Lists" PageUrl="@pageUrl" HashTagName="lists" />
+<div class="mb-3">
+    Use lists to organize related items: <br />
+    - Ordered lists: start with a number followed by a period. <br />
+    - Unordered lists: start with a `-`. <br />
+    Begin each list item on a new line.
+</div>
 <SectionHeading Size="HeadingSize.H3" Text="Ordered list" PageUrl="@pageUrl" HashTagName="ordered-list" />
 <div class="mb-3"></div>
 <Demo Type="typeof(Markdown_Demo_09_Lists_A_Ordered)" Tabs="true" />
@@ -72,6 +95,10 @@
 <div class="mb-3"></div>
 <Demo Type="typeof(Markdown_Demo_11_Images)" Tabs="true" />
 
+<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
+<div class="mb-3"></div>
+<Demo Type="typeof(Markdown_Demo_99_Examples)" Tabs="true" />
+
 @code{
     private string pageUrl = "/markdown";
     private string title = "Blazor Markdown Component";

BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_00_Preview.razor renamed to BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_01_Preview.razor

@@ -1,4 +1,8 @@
-<div class="row" style="max-height:486px;">
+<div class="row border-bottom mb-3">
+    <div class="col"><b>Markdown</b></div>
+    <div class="col"><b>Preview</b></div>
+</div>
+<div class="row" style="max-height:486px;">
     <div class="col">
         <textarea class="form-control"
                   rows="18"
@@ -13,5 +17,5 @@
 </div>
 
 @code {
-    private string markdown = "# Heading 1";
+    private string markdown = "# Heading 1\n## Heading 2\n\n![BlazorBootstrap](https://demos.blazorbootstrap.com/images/logo/logo-color.svg =50)";
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_05_Horizontal_Rules.razor

@@ -1,5 +1,5 @@
 <Markdown>
 above
-----
+---
 below
 </Markdown>

BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_01_Examples.razor renamed to BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_99_Examples.razor

@@ -36,16 +36,15 @@ _You **can** combine them_
 
 ## Images
 
-![This is an alt text.](/image/sample.webp "This is a sample image.")
+![This is an alt text.](https://demos.blazorbootstrap.com/images/logo/logo-color.svg =50)
 
 ## Links
 
-You may be using [Markdown Live Preview](https://markdownlivepreview.com/).
+[BlazorBootstrap Demos](https://demos.blazorbootstrap.com/).
 
 ## Blockquotes
 
 > Markdown is a lightweight markup language with plain-text-formatting syntax, created in 2004 by John Gruber with Aaron Swartz.
->
 >> Markdown is often used to format readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor.
 
 ## Tables

blazorbootstrap/Components/Markdown/Markdown.razor.cs

@@ -66,6 +66,7 @@ private void ParseMarkdown()
         markup = ConvertMarkdownLineBreaksToHtml(markup);
         markup = ConvertMarkdownImageToHtml(markup);
         markup = ConvertMarkdownLinksToHtml(markup);
+        markup = ConvertMarkdownInlineCodeToHtml(markup);
         html = markup.Replace(CODE_HIGHLIGHTING_LINE_SEPERATOR, "\n");
     }
 
@@ -572,24 +573,7 @@ private string ConvertMarkdownParagraphsToHtml(string markup)
     // Line breaks
     private string ConvertMarkdownLineBreaksToHtml(string markup) => markup.Replace("\n", "<br />");
 
-    // Links
-    private string ConvertMarkdownLinksToHtml(string markup)
-    {
-        // Pattern to match Markdown link syntax: [Link Text](Link URL)
-        var pattern = @"\[(.*?)\]\((.*?)\)";
-
-        // Replace Markdown link syntax with HTML <a> tag
-        var html = Regex.Replace(markup, pattern, match =>
-        {
-            var linkText = match.Groups[1].Value;
-            var linkUrl = match.Groups[2].Value;
-
-            return $"<a href=\"{linkUrl}\">{linkText}</a>";
-        });
-
-        return html;
-    }
-
+    // Image
     private string ConvertMarkdownImageToHtml(string markup)
     {
         // Pattern to match Markdown image syntax: ![alt text](url "optional title" =WIDTHxHEIGHT)
@@ -629,6 +613,41 @@ private string ConvertMarkdownImageToHtml(string markup)
         return html;
     }
 
+    // Links
+    private string ConvertMarkdownLinksToHtml(string markup)
+    {
+        // Pattern to match Markdown link syntax: [Link Text](Link URL)
+        var pattern = @"\[(.*?)\]\((.*?)\)";
+
+        // Replace Markdown link syntax with HTML <a> tag
+        var html = Regex.Replace(markup, pattern, match =>
+        {
+            var linkText = match.Groups[1].Value;
+            var linkUrl = match.Groups[2].Value;
+
+            return $"<a href=\"{linkUrl}\">{linkText}</a>";
+        });
+
+        return html;
+    }
+
+    // Inline code
+    private string ConvertMarkdownInlineCodeToHtml(string markup)
+    {
+        // Pattern to match inline Markdown code syntax: `code`
+        var pattern = @"`([^`]+)`";
+
+        // Replace inline Markdown code syntax with HTML <code> tag
+        var html = Regex.Replace(markup, pattern, match =>
+        {
+            var codeText = match.Groups[1].Value;
+
+            return $"<code>{codeText}</code>";
+        });
+
+        return html;
+    }
+
     //private string ConvertMarkdownChecklistToHtml(string markup)
     //{
     //    // Pattern to match Markdown checklist syntax: - [ ] or - [x] or 1. [ ] or 1. [x]