Skip to content

Commit 9bc9009

Browse files
gvreddy04gvreddy04
authored
Markdown updates (#909)
* Added additional demo example placeholders * #904 Translation in GRID "Does not contain" * Markdown - New component - updates
1 parent 2abbe9d commit 9bc9009

29 files changed

+1255
-128
lines changed

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Demo_01_Translations.razor

+1
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
filtersTranslation.Add(new(">=", "Groter dan of gelijk aan", FilterOperator.GreaterThanOrEquals));
5050
// string
5151
filtersTranslation.Add(new("*a*", "Bevat", FilterOperator.Contains));
52+
filtersTranslation.Add(new("!*a*", "Bevat niet", FilterOperator.DoesNotContain));
5253
filtersTranslation.Add(new("a**", "Begint met", FilterOperator.StartsWith));
5354
filtersTranslation.Add(new("**a", "Eindigt met", FilterOperator.EndsWith));
5455
filtersTranslation.Add(new("=", "gelijk aan", FilterOperator.Equals));

‎BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor

+3-3
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@
132132
</div>
133133
<div class="col-sm-4 mb-2">
134134
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/markdown">
135-
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.MarkdownFill" class="me-2" /> Markdown <Badge Color="BadgeColor.Danger">New</Badge></h4>
135+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.MarkdownFill" class="me-2" /> Markdown <Badge Color="BadgeColor.Danger">Preview</Badge></h4>
136136
</a>
137137
</div>
138138
<div class="col-sm-4 mb-2">
@@ -238,7 +238,7 @@
238238
</div>
239239
</div>
240240

241-
<div class="container bd-gutter masthead-followup">
241+
@* <div class="container bd-gutter masthead-followup">
242242
<div class="col-lg-7 mb-4 mx-auto text-md-center">
243243
<h2 class="mb-3 fw-semibold lh-sm">AI Components</h2>
244244
</div>
@@ -250,7 +250,7 @@
250250
</a>
251251
</div>
252252
</div>
253-
</div>
253+
</div> *@
254254

255255
<div class="container bd-gutter masthead-followup mb-5">
256256
<div class="col-lg-7 mb-4 mx-auto text-md-center">

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

+75-8
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,106 @@
44

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

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

1010
<CarbonAds />
1111

12-
@* <SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
12+
<SectionHeading Size="HeadingSize.H2" Text="Live preview" PageUrl="@pageUrl" HashTagName="live-preview" />
1313
<div class="mb-3"></div>
14-
<Demo Type="typeof(Markdown_Demo_01_Examples)" Tabs="true" /> *@
14+
<Demo Type="typeof(Markdown_Demo_01_Preview)" Tabs="true" />
1515

1616
<SectionHeading Size="HeadingSize.H2" Text="Headers" PageUrl="@pageUrl" HashTagName="headers" />
17-
<div class="mb-3"></div>
17+
<div class="mb-3">
18+
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.
19+
</div>
1820
<Demo Type="typeof(Markdown_Demo_02_Headers)" Tabs="true" />
1921

2022
<SectionHeading Size="HeadingSize.H2" Text="Paragraphs and line breaks" PageUrl="@pageUrl" HashTagName="paragraphs-and-line-breaks" />
21-
<div class="mb-3"></div>
23+
<div class="mb-3">
24+
Break your text into paragraphs or line breaks for easier reading.
25+
</div>
2226
<Demo Type="typeof(Markdown_Demo_03_Paragraphs_and_Line_Breaks)" Tabs="true" />
2327

2428
<SectionHeading Size="HeadingSize.H2" Text="Blockquotes" PageUrl="@pageUrl" HashTagName="blockquotes" />
25-
<div class="mb-3"></div>
29+
<div class="mb-3">
30+
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.
31+
</div>
2632
<Demo Type="typeof(Markdown_Demo_04_Blockquotes)" Tabs="true" />
2733

2834
<SectionHeading Size="HeadingSize.H2" Text="Horizontal rules" PageUrl="@pageUrl" HashTagName="horizontal-rules" />
29-
<div class="mb-3"></div>
35+
<div class="mb-3">
36+
Add a horizontal rule with a line of <code>---</code>.
37+
</div>
3038
<Demo Type="typeof(Markdown_Demo_05_Horizontal_Rules)" Tabs="true" />
3139

3240
<SectionHeading Size="HeadingSize.H2" Text="Emphasis (bold, italics, strikethrough)" PageUrl="@pageUrl" HashTagName="emphasis-bold-italics-strikethrough" />
33-
<div class="mb-3"></div>
41+
<div class="mb-3">
42+
Emphasize text with bold, italics, or strikethrough:
43+
<ul>
44+
<li>Italics: <code>*text*</code> or <code>_text_</code></li>
45+
<li>Bold: <code>**text**</code></li>
46+
<li>Strikethrough: <code>~~text~~</code></li>
47+
<li>Combine for more emphasis.</li>
48+
</ul>
49+
</div>
3450
<Demo Type="typeof(Markdown_Demo_06_Emphasis_bold_italics_strikethrough)" Tabs="true" />
3551

3652
<SectionHeading Size="HeadingSize.H2" Text="Code highlighting" PageUrl="@pageUrl" HashTagName="code-highlighting" />
3753
<div class="mb-3"></div>
3854
<Demo Type="typeof(Markdown_Demo_07_Code_Highlighting)" Tabs="true" />
3955

56+
<SectionHeading Size="HeadingSize.H2" Text="Tables" PageUrl="@pageUrl" HashTagName="tables" />
57+
<div class="mb-3">
58+
Tables help organize structured data.
59+
<ul>
60+
<li>Use <code>|</code> to separate cells.</li>
61+
<li>Escape <code>|</code> with <code>\|</code> if used within a cell.</li>
62+
<li>Use <code>&lt;br /&gt;</code> for new lines within a cell.</li>
63+
<li>End each row with a carriage return (CR) or line feed (LF).</li>
64+
</ul>
65+
</div>
66+
<Demo Type="typeof(Markdown_Demo_08_Tables_A_Example)" Tabs="true" />
67+
<div class="mb-3"></div>
68+
<Demo Type="typeof(Markdown_Demo_08_Tables_B_Custom_CssClass)" Tabs="true" />
69+
70+
<SectionHeading Size="HeadingSize.H2" Text="Lists" PageUrl="@pageUrl" HashTagName="lists" />
71+
<div class="mb-3">
72+
Use lists to organize related items:
73+
<ul>
74+
<li>Ordered lists: start with a number followed by a period.</li>
75+
<li>Unordered lists: start with a <code>-</code>.</li>
76+
<li>Begin each list item on a new line.</li>
77+
</ul>
78+
</div>
79+
<SectionHeading Size="HeadingSize.H3" Text="Ordered list" PageUrl="@pageUrl" HashTagName="ordered-list" />
80+
<div class="mb-3"></div>
81+
<Demo Type="typeof(Markdown_Demo_09_Lists_A_Ordered)" Tabs="true" />
82+
83+
<SectionHeading Size="HeadingSize.H3" Text="Unordered list" PageUrl="@pageUrl" HashTagName="unordered-list" />
84+
<div class="mb-3"></div>
85+
<Demo Type="typeof(Markdown_Demo_09_Lists_B_Unordered)" Tabs="true" />
86+
87+
<SectionHeading Size="HeadingSize.H3" Text="Nested list" PageUrl="@pageUrl" HashTagName="nested-list" />
88+
<div class="mb-3"></div>
89+
<Demo Type="typeof(Markdown_Demo_09_Lists_C_Nested)" Tabs="true" />
90+
<div class="mb-3"></div>
91+
<Demo Type="typeof(Markdown_Demo_09_Lists_D_Nested)" Tabs="true" />
92+
<div class="mb-3"></div>
93+
<Demo Type="typeof(Markdown_Demo_09_Lists_E_Nested)" Tabs="true" />
94+
95+
<SectionHeading Size="HeadingSize.H2" Text="Links" PageUrl="@pageUrl" HashTagName="links" />
96+
<div class="mb-3"></div>
97+
<Demo Type="typeof(Markdown_Demo_10_Links)" Tabs="true" />
98+
99+
<SectionHeading Size="HeadingSize.H2" Text="Images" PageUrl="@pageUrl" HashTagName="images" />
100+
<div class="mb-3"></div>
101+
<Demo Type="typeof(Markdown_Demo_11_Images)" Tabs="true" />
102+
103+
<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
104+
<div class="mb-3"></div>
105+
<Demo Type="typeof(Markdown_Demo_99_Examples)" Tabs="true" />
106+
40107
@code{
41108
private string pageUrl = "/markdown";
42109
private string title = "Blazor Markdown Component";

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

-15
This file was deleted.

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

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<div class="row border-bottom mb-3">
2+
<div class="col"><b>Markdown</b></div>
3+
<div class="col"><b>Preview</b></div>
4+
</div>
5+
<div class="row" style="max-height:486px;">
6+
<div class="col">
7+
<textarea class="form-control"
8+
rows="18"
9+
placeholder="Enter markdown here"
10+
@bind="markdown"
11+
@bind:event="oninput">
12+
</textarea>
13+
</div>
14+
<div class="col">
15+
<Markdown style="max-height: 437px;overflow-y:auto;">@markdown</Markdown>
16+
</div>
17+
</div>
18+
19+
@code {
20+
private string markdown = "# Heading 1\n## Heading 2\n\n![BlazorBootstrap](https://demos.blazorbootstrap.com/images/logo/logo-color.svg =50)";
21+
}

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

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<Markdown>
2-
# This is a H1 header
3-
## This is a H2 header
4-
### This is a H3 header
5-
#### This is a H4 header
6-
##### This is a H5 header
2+
# This is a H1 header
3+
## This is a H2 header
4+
### This is a H3 header
5+
#### This is a H4 header
6+
##### This is a H5 header
7+
###### This is a H6 header
78
</Markdown>

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<Markdown>
2-
Add lines between your text with the **Enter** key.
3-
Your text gets better spaced and makes it easier to read.
2+
Add lines between your text with the **Enter** key.
3+
Your text gets better spaced and makes it easier to read.
44

55

6-
Add lines between your text with the **Enter** key.
7-
Your text gets better spaced and makes it easier to read.
6+
Add lines between your text with the **Enter** key.
7+
Your text gets better spaced and makes it easier to read.
88
</Markdown>

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

+8-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
<Markdown>
2-
> Single line quote
3-
>> Nested quote
4-
>> multiple line
5-
>> quote
2+
> A well-known quote, contained in a blockquote element.
3+
</Markdown>
4+
5+
<Markdown>
6+
> Single line quote
7+
>> Nested quote
8+
>> multiple line
9+
>> quote
610
</Markdown>

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

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<Markdown>
2-
above
3-
4-
----
5-
below
2+
above
3+
---
4+
below
65
</Markdown>

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<Markdown>
2-
Use _emphasis_ in comments to express **strong** opinions and point out ~~corrections~~
3-
**_Bold, italicized text_**
4-
**~~Bold, strike-through text~~**
2+
Use _emphasis_ in comments to express **strong** opinions and point out ~~corrections~~
3+
**_Bold, italicized text_**
4+
**~~Bold, strike-through text~~**
55
</Markdown>

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

+48-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,53 @@
11
<Markdown>
2-
```js
3-
const count = records.length;
4-
```
2+
```js
3+
const count = records.length;
4+
```
55
</Markdown>
66

77
<Markdown>
8-
```csharp
9-
Console.WriteLine("Hello, World!");
10-
```
8+
```csharp
9+
Console.WriteLine("Hello, World!");
10+
```
11+
</Markdown>
12+
13+
<Markdown>
14+
```csharp
15+
var countdown = new TimerRemaining()
16+
{
17+
buffer =
18+
{
19+
[^1] = 0,
20+
[^2] = 1,
21+
[^3] = 2,
22+
[^4] = 3,
23+
[^5] = 4,
24+
[^6] = 5,
25+
[^7] = 6,
26+
[^8] = 7,
27+
[^9] = 8,
28+
[^10] = 9
29+
}
30+
};
31+
```
32+
</Markdown>
33+
34+
<Markdown>
35+
```csharp
36+
public partial class C
37+
{
38+
// Declaring declaration
39+
public partial string Name { get; set; }
40+
}
41+
42+
public partial class C
43+
{
44+
// implementation declaration:
45+
private string _name;
46+
public partial string Name
47+
{
48+
get => _name;
49+
set => _name = value;
50+
}
51+
}
52+
```
1153
</Markdown>

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

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<Markdown>
2+
| Heading 1 | Heading 2 | Heading 3 |
3+
|--|--|--|
4+
| Cell A1 | Cell A2 | Cell A3 |
5+
| Cell B1 | Cell B2 | Cell B3<br />second line of text |
6+
</Markdown>

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

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Markdown TableCssClass="table table-striped table-hover table-bordered">
2+
| Heading 1 | Heading 2 | Heading 3 |
3+
|--|--|--|
4+
| Cell A1 | Cell A2 | Cell A3 |
5+
| Cell B1 | Cell B2 | Cell B3 |
6+
| Cell C1 | Cell C2 | Cell C3 |
7+
| Cell D1 | Cell D2 | Cell D3 |
8+
| Cell E1 | Cell E2 | Cell E3 |
9+
</Markdown>

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<Markdown>
2+
1. First item
3+
1. Second item
4+
1. Third item
5+
</Markdown>

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<Markdown>
2+
- Item 1
3+
- Item 2
4+
- Item 3
5+
</Markdown>

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

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Markdown>
2+
1. First item
3+
- Item 1
4+
- Item 2
5+
- Item 3
6+
1. Second item
7+
- Nested item 1
8+
- Further nested item 1
9+
- Further nested item 2
10+
- Further nested item 3
11+
- Nested item 2
12+
- Nested item 3
13+
1. Third item
14+
</Markdown>

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

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Markdown>
2+
1. First item
3+
1. Item 1
4+
1. Item 2
5+
1. Item 3
6+
1. Second item
7+
1. Nested item 1
8+
1. Further nested item 1
9+
1. Further nested item 2
10+
1. Further nested item 3
11+
1. Nested item 2
12+
1. Nested item 3
13+
1. Third item
14+
</Markdown>

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

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Markdown>
2+
- First item
3+
- Item 1
4+
- Item 2
5+
- Item 3
6+
- Second item
7+
- Nested item 1
8+
- Further nested item 1
9+
- Further nested item 2
10+
- Further nested item 3
11+
- Nested item 2
12+
- Nested item 3
13+
- Third item
14+
</Markdown>

0 commit comments

Comments
 (0)