Updated code language format

Author: Backiaraj

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,15 +165,19 @@ public class ClaudeInferenceService : IChatInferenceService
         return await _claudeService.CompleteAsync(options.Messages);
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Configure the Blazor App
 
 Register the Claude service and `IChatInferenceService` implementation in the dependency injection container.
 
 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.
 

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,15 +160,19 @@ public class DeepSeekInferenceService : IChatInferenceService
         return await _deepSeekService.CompleteAsync(options.Messages);
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Configure the Blazor App
 
 Register the DeepSeek service and `IChatInferenceService` implementation in the dependency injection container.
 
 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.
 

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,15 +209,19 @@ public class GeminiInferenceService : IChatInferenceService
         return await _geminiService.CompleteAsync(options.Messages);
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Configure the Blazor App
 
 Register the Gemini service and `IChatInferenceService` implementation in the dependency injection container.
 
 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.