From be66cdf4e7270fe78193e8016c7e0883a6928239 Mon Sep 17 00:00:00 2001
From: Backiaraj <backiaraj.kanagaraj@syncfusion.com>
Date: Thu, 16 Oct 2025 15:40:08 +0530
Subject: [PATCH 1/2] Updated code language format

---
 blazor/smart-paste/claude-service.md      | 40 +++++++++++++++-----
 blazor/smart-paste/deepseek-service.md    | 40 +++++++++++++++-----
 blazor/smart-paste/gemini-service.md      | 40 +++++++++++++++-----
 blazor/smart-paste/groq-service.md        | 40 +++++++++++++++-----
 blazor/smart-textarea/claude-service.md   | 40 +++++++++++++++-----
 blazor/smart-textarea/deepseek-service.md | 40 +++++++++++++++-----
 blazor/smart-textarea/gemini-service.md   | 40 +++++++++++++++-----
 blazor/smart-textarea/groq-service.md     | 40 +++++++++++++++-----
 blazor/toast/getting-started-webapp.md    | 45 ++++++++++++++++-------
 blazor/toast/getting-started.md           | 24 +++++++++---
 10 files changed, 289 insertions(+), 100 deletions(-)

diff --git a/blazor/smart-paste/claude-service.md b/blazor/smart-paste/claude-service.md
index 5282ec7f04..956cc88fd4 100644
--- a/blazor/smart-paste/claude-service.md
+++ b/blazor/smart-paste/claude-service.md
@@ -28,7 +28,9 @@ Create a service class to manage interactions with the Claude API, including aut
 2. Add a new file named `ClaudeAIService.cs` in the `Services` folder.
 3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`).
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="ClaudeAIService.cs" %}
+
 using System.Net;
 using System.Text;
 using System.Text.Json;
@@ -93,7 +95,9 @@ public class ClaudeAIService
         }
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 N> Store the Claude API key in `appsettings.json` (e.g., `{ "Claude": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. Verify the `anthropic-version` header in [Claude API Documentation](https://docs.anthropic.com/claude/docs) for the latest version.
 
@@ -104,7 +108,9 @@ Define C# classes to match the Claude API’s JSON request and response format.
 1. Create a new file named `ClaudeModels.cs` in the `Services` folder.
 2. Add the following model classes:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="ClaudeModels.cs" %}
+
 public class ClaudeChatRequest
 {
     public string Model { get; set; }
@@ -128,7 +134,9 @@ public class ClaudeContentBlock
 {
     public string Text { get; set; }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Create a Custom AI Service
 
@@ -137,7 +145,9 @@ Implement the `IChatInferenceService` interface to connect the Smart Paste Butto
 1. Create a new file named `ClaudeInferenceService.cs` in the `Services` folder.
 2. Add the following implementation:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="ClaudeInferenceService.cs" %}
+
 using Syncfusion.Blazor.AI;
 using System.Threading.Tasks;
 
@@ -155,7 +165,9 @@ public class ClaudeInferenceService : IChatInferenceService
         return await _claudeService.CompleteAsync(options.Messages);
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Configure the Blazor App
 
@@ -163,7 +175,9 @@ Register the Claude service and `IChatInferenceService` implementation in the de
 
 Update the **~/Program.cs** file as follows:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="~/Program.cs" hl_lines="3 10 11" %}
+
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Syncfusion.Blazor;
@@ -180,13 +194,17 @@ builder.Services.AddSingleton<IChatInferenceService, ClaudeInferenceService>();
 
 var app = builder.Build();
 // ...
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Add the Smart Paste Button
 
 Add the Smart Paste Button to a form in the **~/Pages/Home.razor** file to test the Groq AI integration.
 
-```razor
+{% tabs %}
+{% highlight razor tabtitle="~/Pages/Home.razor" %}
+
 @using Syncfusion.Blazor.DataForm
 @using Syncfusion.Blazor.SmartComponents
 @using System.ComponentModel.DataAnnotations
@@ -234,7 +252,9 @@ Add the Smart Paste Button to a form in the **~/Pages/Home.razor** file to test
         public string Address { get; set; }
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 N> Ensure the [Syncfusion Blazor DataForm](https://blazor.syncfusion.com/documentation/data-form/getting-started-with-web-app) package is installed for form integration.
 
diff --git a/blazor/smart-paste/deepseek-service.md b/blazor/smart-paste/deepseek-service.md
index af785a46bd..79c0ab85b4 100644
--- a/blazor/smart-paste/deepseek-service.md
+++ b/blazor/smart-paste/deepseek-service.md
@@ -26,7 +26,9 @@ Create a service class to manage interactions with the DeepSeek API, including a
 2. Add a new file named `DeepSeekAIService.cs` in the `Services` folder.
 3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`).
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="DeepSeekAIService.cs" %}
+
 using System.Net;
 using System.Text;
 using System.Text.Json;
@@ -89,7 +91,9 @@ public class DeepSeekAIService
         }
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 N> Store the DeepSeek API key in `appsettings.json` (e.g., `{ "DeepSeek": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security.
 
@@ -100,7 +104,9 @@ Define C# classes to match the DeepSeek API’s JSON request and response format
 1. Create a new file named `DeepSeekModels.cs` in the `Services` folder.
 2. Add the following model classes:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="DeepSeekModels.cs" %}
+
 public class DeepSeekMessage
 {
     public string Role { get; set; }
@@ -123,7 +129,9 @@ public class DeepSeekChoice
 {
     public DeepSeekMessage Message { get; set; }
 }
-```
+
+{% endhighlight %}
+(% endtabs %)
 
 ## Create a Custom AI Service
 
@@ -132,7 +140,9 @@ Implement the `IChatInferenceService` interface to connect the Smart Paste Butto
 1. Create a new file named `DeepSeekInferenceService.cs` in the `Services` folder.
 2. Add the following implementation:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="DeepSeekInferenceService.cs" %}
+
 using Syncfusion.Blazor.AI;
 using System.Threading.Tasks;
 
@@ -150,7 +160,9 @@ public class DeepSeekInferenceService : IChatInferenceService
         return await _deepSeekService.CompleteAsync(options.Messages);
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Configure the Blazor App
 
@@ -158,7 +170,9 @@ Register the DeepSeek service and `IChatInferenceService` implementation in the
 
 Update the **~/Program.cs** file as follows:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="~/Program.cs" hl_lines="3 10 11" %}
+
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Syncfusion.Blazor;
@@ -175,13 +189,17 @@ builder.Services.AddSingleton<IChatInferenceService, DeepSeekInferenceService>()
 
 var app = builder.Build();
 // ...
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Add the Smart Paste Button
 
 Add the Smart Paste Button to a form in the **~/Pages/Home.razor** file to test the Groq AI integration.
 
-```razor
+{% tabs %}
+{% highlight c# tabtitle="~/Pages/Home.razor" %}
+
 @using Syncfusion.Blazor.DataForm
 @using Syncfusion.Blazor.SmartComponents
 @using System.ComponentModel.DataAnnotations
@@ -229,7 +247,9 @@ Add the Smart Paste Button to a form in the **~/Pages/Home.razor** file to test
         public string Address { get; set; }
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 N> Ensure the [Syncfusion Blazor DataForm](https://blazor.syncfusion.com/documentation/data-form/getting-started-with-web-app) package is installed for form integration.
 
diff --git a/blazor/smart-paste/gemini-service.md b/blazor/smart-paste/gemini-service.md
index f3e34e2820..0f0eca10b0 100644
--- a/blazor/smart-paste/gemini-service.md
+++ b/blazor/smart-paste/gemini-service.md
@@ -26,7 +26,9 @@ Create a service class to manage interactions with the Gemini API, including aut
 2. Add a new file named `GeminiService.cs` in the `Services` folder.
 3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`).
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="GeminiService.cs" %}
+
 using System.Net;
 using System.Text;
 using System.Text.Json;
@@ -107,7 +109,9 @@ public class GeminiService
         };
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 N> Store the Gemini API key in `appsettings.json` (e.g., `{ "Gemini": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. The `SafetySettings` filter harmful content; adjust thresholds based on your application’s needs.
 
@@ -118,7 +122,9 @@ Define C# classes to match the Gemini API’s JSON request and response format.
 1. Create a new file named `GeminiModels.cs` in the `Services` folder.
 2. Add the following model classes:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="GeminiModels.cs" %}
+
 public class Part
 {
     public string Text { get; set; }
@@ -172,7 +178,9 @@ public class GeminiChatParameters
     public GenerationConfig GenerationConfig { get; init; } = new();
     public List<SafetySetting> SafetySettings { get; init; } = new();
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Create a Custom AI Service
 
@@ -181,7 +189,9 @@ Implement the `IChatInferenceService` interface to connect the Smart Paste Butto
 1. Create a new file named `GeminiInferenceService.cs` in the `Services` folder.
 2. Add the following implementation:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="GeminiInferenceService.cs" %}
+
 using Syncfusion.Blazor.AI;
 using System.Threading.Tasks;
 
@@ -199,7 +209,9 @@ public class GeminiInferenceService : IChatInferenceService
         return await _geminiService.CompleteAsync(options.Messages);
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Configure the Blazor App
 
@@ -207,7 +219,9 @@ Register the Gemini service and `IChatInferenceService` implementation in the de
 
 Update the **~/Program.cs** file as follows:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="~/Program.cs" hl_lines="3 10 11" %}
+
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Syncfusion.Blazor;
@@ -224,13 +238,17 @@ builder.Services.AddSingleton<IChatInferenceService, GeminiInferenceService>();
 
 var app = builder.Build();
 // ...
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Add the Smart Paste Button
 
 Add the Smart Paste Button to a form in the **~/Pages/Home.razor** file to test the Groq AI integration.
 
-```razor
+{% tabs %}
+{% highlight c# tabtitle="~/Pages/Home.razor" %}
+
 @using Syncfusion.Blazor.DataForm
 @using Syncfusion.Blazor.SmartComponents
 @using System.ComponentModel.DataAnnotations
@@ -278,7 +296,9 @@ Add the Smart Paste Button to a form in the **~/Pages/Home.razor** file to test
         public string Address { get; set; }
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 N> Ensure the [Syncfusion Blazor DataForm](https://blazor.syncfusion.com/documentation/data-form/getting-started-with-web-app) package is installed for form integration.
 
diff --git a/blazor/smart-paste/groq-service.md b/blazor/smart-paste/groq-service.md
index 86f0c919e3..69821f7685 100644
--- a/blazor/smart-paste/groq-service.md
+++ b/blazor/smart-paste/groq-service.md
@@ -28,7 +28,9 @@ Create a service class to manage interactions with the Groq API, including authe
 2. Add a new file named `GroqService.cs` in the `Services` folder.
 3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json` or environment variables).
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="GroqService.cs" %}
+
 using System.Net;
 using System.Text;
 using System.Text.Json;
@@ -91,7 +93,9 @@ public class GroqService
         }
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 N> Store the Groq API key in `appsettings.json` (e.g., `{ "Groq": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security.
 
@@ -102,7 +106,9 @@ Define C# classes to match the Groq API’s request and response format.
 1. Create a new file named `GroqModels.cs` in the `Services` folder.
 2. Add the following model classes:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="GroqModels.cs" %}
+
 public class Choice
 {
     public Message Message { get; set; }
@@ -126,7 +132,9 @@ public class GroqResponseObject
     public string Model { get; set; }
     public List<Choice> Choices { get; set; }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Create a Custom AI Service
 
@@ -135,7 +143,9 @@ Implement the `IChatInferenceService` interface to connect the Smart Paste Butto
 1. Create a new file named `GroqInferenceService.cs` in the `Services` folder.
 2. Add the following implementation:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="GroqInferenceService.cs" %}
+
 using Syncfusion.Blazor.AI;
 using System.Threading.Tasks;
 
@@ -153,7 +163,9 @@ public class GroqInferenceService : IChatInferenceService
         return await _groqService.CompleteAsync(options.Messages);
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Configure the Blazor App
 
@@ -161,7 +173,9 @@ Register the Groq service and `IChatInferenceService` implementation in the depe
 
 Update the **~/Program.cs** file as follows:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="~/Program.cs" hl_lines="3 10 11" %}
+
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Syncfusion.Blazor;
@@ -178,13 +192,17 @@ builder.Services.AddSingleton<IChatInferenceService, GroqInferenceService>();
 
 var app = builder.Build();
 // ...
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Add the Smart Paste Button
 
 Add the Smart Paste Button to a form in the **~/Pages/Home.razor** file to test the Groq AI integration.
 
-```razor
+{% tabs %}
+{% highlight c# tabtitle="~/Pages/Home.razor" %}
+
 @using Syncfusion.Blazor.DataForm
 @using Syncfusion.Blazor.SmartComponents
 @using System.ComponentModel.DataAnnotations
@@ -232,7 +250,9 @@ Add the Smart Paste Button to a form in the **~/Pages/Home.razor** file to test
         public string Address { get; set; }
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 N> Ensure the [Syncfusion Blazor DataForm](https://blazor.syncfusion.com/documentation/data-form/getting-started-with-web-app) package is installed for form integration.
 
diff --git a/blazor/smart-textarea/claude-service.md b/blazor/smart-textarea/claude-service.md
index 7a191a1069..e4fa97def8 100644
--- a/blazor/smart-textarea/claude-service.md
+++ b/blazor/smart-textarea/claude-service.md
@@ -28,7 +28,9 @@ Create a service class to manage interactions with the Claude API, including aut
 2. Add a new file named `ClaudeAIService.cs` in the `Services` folder.
 3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`).
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="ClaudeAIService.cs" %}
+
 using System.Net;
 using System.Text;
 using System.Text.Json;
@@ -93,7 +95,9 @@ public class ClaudeAIService
         }
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 N> Store the Claude API key in `appsettings.json` (e.g., `{ "Claude": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. Verify the `anthropic-version` header in [Claude API Documentation](https://docs.anthropic.com/claude/docs) for the latest version.
 
@@ -104,7 +108,9 @@ Define C# classes to match the Claude API’s JSON request and response format.
 1. Create a new file named `ClaudeModels.cs` in the `Services` folder.
 2. Add the following model classes:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="ClaudeModels.cs" %}
+
 public class ClaudeChatRequest
 {
     public string Model { get; set; }
@@ -128,7 +134,9 @@ public class ClaudeContentBlock
 {
     public string Text { get; set; }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Create a Custom AI Service
 
@@ -137,7 +145,9 @@ Implement the `IChatInferenceService` interface to connect the Smart TextArea to
 1. Create a new file named `ClaudeInferenceService.cs` in the `Services` folder.
 2. Add the following implementation:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="ClaudeInferenceService.cs" %}
+
 using Syncfusion.Blazor.AI;
 using System.Threading.Tasks;
 
@@ -155,7 +165,9 @@ public class ClaudeInferenceService : IChatInferenceService
         return await _claudeService.CompleteAsync(options.Messages);
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Configure the Blazor App
 
@@ -163,7 +175,9 @@ Register the Claude service and `IChatInferenceService` implementation in the de
 
 Update the **~/Program.cs** file as follows:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="~/Program.cs" hl_lines="3 10 11" %}
+
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Syncfusion.Blazor;
@@ -180,13 +194,17 @@ builder.Services.AddSingleton<IChatInferenceService, ClaudeInferenceService>();
 
 var app = builder.Build();
 // ...
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Use Claude AI with Smart TextArea
 
 Add the Smart TextArea component to a Razor file (e.g., `~/Pages/Home.razor`) to use Claude AI for autocompletion:
 
-```razor
+{% tabs %}
+{% highlight razor tabtitle="~/Pages/Home.razor" %}
+
 @using Syncfusion.Blazor.SmartComponents
 
 <SfSmartTextArea UserRole="@userRole" UserPhrases="@userPhrases" Placeholder="Enter your queries here" @bind-Value="prompt" Width="75%" RowCount="5">
@@ -203,7 +221,9 @@ Add the Smart TextArea component to a Razor file (e.g., `~/Pages/Home.razor`) to
         "We are investigating your issue."
     ];
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Test the Integration
 
diff --git a/blazor/smart-textarea/deepseek-service.md b/blazor/smart-textarea/deepseek-service.md
index 4d2391fa18..fb8cabf0ac 100644
--- a/blazor/smart-textarea/deepseek-service.md
+++ b/blazor/smart-textarea/deepseek-service.md
@@ -26,7 +26,9 @@ Create a service class to manage interactions with the DeepSeek API, including a
 2. Add a new file named `DeepSeekAIService.cs` in the `Services` folder.
 3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`).
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="DeepSeekAIService.cs" %}
+
 using System.Net;
 using System.Text;
 using System.Text.Json;
@@ -89,7 +91,9 @@ public class DeepSeekAIService
         }
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 N> Store the DeepSeek API key in `appsettings.json` (e.g., `{ "DeepSeek": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security.
 
@@ -100,7 +104,9 @@ Define C# classes to match the DeepSeek API’s JSON request and response format
 1. Create a new file named `DeepSeekModels.cs` in the `Services` folder.
 2. Add the following model classes:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="DeepSeekModels.cs" %}
+
 public class DeepSeekMessage
 {
     public string Role { get; set; }
@@ -123,7 +129,9 @@ public class DeepSeekChoice
 {
     public DeepSeekMessage Message { get; set; }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Create a Custom AI Service
 
@@ -132,7 +140,9 @@ Implement the `IChatInferenceService` interface to connect the Smart TextArea to
 1. Create a new file named `DeepSeekInferenceService.cs` in the `Services` folder.
 2. Add the following implementation:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="DeepSeekInferenceService.cs" %}
+
 using Syncfusion.Blazor.AI;
 using System.Threading.Tasks;
 
@@ -150,7 +160,9 @@ public class DeepSeekInferenceService : IChatInferenceService
         return await _deepSeekService.CompleteAsync(options.Messages);
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Configure the Blazor App
 
@@ -158,7 +170,9 @@ Register the DeepSeek service and `IChatInferenceService` implementation in the
 
 Update the **~/Program.cs** file as follows:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="~/Program.cs" hl_lines="3 10 11" %}
+
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Syncfusion.Blazor;
@@ -175,13 +189,17 @@ builder.Services.AddSingleton<IChatInferenceService, DeepSeekInferenceService>()
 
 var app = builder.Build();
 // ...
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Use DeepSeek AI with Smart TextArea
 
 Add the Smart TextArea component to a Razor file (e.g., `~/Pages/Home.razor`) to use DeepSeek AI for autocompletion:
 
-```razor
+{% tabs %}
+{% highlight c# tabtitle="~/Pages/Home.razor" %}
+
 @using Syncfusion.Blazor.SmartComponents
 
 <SfSmartTextArea UserRole="@userRole" UserPhrases="@userPhrases" Placeholder="Enter your queries here" @bind-Value="prompt" Width="75%" RowCount="5">
@@ -198,7 +216,9 @@ Add the Smart TextArea component to a Razor file (e.g., `~/Pages/Home.razor`) to
         "We are investigating your issue."
     ];
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Test the Integration
 
diff --git a/blazor/smart-textarea/gemini-service.md b/blazor/smart-textarea/gemini-service.md
index 76eb8d7263..f78745cd69 100644
--- a/blazor/smart-textarea/gemini-service.md
+++ b/blazor/smart-textarea/gemini-service.md
@@ -26,7 +26,9 @@ Create a service class to manage interactions with the Gemini API, including aut
 2. Add a new file named `GeminiService.cs` in the `Services` folder.
 3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`).
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="GeminiService.cs" %}
+
 using System.Net;
 using System.Text;
 using System.Text.Json;
@@ -107,7 +109,9 @@ public class GeminiService
         };
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 N> Store the Gemini API key in `appsettings.json` (e.g., `{ "Gemini": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. The `SafetySettings` filter harmful content; adjust thresholds based on your application’s needs.
 
@@ -118,7 +122,9 @@ Define C# classes to match the Gemini API’s JSON request and response format.
 1. Create a new file named `GeminiModels.cs` in the `Services` folder.
 2. Add the following model classes:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="GeminiModels.cs" %}
+
 public class Part
 {
     public string Text { get; set; }
@@ -172,7 +178,9 @@ public class GeminiChatParameters
     public GenerationConfig GenerationConfig { get; init; } = new();
     public List<SafetySetting> SafetySettings { get; init; } = new();
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Create a Custom AI Service
 
@@ -181,7 +189,9 @@ Implement the `IChatInferenceService` interface to connect the Smart TextArea to
 1. Create a new file named `GeminiInferenceService.cs` in the `Services` folder.
 2. Add the following implementation:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="GeminiInferenceService.cs" %}
+
 using Syncfusion.Blazor.AI;
 using System.Threading.Tasks;
 
@@ -199,7 +209,9 @@ public class GeminiInferenceService : IChatInferenceService
         return await _geminiService.CompleteAsync(options.Messages);
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Configure the Blazor App
 
@@ -207,7 +219,9 @@ Register the Gemini service and `IChatInferenceService` implementation in the de
 
 Update the **~/Program.cs** file as follows:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="~/Program.cs" hl_lines="3 10 11" %}
+
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Syncfusion.Blazor;
@@ -224,13 +238,17 @@ builder.Services.AddSingleton<IChatInferenceService, GeminiInferenceService>();
 
 var app = builder.Build();
 // ...
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Use Gemini AI with Smart TextArea
 
 Add the Smart TextArea component to a Razor file (e.g., `~/Pages/Home.razor`) to use Gemini AI for autocompletion:
 
-```razor
+{% tabs %}
+{% highlight c# tabtitle="~/Pages/Home.razor" %}
+
 @using Syncfusion.Blazor.SmartComponents
 
 <SfSmartTextArea UserRole="@userRole" UserPhrases="@userPhrases" Placeholder="Enter your queries here" @bind-Value="prompt" Width="75%" RowCount="5">
@@ -247,7 +265,9 @@ Add the Smart TextArea component to a Razor file (e.g., `~/Pages/Home.razor`) to
         "We are investigating your issue."
     ];
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Test the Integration
 
diff --git a/blazor/smart-textarea/groq-service.md b/blazor/smart-textarea/groq-service.md
index fdd6b3dd97..dd2327787c 100644
--- a/blazor/smart-textarea/groq-service.md
+++ b/blazor/smart-textarea/groq-service.md
@@ -28,7 +28,9 @@ Create a service class to manage interactions with the Groq API, including authe
 2. Add a new file named `GroqService.cs` in the `Services` folder.
 3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json` or environment variables).
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="GroqService.cs" %}
+
 using System.Net;
 using System.Text;
 using System.Text.Json;
@@ -91,7 +93,9 @@ public class GroqService
         }
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 N> Store the Groq API key in `appsettings.json` (e.g., `{ "Groq": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security.
 
@@ -102,7 +106,9 @@ Define C# classes to match the Groq API’s request and response format.
 1. Create a new file named `GroqModels.cs` in the `Services` folder.
 2. Add the following model classes:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="GroqModels.cs" %}
+
 public class Choice
 {
     public Message Message { get; set; }
@@ -126,7 +132,9 @@ public class GroqResponseObject
     public string Model { get; set; }
     public List<Choice> Choices { get; set; }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Create a Custom AI Service
 
@@ -135,7 +143,9 @@ Implement the `IChatInferenceService` interface to connect the Smart TextArea to
 1. Create a new file named `GroqInferenceService.cs` in the `Services` folder.
 2. Add the following implementation:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="GroqInferenceService.cs" %}
+
 using Syncfusion.Blazor.AI;
 using System.Threading.Tasks;
 
@@ -153,7 +163,9 @@ public class GroqInferenceService : IChatInferenceService
         return await _groqService.CompleteAsync(options.Messages);
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Configure the Blazor App
 
@@ -161,7 +173,9 @@ Register the Groq service and `IChatInferenceService` implementation in the depe
 
 Update the **~/Program.cs** file as follows:
 
-```csharp
+{% tabs %}
+{% highlight c# tabtitle="~/Program.cs" hl_lines="3 10 11" %}
+
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Syncfusion.Blazor;
@@ -178,13 +192,17 @@ builder.Services.AddSingleton<IChatInferenceService, GroqInferenceService>();
 
 var app = builder.Build();
 // ...
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Use Groq AI with Smart TextArea
 
 Add the Smart TextArea component to a Razor file (e.g., `~/Pages/Home.razor`) to use Groq AI for autocompletion:
 
-```razor
+{% tabs %}
+{% highlight c# tabtitle="~/Pages/Home.razor" %}
+
 @using Syncfusion.Blazor.SmartComponents
 
 <SfSmartTextArea UserRole="@userRole" UserPhrases="@userPhrases" Placeholder="Enter your queries here" @bind-Value="prompt" Width="75%" RowCount="5">
@@ -201,7 +219,9 @@ Add the Smart TextArea component to a Razor file (e.g., `~/Pages/Home.razor`) to
         "We are investigating your issue."
     ];
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Test the Integration
 
diff --git a/blazor/toast/getting-started-webapp.md b/blazor/toast/getting-started-webapp.md
index e5f2df9a7a..75a793ba6b 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,25 @@ 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="1 9" %}
+
 using Syncfusion.Blazor;
 
 var builder = WebApplication.CreateBuilder(args);
@@ -144,7 +151,9 @@ builder.Services.AddRazorComponents()
 builder.Services.AddSyncfusionBlazor();
 
 var app = builder.Build();
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Add stylesheet and script resources
 
@@ -179,14 +188,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 +241,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..48d62b60ff 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,9 @@ 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 +127,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 +169,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.
 

From a3471cfe5a48ffb34ee3f4d9109b70027a163599 Mon Sep 17 00:00:00 2001
From: Backiaraj <backiaraj.kanagaraj@syncfusion.com>
Date: Thu, 16 Oct 2025 16:00:35 +0530
Subject: [PATCH 2/2] Corrected code tab format

---
 blazor/smart-paste/deepseek-service.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/blazor/smart-paste/deepseek-service.md b/blazor/smart-paste/deepseek-service.md
index 79c0ab85b4..234009e91b 100644
--- a/blazor/smart-paste/deepseek-service.md
+++ b/blazor/smart-paste/deepseek-service.md
@@ -131,7 +131,7 @@ public class DeepSeekChoice
 }
 
 {% endhighlight %}
-(% endtabs %)
+{% endtabs %}
 
 ## Create a Custom AI Service