fix(*): Incorrect syntax highlighting in blazor snippets

docs/xplat/astro.config.ts

@@ -385,6 +385,13 @@ export default createDocsSite({
                 '@xplat-images': path.resolve(__dirname, 'src/assets/images'),
             },
         },
-        server: { fs: { strict: false } },
+        server: {
+            fs: { strict: false },
+            ...(mode === 'development' && platform === 'Blazor' && demosBaseUrl ? {
+                proxy: {
+                    '/code-viewer': { target: demosBaseUrl, changeOrigin: true, secure: false },
+                },
+            } : {}),
+        },
     },
 });

docs/xplat/src/content/en/components/bullet-graph.mdx

@@ -49,7 +49,7 @@ The <ApiLink type="BulletGraph" /> requires the following modules:
 
 <PlatformBlock for="Blazor">
 
-```razor
+```csharp
 // in Program.cs file
 
 builder.Services.AddIgniteUIBlazor(typeof(IgbBulletGraphModule));

docs/xplat/src/content/en/components/charts/features/chart-performance.mdx

@@ -55,7 +55,7 @@ Although {Platform} charts support rendering of multiple data sources by binding
 
 <PlatformBlock for="Blazor">
 
-```razor
+```csharp
 this.CategoryChart.DataSource = FlattenDataSource.Create();
 this.FinancialChart.DataSource = FlattenDataSource.Create();
 

docs/xplat/src/content/en/components/customize-marker-display-in-blazor-charts.mdx

@@ -43,7 +43,7 @@ The Volume property value of the Blazor Chart will be used as the size of the
 
 <PlatformBlock for="Blazor">
 
-```razor
+```csharp
 public record SampleDataType (
     string Name,
     double XValue,

docs/xplat/src/content/en/components/dashboard-tile.mdx

@@ -118,7 +118,7 @@ Add the **IgniteUI.Blazor.Controls** namespace in the **_Imports.razor** file:
 
 The following modules are suggested when using the Dashboard Tile component:
 
-```razor
+```csharp
 // in Program.cs file
 
 builder.Services.AddIgniteUIBlazor(

docs/xplat/src/content/en/components/geo-map-binding-multiple-shapes.mdx

@@ -86,7 +86,7 @@ import { IgxShapeDataSource } from 'igniteui-angular-core';
 
 <PlatformBlock for="Blazor">
 
-```razor
+```csharp
 // in Program.cs file
 
 builder.Services.AddIgniteUIBlazor(

docs/xplat/src/content/en/components/geo-map-resources-esri.mdx

@@ -83,7 +83,7 @@ export enum EsriStyle {
 
 <PlatformBlock for="Blazor">
 
-```razor
+```csharp
 public class EsriStyle
 {
     // these Esri maps show geographic tiles for the whole of world

docs/xplat/src/content/en/components/geo-map-resources-world-connections.mdx

@@ -143,7 +143,7 @@ export default class WorldConnections {
 
 <PlatformBlock for="Blazor">
 
-```razor
+```csharp
     public class WorldConnections
     {
 

docs/xplat/src/content/en/components/geo-map.mdx

@@ -57,7 +57,7 @@ The <ApiLink type="GeographicMap" /> requires the following modules, however the
 
 <PlatformBlock for="Blazor">
 
-```razor
+```csharp
 // in Program.cs file
 
 builder.Services.AddIgniteUIBlazor(

docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx

@@ -129,7 +129,8 @@ public webGridCountryDropDownTemplate: IgcRenderFunction<IgcCellTemplateContext>
 In order to handle the selection change, we need the change event. The emitted event arguments contain information about the selection prior to the change, the current selection and the items that were added or removed. Therefore, it will filter the values based on the selection of the previous combo.
 
 <PlatformBlock for="Blazor">
-```razor
+
+```javascript
 //In Javascript
 igRegisterScript("CountryChange", (ctx) => {
     const value = e.detail.newValue;
@@ -150,6 +151,7 @@ igRegisterScript("CountryChange", (ctx) => {
     }
 });
 ```
+
 </PlatformBlock>
 
 <PlatformBlock for="WebComponents">

docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx

@@ -317,7 +317,6 @@ If you want to provide a custom template which will be applied to a cell, you ca
 and pass the template:
 
 ```razor
-// In JavaScript
 
 igRegisterScript("WebGridCellEditCellTemplate", (ctx) => {
     let cellValues = [];
@@ -1165,7 +1164,8 @@ function handleCellEdit(args: IgrGridEditEventArgs): void {
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
-```razor
+
+```javascript
 // In JavaScript
 igRegisterScript("HandleCellEdit", (ev) => {
     var d = ev.detail;
@@ -1177,6 +1177,7 @@ igRegisterScript("HandleCellEdit", (ev) => {
     }
 }, false);
 ```
+
 </PlatformBlock>
 
 If the value entered in a cell under the **Units On Order** column is larger than the available amount (the value under **Units in Stock**), the editing will be cancelled and the user will be alerted to the cancellation.
@@ -1206,7 +1207,8 @@ public webTreeGridCellEdit(event: CustomEvent<IgcGridEditEventArgs>): void {
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
-```razor
+
+```javascript
 // In JavaScript
 igRegisterScript("HandleCellEdit", (ev) => {
     const column = event.detail.column;
@@ -1280,7 +1282,8 @@ Here, we are validating two columns. If the user tries to set an invalid value f
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
-```razor
+
+```javascript
 // In JavaScript
 igRegisterScript("WebGridEditingEventsCellEdit", (ev) => {
     var d = ev.detail;
@@ -1294,6 +1297,7 @@ igRegisterScript("WebGridEditingEventsCellEdit", (ev) => {
 }, false);
 
 ```
+
 </PlatformBlock>
 
 

docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx

@@ -269,8 +269,9 @@ const columnPinning = (event: IgrPinColumnCancellableEventArgs) = {
 <PlatformBlock for="Blazor">
 ```razor
 <{ComponentSelector} Data=data AutoGenerate=true ColumnPinScript="onColumnPin"/>
+```
 
-
+```javascript
 //In JavaScript
 function onColumnPin(e) {
     if (e.detail.column.field == "Country") {
@@ -281,6 +282,7 @@ function onColumnPin(e) {
 igRegisterScript("onColumnPin", onColumnPin, false);
 
 ```
+
 </PlatformBlock>
 
 ## Pinning Position
@@ -446,7 +448,10 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => {
     <IgbColumn Field="ContactTitle" Header="Title" Width="200px" Pinned="true"
     HeaderTemplateScript="WebGridPinHeaderTemplate" Name="column3" @ref="column3"> </IgbColumn>
 </IgbGrid>
+```
+
 
+```javascript
 // In JavaScript
 igRegisterScript("WebGridPinHeaderTemplate", (ctx) => {
     var html = window.igTemplating.html;
@@ -462,6 +467,7 @@ igRegisterScript("WebGridPinHeaderTemplate", (ctx) => {
 </div>`;
 }, false);
 ```
+
 </PlatformBlock>
 
 <PlatformBlock for="React">
@@ -610,10 +616,11 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => {
     <IgbColumn Field="OnPTO" DataType="Boolean"
     HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column6" @ref="column6"></IgbColumn>
 </IgbTreeGrid>
+```
 
 
+```javascript
 // In JavaScript
-
 igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => {
     var html = window.igTemplating.html;
     window.toggleColumnPin = function toggleColumnPin(field) {
@@ -628,6 +635,7 @@ igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => {
 </div>`;
 }, false);
 ```
+
 </PlatformBlock>
 <PlatformBlock for="React">
 ```tsx

docs/xplat/src/content/en/components/grids/_shared/column-types.mdx

@@ -682,12 +682,16 @@ const formatCurrency = (value: number) => {
  <IgbColumn FormatterScript="CurrencyFormatter"></IgbColumn>
 </{ComponentSelector}>
 
+```
+
+```javascript
 //In Javascript
 igRegisterScript("CurrencyFormatter", (value) => {
     return `$ ${value.toFixed(0)}`;
 }, false);
 
 ```
+
 </PlatformBlock>
 
 <PlatformBlock for="Angular">
@@ -705,6 +709,7 @@ public init(column: IgxColumnComponent) {
         default:
             return;
 }
+
 ```
 
 </PlatformBlock>

docs/xplat/src/content/en/components/grids/_shared/editing.mdx

@@ -153,14 +153,17 @@ public onSorting(event: IgcSortingEventArgs) {
     SortingScript="SortingHandler"
     RowEditable="true">
 </{ComponentSelector}>
+```
 
+```javascript
 //In JavaScript
 function SortingHandler() {
     grid.endEdit(true);
 }
 igRegisterScript("SortingHandler", SortingHandler, false);
 
 ```
+
 </PlatformBlock>
 
 <PlatformBlock for="React">
@@ -172,6 +175,7 @@ function onSorting(args: IgrSortingEventArgs) {
 
 <{ComponentSelector} data={localData} primaryKey="ProductID" onSorting={onSorting}>
 </{ComponentSelector}>
+
 ```
 
 </PlatformBlock>

docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx

@@ -302,14 +302,17 @@ The following code demonstrates how to customize the Excel style filter menu usi
     FilterMode="FilterMode.ExcelStyleFilter"
     ExcelStyleHeaderIconTemplateScript="WebGridFilterAltIconTemplate">
 </{ComponentSelector}>
+```
 
+```javascript
 // In JavaScript
 igRegisterScript("WebGridFilterAltIconTemplate", (ctx) => {
     var html = window.igTemplating.html;
         return html`<img height="15px" width="15px" src="http://static.infragistics.com/xplatform/images/grid/propeller-logo.svg" title="Continued" alt="Continued" />`
 }, false);
 
 ```
+
 </PlatformBlock>
 
 <PlatformBlock for="WebComponents">
@@ -322,6 +325,7 @@ constructor() {
 public webGridFilterAltIconTemplate = (ctx: IgcCellTemplateContext) => {
     return html`<img height="15px" width="15px" src="http://static.infragistics.com/xplatform/images/grid/propeller-logo.svg" title="Continued" alt="Continued" />`
 }
+
 ```
 
 </PlatformBlock>
@@ -346,6 +350,7 @@ const webGridFilterAltIconTemplate = (ctx: IgrGridHeaderTemplateContext) => {
 </{ComponentSelector}>
 
 ```
+
 </PlatformBlock>
 
 </ComponentBlock>

docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx

@@ -189,9 +189,9 @@ Let's try the API to demonstrate how to achieve common scenarios like user input
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
-```razor
-// In JavaScript
 
+```javascript
+// In JavaScript
 igRegisterScript("WebGridCustomKBNav", (evtArgs) => {
     const args = evtArgs.detail;
     const target = args.target;
@@ -207,6 +207,7 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => {
 }, false);
 
 ```
+
 </PlatformBlock>
 
 <PlatformBlock for="React">
@@ -300,10 +301,9 @@ Based on the event arg values we identified two cases, where to provide our own
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
-```razor
 
+```javascript
 // In JavaScript
-
 igRegisterScript("WebGridCustomKBNav", (evtArgs) => {
     const args = evtArgs.detail;
     const target = args.target;
@@ -323,6 +323,7 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => {
 }, false);
 
 ```
+
 </PlatformBlock>
 
 <DocsAside type="info">

docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx

@@ -639,7 +639,9 @@ this.grid.rowEditActionsTemplate = (endRowEdit: IgcGridRowEditActionsTemplateCon
 ```razor
 <{ComponentSelector} Data="data" PrimaryKey="ProductID" AutoGenerate="false" RowEditable="true" RowEditActionsTemplateScript="rowEditActionsTemplate">
 </{ComponentSelector}>
+```
 
+```javascript
 //In JavaScript:
 igRegisterScript("rowEditActionsTemplate", (endRowEdit) => {
     var html = window.igTemplating.html;