diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_10_Links.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_10_Links.razor index 8763755ea..0b820c373 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_10_Links.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_10_Links.razor @@ -1,3 +1,4 @@  -[Google](https://www.google.com) +[BlazorBootstrap - Docs](https://docs.blazorbootstrap.com/) +[BlazorBootstrap - Demos](https://demos.blazorbootstrap.com/) \ No newline at end of file diff --git a/blazorbootstrap/Components/Markdown/Markdown.razor.cs b/blazorbootstrap/Components/Markdown/Markdown.razor.cs index 0e4421235..23ca85f32 100644 --- a/blazorbootstrap/Components/Markdown/Markdown.razor.cs +++ b/blazorbootstrap/Components/Markdown/Markdown.razor.cs @@ -19,14 +19,20 @@ public partial class Markdown : BlazorBootstrapComponentBase /// Gets or sets the content to be rendered within the component. /// /// - /// Default value is null. + /// Default value is . /// [Parameter] public RenderFragment? ChildContent { get; set; } + /// + /// Gets or sets the CSS class for table. + /// [Parameter] public string? TableCssClass { get; set; } = "table"; + /// + /// Gets or sets the CSS class for blockquotes. + /// [Parameter] public string? BlockquotesCssClass { get; set; } = "blockquote"; @@ -681,5 +687,4 @@ private static void RemoveLastLineBreak(List htmlLines) if (htmlLines.Any() && htmlLines[^1] == "\n") htmlLines.RemoveAt(htmlLines.Count - 1); } - } diff --git a/docs/docs/05-components/markdown.mdx b/docs/docs/05-components/markdown.mdx new file mode 100644 index 000000000..dc7d426bc --- /dev/null +++ b/docs/docs/05-components/markdown.mdx @@ -0,0 +1,308 @@ +--- +title: Blazor Markdown Component **Preview** +description: Use Blazor Bootstrap Markdown component to add formatting, tables, images, and more to your project pages. +image: https://i.imgur.com/FhN1caj.png + +sidebar_label: Markdown +sidebar_position: 14 +--- + +import CarbonAd from '/carbon-ad.mdx' + +# Blazor Markdown  Preview  + +Use Blazor Bootstrap Markdown component to add formatting, tables, images, and more to your project pages. + + + +## Parameters + +| Name | Type | Default | Required | Description | Added Version | +|:--|:--|:--|:--|:--|:--| +| TableCssClass | string? | `table` | | Gets or sets the CSS class for table. | 3.1.0 | +| BlockquotesCssClass | string? | `blockquote` | | Gets or sets the CSS class for blockquotes. | 3.1.0 | + +## Live preview + +Blazor Markdown Component + +[See demo here.](https://demos.blazorbootstrap.com/markdown#live-preview) + +## Examples + +### Headers + +Use headers to structure your content. Start a line with `#` for a heading. Add more `#` characters for subheadings, up to six levels. + +Blazor Markdown Component - Headers + +```cshtml {} showLineNumbers + +# This is a H1 header +## This is a H2 header +### This is a H3 header +#### This is a H4 header +##### This is a H5 header +###### This is a H6 header + +``` + +[See demo here.](https://demos.blazorbootstrap.com/markdown#headers) + +### Paragraphs and line breaks + +Break your text into paragraphs or line breaks for easier reading. + +Blazor Markdown Component - Paragraphs and line breaks + +```cshtml {} showLineNumbers + +Add lines between your text with the **Enter** key. +Your text gets better spaced and makes it easier to read. + + +Add lines between your text with the **Enter** key. +Your text gets better spaced and makes it easier to read. + +``` + +[See demo here.](https://demos.blazorbootstrap.com/markdown#paragraphs-and-line-breaks) + +### Blockquotes + +Quote text with `>` before it. Use more `>` characters to nest quotes. For blocks of text, use `>` at the start of each line. + +Blazor Markdown Component - Blockquotes + +```cshtml {} showLineNumbers + +> A well-known quote, contained in a blockquote element. + + + +> Single line quote +>> Nested quote +>> multiple line +>> quote + +``` + +[See demo here.](https://demos.blazorbootstrap.com/markdown#blockquotes) + +### Horizontal rules + +Add a horizontal rule with a line of `---`. + +Blazor Markdown Component - Horizontal rules + +```cshtml {} showLineNumbers + +above +--- +below + +``` + +[See demo here.](https://demos.blazorbootstrap.com/markdown#horizontal-rules) + +### Emphasis (bold, italics, strikethrough) + +Emphasize text with bold, italics, or strikethrough: +- Italics: `*text*` or `_text_` +- Bold: `**text**` +- Strikethrough: `~~text~~` +- Combine for more emphasis. + +Blazor Markdown Component - Emphasis (bold, italics, strikethrough) + +```cshtml {} showLineNumbers + +Use _emphasis_ in comments to express **strong** opinions and point out ~~corrections~~ +**_Bold, italicized text_** +**~~Bold, strike-through text~~** + +``` + +[See demo here.](https://demos.blazorbootstrap.com/markdown#emphasis-bold-italics-strikethrough) + +### Code highlighting + +Blazor Markdown Component - Code highlighting + +[See demo here.](https://demos.blazorbootstrap.com/markdown#code-highlighting) + +### Tables + +Tables help organize structured data. +- Use `|` to separate cells. +- Escape `|` with `\|` if used within a cell. +- Use `
` for new lines within a cell. +- End each row with a carriage return (CR) or line feed (LF). + +Blazor Markdown Component - Tables + +```cshtml {} showLineNumbers + +| Heading 1 | Heading 2 | Heading 3 | +|--|--|--| +| Cell A1 | Cell A2 | Cell A3 | +| Cell B1 | Cell B2 | Cell B3
second line of text | + +``` + +Blazor Markdown Component - Tables with Css class + +```cshtml {} showLineNumbers + +| Heading 1 | Heading 2 | Heading 3 | +|--|--|--| +| Cell A1 | Cell A2 | Cell A3 | +| Cell B1 | Cell B2 | Cell B3 | +| Cell C1 | Cell C2 | Cell C3 | +| Cell D1 | Cell D2 | Cell D3 | +| Cell E1 | Cell E2 | Cell E3 | + +``` + +[See demo here.](https://demos.blazorbootstrap.com/markdown#) + +### Lists + +Use lists to organize related items: +- Ordered lists: start with a number followed by a period. +- Unordered lists: start with a `-`. +- Begin each list item on a new line. + +Blazor Markdown Component - Lists + +[See demo here.](https://demos.blazorbootstrap.com/markdown#lists) + +#### Ordered list + +Blazor Markdown Component - Ordered list + +```cshtml {} showLineNumbers + +1. First item +1. Second item +1. Third item + +``` + +[See demo here.](https://demos.blazorbootstrap.com/markdown#ordered-list) + +#### Unordered list + +Blazor Markdown Component - Unordered list + +```cshtml {} showLineNumbers + +- Item 1 +- Item 2 +- Item 3 + +``` + +[See demo here.](https://demos.blazorbootstrap.com/markdown#unordered-list) + +#### Nested list + +Blazor Markdown Component - Nested list + +```cshtml {} showLineNumbers + +1. First item + 1. Item 1 + 1. Item 2 + 1. Item 3 +1. Second item + 1. Nested item 1 + 1. Further nested item 1 + 1. Further nested item 2 + 1. Further nested item 3 + 1. Nested item 2 + 1. Nested item 3 +1. Third item + +``` + +Blazor Markdown Component - Nested list + +```cshtml {} showLineNumbers + +- First item + - Item 1 + - Item 2 + - Item 3 +- Second item + - Nested item 1 + - Further nested item 1 + - Further nested item 2 + - Further nested item 3 + - Nested item 2 + - Nested item 3 +- Third item + +``` + +Blazor Markdown Component - Nested list + +```cshtml {} showLineNumbers + +1. First item + - Item 1 + - Item 2 + - Item 3 +1. Second item + - Nested item 1 + - Further nested item 1 + - Further nested item 2 + - Further nested item 3 + - Nested item 2 + - Nested item 3 +1. Third item + +``` + +[See demo here.](https://demos.blazorbootstrap.com/markdown#nested-list) + +### Links + +Blazor Markdown Component - Links + +```cshtml {} showLineNumbers + +[BlazorBootstrap - Docs](https://docs.blazorbootstrap.com/) +[BlazorBootstrap - Demos](https://demos.blazorbootstrap.com/) + +``` + +[See demo here.](https://demos.blazorbootstrap.com/markdown#links) + +### Images + +Blazor Markdown Component - Images + +```cshtml {} showLineNumbers + +![BlazorBootstrap](https://demos.blazorbootstrap.com/images/logo/logo-color.svg) + +``` + +Blazor Markdown Component - Images + +```cshtml {} showLineNumbers + +![BlazorBootstrap](https://demos.blazorbootstrap.com/images/logo/logo-color.svg =200x200) + +``` + +Blazor Markdown Component - Images + +```cshtml {} showLineNumbers + +![BlazorBootstrap](https://demos.blazorbootstrap.com/images/logo/logo-color.svg =50) + +``` + +[See demo here.](https://demos.blazorbootstrap.com/markdown#)