Markdown - updates

Author: gvreddy04

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

@@ -15,7 +15,7 @@
 
 <SectionHeading Size="HeadingSize.H2" Text="Headers" PageUrl="@pageUrl" HashTagName="headers" />
 <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.
+    Use headers to structure your content. Start a line with <code>#</code> for a heading. Add more <code>#</code> characters for subheadings, up to six levels.
 </div>
 <Demo Type="typeof(Markdown_Demo_02_Headers)" Tabs="true" />
 
@@ -27,23 +27,25 @@
 
 <SectionHeading Size="HeadingSize.H2" Text="Blockquotes" PageUrl="@pageUrl" HashTagName="blockquotes" />
 <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.
+    Quote text with <code>></code> before it. Use more <code>></code> characters to nest quotes. For blocks of text, use <code>></code> 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">
-    Add a horizontal rule with a line of `---`.
+    Add a horizontal rule with a line of <code>---</code>.
 </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">
-    Emphasize text with bold, italics, or strikethrough: <br />
-    - Italics: `*text*` or `_text_` <br />
-    - Bold: `**text**` <br />
-    - Strikethrough: `~~text~~` <br />
-    - Combine for more emphasis.
+    Emphasize text with bold, italics, or strikethrough:
+    <ul>
+        <li>Italics: <code>*text*</code> or <code>_text_</code></li>
+        <li>Bold: <code>**text**</code></li>
+        <li>Strikethrough: <code>~~text~~</code></li>
+        <li>Combine for more emphasis.</li>
+    </ul>
 </div>
 <Demo Type="typeof(Markdown_Demo_06_Emphasis_bold_italics_strikethrough)" Tabs="true" />
 
@@ -53,23 +55,26 @@
 
 <SectionHeading Size="HeadingSize.H2" Text="Tables" PageUrl="@pageUrl" HashTagName="tables" />
 <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 />
+    Tables help organize structured data.
+    <ul>
+        <li>Use <code>|</code> to separate cells.</li>
+        <li>Escape <code>|</code> with <code>\|</code> if used within a cell.</li>
+        <li>Use <code>&lt;br /&gt;</code> for new lines within a cell.</li>
+        <li>End each row with a carriage return (CR) or line feed (LF).</li>
+    </ul>
 </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.
+    Use lists to organize related items:
+    <ul>
+        <li>Ordered lists: start with a number followed by a period.</li>
+        <li>Unordered lists: start with a <code>-</code>.</li>
+        <li>Begin each list item on a new line.</li>
+    </ul>    
 </div>
 <SectionHeading Size="HeadingSize.H3" Text="Ordered list" PageUrl="@pageUrl" HashTagName="ordered-list" />
 <div class="mb-3"></div>