Skip to content

Commit 0f51e83

Browse files
gvreddy04gvreddy04
committed
Markdown - docs update
1 parent 9883d4b commit 0f51e83

File tree

3 files changed

+317
-3
lines changed

3 files changed

+317
-3
lines changed

‎BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_10_Links.razor‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
<Markdown>
2-
[Google](https://www.google.com)
2+
[BlazorBootstrap - Docs](https://docs.blazorbootstrap.com/)
3+
[BlazorBootstrap - Demos](https://demos.blazorbootstrap.com/)
34
</Markdown>

‎blazorbootstrap/Components/Markdown/Markdown.razor.cs‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,20 @@ public partial class Markdown : BlazorBootstrapComponentBase
1919
/// Gets or sets the content to be rendered within the component.
2020
/// </summary>
2121
/// <remarks>
22-
/// Default value is null.
22+
/// Default value is <see langword="null"/>.
2323
/// </remarks>
2424
[Parameter]
2525
public RenderFragment? ChildContent { get; set; }
2626

27+
/// <summary>
28+
/// Gets or sets the CSS class for table.
29+
/// </summary>
2730
[Parameter]
2831
public string? TableCssClass { get; set; } = "table";
2932

33+
/// <summary>
34+
/// Gets or sets the CSS class for blockquotes.
35+
/// </summary>
3036
[Parameter]
3137
public string? BlockquotesCssClass { get; set; } = "blockquote";
3238

@@ -681,5 +687,4 @@ private static void RemoveLastLineBreak(List<string> htmlLines)
681687
if (htmlLines.Any() && htmlLines[^1] == "\n")
682688
htmlLines.RemoveAt(htmlLines.Count - 1);
683689
}
684-
685690
}

‎docs/docs/05-components/markdown.mdx‎

Lines changed: 308 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,308 @@
1+
---
2+
title: Blazor Markdown Component **Preview**
3+
description: Use Blazor Bootstrap Markdown component to add formatting, tables, images, and more to your project pages.
4+
image: https://i.imgur.com/FhN1caj.png
5+
6+
sidebar_label: Markdown
7+
sidebar_position: 14
8+
---
9+
10+
import CarbonAd from '/carbon-ad.mdx'
11+
12+
# Blazor Markdown <code>&nbsp;Preview&nbsp;</code>
13+
14+
Use Blazor Bootstrap Markdown component to add formatting, tables, images, and more to your project pages.
15+
16+
<CarbonAd />
17+
18+
## Parameters
19+
20+
| Name | Type | Default | Required | Description | Added Version |
21+
|:--|:--|:--|:--|:--|:--|
22+
| TableCssClass | string? | `table` | | Gets or sets the CSS class for table. | 3.1.0 |
23+
| BlockquotesCssClass | string? | `blockquote` | | Gets or sets the CSS class for blockquotes. | 3.1.0 |
24+
25+
## Live preview
26+
27+
<img src="https://i.imgur.com/FhN1caj.png" alt="Blazor Markdown Component" />
28+
29+
[See demo here.](https://demos.blazorbootstrap.com/markdown#live-preview)
30+
31+
## Examples
32+
33+
### Headers
34+
35+
Use headers to structure your content. Start a line with `#` for a heading. Add more `#` characters for subheadings, up to six levels.
36+
37+
<img src="https://i.imgur.com/p3qtk8F.png" alt="Blazor Markdown Component - Headers" />
38+
39+
```cshtml {} showLineNumbers
40+
<Markdown>
41+
# This is a H1 header
42+
## This is a H2 header
43+
### This is a H3 header
44+
#### This is a H4 header
45+
##### This is a H5 header
46+
###### This is a H6 header
47+
</Markdown>
48+
```
49+
50+
[See demo here.](https://demos.blazorbootstrap.com/markdown#headers)
51+
52+
### Paragraphs and line breaks
53+
54+
Break your text into paragraphs or line breaks for easier reading.
55+
56+
<img src="https://i.imgur.com/wBbnAZ1.png" alt="Blazor Markdown Component - Paragraphs and line breaks" />
57+
58+
```cshtml {} showLineNumbers
59+
<Markdown>
60+
Add lines between your text with the **Enter** key.
61+
Your text gets better spaced and makes it easier to read.
62+
63+
64+
Add lines between your text with the **Enter** key.
65+
Your text gets better spaced and makes it easier to read.
66+
</Markdown>
67+
```
68+
69+
[See demo here.](https://demos.blazorbootstrap.com/markdown#paragraphs-and-line-breaks)
70+
71+
### Blockquotes
72+
73+
Quote text with `>` before it. Use more `>` characters to nest quotes. For blocks of text, use `>` at the start of each line.
74+
75+
<img src="https://i.imgur.com/XiW88op.png" alt="Blazor Markdown Component - Blockquotes" />
76+
77+
```cshtml {} showLineNumbers
78+
<Markdown>
79+
> A well-known quote, contained in a blockquote element.
80+
</Markdown>
81+
82+
<Markdown>
83+
> Single line quote
84+
>> Nested quote
85+
>> multiple line
86+
>> quote
87+
</Markdown>
88+
```
89+
90+
[See demo here.](https://demos.blazorbootstrap.com/markdown#blockquotes)
91+
92+
### Horizontal rules
93+
94+
Add a horizontal rule with a line of `---`.
95+
96+
<img src="https://i.imgur.com/tpEuzaD.png" alt="Blazor Markdown Component - Horizontal rules" />
97+
98+
```cshtml {} showLineNumbers
99+
<Markdown>
100+
above
101+
---
102+
below
103+
</Markdown>
104+
```
105+
106+
[See demo here.](https://demos.blazorbootstrap.com/markdown#horizontal-rules)
107+
108+
### Emphasis (bold, italics, strikethrough)
109+
110+
Emphasize text with bold, italics, or strikethrough:
111+
- Italics: `*text*` or `_text_`
112+
- Bold: `**text**`
113+
- Strikethrough: `~~text~~`
114+
- Combine for more emphasis.
115+
116+
<img src="https://i.imgur.com/rnSOx8j.png" alt="Blazor Markdown Component - Emphasis (bold, italics, strikethrough)" />
117+
118+
```cshtml {} showLineNumbers
119+
<Markdown>
120+
Use _emphasis_ in comments to express **strong** opinions and point out ~~corrections~~
121+
**_Bold, italicized text_**
122+
**~~Bold, strike-through text~~**
123+
</Markdown>
124+
```
125+
126+
[See demo here.](https://demos.blazorbootstrap.com/markdown#emphasis-bold-italics-strikethrough)
127+
128+
### Code highlighting
129+
130+
<img src="https://i.imgur.com/MLZ2YkG.png" alt="Blazor Markdown Component - Code highlighting" />
131+
132+
[See demo here.](https://demos.blazorbootstrap.com/markdown#code-highlighting)
133+
134+
### Tables
135+
136+
Tables help organize structured data.
137+
- Use `|` to separate cells.
138+
- Escape `|` with `\|` if used within a cell.
139+
- Use `<br />` for new lines within a cell.
140+
- End each row with a carriage return (CR) or line feed (LF).
141+
142+
<img src="https://i.imgur.com/aMT8L2A.png" alt="Blazor Markdown Component - Tables" />
143+
144+
```cshtml {} showLineNumbers
145+
<Markdown>
146+
| Heading 1 | Heading 2 | Heading 3 |
147+
|--|--|--|
148+
| Cell A1 | Cell A2 | Cell A3 |
149+
| Cell B1 | Cell B2 | Cell B3<br />second line of text |
150+
</Markdown>
151+
```
152+
153+
<img src="https://i.imgur.com/xabVOTG.png" alt="Blazor Markdown Component - Tables with Css class" />
154+
155+
```cshtml {} showLineNumbers
156+
<Markdown TableCssClass="table table-striped table-hover table-bordered">
157+
| Heading 1 | Heading 2 | Heading 3 |
158+
|--|--|--|
159+
| Cell A1 | Cell A2 | Cell A3 |
160+
| Cell B1 | Cell B2 | Cell B3 |
161+
| Cell C1 | Cell C2 | Cell C3 |
162+
| Cell D1 | Cell D2 | Cell D3 |
163+
| Cell E1 | Cell E2 | Cell E3 |
164+
</Markdown>
165+
```
166+
167+
[See demo here.](https://demos.blazorbootstrap.com/markdown#)
168+
169+
### Lists
170+
171+
Use lists to organize related items:
172+
- Ordered lists: start with a number followed by a period.
173+
- Unordered lists: start with a `-`.
174+
- Begin each list item on a new line.
175+
176+
<img src="https://i.imgur.com/vBIXViL.png" alt="Blazor Markdown Component - Lists" />
177+
178+
[See demo here.](https://demos.blazorbootstrap.com/markdown#lists)
179+
180+
#### Ordered list
181+
182+
<img src="https://i.imgur.com/6OTYc7Z.png" alt="Blazor Markdown Component - Ordered list" />
183+
184+
```cshtml {} showLineNumbers
185+
<Markdown>
186+
1. First item
187+
1. Second item
188+
1. Third item
189+
</Markdown>
190+
```
191+
192+
[See demo here.](https://demos.blazorbootstrap.com/markdown#ordered-list)
193+
194+
#### Unordered list
195+
196+
<img src="https://i.imgur.com/PkPf8jH.png" alt="Blazor Markdown Component - Unordered list" />
197+
198+
```cshtml {} showLineNumbers
199+
<Markdown>
200+
- Item 1
201+
- Item 2
202+
- Item 3
203+
</Markdown>
204+
```
205+
206+
[See demo here.](https://demos.blazorbootstrap.com/markdown#unordered-list)
207+
208+
#### Nested list
209+
210+
<img src="https://i.imgur.com/eOvzBra.png" alt="Blazor Markdown Component - Nested list" />
211+
212+
```cshtml {} showLineNumbers
213+
<Markdown>
214+
1. First item
215+
1. Item 1
216+
1. Item 2
217+
1. Item 3
218+
1. Second item
219+
1. Nested item 1
220+
1. Further nested item 1
221+
1. Further nested item 2
222+
1. Further nested item 3
223+
1. Nested item 2
224+
1. Nested item 3
225+
1. Third item
226+
</Markdown>
227+
```
228+
229+
<img src="https://i.imgur.com/QbgboNn.png" alt="Blazor Markdown Component - Nested list" />
230+
231+
```cshtml {} showLineNumbers
232+
<Markdown>
233+
- First item
234+
- Item 1
235+
- Item 2
236+
- Item 3
237+
- Second item
238+
- Nested item 1
239+
- Further nested item 1
240+
- Further nested item 2
241+
- Further nested item 3
242+
- Nested item 2
243+
- Nested item 3
244+
- Third item
245+
</Markdown>
246+
```
247+
248+
<img src="https://i.imgur.com/qATjqrP.png" alt="Blazor Markdown Component - Nested list" />
249+
250+
```cshtml {} showLineNumbers
251+
<Markdown>
252+
1. First item
253+
- Item 1
254+
- Item 2
255+
- Item 3
256+
1. Second item
257+
- Nested item 1
258+
- Further nested item 1
259+
- Further nested item 2
260+
- Further nested item 3
261+
- Nested item 2
262+
- Nested item 3
263+
1. Third item
264+
</Markdown>
265+
```
266+
267+
[See demo here.](https://demos.blazorbootstrap.com/markdown#nested-list)
268+
269+
### Links
270+
271+
<img src="https://i.imgur.com/ZnCLVVd.png" alt="Blazor Markdown Component - Links" />
272+
273+
```cshtml {} showLineNumbers
274+
<Markdown>
275+
[BlazorBootstrap - Docs](https://docs.blazorbootstrap.com/)
276+
[BlazorBootstrap - Demos](https://demos.blazorbootstrap.com/)
277+
</Markdown>
278+
```
279+
280+
[See demo here.](https://demos.blazorbootstrap.com/markdown#links)
281+
282+
### Images
283+
284+
<img src="https://i.imgur.com/c3gF5yT.png" alt="Blazor Markdown Component - Images" />
285+
286+
```cshtml {} showLineNumbers
287+
<Markdown>
288+
![BlazorBootstrap](https://demos.blazorbootstrap.com/images/logo/logo-color.svg)
289+
</Markdown>
290+
```
291+
292+
<img src="https://i.imgur.com/zcm7MHp.png" alt="Blazor Markdown Component - Images" />
293+
294+
```cshtml {} showLineNumbers
295+
<Markdown>
296+
![BlazorBootstrap](https://demos.blazorbootstrap.com/images/logo/logo-color.svg =200x200)
297+
</Markdown>
298+
```
299+
300+
<img src="https://i.imgur.com/mfCgiHS.png" alt="Blazor Markdown Component - Images" />
301+
302+
```cshtml {} showLineNumbers
303+
<Markdown>
304+
![BlazorBootstrap](https://demos.blazorbootstrap.com/images/logo/logo-color.svg =50)
305+
</Markdown>
306+
```
307+
308+
[See demo here.](https://demos.blazorbootstrap.com/markdown#)

0 commit comments

Comments
 (0)