diff --git a/wpf-toc.html b/wpf-toc.html
index c7c0d84b2..552bb131d 100644
--- a/wpf-toc.html
+++ b/wpf-toc.html
@@ -1740,7 +1740,7 @@
             <li>
                 How to
                 <ul>
-                    <li><a href="wpf/Range-Slider/Work-with-Events">Work with Events</a></li>
+                    <li><a href="/wpf/Range-Slider/Work-with-Events">Work with Events</a></li>
                 </ul>
             </li>
         </ul>
diff --git a/wpf/Diagram/Annotation/DefineAnnotation.md b/wpf/Diagram/Annotation/DefineAnnotation.md
index 30fc2d32b..5001805cb 100644
--- a/wpf/Diagram/Annotation/DefineAnnotation.md
+++ b/wpf/Diagram/Annotation/DefineAnnotation.md
@@ -129,7 +129,7 @@ You can add any number of annotations to a node or connector.
 </syncfusion:AnnotationCollection>
                                 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the Annotation Collection
 Annotations = new ObservableCollection<IAnnotation>()
diff --git a/wpf/Diagram/Annotation/Events.md b/wpf/Diagram/Annotation/Events.md
index 083a0f61f..013bde539 100644
--- a/wpf/Diagram/Annotation/Events.md
+++ b/wpf/Diagram/Annotation/Events.md
@@ -12,7 +12,7 @@ documentation: ug
 The [AnnotationChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_AnnotationChanged) event will notify the annotation related actions and value changes. The [AnnotationChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationChangedEventArgs.html) class is used to get or set the entire annotation related properties and their values.  
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Register the AnnotationChanged event
 (diagram.Info as IGraphInfo).AnnotationChanged += Diagram_AnnotationChanged;
diff --git a/wpf/Diagram/Annotation/Interaction/Dragging.md b/wpf/Diagram/Annotation/Interaction/Dragging.md
index 08dbfa569..89c335e93 100644
--- a/wpf/Diagram/Annotation/Interaction/Dragging.md
+++ b/wpf/Diagram/Annotation/Interaction/Dragging.md
@@ -27,7 +27,7 @@ Dragging an annotation can be enabled by using the [`Constraints`](https://help.
 </syncfusion:AnnotationCollection>
                                 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the Annotation Collection
 Annotations = new ObservableCollection<IAnnotation>()
@@ -67,7 +67,7 @@ Diagram allows you to specify the amount of dragging area around the annotation
 </syncfusion:AnnotationCollection>
                                 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the AnnotationCollection
 Annotations = new ObservableCollection<IAnnotation>()
diff --git a/wpf/Diagram/Annotation/Interaction/Rotating.md b/wpf/Diagram/Annotation/Interaction/Rotating.md
index d18b876ff..2cdf032bf 100644
--- a/wpf/Diagram/Annotation/Interaction/Rotating.md
+++ b/wpf/Diagram/Annotation/Interaction/Rotating.md
@@ -27,7 +27,7 @@ Annotation rotation can be enabled by using the [`Constraints`](https://help.syn
 </syncfusion:AnnotationCollection>
                                 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the AnnotationCollection
 Annotations = new ObservableCollection<IAnnotation>()
@@ -59,7 +59,7 @@ Annotations = new ObservableCollection<IAnnotation>()
 </syncfusion:AnnotationCollection>
                                 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the Annotation Collection
 Annotations = new ObservableCollection<IAnnotation>()
diff --git a/wpf/Diagram/Annotation/Interaction/SelectionAndResizing.md b/wpf/Diagram/Annotation/Interaction/SelectionAndResizing.md
index 1dd435ac3..3055df5ef 100644
--- a/wpf/Diagram/Annotation/Interaction/SelectionAndResizing.md
+++ b/wpf/Diagram/Annotation/Interaction/SelectionAndResizing.md
@@ -28,7 +28,7 @@ Selection of an annotation can be enabled by using the [`Constraints`](https://h
                                 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the AnnotationCollection
 Annotations = new ObservableCollection<IAnnotation>()
@@ -64,7 +64,7 @@ Resizing an annotation can be enabled by using the `Constraints` property of `An
 </syncfusion:AnnotationCollection>
                                 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the Annotation Collection
 Annotations = new ObservableCollection<IAnnotation>()
diff --git a/wpf/Diagram/Annotation/PositioningAndAppearance.md b/wpf/Diagram/Annotation/PositioningAndAppearance.md
index bfe68df7b..c547f0b66 100644
--- a/wpf/Diagram/Annotation/PositioningAndAppearance.md
+++ b/wpf/Diagram/Annotation/PositioningAndAppearance.md
@@ -139,7 +139,7 @@ Annotations = new ObservableCollection<IAnnotation>()
 </syncfusion:AnnotationCollection>
  
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the Annotation Collection
 Annotations = new ObservableCollection<IAnnotation>()
@@ -181,7 +181,7 @@ Connector's annotation can be aligned over its segment path using the [`Alignmen
 </syncfusion:AnnotationCollection>
  
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the Annotation Collection
 Annotations = new ObservableCollection<IAnnotation>()
@@ -216,7 +216,7 @@ The [`Length`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Ann
 </syncfusion:AnnotationCollection>
  
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the Annotation Collection
 Annotations = new ObservableCollection<IAnnotation>()
@@ -248,7 +248,7 @@ The [`Displacement`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagr
     <syncfusion:AnnotationEditorViewModel Content="Annotation" Displacement="60" />
 </syncfusion:AnnotationCollection>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 //Initialize the Annotation Collection
 Annotations = new ObservableCollection<IAnnotation>()
 {
@@ -281,7 +281,7 @@ Position of an annotation is controlled by using its `Length` property, which re
 </syncfusion:AnnotationCollection>
  
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the Annotation Collection
 Annotations = new ObservableCollection<IAnnotation>()
@@ -391,7 +391,7 @@ When text overflows node boundaries, you can control it by using the [`WrapText`
 </syncfusion:AnnotationCollection>                    
                                 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the Annotation Collection
 Annotations = new AnnotationCollection()
@@ -450,7 +450,7 @@ Default appearance of the annotations can be customized by using the [`EditTempl
 </syncfusion:AnnotationCollection>
 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the AnnotationCollection
 Annotations = new ObservableCollection<IAnnotation>()
@@ -478,13 +478,13 @@ Also, diagram has `TextAnnotationViewModel` class to customize the appearance of
 <syncfusion:AnnotationCollection>
     <!--Initialize the Text Annotation View Model class-->
     <syncfusion:TextAnnotationViewModel Text="Annotation" FontStyle="Italic" 
-                                        FontSize="12" FontFamily="TimesNewRomen" 
+                                        FontSize="12" FontFamily="Times New Romen" 
                                         TextDecorations="Underline" 
                                         FontWeight="Bold" Foreground="Black"/>
 </syncfusion:AnnotationCollection>
                                 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the Annotation Collection
 Annotations = new ObservableCollection<IAnnotation>()
@@ -495,7 +495,7 @@ Annotations = new ObservableCollection<IAnnotation>()
         Text = "Annotation",
         FontStyle = FontStyles.Italic,
         FontSize = 12,
-        FontFamily = new FontFamily("TimesNewRomen"),
+        FontFamily = new FontFamily("Times New Romen"),
         TextDecorations = TextDecorations.Underline,
         FontWeight = FontWeights.Bold,
         Foreground = new SolidColorBrush(Colors.Black),
@@ -521,7 +521,7 @@ Diagram allows you to show the annotation in view or edit mode while loading the
 </syncfusion:AnnotationCollection>
                                 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the Annotation Collection
 Annotations = new ObservableCollection<IAnnotation>()
@@ -557,7 +557,7 @@ Also, the [`ReadOnly`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Dia
 </syncfusion:AnnotationCollection>
                                 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the Annotation Collection
 Annotations = new ObservableCollection<IAnnotation>()
diff --git a/wpf/Diagram/Commands/Alignment.md b/wpf/Diagram/Commands/Alignment.md
index 19e9b9aa6..cfeeea334 100644
--- a/wpf/Diagram/Commands/Alignment.md
+++ b/wpf/Diagram/Commands/Alignment.md
@@ -17,13 +17,13 @@ The [`AlignLeft`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="AlignLeft" Name="AlignLeft" Command="Syncfusion:DiagramCommands.AlignLeft"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -42,13 +42,13 @@ The [`AlignRight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="AlignRight" Name="AlignRight" Command="Syncfusion:DiagramCommands.AlignRight"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -66,13 +66,13 @@ The [`AlignCenter`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagra
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="AlignCenter" Name="AlignCenter" Command="Syncfusion:DiagramCommands.AlignCenter"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -92,13 +92,13 @@ The [`AlignTop`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.I
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="AlignTop" Name="AlignTop" Command="Syncfusion:DiagramCommands.AlignTop"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -116,13 +116,13 @@ The [`AlignBottom`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagra
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="AlignBottom" Name="AlignBottom" Command="Syncfusion:DiagramCommands.AlignBottom"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -140,13 +140,13 @@ The [`AlignMiddle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagra
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="AlignMiddle" Name="AlignMiddle" Command="Syncfusion:DiagramCommands.AlignMiddle"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
diff --git a/wpf/Diagram/Commands/Clipboard.md b/wpf/Diagram/Commands/Clipboard.md
index bf2e16852..8c26e2cb9 100644
--- a/wpf/Diagram/Commands/Clipboard.md
+++ b/wpf/Diagram/Commands/Clipboard.md
@@ -19,13 +19,13 @@ N> The Cut command is applicable only when one or more diagram elements are sele
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="Cut" Name="Cut" Command="Syncfusion:DiagramCommands.Cut"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -46,13 +46,13 @@ N> The Copy command is applicable only when one or more diagram elements are sel
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="Copy" Name="Copy" Command="Syncfusion:DiagramCommands.Copy"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -73,13 +73,13 @@ N> The Paste command is applicable only when the clipboard contains supported di
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="Paste" Name="Paste" Command="Syncfusion:DiagramCommands.Paste"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -102,13 +102,13 @@ N> The Duplicate command creates copies of the selected diagram elements within
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="Duplicate" Name="Duplicate" Command="Syncfusion:DiagramCommands.Duplicate"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
diff --git a/wpf/Diagram/Commands/Command-Manager.md b/wpf/Diagram/Commands/Command-Manager.md
index d8ab947fb..a945f9408 100644
--- a/wpf/Diagram/Commands/Command-Manager.md
+++ b/wpf/Diagram/Commands/Command-Manager.md
@@ -13,7 +13,7 @@ The [CommandManager](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagr
 
 The `CommandManager` can be accessed through the `SfDiagram` instance and is used to manage built-in and custom gesture commands.
 
-{% highlight C# %}
+{% highlight c# %}
 
 // Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -84,7 +84,7 @@ The following code example represents how to define a custom Save command (Contr
 
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 // To define the mouse and keyboard gesture for the commands
 GestureCommand saveGesture = new GestureCommand()
diff --git a/wpf/Diagram/Commands/Delete.md b/wpf/Diagram/Commands/Delete.md
index 8d48eed20..23a2e1cf4 100644
--- a/wpf/Diagram/Commands/Delete.md
+++ b/wpf/Diagram/Commands/Delete.md
@@ -25,7 +25,7 @@ The following example locates nodes and connectors by using their `ID` property.
 
 {% tabs %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 List<IGroupable> deleteableObjects = new List<IGroupable>();
 
diff --git a/wpf/Diagram/Commands/EditandFormatText.md b/wpf/Diagram/Commands/EditandFormatText.md
index 4aef11362..6b5dca4ab 100644
--- a/wpf/Diagram/Commands/EditandFormatText.md
+++ b/wpf/Diagram/Commands/EditandFormatText.md
@@ -17,13 +17,13 @@ The [EditAnnotation](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagr
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="EditAnnotation" Name="EditAnnotation" Command="Syncfusion:DiagramCommands.EditAnnotation"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -40,13 +40,13 @@ The [ToggleBold](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.I
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="ToggleBold" Name="ToggleBold" Command="Syncfusion:DiagramCommands.ToggleBold"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -63,13 +63,13 @@ The [ToggleItalic](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="ToggleItalic" Name="ToggleItalic" Command="Syncfusion:DiagramCommands.ToggleItalic"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -86,13 +86,13 @@ The [ToggleUnderline](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diag
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="ToggleUnderline" Name="ToggleUnderline" Command="Syncfusion:DiagramCommands.ToggleUnderline"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -109,13 +109,13 @@ The [ToggleStrikeThrough](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="ToggleStrikeThrough" Name="ToggleStrikeThrough" Command="Syncfusion:DiagramCommands.ToggleStrikeThrough"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -134,13 +134,13 @@ The [Cancel](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IDiag
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="Cancel" Name="Cancel" Command="Syncfusion:DiagramCommands.Cancel"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
diff --git a/wpf/Diagram/Commands/ExpandCollapse.md b/wpf/Diagram/Commands/ExpandCollapse.md
index 0135c59ae..2285610e5 100644
--- a/wpf/Diagram/Commands/ExpandCollapse.md
+++ b/wpf/Diagram/Commands/ExpandCollapse.md
@@ -30,7 +30,7 @@ The [IsUpdateLayout](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagr
 N> In the following example, `args.Item` represents the node associated with the current diagram interaction event (such as a node click or command invocation event). Ensure that the item is a valid `NodeViewModel` with child nodes before executing the `ExpandCollapse` command.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
diff --git a/wpf/Diagram/Commands/FitToPage.md b/wpf/Diagram/Commands/FitToPage.md
index b9fe957c2..c35e552cd 100644
--- a/wpf/Diagram/Commands/FitToPage.md
+++ b/wpf/Diagram/Commands/FitToPage.md
@@ -13,13 +13,13 @@ The [FitToPage](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ID
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="FitToPage" Name="FitToPage" Command="Syncfusion:DiagramCommands.FitToPage"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -73,7 +73,7 @@ The [FocusArea](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Fi
 The following example shows how to create a `FitToPageParameter` instance and pass it to the `FitToPage` command.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagram = new SfDiagram();
diff --git a/wpf/Diagram/Commands/Flip.md b/wpf/Diagram/Commands/Flip.md
index bde6273d3..fc7ef1d94 100644
--- a/wpf/Diagram/Commands/Flip.md
+++ b/wpf/Diagram/Commands/Flip.md
@@ -13,13 +13,13 @@ The [`Flip`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IDiag
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="Flip" Name="Flip" Command="Syncfusion:DiagramCommands.Flip"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram Diagram = new SfDiagram();
@@ -58,7 +58,7 @@ The [Flip](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Flip.ht
 | None | It is used to disables all the flip behavior. |
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram Diagram = new SfDiagram();
diff --git a/wpf/Diagram/Commands/Grouping.md b/wpf/Diagram/Commands/Grouping.md
index ea2717bab..26dc16e6e 100644
--- a/wpf/Diagram/Commands/Grouping.md
+++ b/wpf/Diagram/Commands/Grouping.md
@@ -19,13 +19,13 @@ N> The Group command requires at least two diagram objects to be selected. If fe
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="Group" Name="Group" Command="Syncfusion:DiagramCommands.Group"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -46,13 +46,13 @@ N> The UnGroup command can be executed only when a grouped object is selected. I
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="UnGroup" Name="UnGroup" Command="Syncfusion:DiagramCommands.UnGroup"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
diff --git a/wpf/Diagram/Commands/Nudge.md b/wpf/Diagram/Commands/Nudge.md
index 0fe8bc952..ca3e34b80 100644
--- a/wpf/Diagram/Commands/Nudge.md
+++ b/wpf/Diagram/Commands/Nudge.md
@@ -26,7 +26,7 @@ N> Nudge commands are applicable only when one or more diagram elements are sele
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Syncfusion:MoveParameter MoveDelta="5" x:Key="MoveupCommandParameter"/> 
 
@@ -34,7 +34,7 @@ N> Nudge commands are applicable only when one or more diagram elements are sele
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
diff --git a/wpf/Diagram/Commands/Rotate.md b/wpf/Diagram/Commands/Rotate.md
index 07a098d35..440764b8c 100644
--- a/wpf/Diagram/Commands/Rotate.md
+++ b/wpf/Diagram/Commands/Rotate.md
@@ -26,7 +26,7 @@ The `Angle` property is used to specify the rotation angle in degrees. The defau
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Syncfusion:RotateParameter RotationDirection="Clockwise" Angle="45"  x:Key="RotateCommandParameter"/>
 
@@ -34,7 +34,7 @@ The `Angle` property is used to specify the rotation angle in degrees. The defau
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
diff --git a/wpf/Diagram/Commands/SelectByType.md b/wpf/Diagram/Commands/SelectByType.md
index 50f98dbcc..a5a2bd2f4 100644
--- a/wpf/Diagram/Commands/SelectByType.md
+++ b/wpf/Diagram/Commands/SelectByType.md
@@ -17,13 +17,13 @@ N> If the diagram does not contain any elements of the specified type, the `Sele
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="SelectByType" Name="SelectByType" Command="Syncfusion:DiagramCommands.SelectByType" CommandParameter="{x:Type Syncfusion:NodeViewModel}"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
diff --git a/wpf/Diagram/Commands/SelectTool.md b/wpf/Diagram/Commands/SelectTool.md
index a5c46f92e..ca7464a05 100644
--- a/wpf/Diagram/Commands/SelectTool.md
+++ b/wpf/Diagram/Commands/SelectTool.md
@@ -64,7 +64,7 @@ For details , refer [Tools and DrawingTools](https://help.syncfusion.com/wpf/dia
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
  <!-- To draw an ellipse node-->
  <Syncfusion:SelectToolCommandParameter DrawingTool="Ellipse" Tool="ContinuesDraw"  x:Key="SelectToolEllipseCommandParameter"/>
@@ -83,7 +83,7 @@ For details , refer [Tools and DrawingTools](https://help.syncfusion.com/wpf/dia
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
diff --git a/wpf/Diagram/Commands/SetShapeStyle.md b/wpf/Diagram/Commands/SetShapeStyle.md
index ff2836abd..b1595aaab 100644
--- a/wpf/Diagram/Commands/SetShapeStyle.md
+++ b/wpf/Diagram/Commands/SetShapeStyle.md
@@ -17,7 +17,7 @@ N> The `SetShapeStyle` command requires a valid `Style` object as its command pa
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Style TargetType="Path" x:Key="SetShapeStyleParameter">
   <Setter Property="Stretch" Value="Fill"></Setter>
@@ -28,7 +28,7 @@ N> The `SetShapeStyle` command requires a valid `Style` object as its command pa
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
diff --git a/wpf/Diagram/Commands/Sizing.md b/wpf/Diagram/Commands/Sizing.md
index e04ebc957..cdd1e91c4 100644
--- a/wpf/Diagram/Commands/Sizing.md
+++ b/wpf/Diagram/Commands/Sizing.md
@@ -21,13 +21,13 @@ The [`SameSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.I
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="SameSize" Name="SameSize" Command="Syncfusion:DiagramCommands.SameSize"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -46,13 +46,13 @@ The [`SameHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="SameHeight" Name="SameHeight" Command="Syncfusion:DiagramCommands.SameHeight"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -71,13 +71,13 @@ The [`SameWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="SameWidth" Name="SameWidth" Command="Syncfusion:DiagramCommands.SameWidth"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
diff --git a/wpf/Diagram/Commands/Spacing.md b/wpf/Diagram/Commands/Spacing.md
index a123fa652..8a8a8835a 100644
--- a/wpf/Diagram/Commands/Spacing.md
+++ b/wpf/Diagram/Commands/Spacing.md
@@ -21,13 +21,13 @@ The [`SpaceAcross`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagra
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="SpaceAcross" Name="SpaceAcross" Command="Syncfusion:DiagramCommands.SpaceAcross"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -49,13 +49,13 @@ The [`SpaceDown`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="SpaceDown" Name="SpaceDown" Command="Syncfusion:DiagramCommands.SpaceDown"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
diff --git a/wpf/Diagram/Commands/UndoRedo.md b/wpf/Diagram/Commands/UndoRedo.md
index 3df969705..207c8e7bb 100644
--- a/wpf/Diagram/Commands/UndoRedo.md
+++ b/wpf/Diagram/Commands/UndoRedo.md
@@ -16,7 +16,7 @@ The [Undo](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IDiagra
 N> Undo and Redo commands are available only when the `GraphConstraints.Undoable` constraint is enabled on the `SfDiagram`. Ensure that this constraint is set before executing the Undo or Redo commands.
 
 {% tabs %}
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Syncfusion:SfDiagram x:Name="diagramcontrol" Constraints="Default,Undoable"/>
 
@@ -25,7 +25,7 @@ N> Undo and Redo commands are available only when the `GraphConstraints.Undoable
 <Button Height="50" Content="Redo" Name="Redo" Command="Syncfusion:DiagramCommands.Redo"></Button>
 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
diff --git a/wpf/Diagram/Commands/Z-Order.md b/wpf/Diagram/Commands/Z-Order.md
index d27bcc089..21c9d3b2d 100644
--- a/wpf/Diagram/Commands/Z-Order.md
+++ b/wpf/Diagram/Commands/Z-Order.md
@@ -21,13 +21,13 @@ N> If the selected element is already at the highest Z-order level, executing th
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="BringToFront" Name="BringToFront" Command="Syncfusion:DiagramCommands.BringToFront"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -48,13 +48,13 @@ N> If the selected element is already at the lowest Z-order level, executing the
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="SendToBack" Name="SendToBack" Command="Syncfusion:DiagramCommands.SendToBack"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -77,13 +77,13 @@ N> The `SendBackward` command moves the selected element one level backward in t
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="SendBackward" Name="SendBackward" Command="Syncfusion:DiagramCommands.SendBackward"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -104,13 +104,13 @@ N> The `BringForward` command moves the selected element one level forward in th
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="BringForward" Name="BringForward" Command="Syncfusion:DiagramCommands.BringForward"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
diff --git a/wpf/Diagram/Commands/Zoom.md b/wpf/Diagram/Commands/Zoom.md
index cbad12f6f..cfe9be907 100644
--- a/wpf/Diagram/Commands/Zoom.md
+++ b/wpf/Diagram/Commands/Zoom.md
@@ -30,7 +30,7 @@ For ZoomIn operation
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Syncfusion:ZoomPositionParameter ZoomCommand="ZoomIn" ZoomFactor="0.2" x:Key="ZoomInParameter"/>
 
@@ -38,7 +38,7 @@ For ZoomIn operation
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -59,7 +59,7 @@ For ZoomOut operation
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Syncfusion:ZoomPositionParameter ZoomCommand="ZoomOut" ZoomFactor="0.2" x:Key="ZoomOutParameter"/>
 
@@ -67,7 +67,7 @@ For ZoomOut operation
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -90,7 +90,7 @@ For ZoomTo specific value
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Syncfusion:ZoomPositionParameter ZoomCommand="Zoom" ZoomTo="2" x:Key="ZoomToParameter"/>
 
@@ -98,7 +98,7 @@ For ZoomTo specific value
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -120,7 +120,7 @@ graphinfo.Commands.Zoom.Execute(new ZoomPositionParameter()
 For Panning
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -142,7 +142,7 @@ For HorizontalScroll
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Syncfusion:ZoomPositionParameter ZoomCommand="HorizontalScroll" ScrollDelta="5" x:Key="HorizontalScrollParameter"/>
 
@@ -150,7 +150,7 @@ For HorizontalScroll
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -171,7 +171,7 @@ For VerticalScroll
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Syncfusion:ZoomPositionParameter ZoomCommand="VerticalScroll" ScrollDelta="50"  x:Key="ZoomPositionCommandParameter"/>
 
@@ -179,7 +179,7 @@ For VerticalScroll
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
@@ -218,7 +218,7 @@ The `Reset` parameter is used to define the behavior of the Reset Command.
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Syncfusion:ResetParameter Reset="ZoomPan" x:Key="ResetParameterCommandParameter"/>
 
@@ -226,7 +226,7 @@ The `Reset` parameter is used to define the behavior of the Reset Command.
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram 
 SfDiagram diagramcontrol = new SfDiagram();
diff --git a/wpf/Diagram/Connector/AppearanceAndValidation.md b/wpf/Diagram/Connector/AppearanceAndValidation.md
index ca7d9ab81..d1af55358 100644
--- a/wpf/Diagram/Connector/AppearanceAndValidation.md
+++ b/wpf/Diagram/Connector/AppearanceAndValidation.md
@@ -58,7 +58,7 @@ The [`SourceDecoratorStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xa
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 //Define the Connector
 ConnectorViewModel EllipseDecorator = new ConnectorViewModel()
 {
@@ -130,7 +130,7 @@ Each decorator shapes can be changed as hollow type shapes, which contains a hol
 </syncfusion:ConnectorViewModel>
 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 //Define the Connector
 ConnectorViewModel HollowEllipseDecorator = new ConnectorViewModel()
 {
@@ -219,7 +219,7 @@ The [`SourceDecoratorPivot`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xa
 <syncfusion:ConnectorViewModel SourcePoint="900,100" TargetPoint="1000,200" ConnectorGeometryStyle="{StaticResource connectorLineStyle}" SourceDecoratorPivot="0,0" SourceDecorator="{StaticResource Ellipse}" SourceDecoratorStyle="{StaticResource DecoratorFillStyle}" TargetDecoratorPivot="0,0" TargetDecorator="{StaticResource ClosedSharp}" TargetDecoratorStyle="{StaticResource DecoratorFillStyle}">
 </syncfusion:ConnectorViewModel>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 ConnectorViewModel PivotDecorator = new ConnectorViewModel()
 {
     SourcePoint = new Point(900, 100),
@@ -326,7 +326,7 @@ The [`CornerRadius`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagr
 </syncfusion:ConnectorViewModel>
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 ConnectorViewModel cornerradius = new ConnectorViewModel()
 {
     SourcePoint = new Point(1300, 300),
@@ -365,7 +365,7 @@ Padding is used to leave space between the connector’s end point and the objec
                                TargetDecorator="{StaticResource ClosedSharp}" 
                                TargetDecoratorStyle="{StaticResource DecoratorFillStyle}"/>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Creating source node
 NodeViewModel sourceNode = new NodeViewModel()
@@ -428,7 +428,7 @@ Line bridging creates a bridge for lines to smartly cross over other lines, at p
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
 //Enabling the bridging constraint
@@ -568,7 +568,7 @@ Connection can be made from/to nodes, connectors, port or on empty area in a dia
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 //Create connector with hit padding value
 ConnectorViewModel paddingConnector = new ConnectorViewModel()
 {
@@ -620,7 +620,7 @@ The [`ConnectionParameter`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xam
 The following code explains how to override ValidateConnection.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 /// <summary>
 /// Create custom class for diagram
diff --git a/wpf/Diagram/Connector/DefineConnector.md b/wpf/Diagram/Connector/DefineConnector.md
index c3556454c..153badd55 100644
--- a/wpf/Diagram/Connector/DefineConnector.md
+++ b/wpf/Diagram/Connector/DefineConnector.md
@@ -61,7 +61,7 @@ The [DefaultConnectorType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml
 </syncfusion:SfDiagram>
 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -99,7 +99,7 @@ Polyline is a continuous line of a segment or a continuous line composed of more
                       Tool="ContinuesDraw" DrawingTool="Connector" />
 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -127,7 +127,7 @@ Diagram has support for free-hand drawing to draw anything on the diagram page i
 <syncfusion:SfDiagram x:Name="diagram" Tool="ContinuesDraw" DrawingTool="FreeHand" />
 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -168,7 +168,7 @@ The connector can be created by defining the source and target point of the conn
 </syncfusion:SfDiagram>
 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -230,7 +230,7 @@ The connector can be created between nodes to display the relationship between t
 </syncfusion:SfDiagram>
              
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -341,7 +341,7 @@ The [`SourcePort`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram
     </syncfusion:SfDiagram.Connectors>
 </syncfusion:SfDiagram>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
diff --git a/wpf/Diagram/Connector/Segments/ArcSegment.md b/wpf/Diagram/Connector/Segments/ArcSegment.md
index 1ecf608ad..1eb4e02fa 100644
--- a/wpf/Diagram/Connector/Segments/ArcSegment.md
+++ b/wpf/Diagram/Connector/Segments/ArcSegment.md
@@ -36,7 +36,7 @@ To create an arc segment, you should specify the segment as [`ArcSegment`](https
 </syncfusion:SfDiagram>
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
 //create the connector with arc segments
@@ -100,7 +100,7 @@ Arc segments can be customized by using below properties of `ArcSegment` class,
 </syncfusion:SfDiagram>
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
 //create the connector with arc segments
diff --git a/wpf/Diagram/Connector/Segments/Cubic/DefineCubic.md b/wpf/Diagram/Connector/Segments/Cubic/DefineCubic.md
index 6ccddb982..9d32e3367 100644
--- a/wpf/Diagram/Connector/Segments/Cubic/DefineCubic.md
+++ b/wpf/Diagram/Connector/Segments/Cubic/DefineCubic.md
@@ -36,7 +36,7 @@ To create a cubic curve, you should specify the segment as [`CubicCurveSegment`]
 </syncfusion:SfDiagram>
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
 //create the connector with cubic bezier segments
@@ -90,7 +90,7 @@ Cubic bezier segments are annotated with thumbs to represent the control points.
                  
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //create the connector with cubic bezier segments
 ConnectorViewModel cubicBezierConnector = new ConnectorViewModel()
@@ -137,7 +137,7 @@ Vectors also can be used to define the control points of the cubic bezier segmen
                  
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //create the connector with cubic bezier segments
 ConnectorViewModel cubicBezierConnector = new ConnectorViewModel()
diff --git a/wpf/Diagram/Connector/Segments/Cubic/Interaction.md b/wpf/Diagram/Connector/Segments/Cubic/Interaction.md
index d7fe5ad9c..2fbf4b66e 100644
--- a/wpf/Diagram/Connector/Segments/Cubic/Interaction.md
+++ b/wpf/Diagram/Connector/Segments/Cubic/Interaction.md
@@ -36,7 +36,7 @@ While interacting with multiple cubic bezier segments, you can maintain their co
 </syncfusion:ConnectorViewModel>
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //create the connector with cubic bezier segments
 ConnectorViewModel cubicBezierConnector = new ConnectorViewModel()
diff --git a/wpf/Diagram/Connector/Segments/MultipleSegments.md b/wpf/Diagram/Connector/Segments/MultipleSegments.md
index de4a6912a..c9e056cb1 100644
--- a/wpf/Diagram/Connector/Segments/MultipleSegments.md
+++ b/wpf/Diagram/Connector/Segments/MultipleSegments.md
@@ -31,7 +31,7 @@ Multiple segments can be added in a single connector one after another. You can
     </syncfusion:ConnectorViewModel.Segments>
 </syncfusion:ConnectorViewModel>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //create the connector with multiple segments
 ConnectorViewModel multipleSegments = new ConnectorViewModel()
diff --git a/wpf/Diagram/Connector/Segments/Orthogonal.md b/wpf/Diagram/Connector/Segments/Orthogonal.md
index 0aaa4e8b6..9f77a095d 100644
--- a/wpf/Diagram/Connector/Segments/Orthogonal.md
+++ b/wpf/Diagram/Connector/Segments/Orthogonal.md
@@ -35,7 +35,7 @@ To create an orthogonal segment, specify the segment as [`OrthogonalSegment`](ht
     </syncfusion:SfDiagram.Connectors>
 </syncfusion:SfDiagram>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
 //create the connector with orthogonal segments
@@ -111,7 +111,7 @@ When necessary, some segments are added or removed automatically, when dragging
     </syncfusion:ConnectorViewModel.Segments>
 </syncfusion:ConnectorViewModel>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //create the connector with orthogonal segments.
 ConnectorViewModel simpleConnector = new ConnectorViewModel()
diff --git a/wpf/Diagram/Connector/Segments/Quadratic.md b/wpf/Diagram/Connector/Segments/Quadratic.md
index b21d54b37..a242ab289 100644
--- a/wpf/Diagram/Connector/Segments/Quadratic.md
+++ b/wpf/Diagram/Connector/Segments/Quadratic.md
@@ -36,7 +36,7 @@ To create a quadratic curve line, you should specify the segment as [`QuadraticC
 </syncfusion:SfDiagram>
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
 //create the connector with quadratic bezier segments
diff --git a/wpf/Diagram/Connector/Segments/Straight.md b/wpf/Diagram/Connector/Segments/Straight.md
index cce29c3a1..821137c92 100644
--- a/wpf/Diagram/Connector/Segments/Straight.md
+++ b/wpf/Diagram/Connector/Segments/Straight.md
@@ -42,7 +42,7 @@ Straight segment allows you to create a straight-line connector between two end
     </syncfusion:SfDiagram.Connectors>
 </syncfusion:SfDiagram>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
 
diff --git a/wpf/Diagram/Connector/SelectionAndDragging.md b/wpf/Diagram/Connector/SelectionAndDragging.md
index fcc670c86..ba90f9ae3 100644
--- a/wpf/Diagram/Connector/SelectionAndDragging.md
+++ b/wpf/Diagram/Connector/SelectionAndDragging.md
@@ -38,7 +38,7 @@ Also, the entire connector can be dragged over the page by using the [`Constrain
 </syncfusion:SfDiagram>
 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -79,7 +79,7 @@ The routing is the process of updating the connector's geometry to avoid overlap
 <syncfusion:SfDiagram x:Name="diagram" Constraints="Default,Routing"/>
                                 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -98,7 +98,7 @@ N> Routing is applicable only for orthogonal connectors.
 By default, all nodes are treated as an obstacles for a connector that is connections will go around the node boundary.  You can disable the node's routing obstacles by removing the `NodeConstraints.RoutingObstacle` from the [`Constraints`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeViewModel.html#Syncfusion_UI_Xaml_Diagram_NodeViewModel_Constraints) property of node.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 NodeViewModel node = new NodeViewModel()
 {
@@ -120,7 +120,7 @@ node.Constraints.Remove(NodeConstraints.RoutingObstacle);
 By default, each connector's routing process is inherited based on the value of the `Constraints` property of the diagram. To control the individual connector's routing regardless of the diagram, you should remove the `ConnectorConstraints.InheritRouting` enum value from the [`Constraints`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ConnectorViewModel.html#Syncfusion_UI_Xaml_Diagram_ConnectorViewModel_Constraints) property of the connector and add `ConnectorConstraints.Routing` enum value to the Constraints property or remove `ConnectorConstraints.Routing` enum value from the Constraints property to enable or disable the routing respectively.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 ConnectorViewModel connector = new ConnectorViewModel()
 {
@@ -158,7 +158,7 @@ The routing algorithm can be specified by using [`RoutingType`](https://help.syn
 </syncfusion:SfDiagram>
                                 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
diff --git a/wpf/Diagram/Constraints.md b/wpf/Diagram/Constraints.md
index 12967b70b..77e268423 100644
--- a/wpf/Diagram/Constraints.md
+++ b/wpf/Diagram/Constraints.md
@@ -52,7 +52,7 @@ To know more about bitwise operators, refer to [Bitwise Operations](#bitwise-ope
 The following code example illustrates how to disable page editing.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 diagram.Constraints = GraphConstraints.Default & ~GraphConstraints.PageEditing;
 
@@ -113,7 +113,7 @@ diagram.Constraints = GraphConstraints.Default & ~GraphConstraints.PageEditing;
 The following code example illustrates how to disable rotation.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Create NodeViewModel collection
 diagram.Nodes = new ObservableCollection<NodeViewModel>();
@@ -180,7 +180,7 @@ NodeViewModel node = new NodeViewModel()
 The following code example illustrates how to disable selection.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 diagram.connectors = new ObservableCollection<ConnectorViewModel>();
 
@@ -222,7 +222,7 @@ ConnectorViewModel connector1 = new ConnectorViewModel()
 The following code example illustrates how to disable creating connections with a port.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 
 NodePortViewModel port=	new NodePortViewModel()
@@ -272,7 +272,7 @@ NodePortViewModel port=	new NodePortViewModel()
 The following code example illustrates how to enable annotation dragging.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 AnnotationEditorViewModel anno = new AnnotationEditorViewModel()
 {
@@ -309,7 +309,7 @@ Selector visually represents the selected elements with certain editable thumbs.
 The following code example illustrates how to hide rotator.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 (diagram.SelectedItems as SelectorViewModel).SelectorConstraints = (diagram.SelectedItems as  SelectorViewModel).SelectorConstraints & ~SelectorConstraints.Rotator;
 
@@ -339,7 +339,7 @@ The following code example illustrates how to hide rotator.
 The following code example illustrates how to show only Horizontal Gridlines
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 diagram.SnapSettings.SnapConstraints = SnapConstraints.SnapToHorizontalLines;
 
@@ -355,7 +355,7 @@ Some of the behaviors can be defined through both the specific object (Node/Conn
 The following code example illustrates how to inherit the line bridging behavior from the Diagram.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 diagram.Constraints = GraphConstraints.Default | GraphConstraints.Bridging;
 
@@ -383,7 +383,7 @@ Bitwise Operations are used to manipulate the flagged enumerations [enum]. In th
 You can add or enable multiple values at a time	by using Bitwise `|` (OR) operator or Add() method of constraints.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Using OR operator
 node.Constraints = NodeConstraints.Selectable | NodeConstraints.Rotatable;
@@ -401,7 +401,7 @@ In the above example, you can do both the selection and rotation.
 You can remove or disable values by using Bitwise ‘&~’ (XOR) operator or Remove() method of constraints.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Using XOR operator
 node.Constraints = node.Constraints & ~(NodeConstraints.Rotatable);
@@ -419,7 +419,7 @@ In the above example, Rotation is disabled but other constraints are enabled.
 You can check any value by using Bitwise ‘&’ (AND) operator.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 if ((node.Constraints & (NodeConstraints.Rotatable)) == (NodeConstraints.Rotatable))
 
diff --git a/wpf/Diagram/Container.md b/wpf/Diagram/Container.md
index ba1c22869..371d2cd4d 100644
--- a/wpf/Diagram/Container.md
+++ b/wpf/Diagram/Container.md
@@ -47,7 +47,7 @@ The following code illustrates how to create a Container Node.
 </syncfusion:SfDiagram>
 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the diagram
 SfDiagram diagram = new SfDiagram();
@@ -148,7 +148,7 @@ The following code example explains how to define a container header and its cus
 </syncfusion:SfDiagram>
 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the diagram
 SfDiagram diagram = new SfDiagram();
diff --git a/wpf/Diagram/Context-Menu.md b/wpf/Diagram/Context-Menu.md
index 8e1e1a230..fd992c084 100644
--- a/wpf/Diagram/Context-Menu.md
+++ b/wpf/Diagram/Context-Menu.md
@@ -73,7 +73,7 @@ diagram.Menu.MenuItems.Add(menu);
 The default value of the `Menu` property for `Node` and `Connector` is `null`. The following code example illustrates how to set the `Menu` and `MenuItems` on a node. Add the `.ico` file to your project as a `Resource`, then reference it with the `pack://` URI.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 node.Constraints = node.Constraints | NodeConstraints.Menu;
 node.Constraints = node.Constraints & ~NodeConstraints.InheritMenu;
diff --git a/wpf/Diagram/Getting-Started.md b/wpf/Diagram/Getting-Started.md
index b0f918382..e4cb073e3 100644
--- a/wpf/Diagram/Getting-Started.md
+++ b/wpf/Diagram/Getting-Started.md
@@ -72,7 +72,7 @@ To add control manually in C#, do the following steps:
 {% capture codesnippet2 %}
 {% tabs %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 using Syncfusion.UI.Xaml.Diagram;
 using System.Windows;
diff --git a/wpf/Diagram/Gridlines.md b/wpf/Diagram/Gridlines.md
index e9faef021..748ae757e 100644
--- a/wpf/Diagram/Gridlines.md
+++ b/wpf/Diagram/Gridlines.md
@@ -23,7 +23,7 @@ The [`SnapConstraints`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Di
     </syncfusion:SfDiagram.SnapSettings>
 </syncfusion:SfDiagram>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
 //Initialize SnapSettings constraints to show Gridlines
@@ -74,7 +74,7 @@ The [`HorizontalGridLines`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xam
 </syncfusion:SfDiagram>
 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -146,7 +146,7 @@ The thickness and space between the gridlines can be customized by using [`Lines
     </syncfusion:SfDiagram.SnapSettings>
 </syncfusion:SfDiagram>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -205,7 +205,7 @@ Find the [Gridlines Custom Spacing Sample](https://github.com/SyncfusionExamples
 </syncfusion:SfDiagram>
 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize SfDiagram
 SfDiagram Diagram = new SfDiagram();
diff --git a/wpf/Diagram/Group.md b/wpf/Diagram/Group.md
index 2f1365b25..7b9cc742a 100644
--- a/wpf/Diagram/Group.md
+++ b/wpf/Diagram/Group.md
@@ -17,7 +17,7 @@ A Group is used to cluster multiple Nodes and Connectors into a single element.
 
 The following code illustrates how to create a Group Node.
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the diagram
 SfDiagram diagram = new SfDiagram();
diff --git a/wpf/Diagram/Interaction/Deletion.md b/wpf/Diagram/Interaction/Deletion.md
index c3b15d3a6..0e8413f02 100644
--- a/wpf/Diagram/Interaction/Deletion.md
+++ b/wpf/Diagram/Interaction/Deletion.md
@@ -16,7 +16,7 @@ Selected objects can be deleted by using the Delete key or the built-in Delete c
 * [ItemDeletingEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_ItemDeletingEvent) will notify you with the item , an option to cancel the deleting operation of item and option to decide on deleting dependent Connector when its Source/Target is deleted. To learn about arguments, please refer to [ItemDeletingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemDeletingEventArgs.html).  
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 SfDiagram diagram = new SfDiagram();
 
diff --git a/wpf/Diagram/Interaction/Dragging/CollisionState.md b/wpf/Diagram/Interaction/Dragging/CollisionState.md
index ec42001e9..ec305c95c 100644
--- a/wpf/Diagram/Interaction/Dragging/CollisionState.md
+++ b/wpf/Diagram/Interaction/Dragging/CollisionState.md
@@ -14,7 +14,7 @@ Using [CollisionState](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Dia
 
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 SfDiagram diagram = new SfDiagram();
 
@@ -53,7 +53,7 @@ private void OnSelectorChangedEvent(object sender, SelectorChangedEventArgs args
 In some cases, there may be requirement for repositioning overlapping objects, rather than selected object. Using [GetOverlappingObjects](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_GetOverlappingObjects_Syncfusion_UI_Xaml_Diagram_CollisionState_) method, you can able to find all overlapping objects(such as Node or Connector or Annotation) for a given node.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 private void OnSelectorChangedEvent(object sender, SelectorChangedEventArgs args)
 {
@@ -99,7 +99,7 @@ private void OnSelectorChangedEvent(object sender, SelectorChangedEventArgs args
 The [`Space`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.CollisionState.html#Syncfusion_UI_Xaml_Diagram_CollisionState_Space) property of [CollisionState](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.CollisionState.html) allows you to specify the spacing distance.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 var selectedNode = (NodeViewModel)selectedNodes[0];
 var collisionState = new CollisionState() { Item = selectedNode, Space = 5 };
@@ -113,7 +113,7 @@ var collisionState = new CollisionState() { Item = selectedNode, Space = 5 };
 By default, annotations of other elements are also considered intersections for any given node. This can be disabled using [IncludeSubElements](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.CollisionState.html#Syncfusion_UI_Xaml_Diagram_CollisionState_IncludeSubElements) property of CollisionState.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 var selectedNode = (NodeViewModel)selectedNodes[0];
 var collisionState = new CollisionState() { Item = selectedNode, IncludeSubElements = false };
diff --git a/wpf/Diagram/Interaction/Dragging/Drag.md b/wpf/Diagram/Interaction/Dragging/Drag.md
index 7e3eab64e..c34d5c0a9 100644
--- a/wpf/Diagram/Interaction/Dragging/Drag.md
+++ b/wpf/Diagram/Interaction/Dragging/Drag.md
@@ -25,7 +25,7 @@ In `SelectorChangedEvent` based on the arguments the process occurs,
 
 {% tabs %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 SfDiargam Diagram = new SfDiagram();
 
@@ -71,7 +71,7 @@ Diagram provides support to drag its elements in either vertical or horizontal d
 Diagram provides support to drop a [node](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeViewModel.html) over another node or [connector](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ConnectorViewModel.html). Drop event is raised to notify that an element is dropped over another one and it is disabled by default. It can be enabled with the [AllowDrop](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeConstraints.html) constraints property for both nodes and connectors.
 
 {% tabs %}
-{% highlight Xaml %}
+{% highlight xaml %}
 
 <syncfusion:SfDiagram.Nodes>
     <syncfusion:NodeCollection>
@@ -82,7 +82,7 @@ Diagram provides support to drop a [node](https://help.syncfusion.com/cr/wpf/Syn
 </syncfusion:SfDiagram.Nodes>
 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Enable AllowDrop Constraints for Node
 
@@ -105,7 +105,7 @@ Drag and drop a node over another node or connector will show a preview for the
 | [ConnectorDropIndicatorStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SfDiagram.html#Syncfusion_UI_Xaml_Diagram_SfDiagram_ConnectorDropIndicatorStyle) | Defines the customization option for preview for the Connector.|
 
 {% tabs %}
-{% highlight Xaml %}
+{% highlight xaml %}
 
 <Style TargetType="Shape" x:Key="Nodedropindicator">
     <Setter Property="StrokeThickness" Value="4"/>
@@ -123,7 +123,7 @@ Drag and drop a node over another node or connector will show a preview for the
                       ConnectorDropIndicatorStyle="{StaticResource connectordropindicator}">
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 SfDiagram Diagram = new SfDiagram();
 
diff --git a/wpf/Diagram/Interaction/Dragging/DuplicateNodesandConnectors.md b/wpf/Diagram/Interaction/Dragging/DuplicateNodesandConnectors.md
index acb2d96bd..cb9616fe0 100644
--- a/wpf/Diagram/Interaction/Dragging/DuplicateNodesandConnectors.md
+++ b/wpf/Diagram/Interaction/Dragging/DuplicateNodesandConnectors.md
@@ -15,7 +15,7 @@ The [WPF Diagram](https://www.syncfusion.com/diagram-sdk/wpf-diagram) simplifies
 N> To duplicate connectors using Ctrl + Drag, the connector must first be enabled for dragging by setting the [`ConnectorConstraints.Draggable`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ConnectorConstraints.html#Syncfusion_UI_Xaml_Diagram_ConnectorConstraints_Draggable) constraint.
 
 {% tabs %}
-{% highlight Xaml %}
+{% highlight xaml %}
 
  <!--Initialize the Sfdiagram-->
  <syncfusion:SfDiagram x:Name="diagram" >
@@ -32,7 +32,7 @@ N> To duplicate connectors using Ctrl + Drag, the connector must first be enable
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 
 SfDiagram diagram = new SfDiagram();
diff --git a/wpf/Diagram/Interaction/Dragging/EnableConnectorSplitting.md b/wpf/Diagram/Interaction/Dragging/EnableConnectorSplitting.md
index 14bb66274..cd97dc597 100644
--- a/wpf/Diagram/Interaction/Dragging/EnableConnectorSplitting.md
+++ b/wpf/Diagram/Interaction/Dragging/EnableConnectorSplitting.md
@@ -12,13 +12,13 @@ documentation: ug
 The Connectors are used to create links between two points, ports, or nodes to represent the relationship between them. You can split the connector between two nodes when dropping a new node onto an existing connector and create a connection between the new node and existing nodes by setting `EnableConnectorSplitting` as `true`. The default value of `EnableConnectorSplitting` is `false`.
 
 {% tabs %}
-{% highlight Xaml %}
+{% highlight xaml %}
 
 <Syncfusion:SfDiagram x:Name="Diagram" EnableConnectorSplitting="True"/>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 SfDiagram Diagram = new SfDiagram();
 
diff --git a/wpf/Diagram/Interaction/Dragging/PreviewSettings/Preview-Settings.md b/wpf/Diagram/Interaction/Dragging/PreviewSettings/Preview-Settings.md
index a24bf3554..67f320037 100644
--- a/wpf/Diagram/Interaction/Dragging/PreviewSettings/Preview-Settings.md
+++ b/wpf/Diagram/Interaction/Dragging/PreviewSettings/Preview-Settings.md
@@ -18,7 +18,7 @@ By default, Outline of the connectors connected to the dragging objects will be
 
 {% tabs %}
 
-{% highlight Xaml %}
+{% highlight xaml %}
 
   <!--Create SfDiagram Instance-->
   <syncfusion:SfDiagram x:Name="Diagram">
@@ -28,7 +28,7 @@ By default, Outline of the connectors connected to the dragging objects will be
   </syncfusion:SfDiagram>
 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 SfDiagram diagram = new SfDiagram();
 
@@ -45,7 +45,7 @@ Appearance of the preview can be customized using [`PreviewStyle`](https://help.
 
 {% tabs %}
 
-{% highlight Xaml %}
+{% highlight xaml %}
 
 <Style TargetType="Shape" x:Key="previewstyle">
     <Setter Property="Stroke"
@@ -65,7 +65,7 @@ Appearance of the preview can be customized using [`PreviewStyle`](https://help.
   </syncfusion:SfDiagram>
 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 SfDiagram diagram = new SfDiagram();
 
diff --git a/wpf/Diagram/Interaction/Dragging/RestrictDraggingAtNegativeAxis.md b/wpf/Diagram/Interaction/Dragging/RestrictDraggingAtNegativeAxis.md
index a80b56beb..b1fe55f52 100644
--- a/wpf/Diagram/Interaction/Dragging/RestrictDraggingAtNegativeAxis.md
+++ b/wpf/Diagram/Interaction/Dragging/RestrictDraggingAtNegativeAxis.md
@@ -26,7 +26,7 @@ While a symbol is being dragged from the stencil control, it will be added into
 <syncfusion:SfDiagram x:Name="diagram" Constraints="Default,RestrictNegativeAxisDragDrop">
 </syncfusion:SfDiagram>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -51,7 +51,7 @@ To define a different behavior for a specific node or connector, remove the `Inh
 The following code example illustrates how to enable restrict object dragging at negative region behavior for a particular Node or specific connector.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 //Here node is instance of a NodeViewModel
 //Remove inherit constraint.
 node.Constraints &= ~NodeConstraints.InheritRestrictNegativeAxisDragDrop;
diff --git a/wpf/Diagram/Interaction/Selection.md b/wpf/Diagram/Interaction/Selection.md
index 5ccd9d932..15fe7df8f 100644
--- a/wpf/Diagram/Interaction/Selection.md
+++ b/wpf/Diagram/Interaction/Selection.md
@@ -59,13 +59,13 @@ Multiple selected elements are visually represented as shown.
 |ToggleSelection|Enables single selection mode as ToggleSelection. Clicking an already selected node toggles its selection state, allowing it to be selected or deselected.|
 
 {% tabs %}
-{% highlight Xaml %}
+{% highlight xaml %}
 
 <Syncfusion:SfDiagram x:Name="Diagram" 
                       SingleSelectionMode="Select">
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 SfDiagram Diagram = new SfDiagram();
 
@@ -91,7 +91,7 @@ The `IsSelected` Property is used to select/unselect the elements at runtime.
 The following code example illustrates how to select/unselect an item  programmatically.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 // Selects an element 
 node.IsSelected = true;
@@ -117,7 +117,7 @@ Multiple selection shows a preview of the selected items. We have provided custo
 | [FirstSelectionIndicatorStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SfDiagram.html#Syncfusion_UI_Xaml_Diagram_SfDiagram_FirstSelectionIndicatorStyle) | Defines the customization option for selection preview of first selected item.|
 
 {% tabs %}
-{% highlight Xaml %}
+{% highlight xaml %}
 
     <Style TargetType="Shape" x:Key="FirstSelectionindicatorstyle">
         <Setter Property="StrokeThickness" Value="2"/>
@@ -143,7 +143,7 @@ Multiple selection shows a preview of the selected items. We have provided custo
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 SfDiagram Diagram = new SfDiagram();
 
diff --git a/wpf/Diagram/Interaction/Tooltip.md b/wpf/Diagram/Interaction/Tooltip.md
index 8f8347508..e101b0ef7 100644
--- a/wpf/Diagram/Interaction/Tooltip.md
+++ b/wpf/Diagram/Interaction/Tooltip.md
@@ -24,7 +24,7 @@ By default, the diagram displays the tooltip at a static position during an inte
 Diagram control displays the tooltip at a dynamic position when the [`SelectorHandleDisplayMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SelectorHandleDisplayMode.html) is set to `Compact`. When resizing a diagram element, the tooltip is positioned closer to the resizer thumbs, and when dragging, the tooltip is positioned automatically in the nearest available viewport area around that diagram element. The following image illustrates how the dynamic tooltip works.
 
 {% tabs %}
-{% highlight Xaml %}
+{% highlight xaml %}
 
 <syncfusion:SfDiagram x:Name="diagram" SelectorHandleDisplayMode="Compact" >
 
@@ -32,7 +32,7 @@ Diagram control displays the tooltip at a dynamic position when the [`SelectorHa
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 SfDiagram Diagram = new SfDiagram();
 
diff --git a/wpf/Diagram/Interaction/UserHandle.md b/wpf/Diagram/Interaction/UserHandle.md
index 1a9151afa..98cd33193 100644
--- a/wpf/Diagram/Interaction/UserHandle.md
+++ b/wpf/Diagram/Interaction/UserHandle.md
@@ -21,7 +21,7 @@ Quick Commands are used to execute commonly used commands for the [Nodes](https:
 
 {% tabs %}
 
-{% highlight Xaml %}
+{% highlight xaml %}
 
 <ResourceDictionary.MergedDictionaries>
     <ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml"/>
@@ -35,7 +35,7 @@ Quick Commands are used to execute commonly used commands for the [Nodes](https:
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 SfDiagram Diagram = new SfDiagram();
 
@@ -84,7 +84,7 @@ The Alignment of QuickCommand is similar  to [Annotation Alignment](https://help
 
 {% tabs %}
 
-{% highlight Xaml %}
+{% highlight xaml %}
 
 <ResourceDictionary.MergedDictionaries>
     <ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml"/>
@@ -98,7 +98,7 @@ The Alignment of QuickCommand is similar  to [Annotation Alignment](https://help
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 SfDiagram Diagram = new SfDiagram();
 
diff --git a/wpf/Diagram/Node.md b/wpf/Diagram/Node.md
index 6f300adcc..62a99d034 100644
--- a/wpf/Diagram/Node.md
+++ b/wpf/Diagram/Node.md
@@ -130,7 +130,7 @@ You can use text, image, controls, panels, or any UIElement or template to visua
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Define the Node
 NodeViewModel node = new NodeViewModel()
@@ -166,7 +166,7 @@ NodeViewModel node = new NodeViewModel()
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 Image img = new Image();
 BitmapImage bmp = new BitmapImage();
@@ -225,7 +225,7 @@ The [`Shape`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Node
    
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Define the Node
 NodeViewModel node = new NodeViewModel()
@@ -276,7 +276,7 @@ xmlns:sys="clr-namespace:System;assembly=mscorlib"
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Define the Node
 NodeViewModel node = new NodeViewModel()
@@ -323,7 +323,7 @@ Refer to the following code example to define data template for node's custom sh
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Define the Node
 NodeViewModel node = new NodeViewModel()
@@ -368,7 +368,7 @@ Refer to the following code example to add image as node shape,
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Define the Node
 NodeViewModel node = new NodeViewModel()
@@ -449,7 +449,7 @@ Refer to the following code example to add framework elements as node content,
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Define the Node
 NodeViewModel node = new NodeViewModel()
@@ -498,7 +498,7 @@ The following table explains how `Pivot` relates `Offset` values with `Node` bou
         
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Define the Node
 NodeViewModel node = new NodeViewModel()
@@ -544,7 +544,7 @@ The [`Flip`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Flip.
         
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Define the Node
  NodeViewModel node = new NodeViewModel()
@@ -654,7 +654,7 @@ You can customize the appearance of a node by changing its [`ShapeStyle`](https:
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 Style style = new Style(typeof(Path));
 style.Setters.Add(new Setter(Path.FillProperty, Brushes.SteelBlue));
diff --git a/wpf/Diagram/Page-Settings.md b/wpf/Diagram/Page-Settings.md
index 65f392bc2..29f6aa98f 100644
--- a/wpf/Diagram/Page-Settings.md
+++ b/wpf/Diagram/Page-Settings.md
@@ -29,7 +29,7 @@ By default, [WPF Diagram](https://www.syncfusion.com/diagram-sdk/wpf-diagram) pa
 </syncfusion:SfDiagram>
 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
 
@@ -68,7 +68,7 @@ Based on the position of diagram elements, the size of the page dynamically incr
 </syncfusion:SfDiagram>
 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -109,7 +109,7 @@ The appearance of the pages can be customized by using the following properties
   </syncfusion:SfDiagram.PageSettings>
 </syncfusion:SfDiagram>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
 //Initialize the page settings and its properties
@@ -145,7 +145,7 @@ The area between the main content of a page and the page edges can be changed us
   </syncfusion:SfDiagram.PageSettings>
 </syncfusion:SfDiagram>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
 //Initialize the page settings and print margin property
@@ -180,7 +180,7 @@ The measurement units of the page can be changed by using the [Unit](https://hel
   </syncfusion:SfDiagram.PageSettings>
 </syncfusion:SfDiagram>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
 //Initialize the page settings and unit property.
@@ -215,7 +215,7 @@ The [PrintScale](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.P
   </syncfusion:SfDiagram.PageSettings>
 </syncfusion:SfDiagram>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
 //Initialize the page settings and print scale value.
@@ -250,7 +250,7 @@ You can restrict the diagram page scaling to minimum and maximum values by using
   </syncfusion:SfDiagram.PageSettings>
 </syncfusion:SfDiagram>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
 //Initialize the page settings and print scale value.
@@ -284,7 +284,7 @@ The `AdjustPageOrigin` method contains the [Info](https://help.syncfusion.com/cr
 | PageOrigin | Gets the origin of the page. | ![PageOrigin](Page-Settings_images/PageOrigin.png)  |
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
diff --git a/wpf/Diagram/Port/AutomaticPortCreation.md b/wpf/Diagram/Port/AutomaticPortCreation.md
index f3370c4d6..a62e5bccf 100644
--- a/wpf/Diagram/Port/AutomaticPortCreation.md
+++ b/wpf/Diagram/Port/AutomaticPortCreation.md
@@ -21,7 +21,7 @@ documentation: ug
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //We need to enable tool and drawingtool to draw connector by clicking and dragging the mouse over the node.
 diagram.Tool = Tool.ContinuesDraw;
diff --git a/wpf/Diagram/Port/Port-to-port-creation.md b/wpf/Diagram/Port/Port-to-port-creation.md
index 14a8bb17b..b917b4aaf 100644
--- a/wpf/Diagram/Port/Port-to-port-creation.md
+++ b/wpf/Diagram/Port/Port-to-port-creation.md
@@ -73,7 +73,7 @@ You can create a connection between the ports interactively by performing click
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 NodeViewModel node1 = AddNode(100, 50, 65, 100,0.5,1,1,0.5);                       
 //Adding Node to Collection
 (Diagram.Nodes as NodeCollection).Add(node1);
@@ -146,7 +146,7 @@ Unlike [`NodePort`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagra
 
 {% tabs %}
 
-{% highlight C# %}
+{% highlight c# %}
 //Initialize HitPadding to sfdiagram
 diagram.HitPadding = 20;
 
diff --git a/wpf/Diagram/Port/PortHoverEffect.md b/wpf/Diagram/Port/PortHoverEffect.md
index b78532f65..ae9f33930 100644
--- a/wpf/Diagram/Port/PortHoverEffect.md
+++ b/wpf/Diagram/Port/PortHoverEffect.md
@@ -21,7 +21,7 @@ When establishing a new connection or modifying the start/end points of existing
 <syncfusion:SfDiagram x:Name="diagram" PortHoverEffect="Ripple">
 </syncfusion:SfDiagram>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
 //defines the port hover connection effect as ripple.
diff --git a/wpf/Diagram/Rulers.md b/wpf/Diagram/Rulers.md
index 2e6e34988..2b295b99a 100644
--- a/wpf/Diagram/Rulers.md
+++ b/wpf/Diagram/Rulers.md
@@ -18,7 +18,7 @@ Please refer to the sample from Dashboard->Desktop->WPF->Diagram->GettingStarted
 ## Define Rulers
 
 {% tabs %}
-{% highlight XAML %}
+{% highlight xaml%}
 
 <syncfusion:SfDiagram x:Name="diagram">
     <syncfusion:SfDiagram.HorizontalRuler>
@@ -30,7 +30,7 @@ Please refer to the sample from Dashboard->Desktop->WPF->Diagram->GettingStarted
 </syncfusion:SfDiagram>
 		
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 diagram.HorizontalRuler = new Ruler();
 diagram.VerticalRuler = new Ruler() { Orientation = Orientation.Vertical };
@@ -56,7 +56,7 @@ You can change the color of the ruler's position indicator marker y desired colo
 
 
 {% tabs %}
-{% highlight XAML %}
+{% highlight xaml%}
 
 <syncfusion:SfDiagram x:Name="diagram">
     <syncfusion:SfDiagram.HorizontalRuler>
@@ -68,7 +68,7 @@ You can change the color of the ruler's position indicator marker y desired colo
 </syncfusion:SfDiagram>
 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 diagram.HorizontalRuler = new Ruler() { MarkerBrush = Brushes.Red };
 diagram.VerticalRuler = new Ruler() { Orientation = Orientation.Vertical,  MarkerBrush = Brushes.Green };
diff --git a/wpf/Diagram/Scroll-Settings/AutoScrollLimit.md b/wpf/Diagram/Scroll-Settings/AutoScrollLimit.md
index a771a8163..0beebb646 100644
--- a/wpf/Diagram/Scroll-Settings/AutoScrollLimit.md
+++ b/wpf/Diagram/Scroll-Settings/AutoScrollLimit.md
@@ -27,7 +27,7 @@ The default value is `Infinity`.
     </syncfusion:SfDiagram.ScrollSettings>
 </syncfusion:SfDiagram>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
 //Initialize the ScrollSetting with auto scroll limit and scrolling area
diff --git a/wpf/Diagram/Scroll-Settings/DragLimit.md b/wpf/Diagram/Scroll-Settings/DragLimit.md
index 24c0299c3..67bd41142 100644
--- a/wpf/Diagram/Scroll-Settings/DragLimit.md
+++ b/wpf/Diagram/Scroll-Settings/DragLimit.md
@@ -29,7 +29,7 @@ Drag limit behavior is enabled by handling the `SelectorChangedEvent` and its ar
     </syncfusion:SfDiagram.ScrollSettings>
 </syncfusion:SfDiagram>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
 //Register the selector changed event to handle it
diff --git a/wpf/Diagram/Scroll-Settings/ScrollLimit.md b/wpf/Diagram/Scroll-Settings/ScrollLimit.md
index 25310a559..3ed028299 100644
--- a/wpf/Diagram/Scroll-Settings/ScrollLimit.md
+++ b/wpf/Diagram/Scroll-Settings/ScrollLimit.md
@@ -27,7 +27,7 @@ The default value is `Diagram`.
     </syncfusion:SfDiagram.ScrollSettings>
 </syncfusion:SfDiagram>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
 //Initialize the scroll settings with scroll limit
@@ -71,7 +71,7 @@ You can restrict scrolling beyond a specific rectangular area by using the `Scro
     </syncfusion:SfDiagram.ScrollSettings>
 </syncfusion:SfDiagram>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
 //Initialize the scroll settings with scroll limit and scrollable area value
diff --git a/wpf/Diagram/Scroll-Settings/ScrollStatusAndAutoScroll.md b/wpf/Diagram/Scroll-Settings/ScrollStatusAndAutoScroll.md
index d55fe05ca..af521a8f2 100644
--- a/wpf/Diagram/Scroll-Settings/ScrollStatusAndAutoScroll.md
+++ b/wpf/Diagram/Scroll-Settings/ScrollStatusAndAutoScroll.md
@@ -23,7 +23,7 @@ Diagram allows you to get the scroll settings related values using the [`ScrollI
 * `VerticalOffset`: Specifies the vertical origin or top side of the view port of the diagram page.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
 //Get type values of ScrollInfo property in scroll settings class
@@ -45,7 +45,7 @@ You can programmatically change scrolling amount at runtime by using the ZoomPan
 The [`ScrollDelta`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ZoomPositionParamenter.html#Syncfusion_UI_Xaml_Diagram_ZoomPositionParamenter_ScrollDelta) property of [ZoomPositionParameter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ZoomPositionParamenter.html) class allows you to specify how much the page should scroll. The [`ZoomCommand`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ZoomCommand.html) property is used to specify whether scrolling is vertical or horizontal.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
 //Initialize the scroll settings with zoom to value and zoom command
@@ -85,7 +85,7 @@ The Autoscroll border is used to specify the maximum distance between the object
     </syncfusion:SfDiagram.ScrollSettings>
 </syncfusion:SfDiagram>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
 //Initialize the scroll settings with auto scroll border
diff --git a/wpf/Diagram/Serialization.md b/wpf/Diagram/Serialization.md
index ba5281e92..11c4584e4 100644
--- a/wpf/Diagram/Serialization.md
+++ b/wpf/Diagram/Serialization.md
@@ -17,7 +17,7 @@ In [WPF Diagram](https://www.syncfusion.com/diagram-sdk/wpf-diagram), DataContra
 
 {% tabs %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 SfDiagram sfDiagram = new SfDiagram();
 
@@ -45,7 +45,7 @@ sfDiagram.Save(str);
 On deserialization, the saved stream is used to load the SfDiagram's nodes and connectors into the current view. With this, you can continue working on the earlier saved SfDiagram by loading the appropriate stream.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 SfDiagram sfDiagram = new SfDiagram();
 
@@ -82,7 +82,7 @@ N> By default, `HasChanges` is set to `false`. It is automatically updated to `t
 <Button x:Name="SaveButton" Content="Save" Click="SaveButton_Click">
 </Button>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 //Method to promote the save dialouge box when diagram has any unsaved changes.
 private void SaveButton_Click(object sender, RoutedEventArgs e)
 {
@@ -124,7 +124,7 @@ In SfDiagram, you cannot serialize the Content and ContentTemplate of each and e
 The custom properties in custom class derived from any of our SfDiagram's interface or from any of the view model classes are serialized with the help of the DataMember attribute.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 public class NodeContent : INode
 {
@@ -146,7 +146,7 @@ N> SfDiagram's interface and view model classes are created without DataContract
 You can serialize a business class with the help of the DataContract attribute and SfDiagram's `KnownTypes` property. You have to add DataContract attribute to serialize the whole class, which is not derived from a base class without DataContract attribute.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 [DataContract]
 public class NodeContent
@@ -174,7 +174,7 @@ Diagram.KnownTypes = () => new List<Type>()
 You can load any of the old version SfDiagram's stream in new version with the help of upgrade method. Refer to the following code example.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 using (Stream myStream = dialog.OpenFile())
 {
@@ -194,7 +194,7 @@ The [SfDiagram](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Sf
 The [SaveDiagramAsMermaid](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SfDiagram.html#Syncfusion_UI_Xaml_Diagram_SfDiagram_SaveDiagramAsMermaid) method serializes your diagram into a Mermaid-compatible string. This method works for diagrams using Flowchart, Mind Map, or Sequence Diagram layouts. The following example shows how to save a diagram:
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 // Initialize the SfDiagram
 SfDiagram Diagram = new SfDiagram();
@@ -255,7 +255,7 @@ string mermaidData = Diagram.SaveDiagramAsMermaid();
 You can load a [diagram](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SfDiagram.html) from the serialized Mermaid syntax data using the [LoadDiagramFromMermaid](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SfDiagram.html#Syncfusion_UI_Xaml_Diagram_SfDiagram_LoadDiagramFromMermaid_System_String_) method. The following code illustrates how to load a diagram from a Mermaid string data.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 // Initialize the SfDiagram
 SfDiagram Diagram = new SfDiagram();
diff --git a/wpf/Diagram/Shapes.md b/wpf/Diagram/Shapes.md
index 58ae244f8..baf546861 100644
--- a/wpf/Diagram/Shapes.md
+++ b/wpf/Diagram/Shapes.md
@@ -54,7 +54,7 @@ The following code example illustrates how to assign [`Shape`](https://help.sync
     </syncfusion:SfDiagram.Nodes>
 </syncfusion:SfDiagram>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the diagram
 SfDiagram diagram = new SfDiagram();
diff --git a/wpf/Diagram/Snapping/CustomSnapping.md b/wpf/Diagram/Snapping/CustomSnapping.md
index bb0d93abc..563fce752 100644
--- a/wpf/Diagram/Snapping/CustomSnapping.md
+++ b/wpf/Diagram/Snapping/CustomSnapping.md
@@ -48,7 +48,7 @@ Snapping helps you to drag or resize the elements completely and sharp from one
 </syncfusion:SfDiagram>
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
 //Initialize the Snap Settings
@@ -97,7 +97,7 @@ Snapping on rotation can be enabled or disabled using the [`SnapConstraints`](ht
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
diff --git a/wpf/Diagram/Snapping/DefineSnapping.md b/wpf/Diagram/Snapping/DefineSnapping.md
index 260a96228..5b41da6a6 100644
--- a/wpf/Diagram/Snapping/DefineSnapping.md
+++ b/wpf/Diagram/Snapping/DefineSnapping.md
@@ -33,7 +33,7 @@ Snapping to objects can be enabled by assigning values to the `SnapToObject` pro
   </syncfusion:SfDiagram.SnapSettings>
 </syncfusion:SfDiagram>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -93,7 +93,7 @@ When snapping, cyan-colored indicator lines will be shown. These indication line
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -131,7 +131,7 @@ Snapping to gridlines can be enabled or disabled with the [SnapConstraints](http
 </syncfusion:SfDiagram>
 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
diff --git a/wpf/Diagram/Stencil/Commands.md b/wpf/Diagram/Stencil/Commands.md
index 95d1104eb..33767989c 100644
--- a/wpf/Diagram/Stencil/Commands.md
+++ b/wpf/Diagram/Stencil/Commands.md
@@ -225,13 +225,13 @@ The [`MoveToLastInRow`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Di
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="MoveToLastInRow" Click="MoveToLastInRow_Click" ToolTip="End"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 private void MoveToLastInRow_Click(object sender, RoutedEventArgs e)
 {
@@ -250,13 +250,13 @@ The [`MoveToFirstInColumn`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xam
 
 {% tabs %}
 
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="MoveToFirstInColumn" Click="MoveToFirstInColumn_Click" ToolTip="Page Up"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 
 private void MoveToFirstInColumn_Click(object sender, RoutedEventArgs e)
 {
@@ -275,13 +275,13 @@ private void MoveToFirstInColumn_Click(object sender, RoutedEventArgs e)
 The [`MoveToLastInColumn`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Stencil.IStencilCommand.html#Syncfusion_UI_Xaml_Diagram_Stencil_IStencilCommand_MoveToLastInColumn) command moves selection to the last symbol in the current column of the `SymbolGroup` or the last symbol of the symbol group if none is selected. MoveToLastInColumn command can be executed by pressing the PageDown key.
 
 {% tabs %}
-{% highlight Xaml%}
+{% highlight xaml%}
 
 <Button Height="50" Content="MoveToLastInColumn" Click="MoveToLastInColumn_Click" ToolTip="Page Down"></Button>
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 private void MoveToLastInColumn_Click(object sender, RoutedEventArgs e)
 {
     if (Stencil != null)
@@ -300,7 +300,7 @@ Removing a command from the `CommandManager` is straightforward. To do this, you
 Here is an example of how to remove a specific command from the CommandManager:
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 // Removing a particular stencil command from the CommandManager
 if (Stencil != null)
diff --git a/wpf/Diagram/Stencil/Serialization.md b/wpf/Diagram/Stencil/Serialization.md
index 7594de519..d5195c9d9 100644
--- a/wpf/Diagram/Stencil/Serialization.md
+++ b/wpf/Diagram/Stencil/Serialization.md
@@ -31,7 +31,7 @@ In `Stencil`, [DataContractSerializer](https://learn.microsoft.com/en-us/dotnet/
 Here is a simple code example to demonstrate how to save the stencil.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 // To save as stream in file.
 SaveFileDialog dialog = new SaveFileDialog();
@@ -61,7 +61,7 @@ N> Before calling `Load`, the Stencil may already contain `SymbolGroup`s. The lo
 The following example demonstrates how to load a Stencil with its saved settings:
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 // Load from saved XAML file.
 OpenFileDialog dialog = new OpenFileDialog();
@@ -93,7 +93,7 @@ The Stencil also supports exporting and importing specific symbol groups. This f
 In Stencil, the [ExportGroup](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Stencil.Stencil.html#Syncfusion_UI_Xaml_Diagram_Stencil_Stencil_ExportGroup_System_IO_Stream_System_String___) method allows you to export SymbolGroups. By providing the symbol group names as parameters to this method, you can save the specified SymbolGroups to a stream, preserving all their properties for easy sharing or future use. Here is a simple code example showing how to export the symbol groups:
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 string[] symbolGroupNames = { "Basic Shapes", "Flow Shapes", "BPMN Editor Shapes" };
 
@@ -116,7 +116,7 @@ if (dialog.ShowDialog() == true)
 To import the saved symbol groups back into the stencil, use the [ImportGroup](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Stencil.Stencil.html#Syncfusion_UI_Xaml_Diagram_Stencil_Stencil_ImportGroup_System_IO_Stream_) method with the saved stream. This will load the stencil with the saved symbol groups. Here is a simple code example showing how to import the symbol groups:
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 OpenFileDialog dialog = new OpenFileDialog();
 if (dialog.ShowDialog() == true)
diff --git a/wpf/Diagram/Stencil/SymbolFilter.md b/wpf/Diagram/Stencil/SymbolFilter.md
index e58dc7962..2bb58d268 100644
--- a/wpf/Diagram/Stencil/SymbolFilter.md
+++ b/wpf/Diagram/Stencil/SymbolFilter.md
@@ -133,7 +133,7 @@ The following XAML and C# sample demonstrates how to filter the symbols shown in
      </stencil:Stencil>
 </Grid>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 public class StencilVM : INotifyPropertyChanged
 {
diff --git a/wpf/Diagram/UndoRedo.md b/wpf/Diagram/UndoRedo.md
index d75a7ab72..41be9cefd 100644
--- a/wpf/Diagram/UndoRedo.md
+++ b/wpf/Diagram/UndoRedo.md
@@ -32,7 +32,7 @@ Undo/Redo for diagram can be enabled/disabled with the [`Constraints`](https://h
 
 {% endhighlight %}
 
-{% highlight C# %}
+{% highlight c# %}
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
 
@@ -53,7 +53,7 @@ Undo/redo actions can be executed using commands of diagram control instead of u
 </syncfusion:SfDiagram>
 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -109,7 +109,7 @@ The [`StackLimit`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram
     </Syncfusion:SfDiagram.HistoryManager>
 </syncfusion:SfDiagram>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -129,7 +129,7 @@ diagram.HistoryManager = new HistoryManager()
 The `BeginComposite()` method of `HistoryManager` class allows you to log multiple actions at a time in the history manager stack. It is easier to undo or revert the changes made in the diagram in a single undo/redo process instead of reverting every action one by one.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -153,7 +153,7 @@ N> After calling the `BeginComposite()` method, you must call the `EndComposite(
 The `EndComposite()` method of the `HistoryManager` class allows you to end the group actions that are stored in the stack history.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -176,7 +176,7 @@ diagram.HistoryManager.EndComposite();
 History manager class of SfDiagram control allows you to view the undo and redo stack values where you can get what the actions, values, and elements are stored in the history manager stack by using the `HistoryChangedEventArgs` argument value of `HistoryChangedEvent` event.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -230,7 +230,7 @@ History list allows to revert or restore single and multiple changes through a s
 To achieve this you need to customize the [HistoryManager](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.HistoryManager.html) class of diagram control and need to override the Undo Redo methods.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -434,7 +434,7 @@ public struct NodeState
 The undo/redo process can be disabled for a particular element by using [CanLogHistoryEntry](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SfDiagram.html#Syncfusion_UI_Xaml_Diagram_SfDiagram_CanLogHistoryEntry_Syncfusion_UI_Xaml_Diagram_LogDataArgs_) virtual method of diagram control.
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 //Initialize the custom diagram class
 CustomDiagram diagram = new CustomDiagram();
 
@@ -498,7 +498,7 @@ HistoryChangedCommand="{Binding HistoryChangedCommand}">
 </syncfusion:SfDiagram>
 
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -529,7 +529,7 @@ Diagram notifies undo/redo actions through the following events,
 * [ViewPortChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_ViewPortChanged)
 
 {% tabs %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
diff --git a/wpf/Diagram/Virtualization.md b/wpf/Diagram/Virtualization.md
index dd38d7032..c0e8717a1 100644
--- a/wpf/Diagram/Virtualization.md
+++ b/wpf/Diagram/Virtualization.md
@@ -20,7 +20,7 @@ N> By default, virtualization is disabled. To enable virtualization and improve
 <!--Initialize the SfDiagram and enable the virtualize constraint-->
 <syncfusion:SfDiagram x:Name="diagram" Constraints="Default,Virtualize"/>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -43,7 +43,7 @@ N> Deferred scrolling (`Outline`) depends on virtualization and works only when
 <!--Initialize the SfDiagram and enable the virtualize and outline constraint-->
 <syncfusion:SfDiagram x:Name="diagram" Constraints="Default,Virtualize,Outline"/>
 {% endhighlight %}
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();
@@ -85,7 +85,7 @@ Options are provided to customize the appearance, style, and render interval of
 </syncfusion:SfDiagram>
 	
 {% endhighlight %}	
-{% highlight C# %}
+{% highlight c# %}
 
 //Initialize the SfDiagram
 SfDiagram diagram = new SfDiagram();