diff --git a/blazor/toast/getting-started-webapp.md b/blazor/toast/getting-started-webapp.md
index e5f2df9a7a..493970a316 100644
--- a/blazor/toast/getting-started-webapp.md
+++ b/blazor/toast/getting-started-webapp.md
@@ -93,18 +93,22 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespaces:
 
-```razor
+{% tabs %}
+{% highlight C# tabtitle="~/_Imports.razor" %}
+
 @using Syncfusion.Blazor
 @using Syncfusion.Blazor.Notifications
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of the Blazor Web App.
 
 If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both Program.cs files (Server and Client).
 
-Server:
+{% tabs %}
+{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
 
-```csharp
 using Syncfusion.Blazor;
 
 var builder = WebApplication.CreateBuilder(args);
@@ -117,22 +121,26 @@ builder.Services.AddRazorComponents()
 builder.Services.AddSyncfusionBlazor();
 
 var app = builder.Build();
-```
+....
 
-Client:
+{% endhighlight %}
+{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %}
 
-```csharp
 using Syncfusion.Blazor;
 
 var builder = WebAssemblyHostBuilder.CreateDefault(args);
 builder.Services.AddSyncfusionBlazor();
 
 await builder.Build().RunAsync();
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 If the **Interactive Render Mode** is set to `Server`, the project contains a single **~/Program.cs** file. In this case, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service only in that file.
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
+
 using Syncfusion.Blazor;
 
 var builder = WebApplication.CreateBuilder(args);
@@ -144,7 +152,9 @@ builder.Services.AddRazorComponents()
 builder.Services.AddSyncfusionBlazor();
 
 var app = builder.Build();
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Add stylesheet and script resources
 
@@ -179,14 +189,20 @@ N> If the **Interactivity Location** is set to `Global` and the **Render Mode**
 
 Render mode directive:
 
-```razor
+{% tabs %}
+{% highlight razor %}
+
 @* Desired render mode defined here *@
 @rendermode InteractiveAuto
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 Toast component example:
 
-```razor
+{% tabs %}
+{% highlight razor %}
+
 <div class="col-lg-12 control-section toast-default-section">
     <SfToast ID="toast_default" @ref="ToastObj" Title="Adaptive Tiles Meeting" Content="@ToastContent" Timeout="5000" Icon="e-meeting">
         <ToastPosition X="@ToastPosition"></ToastPosition>
@@ -226,7 +242,9 @@ Toast component example:
         await ToastObj.HideAsync("All");
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 Use <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Toast component renders in the default web browser.
 
diff --git a/blazor/toast/getting-started.md b/blazor/toast/getting-started.md
index ec81010f6c..704bd51621 100644
--- a/blazor/toast/getting-started.md
+++ b/blazor/toast/getting-started.md
@@ -79,14 +79,20 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Open `~/_Imports.razor` and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespaces:
 
-```razor
+{% tabs %}
+{% highlight C# tabtitle="~/_Imports.razor" %}
+
 @using Syncfusion.Blazor
 @using Syncfusion.Blazor.Notifications
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in `~/Program.cs` of the Blazor WebAssembly app:
 
-```csharp
+{% tabs %}
+{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 using Syncfusion.Blazor;
@@ -99,7 +105,10 @@ builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.
 
 builder.Services.AddSyncfusionBlazor();
 await builder.Build().RunAsync();
-```
+....
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Add stylesheet and script resources
 
@@ -119,7 +128,9 @@ N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearanc
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Toast component to `~/Pages/Index.razor`:
 
-```razor
+{% tabs %}
+{% highlight razor %}
+
 <div class="col-lg-12 control-section toast-default-section">
     <SfToast ID="toast_default" @ref="ToastObj" Title="Adaptive Tiles Meeting" Content="@ToastContent" Timeout="5000" Icon="e-meeting">
         <ToastPosition X="@ToastPosition"></ToastPosition>
@@ -159,7 +170,9 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Toast component
         await ToastObj.HideAsync("All");
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 Launch the application with <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS). The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Toast component renders in the default web browser.