chore(common): fix tables in breaking changes articles and remaining warnings

Author: ntacheva

components/form/formitems/formitemstemplate.md

@@ -110,27 +110,32 @@ Here are the steps to migrate custom content inside the Form from version 4.0.1-
 
 >caption Comparison between versions up to 4.0.1 and after 4.2.0.
 
+<div class="skip-repl"></div>
 <table>
 <thead><tr><th>Up to 4.0.1</th><th>From 4.2.0</th></tr></thead>
-<tbody><tr><td style="vertical-align:top"><p><strong>Index.razor</strong></p><pre><code>
-&lt;TelerikForm&gt;
-  &lt;FormItems&gt;
-    <strong>&lt;div&gt;
-      content around form items</strong>
-      &lt;FormItem Field="FieldName1" /&gt;
-    <strong>&lt;/div&gt;</strong>
-    <strong>&lt;div&gt;content between items&lt;div&gt;</strong>
-    &lt;FormItem Field="FieldName2"&gt;
-      &lt;Template&gt;
+<tbody><tr>
+<td>
+<p><strong>Index.razor</strong></p>
+
+````RAZOR
+<TelerikForm>
+  <FormItems>
+    <div>
+      content around form items
+      <FormItem Field="FieldName1" />
+    </div>
+    <div>content between items<div>
+    <FormItem Field="FieldName2">
+      <Template>
         ...
-      &lt;/Template&gt;
-    &lt;/FormItem&gt;
-    <strong>@if (someCondition)</strong>
+      </Template>
+    </FormItem>
+    @if (someCondition)
     {
-        &lt;FormItem Field="FieldName3" /&gt;
+        <FormItem Field="FieldName3" />
     }
-    <strong>&lt;ChildComponent /&gt;</strong>
-  &lt;/FormItems&gt;
+    <ChildComponent />
+  </FormItems>
 
 
 
@@ -156,71 +161,95 @@ Here are the steps to migrate custom content inside the Form from version 4.0.1-
 
 
 
-&lt;/TelerikForm&gt;
-</code></pre></td><td style="vertical-align:top"><p><strong>Index.razor</strong></p><pre><code>
-&lt;TelerikForm&gt;
-  &lt;FormItems&gt;
+
+</TelerikForm>
+````
+
+</td>
+<td>
+<p><strong>Index.razor</strong></p>
+
+````RAZOR
+<TelerikForm>
+  <FormItems>
 
 
-    &lt;FormItem Field="FieldName1" /&gt;
+    <FormItem Field="FieldName1" />
 
 
-    &lt;FormItem Field="FieldName2"&gt;
-      &lt;Template&gt;
+    <FormItem Field="FieldName2">
+      <Template>
         ...
-      &lt;/Template&gt;
-    &lt;/FormItem&gt;
+      </Template>
+    </FormItem>
 
 
-    &lt;FormItem Field="FieldName3" /&gt;
+    <FormItem Field="FieldName3" />
 
-    <strong>&lt;FormItem Field="FieldName4" /&gt;</strong>
-  &lt;/FormItems&gt;
-  &lt;FormItemsTemplate Context="formContext"&gt;
+    <FormItem Field="FieldName4" />
+  </FormItems>
+  <FormItemsTemplate Context="formContext">
     @{
       var formItems = formContext.Items
-        .Cast&lt;IFormItem&gt;().ToList();
+        .Cast<IFormItem>().ToList();
     }
-    <strong>&lt;div&gt;
-      content around form items</strong>
-      &lt;TelerikFormItemRenderer
-          Item="@( formItems.First(x =&gt;
-            x.Field == "FieldName1") )" /&gt;
-    <strong>&lt;/div&gt;</strong>
-    <strong>&lt;div&gt;content between items&lt;div&gt;</strong>
-    &lt;TelerikFormItemRenderer
-      Item="@( formItems.First(x =&gt;
-        x.Field == "FieldName2") )" /&gt;
-    <strong>@if (someCondition)</strong>
+    <div>
+      content around form items
+      <TelerikFormItemRenderer
+          Item="@( formItems.First(x =>
+            x.Field == "FieldName1") )" />
+    </div>
+    <div>content between items<div>
+    <TelerikFormItemRenderer
+      Item="@( formItems.First(x =>
+        x.Field == "FieldName2") )" />
+    @if (someCondition)
     {
-        &lt;TelerikFormItemRenderer
-        Item="@( formItems.First(x =&gt;
-            x.Field == "FieldName3") )" /&gt;
+        <TelerikFormItemRenderer
+        Item="@( formItems.First(x =>
+            x.Field == "FieldName3") )" />
     }
-    @{ var formItem4 = formItems.First(x =&gt;
+    @{ var formItem4 = formItems.First(x =>
         x.Field == "FieldName4"); }
-    <strong>&lt;ChildComponent NestedFormItem="@formItem4" /&gt;</strong>
-  &lt;/FormItemsTemplate&gt;
-&lt;/TelerikForm&gt;
-</code></pre></td></tr><tr><td style="vertical-align:top"><p><strong>ChildComponent.razor</strong></p><pre><code>
+    <ChildComponent NestedFormItem="@formItem4" />
+  </FormItemsTemplate>
+</TelerikForm>
+````
+
+</td>
+</tr>
+<tr>
+<td>
+<p><strong>ChildComponent.razor</strong></p>
+
+````RAZOR
+<FormItem Field="FieldName4" />
 
-&lt;FormItem Field="FieldName4" /&gt;
 
 
 
 
 
 
-</code></pre></td><td style="vertical-align:top"><p><strong>ChildComponent.razor</strong></p><pre><code>
 
-&lt;TelerikFormItemRenderer Item="@NestedFormItem" /&gt;
+````
+
+</td>
+<td>
+<p><strong>ChildComponent.razor</strong></p>
+
+````RAZOR
+<TelerikFormItemRenderer Item="@NestedFormItem" />
 
 @code {
     [Parameter]
     public IFormItem NestedFormItem { get; set; }
 }
+````
 
-</code></pre></td></tr></tbody>
+</td>
+</tr>
+</tbody>
 </table>
 
 

components/window/position.md

@@ -25,7 +25,7 @@ The `Centered` parameter determines if the Window displays centered in the viewp
 
 A centered Window applies the following CSS styles, which maintain the centered position even if the viewport size changes:
 
-```
+```CSS
 .k-centered {
     top: 50%;
     left: 50%;

knowledge-base/common-struct-error.md

@@ -23,10 +23,11 @@ res_type: kb
 ## Description
 
 When using a data-bound component, the application gets a null exception, and the component does not work. When running the Telerik Blazor application the application gets an error similar to the following:
-```
+
+````C#
 ArgumentNullException: Value cannot be null. (Parameter 'source')
 System.Linq.ThrowHelper.ThrowArgumentNullException(ExceptionArgument argument)
-```
+````
 
 To reproduce the problem, you can use the following code sample:
 ````CSHTML