Updated Blazor components Getting Started UG documentation for Blazor Web App

Author: Backiaraj

blazor/datagrid/how-to/create-custom-grid-component.md

@@ -13,9 +13,11 @@ Create a reusable custom Grid component by wrapping the `SfGrid` in a Razor comp
 
 The following example creates a `CustomGrid` wrapper that renders `SfGrid` with default properties such as `GridPageSettings`. Any unmatched attributes passed to `CustomGrid` are forwarded to the inner `SfGrid`, and content placed inside `CustomGrid` is projected as columns via `ChildContent`.
 
-CustomGrid.razor
+**CustomGrid.razor:**
+
+{% tabs %}
+{% highlight C# tabtitle="CustomGrid.razor" %}
 
-```cshtml
 @using Syncfusion.Blazor.Grids
 @typeparam TItem
 
@@ -30,11 +32,15 @@ CustomGrid.razor
     </GridPageSettings>
     @ChildContent
 </SfGrid>
-```
 
-CustomGrid.razor.cs
+{% endhighlight %}
+{% endtabs %}
+
+**CustomGrid.razor.cs:**
+
+{% tabs %}
+{% highlight C# tabtitle="CustomGrid.razor.cs" %}
 
-```csharp
 using Microsoft.AspNetCore.Components;
 using Syncfusion.Blazor.Grids;
 using System;
@@ -60,11 +66,15 @@ namespace SF_Grid_Inheritance.Shared
         public IReadOnlyDictionary<string, object>? AdditionalAttributes { get; set; }
     }
 }
-```
 
-Index.razor
+{% endhighlight %}
+{% endtabs %}
+
+**Index.razor:**
+
+{% tabs %}
+{% highlight C# tabtitle="Index.razor" %}
 
-```razor
 @using SF_Grid_Inheritance.Shared
 @using Syncfusion.Blazor.Grids
 
@@ -100,4 +110,6 @@ Index.razor
         public double? Freight { get; set; }
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}

blazor/datagrid/how-to/css-isolation-for-grid.md

@@ -15,8 +15,8 @@ To enable CSS isolation for the Grid, it is recommended to wrap the `SfGrid` ins
 
 Below is an example of implementing a simple Grid inside the **Index.razor** file:
 
-```razor
-Index.razor
+{% tabs %}
+{% highlight C# tabtitle="Index.razor" %}
 
 @using Syncfusion.Blazor.Grids
 
@@ -57,7 +57,9 @@ Index.razor
         public string ShipCountry { get; set; }
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ```css
 Index.razor.css

blazor/dropdown-list/getting-started-with-web-app.md

@@ -296,7 +296,7 @@ After initialization, populate the DropDownList with data using the [DataSource]
 
 ## Configure the popup list
 
-By default, the width of the popup list automatically adjusts according to the DropDownList input element's width, and the height of the popup list has `350px`. The height and width of the popup list can also be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) properties respectively.
+By default, the popup list width adjusts to the DropDownList input width, and the popup list height is `350px`. Customize the height and width using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) properties.
 
 {% tabs %}
 {% highlight razor %}

blazor/rich-text-editor/http-client-instance.md

@@ -13,7 +13,9 @@ The Rich Text Editor component in Blazor enables you to utilize the `HttpClientI
 
 The following example illustrates how to configure the Rich Text Editor component with HttpClient in a Blazor application.
 
-```razor
+{% tabs %}
+{% highlight razor %}
+
 @using Syncfusion.Blazor.RichTextEditor
 @inject HttpClient httpClient
 
@@ -34,11 +36,15 @@ The following example illustrates how to configure the Rich Text Editor componen
         await base.OnInitializedAsync();
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Program.cs
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="Program.cs" %}
+
 using Syncfusion.Blazor;
 
 var builder = WebApplication.CreateBuilder(args);
@@ -60,4 +66,5 @@ builder.Services.AddScoped(sp =>
 });
 var app = builder.Build();
 
-```
+{% endhighlight %}
+{% endtabs %}