MarkdownDocumentation.razor

@page "/markdown"

<PageTitle>@title</PageTitle>

<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />

<h1>Blazor Markdown <Badge Color="BadgeColor.Secondary">Preview</Badge></h1>
<div class="lead mb-3">Use Blazor Bootstrap Markdown component to add formatting, tables, images, and more to your project pages.</div>

<CarbonAds />

<SectionHeading Size="HeadingSize.H2" Text="Live preview" PageUrl="@pageUrl" HashTagName="live-preview" />
<div class="mb-3"></div>
<Demo Type="typeof(Markdown_Demo_01_Preview)" Tabs="true" />

<SectionHeading Size="HeadingSize.H2" Text="Headers" PageUrl="@pageUrl" HashTagName="headers" />
<div class="mb-3">
    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" />

<SectionHeading Size="HeadingSize.H2" Text="Paragraphs and line breaks" PageUrl="@pageUrl" HashTagName="paragraphs-and-line-breaks" />
<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">
    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 <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:
    <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" />

<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">
    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:
    <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>
<Demo Type="typeof(Markdown_Demo_09_Lists_A_Ordered)" Tabs="true" />

<SectionHeading Size="HeadingSize.H3" Text="Unordered list" PageUrl="@pageUrl" HashTagName="unordered-list" />
<div class="mb-3"></div>
<Demo Type="typeof(Markdown_Demo_09_Lists_B_Unordered)" Tabs="true" />

<SectionHeading Size="HeadingSize.H3" Text="Nested list" PageUrl="@pageUrl" HashTagName="nested-list" />
<div class="mb-3"></div>
<Demo Type="typeof(Markdown_Demo_09_Lists_C_Nested)" Tabs="true" />
<div class="mb-3"></div>
<Demo Type="typeof(Markdown_Demo_09_Lists_D_Nested)" Tabs="true" />
<div class="mb-3"></div>
<Demo Type="typeof(Markdown_Demo_09_Lists_E_Nested)" Tabs="true" />

<SectionHeading Size="HeadingSize.H2" Text="Links" PageUrl="@pageUrl" HashTagName="links" />
<div class="mb-3"></div>
<Demo Type="typeof(Markdown_Demo_10_Links)" Tabs="true" />

<SectionHeading Size="HeadingSize.H2" Text="Images" PageUrl="@pageUrl" HashTagName="images" />
<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";
    private string description = "Use Blazor Bootstrap Markdown component to add formatting, tables, images, and more to your project pages.";
    private string imageUrl = "https://i.imgur.com/FhN1caj.png";
}