From 19a601f135a05d5147c35cfea54c0f3b1bec1c36 Mon Sep 17 00:00:00 2001
From: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
Date: Thu, 20 Jun 2019 14:40:26 -0700
Subject: [PATCH] fix: converted single to triple backticks6 (#36233)

---
 guide/arabic/csharp/foreach/index.md          |   9 +-
 .../arabic/csharp/if-else-statement/index.md  |  50 ++---
 .../csharp/indeterminate-parameters/index.md  |  11 +-
 guide/arabic/csharp/interface/index.md        |   9 +-
 guide/arabic/csharp/linq/all/index.md         |   5 +-
 guide/arabic/csharp/linq/any/index.md         |  46 ++--
 .../csharp/linq/single-or-default/index.md    |  27 +--
 .../arabic/csharp/method-overloading/index.md |   5 +-
 .../arabic/csharp/nameof-expressions/index.md |  22 +-
 .../csharp/nested-if-statement/index.md       |  28 +--
 .../csharp/null-coalescing-operator/index.md  |  51 +++--
 .../csharp/null-conditional-operator/index.md |  59 ++---
 guide/arabic/csharp/nullable-types/index.md   |  37 ++--
 .../csharp/string-interpolation/index.md      |  23 +-
 guide/arabic/csharp/switch-case/index.md      |  66 +++---
 guide/arabic/csharp/ternary-operator/index.md |  35 +--
 guide/arabic/csharp/try-catch/index.md        | 133 ++++++------
 guide/arabic/csharp/xaml/index.md             |   9 +-
 guide/arabic/css/background-opacity/index.md  |  53 ++---
 guide/arabic/css/background-size/index.md     |  11 +-
 guide/arabic/css/background/index.md          |  97 +++++----
 guide/arabic/css/before-selector/index.md     |  43 ++--
 guide/arabic/css/borders/index.md             |  54 ++---
 guide/arabic/css/box-shadow/index.md          |  51 ++---
 guide/arabic/css/breakpoints/index.md         | 203 +++++++++---------
 guide/arabic/css/class-selector/index.md      |  52 ++---
 guide/arabic/css/colors/index.md              |  34 +--
 guide/arabic/css/css-buttons/index.md         |  33 +--
 guide/arabic/css/css-cursors/index.md         |   9 +-
 .../arabic/css/css-custom-properties/index.md |  11 +-
 .../css-framework-bulma/index.md              |  32 +--
 .../css-framework-foundation/index.md         |  34 +--
 .../index.md                                  |  26 +--
 .../css-framework-materialize/index.md        |  42 ++--
 .../css-framework-skeleton/index.md           |  36 ++--
 .../css-frameworks-uikit/index.md             |  28 +--
 guide/arabic/css/css-performance/index.md     |   9 +-
 guide/arabic/css/css-position/index.md        |  13 +-
 guide/arabic/css/css-preprocessors/index.md   |  11 +-
 .../css/css-syntax-and-selectors/index.md     |  96 ++++-----
 guide/arabic/css/css3-2d-transforms/index.md  | 130 +++++------
 guide/arabic/css/css3-at-media-rule/index.md  |  13 +-
 .../css/css3-borders-rounded-corners/index.md |  41 ++--
 guide/arabic/css/css3-colors/index.md         |  36 ++--
 guide/arabic/css/css3-gradients/index.md      | 159 +++++++-------
 .../css/css3-nth-child-selector/index.md      |  22 +-
 .../arabic/css/css3-opacity-property/index.md |  33 +--
 guide/arabic/css/css3-transitions/index.md    |  64 +++---
 .../arabic/css/current-color-keyword/index.md |  89 ++++----
 guide/arabic/css/dropdowns/index.md           |  59 ++---
 guide/arabic/css/fonts/index.md               |  82 +++----
 guide/arabic/css/forms/index.md               |  10 +-
 .../css/height-and-width-dimensions/index.md  |  57 ++---
 guide/arabic/css/hover-selector/index.md      |  23 +-
 guide/arabic/css/id-selector/index.md         |  20 +-
 guide/arabic/css/image-galleries/index.md     | 117 +++++-----
 .../image-opacity-and-transparency/index.md   |  15 +-
 .../css/layout/display-property/index.md      |  48 +++--
 .../flexbox/flex-basis-property/index.md      |   5 +-
 .../css/layout/flexbox/flex-grow/index.md     |  25 +--
 .../css/layout/float-and-clear/index.md       |  36 ++--
 guide/arabic/css/layout/grid-layout/index.md  | 134 ++++++------
 guide/arabic/css/legal-color-values/index.md  | 192 +++++++++--------
 guide/arabic/css/linear-gradient/index.md     |  35 +--
 guide/arabic/css/margins/index.md             |   9 +-
 guide/arabic/css/navigation-bars/index.md     |  75 +++----
 guide/arabic/css/object-fit/index.md          |   9 +-
 guide/arabic/css/overflow/index.md            |  20 +-
 guide/arabic/css/padding/index.md             |   9 +-
 .../background-color-property/index.md        |  25 +--
 .../properties/background-property/index.md   |  41 ++--
 .../background-repeat-property/index.md       |  27 +--
 .../css/properties/clear-property/index.md    |  15 +-
 .../css/properties/color-property/index.md    |  54 ++---
 .../css3-text-shadow-property/index.md        |   5 +-
 75 files changed, 1760 insertions(+), 1577 deletions(-)

diff --git a/guide/arabic/csharp/foreach/index.md b/guide/arabic/csharp/foreach/index.md
index eb374777f9..4dc4bbb993 100644
--- a/guide/arabic/csharp/foreach/index.md
+++ b/guide/arabic/csharp/foreach/index.md
@@ -23,7 +23,8 @@ localeTitle: Foreach حلقة
 
 ### انتاج:
 
- `> We have Jim 
- > We have Jane 
- > We have Jack 
-`
\ No newline at end of file
+```sh
+> We have Jim
+> We have Jane
+> We have Jack
+```
\ No newline at end of file
diff --git a/guide/arabic/csharp/if-else-statement/index.md b/guide/arabic/csharp/if-else-statement/index.md
index 9c0fd02e4c..99cf73444a 100644
--- a/guide/arabic/csharp/if-else-statement/index.md
+++ b/guide/arabic/csharp/if-else-statement/index.md
@@ -8,32 +8,34 @@ localeTitle: إذا كان البيان الآخر
 
 ## مثال
 
- `if(boolean expression) 
- { 
- // execute this code block if expression evalutes to true 
- } 
- else 
- { 
- // always execute this code block when above if expression is false 
- } 
- 
- 
- int Price = 30; 
- 
- If (Price = 30) 
- { 
-  Console.WriteLine("Price is equal to 30."); 
- } 
- 
- Else 
- { 
-  Console.WriteLine("Price is not equal to 30."); 
- } 
-` 
+```
+if(boolean expression)
+{
+// execute this code block if expression evalutes to true
+}
+else
+{
+// always execute this code block when above if expression is false
+}
+
+
+int Price = 30;
+
+If (Price = 30)
+{
+  Console.WriteLine("Price is equal to 30.");
+}
+
+Else
+{
+  Console.WriteLine("Price is not equal to 30.");
+}
+``` 
 
 بما أننا أعلنا بالفعل أن السعر لدينا هو 30 ، سيكون هذا هو الناتج المتوقع.
 
 ## انتاج |
 
- `Price is equal to 30. 
-`
\ No newline at end of file
+```
+Price is equal to 30.
+```
\ No newline at end of file
diff --git a/guide/arabic/csharp/indeterminate-parameters/index.md b/guide/arabic/csharp/indeterminate-parameters/index.md
index 190f5166b7..eccc9503c4 100644
--- a/guide/arabic/csharp/indeterminate-parameters/index.md
+++ b/guide/arabic/csharp/indeterminate-parameters/index.md
@@ -28,8 +28,9 @@ localeTitle: معلمات غير محددة
 
 ## انتاج:
 
- `> Parameter 0 is 1 
- > Parameter 1 is 2 
- > Parameter 2 is 3 
- > Parameter 0 is 4 
-`
\ No newline at end of file
+```
+> Parameter 0 is 1
+> Parameter 1 is 2
+> Parameter 2 is 3
+> Parameter 0 is 4
+```
\ No newline at end of file
diff --git a/guide/arabic/csharp/interface/index.md b/guide/arabic/csharp/interface/index.md
index 720e8957c8..5a9a9c2120 100644
--- a/guide/arabic/csharp/interface/index.md
+++ b/guide/arabic/csharp/interface/index.md
@@ -28,12 +28,13 @@ localeTitle: جهة تعامل
 
 مثال على واجهة:
 
- `public Interface IUserFavoriteFood
- {
+```csharp
+public Interface IUserFavoriteFood
+{
   void AddFood();
   Task<User> EatFavoriteFood(int id);
- }
-`
+}
+```
 
 * * *
 
diff --git a/guide/arabic/csharp/linq/all/index.md b/guide/arabic/csharp/linq/all/index.md
index eaae1ae118..0fa273086e 100644
--- a/guide/arabic/csharp/linq/all/index.md
+++ b/guide/arabic/csharp/linq/all/index.md
@@ -8,8 +8,9 @@ localeTitle: الكل
 
 ### التوقيع
 
- `public static bool All<TSource>(this IEnumerable<TSource> source, Func<TSource, bool> predicate); 
-` 
+```csharp
+public static bool All<TSource>(this IEnumerable<TSource> source, Func<TSource, bool> predicate);
+``` 
 
 ## مثال
 
diff --git a/guide/arabic/csharp/linq/any/index.md b/guide/arabic/csharp/linq/any/index.md
index 8cdc74ef64..7c1ec9773f 100644
--- a/guide/arabic/csharp/linq/any/index.md
+++ b/guide/arabic/csharp/linq/any/index.md
@@ -8,28 +8,30 @@ localeTitle: أي
 
 ### التوقيع
 
- `public static bool Any<TSource>(this IEnumerable<TSource> source); 
- public static bool Any<TSource>(this IEnumerable<TSource> source, Func<TSource, bool> predicate); 
-` 
+```csharp
+public static bool Any<TSource>(this IEnumerable<TSource> source);
+public static bool Any<TSource>(this IEnumerable<TSource> source, Func<TSource, bool> predicate);
+``` 
 
 ## مثال
 
- `var fruits = new List<Fruit>() { 
-    new Fruit() { Id = 1, Name = "Orange",     Color = "Orange", Quantity: 3   }, 
-    new Fruit() { Id = 2, Name = "Strawberry", Color = "Red",    Quantity: 12  }, 
-    new Fruit() { Id = 3, Name = "Grape",      Color = "Purple", Quantity: 25  }, 
-    new Fruit() { Id = 4, Name = "Pineapple",  Color = "Yellow", Quantity: 1   }, 
-    new Fruit() { Id = 5, Name = "Apple",      Color = "Red",    Quantity: 5   }, 
-    new Fruit() { Id = 6, Name = "Mango",      Color = "Yellow", Quantity: 2   } 
- }; 
- 
- // Check if any Fruits have a quantity greater than 20 
- var anyFruitGreaterThanTwenty = fruits.Any(f => f.Quantity > 20); // true 
- 
- // Any Fruit with color Green 
- var anyGreen = fruits.Any(f => f.Color == "Green"); // false 
- 
- var hasFruits = fruits.Any(); // true 
- 
- var hasYellowFruit = fruits.Any(f => f.Color == "Yellow"); // true 
-`
\ No newline at end of file
+```csharp
+var fruits = new List<Fruit>() {
+    new Fruit() { Id = 1, Name = "Orange",     Color = "Orange", Quantity: 3   },
+    new Fruit() { Id = 2, Name = "Strawberry", Color = "Red",    Quantity: 12  },
+    new Fruit() { Id = 3, Name = "Grape",      Color = "Purple", Quantity: 25  },
+    new Fruit() { Id = 4, Name = "Pineapple",  Color = "Yellow", Quantity: 1   },
+    new Fruit() { Id = 5, Name = "Apple",      Color = "Red",    Quantity: 5   },
+    new Fruit() { Id = 6, Name = "Mango",      Color = "Yellow", Quantity: 2   }
+};
+
+// Check if any Fruits have a quantity greater than 20
+var anyFruitGreaterThanTwenty = fruits.Any(f => f.Quantity > 20); // true
+
+// Any Fruit with color Green
+var anyGreen = fruits.Any(f => f.Color == "Green"); // false
+
+var hasFruits = fruits.Any(); // true
+
+var hasYellowFruit = fruits.Any(f => f.Color == "Yellow"); // true
+```
\ No newline at end of file
diff --git a/guide/arabic/csharp/linq/single-or-default/index.md b/guide/arabic/csharp/linq/single-or-default/index.md
index 8eb7f0149e..f304fbcd25 100644
--- a/guide/arabic/csharp/linq/single-or-default/index.md
+++ b/guide/arabic/csharp/linq/single-or-default/index.md
@@ -13,16 +13,17 @@ localeTitle: واحد أو افتراضي
 
 ## مثال
 
- `var fruits = new List<Fruit>() { 
-    new Fruit() { Id = 1, Name = "Orange",     Color = "Orange", Quantity: 3   }, 
-    new Fruit() { Id = 2, Name = "Strawberry", Color = "Red",    Quantity: 12  }, 
-    new Fruit() { Id = 3, Name = "Grape",      Color = "Purple", Quantity: 25  }, 
-    new Fruit() { Id = 4, Name = "Pineapple",  Color = "Yellow", Quantity: 1   }, 
-    new Fruit() { Id = 5, Name = "Apple",      Color = "Red",    Quantity: 5   }, 
-    new Fruit() { Id = 6, Name = "Mango",      Color = "Yellow", Quantity: 2   } 
- }; 
- 
- var purpleFruit = fruits.SingleOrDefault(f => f.Color == "Purple"); // Grape 
- 
- var greenFruit = fruits.SingleOrDefault(f => f.Color == "Green"); // null 
-`
\ No newline at end of file
+```csharp
+var fruits = new List<Fruit>() {
+    new Fruit() { Id = 1, Name = "Orange",     Color = "Orange", Quantity: 3   },
+    new Fruit() { Id = 2, Name = "Strawberry", Color = "Red",    Quantity: 12  },
+    new Fruit() { Id = 3, Name = "Grape",      Color = "Purple", Quantity: 25  },
+    new Fruit() { Id = 4, Name = "Pineapple",  Color = "Yellow", Quantity: 1   },
+    new Fruit() { Id = 5, Name = "Apple",      Color = "Red",    Quantity: 5   },
+    new Fruit() { Id = 6, Name = "Mango",      Color = "Yellow", Quantity: 2   }
+};
+
+var purpleFruit = fruits.SingleOrDefault(f => f.Color == "Purple"); // Grape
+
+var greenFruit = fruits.SingleOrDefault(f => f.Color == "Green"); // null
+```
\ No newline at end of file
diff --git a/guide/arabic/csharp/method-overloading/index.md b/guide/arabic/csharp/method-overloading/index.md
index 019bffc455..dd19d454c4 100644
--- a/guide/arabic/csharp/method-overloading/index.md
+++ b/guide/arabic/csharp/method-overloading/index.md
@@ -17,8 +17,9 @@ localeTitle: طريقة الحمولة الزائدة
     السلسلة العامة SayHello (الشخص الشخص) { "مرحبًا ، هناك" + شخص. اسم أول + "" + شخص. اسم مستعار ؛ } }
     
 
- `2. In your default Program.cs file you can call now this class Person using the method overloading. 
-` 
+```
+2. In your default Program.cs file you can call now this class Person using the method overloading.
+``` 
 
 برنامج الصف { الفراغ الاستاتيكي Main (string \[\] args) { شخص شخص = شخص جديد ("جين" ، "دو") ؛ Console.WriteLine (person.SayHello ("Peter Smith"))؛
 
diff --git a/guide/arabic/csharp/nameof-expressions/index.md b/guide/arabic/csharp/nameof-expressions/index.md
index a2b08a9075..105192a6f2 100644
--- a/guide/arabic/csharp/nameof-expressions/index.md
+++ b/guide/arabic/csharp/nameof-expressions/index.md
@@ -8,21 +8,23 @@ localeTitle: nameof التعبيرات
 
 # #
 
- `public void ProcessStudent(Student student) 
- { 
-    if (student == null) throw new ArgumentNullException("student"); 
- } 
-` 
+```
+public void ProcessStudent(Student student)
+{
+    if (student == null) throw new ArgumentNullException("student");
+}
+``` 
 
 ومع ذلك ، إذا كان سيتم إعادة تسمية المعلمة الطالب ، يجب عليك أن تتذكر أيضا تعديل سلسلة حرفية. الآن مع تعبير nameof ، لن تحتاج إلى استخدام القيم الحرفية للسلسلة وسيتمكن المترجم من تحذيرك إذا كنت تستخدم اسمًا غير صحيح.
 
 # #
 
- `public void ProcessStudent(Student student) 
- { 
-    if (student == null) throw new ArgumentNullException(nameof(student)); 
- } 
-` 
+```
+public void ProcessStudent(Student student)
+{
+    if (student == null) throw new ArgumentNullException(nameof(student));
+}
+``` 
 
 بعض الأمثلة من حيث قد تكون تعبيرات nameof مفيدة تشمل:
 
diff --git a/guide/arabic/csharp/nested-if-statement/index.md b/guide/arabic/csharp/nested-if-statement/index.md
index 6360d7d1d5..b27dc469cb 100644
--- a/guide/arabic/csharp/nested-if-statement/index.md
+++ b/guide/arabic/csharp/nested-if-statement/index.md
@@ -6,19 +6,21 @@ localeTitle: متداخلة If بيان
 
 يتم استخدام البيان المتداخل If عند إنشاء عبارة if تريد نقطة ثانوية للتحقق أو إذا كانت عبارة داخلها.
 
- `int Price = 100; 
- int Quantity = 20; 
- 
- if (Price == 100) 
- { 
-  if (Quantity == 20) 
-  { 
-    Console.WriteLine("Price of an item is 200, and we have 20 in quantity."); 
-  } 
- } 
-` 
+```
+int Price = 100;
+int Quantity = 20;
+
+if (Price == 100)
+{
+  if (Quantity == 20)
+  {
+    Console.WriteLine("Price of an item is 200, and we have 20 in quantity.");
+  }
+}
+``` 
 
 لذلك ، وبما أننا حددنا مسبقاً السعر والكمية ، سيكون الناتج:
 
- `Price of an item is 200, and we have 20 in quantity. 
-`
\ No newline at end of file
+```
+Price of an item is 200, and we have 20 in quantity.
+```
\ No newline at end of file
diff --git a/guide/arabic/csharp/null-coalescing-operator/index.md b/guide/arabic/csharp/null-coalescing-operator/index.md
index 29b9352b11..f8c9ce33bf 100644
--- a/guide/arabic/csharp/null-coalescing-operator/index.md
+++ b/guide/arabic/csharp/null-coalescing-operator/index.md
@@ -10,29 +10,33 @@ localeTitle: Null-coalescing Operator
 
 بما أن `name` `null` ، فسيتم تعيين `name` `clientName` "John Doe".
 
- `string name = null; 
- 
- string clientName = name ?? "John Doe"; 
- 
- Console.WriteLine(clientName); 
-` 
+```cs
+string name = null;
 
- `> John Doe 
-` 
+string clientName = name ?? "John Doe";
+
+Console.WriteLine(clientName);
+``` 
+
+```cs
+> John Doe
+``` 
 
 ## مثال 2
 
 نظرًا لأن `name` ليس `null` ، فسيتم تعيين `name` `clientName` ، وهو "Jane Smith".
 
- `string name = "Jane Smith"; 
- 
- string clientName = name ?? "John Doe"; 
- 
- Console.WriteLine(clientName); 
-` 
+```cs
+string name = "Jane Smith";
 
- `> Jane Smith 
-` 
+string clientName = name ?? "John Doe";
+
+Console.WriteLine(clientName);
+``` 
+
+```cs
+> Jane Smith
+``` 
 
 ## بديل إلى if… else Statement
 
@@ -48,20 +52,23 @@ localeTitle: Null-coalescing Operator
 
 ومع ذلك ، يمكن تبسيط ذلك إلى حد كبير باستخدام مشغل التوليف الفارغ.
 
- `string clientName = name ?? "John Doe"; 
-` 
+```cs
+string clientName = name ?? "John Doe";
+``` 
 
 ## بديل لمشغل (شرطي) شرطي
 
 من الممكن أيضًا استخدام المشغل الشرطي لاختبار وجود قيمة `null` وتعيين قيمة مختلفة.
 
- `string clientName = name != null ? name : "John Doe"; 
-` 
+```cs
+string clientName = name != null ? name : "John Doe";
+``` 
 
 مرة أخرى ، يمكن تبسيط ذلك باستخدام مشغل التوليف الفارغ.
 
- `string clientName = name ?? "John Doe"; 
-` 
+```cs
+string clientName = name ?? "John Doe";
+``` 
 
 ## المراجع
 
diff --git a/guide/arabic/csharp/null-conditional-operator/index.md b/guide/arabic/csharp/null-conditional-operator/index.md
index 1a65797533..a4653bac11 100644
--- a/guide/arabic/csharp/null-conditional-operator/index.md
+++ b/guide/arabic/csharp/null-conditional-operator/index.md
@@ -6,29 +6,33 @@ localeTitle: مشغل شرطي لاغية
 
 تسمح عوامل الشرطية خالية التحقق خالية مع الحد الأدنى من التعليمات البرمجية. على سبيل المثال ، إذا كان لديك متغير الموظف من نوع الموظف مع خاصية من نوع العنوان ، قد تفعل فحص فارغ كما يلي:
 
- `Address address = null; 
- if (employee != null) 
- { 
-    address = employee.Address; 
- } 
-` 
+```csharp
+Address address = null;
+if (employee != null)
+{
+    address = employee.Address;
+}
+``` 
 
 يمكنك استخدام عامل تشغيل شرطي قياسي لجعل ذلك الاختيار أكثر إيجازًا:
 
- `Address address = employee != null ? employee.Address : null; 
-` 
+```csharp
+Address address = employee != null ? employee.Address : null;
+``` 
 
 ومع ذلك ، في C # 6.0 دخلت المشغلين خالية الشرطي ، لذلك الآن يمكن للخط أعلاه ببساطة يتم تمثيله على النحو التالي:
 
- `Address address = student?.Address; 
-` 
+```csharp
+Address address = student?.Address;
+``` 
 
 إذا كان الموظف فارغًا ، فسيتم تعيين العنوان ببساطة ، ولن يحدث أي NullReferenceExeception. هذا يصبح أكثر فائدة مع الرسوم البيانية كائن أعمق ، كما يمكنك التعامل مع سلسلة من وصول الأعضاء المشروط.
 
 فمثلا:
 
- `string city = student?.Address?.City; 
-` 
+```csharp
+string city = student?.Address?.City;
+``` 
 
 المشغلين الشرطيين هم دوائر قصيرة ، وذلك بمجرد التحقق من وصول العضو الشرطي إرجاع لا شيء ، والباقي لا يحدث.
 
@@ -38,18 +42,19 @@ localeTitle: مشغل شرطي لاغية
 
 فمثلا:
 
- `public string GetStringValue() 
- { 
-    return null; 
- } 
- 
- // Display the value of s if s is NOT null. If x IS null, display the string "It was null." 
- 
- string x = GetStringValue(); 
- 
- Console.WriteLine(x ?? "It was null."); 
- 
- // Result: 
- 
- "It was null." 
-`
\ No newline at end of file
+```csharp
+public string GetStringValue()
+{
+    return null;
+}
+
+// Display the value of s if s is NOT null. If x IS null, display the string "It was null."
+
+string x = GetStringValue();
+
+Console.WriteLine(x ?? "It was null.");
+
+// Result:
+
+"It was null."
+```
\ No newline at end of file
diff --git a/guide/arabic/csharp/nullable-types/index.md b/guide/arabic/csharp/nullable-types/index.md
index 756d7173fd..a882c05f29 100644
--- a/guide/arabic/csharp/nullable-types/index.md
+++ b/guide/arabic/csharp/nullable-types/index.md
@@ -8,24 +8,25 @@ localeTitle: أنواع nullable
 
 #### كيفية استخدام نوع nullable
 
- `// Declare a variable of Nullable type (Nullable<int>) 
- int? i = null; 
- 
- int  j = 0; 
- int defaultValue = 0; 
- 
- // test for null and assign value to another variable 
- if (i.HasValue) 
- { 
-    j = i.Value; 
- } 
- 
- // get assigned value or default when current value is null 
- j = i.GetValueOrDefault(); // i.GetValueOrDefault(defaultValue) 
- 
- //use coalescing operator to assign default value when current value is null 
- j = i ?? defaultValue; 
-` 
+```csharp
+// Declare a variable of Nullable type (Nullable<int>)
+int? i = null;
+
+int  j = 0;
+int defaultValue = 0;
+
+// test for null and assign value to another variable
+if (i.HasValue)
+{
+    j = i.Value;
+}
+
+// get assigned value or default when current value is null
+j = i.GetValueOrDefault(); // i.GetValueOrDefault(defaultValue)
+
+//use coalescing operator to assign default value when current value is null
+j = i ?? defaultValue;
+``` 
 
 لمزيد من المعلومات ، قم بزيارة الرابط التالي:
 
diff --git a/guide/arabic/csharp/string-interpolation/index.md b/guide/arabic/csharp/string-interpolation/index.md
index 299c04f0a7..6300287855 100644
--- a/guide/arabic/csharp/string-interpolation/index.md
+++ b/guide/arabic/csharp/string-interpolation/index.md
@@ -8,21 +8,24 @@ localeTitle: الاستيفاء سلسلة
 
 # #
 
- `string message = "Hello " + firstName + " " + lastName + "!"; 
- 
- string message2 = string.Format("Hello {0} {1}!", firstName, lastName); 
-` 
+```
+string message = "Hello " + firstName + " " + lastName + "!";
+
+string message2 = string.Format("Hello {0} {1}!", firstName, lastName);
+``` 
 
 باستخدام تعبيرات سلسلة متداخلة ، لديك سلسلة تحتوي على تعبيرات مضمنة يتم استبدالها بنتائج التعبيرات. يجب عليك بادئة السلسلة الحرفية الخاصة بك بعلامة الدولار ($). يتم وضع التعبيرات التي تريد تضمينها في السلسلة مضمنة محاطة بأقواس معقوفة. الرسالة المذكورة أعلاه ستبدو الآن كما يلي:
 
 # #
 
- `string message = $"Hello {firstName} {lastName}!"; 
-` 
+```
+string message = $"Hello {firstName} {lastName}!";
+``` 
 
 **القليل من المعلومات المفيدة** في الاستيفاء سلسلة لديك القدرة على استدعاء وظائف ، والخصائص والمشغلين الثلاثي:
 
- `int a = 3; 
- int b = 454; 
- string result = $"{a}+{b} = {a+b}"; 
-`
\ No newline at end of file
+```
+int a = 3;
+int b = 454;
+string result = $"{a}+{b} = {a+b}";
+```
\ No newline at end of file
diff --git a/guide/arabic/csharp/switch-case/index.md b/guide/arabic/csharp/switch-case/index.md
index 9c63e804c7..6ec24f3694 100644
--- a/guide/arabic/csharp/switch-case/index.md
+++ b/guide/arabic/csharp/switch-case/index.md
@@ -8,41 +8,43 @@ localeTitle: تبديل القضية
 
 ## مثال
 
- `public enum Colors { Red, Blue, Green, Orange } 
- 
- Colors myColor; 
- 
- ... myColor is set to one of the enum values ... 
- 
- switch(myColor){ 
-  case Colors.Red: 
-    Console.WriteLine("How you like them apples?"); 
-    break; 
-  case Colors.Blue: 
-    Console.WriteLine("Ice Ice Baby..."); 
-    break; 
-  case Colors.Green: 
-    Console.WriteLine("Fore!"); 
-    break; 
-  default: 
-    Console.WriteLine("I have a hard time when I try to rhyme."); 
- } 
-` 
+```
+public enum Colors { Red, Blue, Green, Orange }
+
+Colors myColor;
+
+... myColor is set to one of the enum values ...
+
+switch(myColor){
+  case Colors.Red:
+    Console.WriteLine("How you like them apples?");
+    break;
+  case Colors.Blue:
+    Console.WriteLine("Ice Ice Baby...");
+    break;
+  case Colors.Green:
+    Console.WriteLine("Fore!");
+    break;
+  default:
+    Console.WriteLine("I have a hard time when I try to rhyme.");
+}
+``` 
 
 ## انتاج |
 
- `If myColor is Colors.Red: 
- > How you like them apples? 
- 
- If myColor is Colors.Blue: 
- > Ice Ice Baby... 
- 
- If myColor is Colors.Green: 
- > Fore! 
- 
- If myColor is Colors.Orange: 
- > I have a hard time when I try to rhyme. 
-` 
+```
+If myColor is Colors.Red:
+> How you like them apples?
+
+If myColor is Colors.Blue:
+> Ice Ice Baby...
+
+If myColor is Colors.Green:
+> Fore!
+
+If myColor is Colors.Orange:
+> I have a hard time when I try to rhyme.
+``` 
 
 ### مصادر:
 
diff --git a/guide/arabic/csharp/ternary-operator/index.md b/guide/arabic/csharp/ternary-operator/index.md
index a43cdd67ae..26f8c318c3 100644
--- a/guide/arabic/csharp/ternary-operator/index.md
+++ b/guide/arabic/csharp/ternary-operator/index.md
@@ -8,8 +8,9 @@ localeTitle: المشغل الثلاثي
 
 ## بناء الجملة
 
- `condition_expression ? expression_1 : expression_2 
-` 
+```
+condition_expression ? expression_1 : expression_2
+``` 
 
 ### معامل
 
@@ -21,20 +22,22 @@ localeTitle: المشغل الثلاثي
 
 ## مثال
 
- `// initialize - set true or false here to view different result 
- bool hasFreeSweet = false; 
- 
- string str = hasFreeSweet ? "Free sweet!" : "No free sweet."; 
- 
- //output in console 
- Console.WriteLine(str); 
-` 
+```
+// initialize - set true or false here to view different result
+bool hasFreeSweet = false;
+
+string str = hasFreeSweet ? "Free sweet!" : "No free sweet.";
+
+//output in console
+Console.WriteLine(str);
+``` 
 
 ## انتاج |
 
- `if hasFreeSweet == true 
- > Free sweet! 
- 
- if hasFreeSweet == false 
- > No free sweet. 
-`
\ No newline at end of file
+```
+if hasFreeSweet == true
+> Free sweet!
+
+if hasFreeSweet == false
+> No free sweet.
+```
\ No newline at end of file
diff --git a/guide/arabic/csharp/try-catch/index.md b/guide/arabic/csharp/try-catch/index.md
index 664c776550..a1869bde67 100644
--- a/guide/arabic/csharp/try-catch/index.md
+++ b/guide/arabic/csharp/try-catch/index.md
@@ -12,22 +12,23 @@ localeTitle: حاول الصيد في النهاية
 
 ## بناء الجملة
 
- `try 
- { 
-   // Code which could potentially throw an exception 
-   var parsedValue = Int32.Parse("abcde"); 
- } 
- catch(Exception e) 
- { 
-    // Code to handle the exception 
-    Console.WriteLine("Exception: " + e.Message); 
- } 
- finally 
- { 
-    // Code which will always run no matter what. 
-    Console.WriteLine("Try-Catch block has finished execution"); 
- } 
-` 
+```csharp
+try
+{
+   // Code which could potentially throw an exception
+   var parsedValue = Int32.Parse("abcde");
+}
+catch(Exception e)
+{
+    // Code to handle the exception
+    Console.WriteLine("Exception: " + e.Message);
+}
+finally
+{
+    // Code which will always run no matter what.
+    Console.WriteLine("Try-Catch block has finished execution");
+}
+``` 
 
 في المثال أعلاه ، نحاول تحويل "abcde" إلى قيمة عددية. سيقوم هذا الخط بطرح استثناء لأنه لا يمكن تحويله إلى رقم بنجاح. سيتم اكتشاف الاستثناء في كتلة catch وسيتم تخزين رسالة الاستثناء والتفاصيل الأخرى في المتغير المعين في كتلة catch (الحرف 'e' في المثال أعلاه). بعد تنفيذ كل هذا ، سيتم تنفيذ القسم "أخيرًا" لإنهائه.
 
@@ -37,51 +38,54 @@ localeTitle: حاول الصيد في النهاية
 
 كتلة المحاولة لها نطاق طريقة خاص بها ، لذلك لن يتم الوصول إلى أي من المتغيرات التي يتم الإعلان عنها داخل كتلة المحاولة خارج نطاق المحاولة.
 
- `try 
- { 
-    // Read user input from the console. 
-    var userInput = Console.ReadLine(); 
- } 
- catch(Exception e) 
- { 
-    Console.WriteLine("Exception: " + e.Message); 
- } 
- 
- //Outside the Try block 
- var parsedUserInput = Int32.Parse(userInput);  // Not correct 
-` 
+```csharp
+try
+{
+    // Read user input from the console.
+    var userInput = Console.ReadLine();
+}
+catch(Exception e)
+{
+    Console.WriteLine("Exception: " + e.Message);
+}
+
+//Outside the Try block
+var parsedUserInput = Int32.Parse(userInput);  // Not correct
+``` 
 
 سيعطيك ما سبق خطأ في وقت الترجمة لأن القيمة 'userInput' لا يمكن الوصول إليها. إذا كنت تحتاج إلى الوصول إلى متغير خارج كتلة try-catch ستحتاج إلى تعريف المتغير قبل كتلة المحاولة.
 
- `var userInput = ""; 
- try 
- { 
-    // Read user input from the console. 
-    userInput = Console.ReadLine(); 
- } 
- catch(Exception e) 
- { 
-    Console.WriteLine("Exception: " + e.Message); 
- } 
- 
- //Outside the Try block 
- var parsedUserInput = Int32.Parse(userInput);  // Correct 
-` 
+```csharp
+var userInput = "";
+try
+{
+    // Read user input from the console.
+    userInput = Console.ReadLine();
+}
+catch(Exception e)
+{
+    Console.WriteLine("Exception: " + e.Message);
+}
+
+//Outside the Try block
+var parsedUserInput = Int32.Parse(userInput);  // Correct
+``` 
 
 ## كتلة الصيد
 
 هذه الكتلة هي المكان الذي تحدد فيه نوع `Exception` الذي تريد التقاطه. إذا كنت تريد التقاط كافة الاستثناءات الممكنة ، يمكنك استخدام الفئة الأساسية `Exception` . إذا كنت تريد فقط التقاط نوع معين من الاستثناء ، فيمكنك تحديد ذلك بدلاً من ذلك. بعض الأمثلة على أنواع الاستثناءات الأخرى هي `ArgumentException` و `OutOfMemoryException` و `FormatException` .
 
- `try 
- { 
-   var parsedValue = Int32.Parse("abcde"); 
- } 
- // Only FormatExceptions will be caught in this catch block. 
- catch(FormatException exceptionVariable) 
- { 
-    Console.WriteLine(exceptionVariable.Message); 
- } 
-` 
+```csharp
+try
+{
+   var parsedValue = Int32.Parse("abcde");
+}
+// Only FormatExceptions will be caught in this catch block.
+catch(FormatException exceptionVariable)
+{
+    Console.WriteLine(exceptionVariable.Message);
+}
+``` 
 
 المتغير المعلن بعد نوع الاستثناء سيحتوي على كل بيانات الاستثناء ويمكن استخدامه داخل كتلة `Catch` .
 
@@ -89,14 +93,15 @@ localeTitle: حاول الصيد في النهاية
 
 يتم **دائمًا** تشغيل الكتلة الأخيرة في النهاية بعد كتل `Try` and `Catch` . وعادة ما يستخدم هذا القسم لعندما يكون هناك شيء **يجب أن** يحدث في نهاية بغض النظر عما إذا كان طرح استثناء أم لا. على سبيل المثال ، لنفترض أننا بحاجة إلى متغير ليتم إعادة تنشيطه مرة أخرى إلى رقم محدد بعد التلاعب به طوال الوقت.
 
- `int initalValue = 12; 
- try 
- { 
-    // Code which manipulates 'initialValue' 
- } 
- finally 
- { 
-    Console.WriteLine("re-initalising value back to 12"); 
-    initialValue = 12; 
- } 
-`
\ No newline at end of file
+```csharp
+int initalValue = 12;
+try
+{
+    // Code which manipulates 'initialValue'
+}
+finally
+{
+    Console.WriteLine("re-initalising value back to 12");
+    initialValue = 12;
+}
+```
\ No newline at end of file
diff --git a/guide/arabic/csharp/xaml/index.md b/guide/arabic/csharp/xaml/index.md
index f27c6f4b76..4e63f9bcd8 100644
--- a/guide/arabic/csharp/xaml/index.md
+++ b/guide/arabic/csharp/xaml/index.md
@@ -25,10 +25,11 @@ localeTitle: XAML
 
 يوضح المثال التالي تسمية "Hello World!" كمحتوى في حاوية مستوى أعلى تسمى UserControl.
 
- `<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"> 
-    <Label Content="Hello World!" /> 
- </UserControl> 
-` 
+```XAML
+<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
+    <Label Content="Hello World!" />
+</UserControl>
+``` 
 
 ### معلومات اكثر:
 
diff --git a/guide/arabic/css/background-opacity/index.md b/guide/arabic/css/background-opacity/index.md
index d252475c7d..a5aabb2934 100644
--- a/guide/arabic/css/background-opacity/index.md
+++ b/guide/arabic/css/background-opacity/index.md
@@ -14,37 +14,40 @@ localeTitle: تعتيم الخلفية
 
 **كامد بالكامل**
 
- `.class-name { 
-  opacity:1; 
- } 
- 
- OR 
- 
- .class-name { 
-  opacity:1.0; 
- } 
-` 
+```css
+.class-name {
+  opacity:1;
+}
+
+OR
+
+.class-name {
+  opacity:1.0;
+}
+``` 
 
 **شفافي نصف شفاف**
 
- `.class-name { 
-  opacity:0.5; 
- } 
- Opacity value can be anything between 0 and 1; 
-` 
+```css
+.class-name {
+  opacity:0.5;
+}
+Opacity value can be anything between 0 and 1;
+``` 
 
 **شفاف**
 
- `.class-name { 
-  opacity:0; 
- } 
- 
- OR 
- 
- .class-name { 
-  opacity:0.0; 
- } 
-` 
+```css
+.class-name {
+  opacity:0;
+}
+
+OR
+
+.class-name {
+  opacity:0.0;
+}
+``` 
 
 بدلا من ذلك يمكنك استخدام قيمة rgba شفافة مثل هذا: \`\` \`المغلق
 
diff --git a/guide/arabic/css/background-size/index.md b/guide/arabic/css/background-size/index.md
index a50d7b8fce..479852ce2c 100644
--- a/guide/arabic/css/background-size/index.md
+++ b/guide/arabic/css/background-size/index.md
@@ -18,11 +18,12 @@ localeTitle: حجم الخلفية
 
 لتعيين هذه الخاصية على صور خلفية متعددة ، قم بفصل القيم بفاصلة:
 
- `.multiple { 
-    background-image: url(1.png), url(2.png); 
-    background-size: 3px 3px, cover; 
- } 
-` 
+```css
+.multiple {
+    background-image: url(1.png), url(2.png);
+    background-size: 3px 3px, cover;
+}
+``` 
 
 #### معلومات اكثر:
 
diff --git a/guide/arabic/css/background/index.md b/guide/arabic/css/background/index.md
index 80f33c4ba8..ce6a5b77a3 100644
--- a/guide/arabic/css/background/index.md
+++ b/guide/arabic/css/background/index.md
@@ -43,19 +43,21 @@ localeTitle: خلفية
 
 يمكنك استخدام خاصية صورة الخلفية لتعيين صورة كخلفية لعنصر. يتم تكرار الصورة افتراضيًا بحيث تغطي العنصر بأكمله.
 
- `body { 
-  background-image: url("barn.jpg"); 
- } 
-` 
+```css
+body {
+  background-image: url("barn.jpg");
+}
+``` 
 
 ![صورة](https://user-images.githubusercontent.com/26467304/31036366-eb1fc260-a539-11e7-835d-e3f935a22c86.png)
 
 يمكنك أيضًا ربط الصور أو صور gif التي تعثر عليها عبر الإنترنت باستخدام رابطها (على سبيل المثال ، من صور Google البحث).
 
- `body { 
-  background-image: url("https://mdn.mozillademos.org/files/11983/starsolid.gif"); 
- } 
-` 
+```css
+body {
+  background-image: url("https://mdn.mozillademos.org/files/11983/starsolid.gif");
+}
+``` 
 
 ### صورة الخلفية - خاصية التكرار
 
@@ -63,29 +65,32 @@ localeTitle: خلفية
 
 إليك مثال يكرر الصورة عموديًا.
 
- `body { 
-  background-image: url("barn.jpg"); 
-  background-repeat: repeat-y; 
- } 
-` 
+```css
+body {
+  background-image: url("barn.jpg");
+  background-repeat: repeat-y;
+}
+``` 
 
 ![عمودي](https://user-images.githubusercontent.com/26467304/31039770-8962c7a6-a54e-11e7-9d25-4fb09760d219.PNG)
 
 يمكنك تكرار الصورة أفقيًا عن طريق تعيين الخاصية background-repeat إلى "repeat-x".
 
- `body { 
-  background-image: url("barn.jpg"); 
-  background-repeat: repeat-x; 
- } 
-` 
+```css
+body {
+  background-image: url("barn.jpg");
+  background-repeat: repeat-x;
+}
+``` 
 
 يمكنك أيضًا استخدام خاصية تكرار الخلفية لتعيين صورة لعدم تكرارها.
 
- `body { 
-  background-image: url("barn.jpg"); 
-  background-repeat: no-repeat; 
- } 
-` 
+```css
+body {
+  background-image: url("barn.jpg");
+  background-repeat: no-repeat;
+}
+``` 
 
 ![norepeat](https://user-images.githubusercontent.com/26467304/31039801-c8761efc-a54e-11e7-8bb9-ec5b88885a50.PNG)
 
@@ -93,12 +98,13 @@ localeTitle: خلفية
 
 يمكنك استخدام خاصية الموضع لتحديد مكان صورتك على صفحة الويب.
 
- `body { 
-  background-image: url("barn.jpg"); 
-  background-repeat: no-repeat; 
-  background-position: right top; 
- } 
-` 
+```css
+body {
+  background-image: url("barn.jpg");
+  background-repeat: no-repeat;
+  background-position: right top;
+}
+``` 
 
 ![موضع](https://user-images.githubusercontent.com/26467304/31039828-077d1038-a54f-11e7-8aa6-092253ca92b8.PNG)
 
@@ -106,13 +112,14 @@ localeTitle: خلفية
 
 يمكنك استخدام خاصية "إرفاق الخلفية" لتعيين صورة إلى موضع ثابت. يجعل موقع ثابت الصورة بحيث لا يتم التمرير مع باقي الصفحة.
 
- `body { 
-  background-image: url("barn.jpg"); 
-  background-repeat: no-repeat; 
-  background-position: right top; 
-  background-attachment: fixed; 
- } 
-` 
+```css
+body {
+  background-image: url("barn.jpg");
+  background-repeat: no-repeat;
+  background-position: right top;
+  background-attachment: fixed;
+}
+``` 
 
 ![ثابت](https://user-images.githubusercontent.com/26467304/31039859-39612c92-a54f-11e7-93ca-9d7bcb938225.PNG)
 
@@ -128,10 +135,11 @@ localeTitle: خلفية
 
 يمكنك كتابة خصائص الخلفية على سطر واحد. وهذا ما يسمى خاصية الاختزال.
 
- `body { 
-  background: url("barn.jpg") no-repeat right top; 
- } 
-` 
+```css
+body {
+  background: url("barn.jpg") no-repeat right top;
+}
+``` 
 
 يمكنك ترك الممتلكات التي لا تحتاج إليها عند استخدام خاصية الاختزال ، ولكن الخصائص يجب استخدامها في ترتيب معين. الترتيب هو:
 
@@ -145,10 +153,11 @@ localeTitle: خلفية
 
 يمكنك تحديد صور خلفية متعددة في خاصية خلفية واحدة.
 
- `body { 
-  background: url("barn.jpg"), url("stars.jpg"), linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)); 
- } 
-` 
+```css
+body {
+  background: url("barn.jpg"), url("stars.jpg"), linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
+}
+``` 
 
 الصورة الأولى (أو التدرج) المحددة هي الأكثر في الأعلى ، والثانية تأتي بعدها ، وهكذا. إذا كان أحد العناصر غير صحيح بسبب عنوان URL الخاص به أو بناء الجملة الخاص به ، فسيتم تجاهل السطر بأكمله بواسطة المستعرض.
 
diff --git a/guide/arabic/css/before-selector/index.md b/guide/arabic/css/before-selector/index.md
index e679f5907a..f243f678fc 100644
--- a/guide/arabic/css/before-selector/index.md
+++ b/guide/arabic/css/before-selector/index.md
@@ -8,25 +8,26 @@ localeTitle: قبل المختار
 
 لنلق نظرة على بعض الأمثلة:
 
- `p::before { 
-    content: ""; 
-    border: solid 5px #ccc 
- } 
- 
- span.comment::before{ 
-  content: "Comment: "; 
-  color: blue; 
- } 
-` 
+```css
+p::before {
+    content: "";
+    border: solid 5px #ccc
+}
 
- `
-<p> To infinity and beyond</p> 
- <p> I am buz lightyear, I come in peace.</p> 
- 
- <span class="comment"> May the force be with you</span> 
- <br/> 
- <span> Do. Or do not. There is no try</span> 
-` 
+span.comment::before{
+  content: "Comment: ";
+  color: blue;
+}
+``` 
+
+```html
+<p> To infinity and beyond</p>
+<p> I am buz lightyear, I come in peace.</p>
+
+<span class="comment"> May the force be with you</span>
+<br/>
+<span> Do. Or do not. There is no try</span>
+``` 
 
 في المثال أعلاه ، سنقوم بترقيم حدود رمادية قبل كل عنصر فقرة في الصفحة ، ونحن نقوم أيضًا بإضافة كلمة "تعليق" باللون الأزرق قبل كل عنصر في الامتداد مع تعليق الفصل.
 
@@ -41,9 +42,9 @@ localeTitle: قبل المختار
    } 
 ` 
 
- `
-<p>world!!</p> 
-` 
+```html
+<p>world!!</p>
+``` 
 
 هذا سيظهر `Hello world!!` في الصفحة.
 
diff --git a/guide/arabic/css/borders/index.md b/guide/arabic/css/borders/index.md
index fe7e20ec49..5e395ea287 100644
--- a/guide/arabic/css/borders/index.md
+++ b/guide/arabic/css/borders/index.md
@@ -45,33 +45,36 @@ localeTitle: الملكية الحدودية
 
 المغلق نمط الحد الأعلى: صلب ؛ border-left-style: منقط ؛ border-right-style: dashed؛ نمط الحد السفلي: مزدوج ؛
 
- `Or you can style them all at once: 
-` 
+```
+Or you can style them all at once:
+``` 
 
 المغلق نمط الحدود: الصلبة متقطعة مزدوجة منقط ؛
 
- `As shown, the border property allows you to select different sections of it. [top, bottom, left, right] 
- 
- ### Border Width 
- 
- To alter the thickness of your border use the border-width attribute. You may use key terms or exact values to define the border width. Note: You must 
- define a border-style for the border to show up. The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined 
- values: thin, medium, or thick. 
- 
- Example: 
-` 
+```
+As shown, the border property allows you to select different sections of it. [top, bottom, left, right]
+
+### Border Width
+
+To alter the thickness of your border use the border-width attribute. You may use key terms or exact values to define the border width. Note: You must
+define a border-style for the border to show up. The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined
+values: thin, medium, or thick.
+
+Example:
+``` 
 
 المغلق
 
 table { border-width: 7px; border-style: outset; } td { border-width: medium; border-style: outset; } p { border-width: thick; border-style: solid; }
 
- `### Border Color 
- 
- Now for the creative aspect of CSS Borders! With the use of the border-color attribute, you will be able to create customized borders to fit the flow and layout 
- of your website. Border colors can be any color defined by RGB, hexadecimal, or key terms. Below is an example of each of these types. 
- 
- Example: 
-` 
+```
+### Border Color
+
+Now for the creative aspect of CSS Borders! With the use of the border-color attribute, you will be able to create customized borders to fit the flow and layout
+of your website. Border colors can be any color defined by RGB, hexadecimal, or key terms. Below is an example of each of these types.
+
+Example:
+``` 
 
 المغلق
 
@@ -89,12 +92,13 @@ table { border-color: rgb( 100, 100, 255); border-style: dashed; } td { border-c
 
 المغلق border-radius: 15٪ 10px 30٪ 5px؛
 
- `### Border: All in One 
- 
- While it is nice that CSS allows a web developer to be very specific in creating a customized border, sometimes it is just easier and less of a headache to create a uniform border, all in single line of CSS code. 
- 
- Example: 
-` 
+```
+### Border: All in One
+
+While it is nice that CSS allows a web developer to be very specific in creating a customized border, sometimes it is just easier and less of a headache to create a uniform border, all in single line of CSS code.
+
+Example:
+``` 
 
 المغلق
 
diff --git a/guide/arabic/css/box-shadow/index.md b/guide/arabic/css/box-shadow/index.md
index f723e4a939..b30dd352c6 100644
--- a/guide/arabic/css/box-shadow/index.md
+++ b/guide/arabic/css/box-shadow/index.md
@@ -41,36 +41,39 @@ localeTitle: صندوق الظل
 
 المغلق شعبة { مربع الظل: لا شيء \[أقحم؟ && \[ ؟ ؟ ؟ \]\] # -moz-box-shadow: none | \[أقحم؟ && \[ ؟ ؟ ؟ \]\] # -webkit-box-shadow: لا شيء \[أقحم؟ && \[ ؟ ؟ ؟ \]\] # }
 
- `However, this step can be ignored if it is creating confusion, as moz property and webkit property will only work in specific applications such as Firefox, and are not on a standards track. 
- 
- ### Examples 
- 
- #### Basic use 
-` 
+```
+However, this step can be ignored if it is creating confusion, as moz property and webkit property will only work in specific applications such as Firefox, and are not on a standards track.
+
+### Examples
+
+#### Basic use
+``` 
 
 المغلق div { العرض: 200 بكسل ؛ الارتفاع: 50 بكسل ؛ لون الخلفية: # 333 ؛ box-shadow: 10px 10px 5px #ccc؛ }
 
- `10px - offset-x 
- 10px - offset-y 
- 5px -  blur 
- #ccc - light gray color 
- 
- It will display 
- 
- ![image](https://raw.githubusercontent.com/krzysiekh/images/master/box-shadow1.png) 
- 
- #### Inside box shadow 
-` 
+```
+10px - offset-x
+10px - offset-y
+5px -  blur
+#ccc - light gray color
+
+It will display
+
+![image](https://raw.githubusercontent.com/krzysiekh/images/master/box-shadow1.png)
+
+#### Inside box shadow
+``` 
 
 المغلق div { العرض: 200 بكسل ؛ الارتفاع: 50 بكسل ؛ لون الخلفية: # 333 ؛ box-shadow: inset 10px 10px 5px #ccc؛ }
 
- `It uses very similar code, but with inset value, which displays shadow inside the div element 
- 
- ![image](https://raw.githubusercontent.com/krzysiekh/images/master/box-shadow2.png) 
- 
- 
- #### Multiple box shadows 
-` 
+```
+It uses very similar code, but with inset value, which displays shadow inside the div element
+
+![image](https://raw.githubusercontent.com/krzysiekh/images/master/box-shadow2.png)
+
+
+#### Multiple box shadows
+``` 
 
 المغلق div { العرض: 200 بكسل ؛ الارتفاع: 50 بكسل ؛ لون الخلفية: # 333 ؛ box-shadow: inset 10px 10px 5px #ccc، 10px 10px 5px #ccc؛ } \`\` \`
 
diff --git a/guide/arabic/css/breakpoints/index.md b/guide/arabic/css/breakpoints/index.md
index f568753c7f..4708c15241 100644
--- a/guide/arabic/css/breakpoints/index.md
+++ b/guide/arabic/css/breakpoints/index.md
@@ -27,66 +27,67 @@ localeTitle: نقاط
 
 وهنا مثال على ذلك
 
- `/* ----------- iPhone 6, 6S, 7 and 8 ----------- */ 
- 
- /* Portrait */ 
- 
- @media only screen 
- 
- and (min-device-width: 375px) 
- 
- and (max-device-width: 667px) 
- 
- and (-webkit-min-device-pixel-ratio: 2) 
- 
- and (orientation: portrait) { 
- 
- } 
- 
- /* Landscape */ 
- 
- @media only screen 
- 
- and (min-device-width: 375px) 
- 
- and (max-device-width: 667px) 
- 
- and (-webkit-min-device-pixel-ratio: 2) 
- 
- and (orientation: landscape) { 
- 
- } 
- 
- /* ----------- Google Pixel ----------- */ 
- 
- /* Portrait */ 
- 
- @media screen 
- 
- and (device-width: 360px) 
- 
- and (device-height: 640px) 
- 
- and (-webkit-device-pixel-ratio: 3) 
- 
- and (orientation: portrait) { 
- 
- } 
- 
- /* Landscape */ 
- 
- @media screen 
- 
- and (device-width: 360px) 
- 
- and (device-height: 640px) 
- 
- and (-webkit-device-pixel-ratio: 3) 
- 
- and (orientation: landscape) { 
- 
- } 
-` 
+```
+/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
+
+/* Portrait */
+
+@media only screen
+
+and (min-device-width: 375px)
+
+and (max-device-width: 667px)
+
+and (-webkit-min-device-pixel-ratio: 2)
+
+and (orientation: portrait) {
+
+}
+
+/* Landscape */
+
+@media only screen
+
+and (min-device-width: 375px)
+
+and (max-device-width: 667px)
+
+and (-webkit-min-device-pixel-ratio: 2)
+
+and (orientation: landscape) {
+
+}
+
+/* ----------- Google Pixel ----------- */
+
+/* Portrait */
+
+@media screen
+
+and (device-width: 360px)
+
+and (device-height: 640px)
+
+and (-webkit-device-pixel-ratio: 3)
+
+and (orientation: portrait) {
+
+}
+
+/* Landscape */
+
+@media screen
+
+and (device-width: 360px)
+
+and (device-height: 640px)
+
+and (-webkit-device-pixel-ratio: 3)
+
+and (orientation: landscape) {
+
+}
+``` 
 
 > مع هذا النهج ، سوف ينتهي بك الأمر وجود قائمة ضخمة من الاستفسارات الإعلامية.
 
@@ -94,21 +95,23 @@ localeTitle: نقاط
 
 هذا هو الخيار المفضل أثناء إجراء أو كتابة قواعد نقطة الإيقاف. لأنه من الأسهل ضبط المحتوى وفقًا لتخطيط معين فقط عندما يتطلب تغييرًا.
 
- `@media only screen (min-width: 768px){ 
- ... 
- } 
-` 
+```
+@media only screen (min-width: 768px){
+...
+}
+``` 
 
 > تعني نقطة الإيقاف هذه أنه سيتم تطبيق CSS عندما يكون عرض الجهاز 768 بكسل وما فوق.
 
 #### يمكنك أيضًا تعيين نطاق بنقاط توقف ، بحيث لا يتم تطبيق CSS إلا ضمن هذه الحدود.
 
- `@media only screen and (min-width: 768px) and (max-width: 959px){ 
- 
- ... 
- 
- } 
-` 
+```
+@media only screen and (min-width: 768px) and (max-width: 959px){
+
+...
+
+}
+``` 
 
 **ملحوظة** حاول دائمًا إنشاء نقاط توقف استنادًا إلى المحتوى الخاص بك وليس إلى الأجهزة. تقسيمها إلى عرض منطقي بدلاً من عرض عشوائي والاحتفاظ بها إلى عدد يمكن إدارتها ، لذلك يبقى التعديل بسيطة وواضحة.
 
@@ -118,15 +121,16 @@ localeTitle: نقاط
 
 دعونا نحولها إلى رمز CSS:
 
- `.text1 { 
-    font-size: 16px; 
- } 
- @media (min-width: 1200px) { 
-    .text1 { 
-        font-size: 20px; 
-    } 
- } 
-` 
+```css
+.text1 {
+    font-size: 16px;
+}
+@media (min-width: 1200px) {
+    .text1 {
+        font-size: 20px;
+    }
+}
+``` 
 
 **للراحة لدينا،** وكتابة `.text1` التصميم الأساسي أولا ... ثم بعد ذلك سنقوم تحديد `@media` القواعد.
 
@@ -134,13 +138,14 @@ localeTitle: نقاط
 
 من الجيد تمامًا استخدام `@media (max-width) {}` . هنا مثال:
 
- `.text1 { 
-    font-size: 20px; 
- } 
- @media (max-width: 1199px) { 
-    font-size: 16px; 
- } 
-` 
+```css
+.text1 {
+    font-size: 20px;
+}
+@media (max-width: 1199px) {
+    font-size: 16px;
+}
+``` 
 
  `// Normal, basic styles 
  // that look great on small screens 
@@ -161,21 +166,23 @@ localeTitle: نقاط
 
 نقاط التوقف المستندة إلى محتوى بدلاً من الجهاز تكون أقل تعقيدًا. إليك مقتطف بسيط يتم `code 700px` عندما يكون عرض الجهاز أعلى من حجم شاشة الهاتف الذكي بحجم `code 700px` تقريبًا
 
- `@media only screen and (min-width: 700px) { 
-  something { 
-    something: something; 
-  } 
- } 
-` 
+```css
+@media only screen and (min-width: 700px) {
+  something {
+    something: something;
+  }
+}
+``` 
 
 يمكنك أيضًا تعيين الحد الأدنى والحد الأقصى للعرض ، والذي يتيح لك إجراء التجارب باستخدام نطاقات مختلفة. هذا واحد تقريبا يطلق بين الهاتف smar وأكبر حجم سطح المكتب وأحجام الشاشة
 
- `@media only screen and (min-width: 700px) and (max-width: 1500px) { 
-  something { 
-    something: something; 
-  } 
- } 
-` 
+```code
+@media only screen and (min-width: 700px) and (max-width: 1500px) {
+  something {
+    something: something;
+  }
+}
+``` 
 
 #### معلومات اكثر:
 
diff --git a/guide/arabic/css/class-selector/index.md b/guide/arabic/css/class-selector/index.md
index 142feb21fb..4e1f58543f 100644
--- a/guide/arabic/css/class-selector/index.md
+++ b/guide/arabic/css/class-selector/index.md
@@ -14,44 +14,48 @@ localeTitle: اختيار الطبقة
 
 أمثلة:
 
- `
-<h1 class="test">This is a heading 1</h1> 
- <p class="test">This is a paragraph 1</p> 
- <h2 class="test">This is a heading 2</h2> 
- <p class="test">This is a paragraph 2</p> 
- <div class="test2 test3">This is a div 1</div> 
-` 
+```html
+<h1 class="test">This is a heading 1</h1>
+<p class="test">This is a paragraph 1</p>
+<h2 class="test">This is a heading 2</h2>
+<p class="test">This is a paragraph 2</p>
+<div class="test2 test3">This is a div 1</div>
+``` 
 
 نظرًا لأن اسم الفئة ليس فريدًا ، فإن سمة فئة HTML تجعل من الممكن تعريف أنماط متساوية للعناصر التي تحمل نفس اسم الفئة. **فيما يلي كيفية تحديد الطبقة في ملف CSS لعناصر النمط (لاحظ تدوين.):**
 
 **سيتم تطبيق جميع عناصر `test` الصف باستخدام هذا النمط:**
 
- `.test { 
-  color: green; 
- } 
-` 
+```css
+.test {
+  color: green;
+}
+``` 
 
 **سيتم تطبيق جميع عناصر `<p>` `test` الصف باستخدام هذا النمط:**
 
- `p.test { 
-  border: 1px solid black; 
-  color: red; 
- } 
-` 
+```css
+p.test {
+  border: 1px solid black;
+  color: red;
+}
+``` 
 
 **سيتم تطبيق جميع عناصر `<h1>` و `<h2>` `test` الصف باستخدام هذا النمط:**
 
- `h1.test, h2.test { 
-  color: blue; 
- } 
-` 
+```css
+h1.test, h2.test {
+  color: blue;
+}
+``` 
 
 **سيتم تطبيق جميع العناصر التي تشتمل على كلا النوعين `test2` و `test3` مع هذا النمط:**
 
- `.test2.test3 { 
-  color: green; 
- } 
-` 
+```css
+.test2.test3 {
+  color: green;
+}
+``` 
 
 **نصائح: لا توجد مساحة بين فئات متعددة.**
 
diff --git a/guide/arabic/css/colors/index.md b/guide/arabic/css/colors/index.md
index b6617ecd67..2fb434adfe 100644
--- a/guide/arabic/css/colors/index.md
+++ b/guide/arabic/css/colors/index.md
@@ -48,19 +48,20 @@ Hexcode ، وهو اختصار للرمز السداسي العشري ، هو ط
 
 #### أمثلة
 
- `
-<html> 
-  <body> 
-    <p>Hello Moto</p> 
-  </body> 
- </html> 
-` 
+```html
+<html>
+  <body>
+    <p>Hello Moto</p>
+  </body>
+</html>
+``` 
 
- `body { 
-  background-color: green; 
-  color: white; 
- } 
-` 
+```css
+body {
+  background-color: green;
+  color: white;
+}
+``` 
 
 في المثال أعلاه ، يتحول `background-color: green` إلى عنصر `<body>` باللون الأخضر. يؤدي هذا إلى تحويل صفحة الويب بأكملها إلى اللون الأخضر. تكون عناصر `<p>` بيضاء بعد `color: white` أيضًا. يمكنك استخدام ألوان مسمى ، مثل `green` `blue` `yellow` `red` `purple` وغيرها الكثير. ولكن بالنسبة للألوان المخصصة ، يمكنك استخدام الأكواد العشرية ( `#147ACC` ) ، قيم RGB ( `rgb(20, 122, 204)` ) ، وحتى قيم HSL ( `hsl(145, 59%, 30%)` ).
 
@@ -75,10 +76,11 @@ Hexcode ، وهو اختصار للرمز السداسي العشري ، هو ط
 
 يمكنك أيضًا إضافة قيمة ألفا ، أو الشفافية للألوان. الشفافية تسمح بتراكب النص على صورة وتمييز الصورة بشكل جزئي من خلال النص ، أو يمكن استخدامها لتغيير ظل اللون إذا لم تكن هناك عناصر أخرى أمام أو خلف النص. استخدم `rgba()` أو `hsla()` وقم بتعبئة قيم الألوان الخاصة بك. تنخفض قيمة alpha ويتم تحويلها إلى قيمة عشرية. (على سبيل المثال ، 20٪ هي 0.2 ، 75٪ هي 0.75 ، إلخ.)
 
- `body { 
-  background-color: hsl(184, 87%, 94%); // bright blue 
- } 
-` 
+```css
+body {
+  background-color: hsl(184, 87%, 94%); // bright blue
+}
+``` 
 
 يظهر أعلاه فقرات مصممة باللون البرتقالي اللامع و 20٪ شفافة ، وعناصر h2 بلون وردي من سمك السلمون ، وخلفية الجسم زاهية اللون.
 
diff --git a/guide/arabic/css/css-buttons/index.md b/guide/arabic/css/css-buttons/index.md
index 5637febea0..0596560013 100644
--- a/guide/arabic/css/css-buttons/index.md
+++ b/guide/arabic/css/css-buttons/index.md
@@ -36,12 +36,13 @@ localeTitle: أزرار CSS
 
 لإضافة حد ملون إلى زر ، استخدم خاصية الحدود:
 
- `button { 
-  background-color: #FFF; 
-  color: #FFF; 
-  border: 2px solid #6ba0f4; 
- } 
-` 
+```
+button {
+  background-color: #FFF;
+  color: #FFF;
+  border: 2px solid #6ba0f4;
+}
+``` 
 
 ![Button Border](https://image.ibb.co/kUqymR/button_border_blue.png "حدود الزر")
 
@@ -81,11 +82,12 @@ localeTitle: أزرار CSS
 
 لتغيير نمط زر عند تحريك الماوس فوقه ، استخدم: select hover:
 
- `button:hover { 
-  background-color: #0E2C5B; 
-  color: #FFF; 
- } 
-` 
+```
+button:hover {
+  background-color: #0E2C5B;
+  color: #FFF;
+}
+``` 
 
 ![Hoverable Buttons](https://image.ibb.co/hxQnfm/button_hover.png "أزرار Hoverable")
 
@@ -95,10 +97,11 @@ localeTitle: أزرار CSS
 
 لتعطيل زر ، استخدم خاصية المؤشر:
 
- `button { 
-  cursor: not-allowed; 
- } 
-` 
+```
+button {
+  cursor: not-allowed;
+}
+``` 
 
 #### معلومات اكثر:
 
diff --git a/guide/arabic/css/css-cursors/index.md b/guide/arabic/css/css-cursors/index.md
index cc227e5bd6..f10467f67d 100644
--- a/guide/arabic/css/css-cursors/index.md
+++ b/guide/arabic/css/css-cursors/index.md
@@ -44,10 +44,11 @@ localeTitle: مؤشرات CSS
 
 يمكنك أيضًا تعيين صورة كمؤشر.
 
- `.custom-cursor { 
-  cursor: url(cursor-image.png); 
- } 
-` 
+```
+.custom-cursor {
+  cursor: url(cursor-image.png);
+}
+``` 
 
 #### معلومات اكثر:
 
diff --git a/guide/arabic/css/css-custom-properties/index.md b/guide/arabic/css/css-custom-properties/index.md
index e85fd13e15..3b1dca4fc6 100644
--- a/guide/arabic/css/css-custom-properties/index.md
+++ b/guide/arabic/css/css-custom-properties/index.md
@@ -10,11 +10,12 @@ localeTitle: خصائص CSS مخصصة
 
 ضمن محدد ، يتم تعريف الخصائص المخصصة باستخدام واصلين (-) والاسم ، متبوعًا بالقيمة. يمكن أن تكون القيمة بسيطة ، مثل اللون (RGB ، hexcode ، إلخ) أو الحجم (باستخدام البكسل ، em ، rem ، إلخ) ، أو يمكن أن تكون أكثر تعقيدًا ، مثل تعريف dropshadow. انظر الأمثلة أدناه.
 
- `:root { 
-  --firstVariable: red; 
-  --headerSize: 16px; 
-  --dropShadow: 1px 1px 2px 2px rgba(100,100,100,0.2); 
-` 
+```css
+:root {
+  --firstVariable: red;
+  --headerSize: 16px;
+  --dropShadow: 1px 1px 2px 2px rgba(100,100,100,0.2);
+``` 
 
 الإعلان عن الخصائص المخصصة في `:root` محدد `:root` جعل هذه الخصائص متاحة على مستوى العالم. يمكن اعتبار `:root` محدد `:root` نفس محدد `html` .
 
diff --git a/guide/arabic/css/css-frameworks/css-framework-bulma/index.md b/guide/arabic/css/css-frameworks/css-framework-bulma/index.md
index 2c2f09579e..7dff94d68d 100644
--- a/guide/arabic/css/css-frameworks/css-framework-bulma/index.md
+++ b/guide/arabic/css/css-frameworks/css-framework-bulma/index.md
@@ -10,22 +10,22 @@ Bulma هو إطار CSS حديث يعتمد على [Flexbox وقابلاً](http
 
 في ما يلي نموذج HTML بسيط يشتمل على أحدث ملفات CSS المجمعة والمختصرة لمكتبة Bulma.
 
- `
-    <!DOCTYPE html> 
-    <html lang="en"> 
-      <head> 
-        <meta charset="utf-8"> 
-        <meta name="viewport" content="width=device-width, initial-scale=1"> 
-        <title>Bulma Template</title> 
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.23/css/bulma.min.css"> 
-      </head> 
-      <body> 
-        <h1>Hello World</h1> 
-        <!-- Add all HTML Code here --> 
-      </body> 
-    </html> 
-` 
+```html
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Bulma Template</title>
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.23/css/bulma.min.css">
+      </head>
+      <body>
+        <h1>Hello World</h1>
+        <!-- Add all HTML Code here -->
+      </body>
+    </html>
+``` 
 
 لقد استخدمنا CDN في هذا المثال ، ولكن يمكنك التحقق من الطرق الأخرى لتثبيت Bulma [هنا](http://bulma.io/documentation/overview/start/) .
 
diff --git a/guide/arabic/css/css-frameworks/css-framework-foundation/index.md b/guide/arabic/css/css-frameworks/css-framework-foundation/index.md
index 70846f6f1f..c4492e057d 100644
--- a/guide/arabic/css/css-frameworks/css-framework-foundation/index.md
+++ b/guide/arabic/css/css-frameworks/css-framework-foundation/index.md
@@ -10,23 +10,23 @@ localeTitle: مؤسسة CSS Framework
 
 في ما يلي نموذج HTML بسيط يشتمل على أحدث CSS وملف Javascript مجمّعة ومختصرة لمكتبة المؤسسة.
 
- `
-    <!DOCTYPE html> 
-    <html lang="en"> 
-      <head> 
-        <meta charset="utf-8"> 
-        <meta name="viewport" content="width=device-width, initial-scale=1"> 
-        <title>Foundation Template</title> 
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css"> 
-      </head> 
-      <body> 
-        <h1>Hello World</h1> 
-        <!-- Add all HTML Code here --> 
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
-        <script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script> 
-      </body> 
-    </html> 
-` 
+```html
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Foundation Template</title>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css">
+      </head>
+      <body>
+        <h1>Hello World</h1>
+        <!-- Add all HTML Code here -->
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script>
+      </body>
+    </html>
+``` 
 
 يستخدم هذا المثال استخدام CDN الذي يقوم بتحميل الإعدادات الافتراضية. إذا كنت ترغب في تخصيص تخطيط الشبكة ، قم بتغيير الألوان أو إضافة وإزالة المكونات التي يمكنك القيام بها على صفحة [تنزيل](http://foundation.zurb.com/sites/download/) Foundation.
 
diff --git a/guide/arabic/css/css-frameworks/css-framework-material-design-lite/index.md b/guide/arabic/css/css-frameworks/css-framework-material-design-lite/index.md
index ee544dd360..b2df80e878 100644
--- a/guide/arabic/css/css-frameworks/css-framework-material-design-lite/index.md
+++ b/guide/arabic/css/css-frameworks/css-framework-material-design-lite/index.md
@@ -10,19 +10,19 @@ localeTitle: CSS Framework Material Design Lite
 
 في ما يلي نموذج HTML بسيط يشتمل على أحدث CSS مجمع ومختزن لمكتبة MDL.
 
- `
-<!DOCTYPE html> 
- <html> 
-    <head> 
-        <title></title> 
-        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
-        <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> 
-        <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
-    </head> 
-    <body> 
-    </body> 
- </html> 
-` 
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title></title>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+        <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
+        <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
+    </head>
+    <body>
+    </body>
+</html>
+``` 
 
 لقد استخدمنا CDN في هذا المثال ، ولكن يمكنك التحقق من الطرق الأخرى لتثبيت MDL [هنا](https://getmdl.io/started/index.html) .
 
diff --git a/guide/arabic/css/css-frameworks/css-framework-materialize/index.md b/guide/arabic/css/css-frameworks/css-framework-materialize/index.md
index 0cc5f5a320..65bc7d6e24 100644
--- a/guide/arabic/css/css-frameworks/css-framework-materialize/index.md
+++ b/guide/arabic/css/css-frameworks/css-framework-materialize/index.md
@@ -10,27 +10,27 @@ localeTitle: CSS Framework تتحقق
 
 في ما يلي نموذج HTML بسيط يشتمل على أحدث CSS وملف Javascript مجمّعة ومختصرة لمكتبة Materialize.
 
- `
-    <!DOCTYPE html> 
-  <html> 
-    <head> 
-      <!--Import Google Icon Font--> 
-      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
-      <!--Import materialize.css--> 
-      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> 
- 
-      <!--Let browser know website is optimized for mobile--> 
-      <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
-    </head> 
- 
-    <body> 
-      <h1>Hello World!</h1> 
-      <!--Import jQuery before materialize.js--> 
-      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> 
-    </body> 
-  </html> 
-` 
+```html
+    <!DOCTYPE html>
+  <html>
+    <head>
+      <!--Import Google Icon Font-->
+      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+      <!--Import materialize.css-->
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
+
+      <!--Let browser know website is optimized for mobile-->
+      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    </head>
+
+    <body>
+      <h1>Hello World!</h1>
+      <!--Import jQuery before materialize.js-->
+      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
+    </body>
+  </html>
+``` 
 
 لقد استخدمنا CDN في هذا المثال ، ولكن يمكنك التحقق من طرق أخرى لتثبيت ثريتم [هنا](http://materializecss.com/getting-started) .
 
diff --git a/guide/arabic/css/css-frameworks/css-framework-skeleton/index.md b/guide/arabic/css/css-frameworks/css-framework-skeleton/index.md
index 622e75d4f7..5c96255b6e 100644
--- a/guide/arabic/css/css-frameworks/css-framework-skeleton/index.md
+++ b/guide/arabic/css/css-frameworks/css-framework-skeleton/index.md
@@ -10,24 +10,24 @@ localeTitle: CSS Framework Skeleton
 
 في ما يلي نموذج HTML بسيط يشتمل على أحدث ملف CSS مجمع ومختزن لمكتبة Skeleton.
 
- `
-    <!DOCTYPE html> 
-    <html lang="en"> 
-      <head> 
-        <meta charset="utf-8"> 
-        <meta name="viewport" content="width=device-width, initial-scale=1"> 
-        <title>Skeleton Template</title> 
-        <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css"> 
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css"> 
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"> 
-      </head> 
-      <body> 
-        <h1>Hello World</h1> 
-        <!-- Add all HTML Code here --> 
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
-      </body> 
-    </html> 
-` 
+```html
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Skeleton Template</title>
+        <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
+      </head>
+      <body>
+        <h1>Hello World</h1>
+        <!-- Add all HTML Code here -->
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+      </body>
+    </html>
+``` 
 
  [![](//discourse-user-assets.s3.amazonaws.com/original/2X/3/31bd555700f1ee85bb4ddcacf595f0dfd8a16254.png) **JSBin Demo**](http://jsbin.com/sekojaxali/edit?html,output)
 
diff --git a/guide/arabic/css/css-frameworks/css-frameworks-uikit/index.md b/guide/arabic/css/css-frameworks/css-frameworks-uikit/index.md
index 3b0d402a36..ee426b793c 100644
--- a/guide/arabic/css/css-frameworks/css-frameworks-uikit/index.md
+++ b/guide/arabic/css/css-frameworks/css-frameworks-uikit/index.md
@@ -10,20 +10,20 @@ UIKit هو إطار أمامي خفيف الوزن ومعياري لتطوير 
 
 هنا هو قالب HTML بسيط يتضمن أحدث CSS المترجمة والمختصرة لمكتبة UIKit.
 
- `
-<!DOCTYPE html> 
- <html> 
-    <head> 
-        <title></title> 
-        <link rel="stylesheet" href="css/uikit.min.css" /> 
-        <script src="js/jquery.js"></script> 
-        <script src="js/uikit.min.js"></script> 
-        <script src="js/uikit-icons.min.js"></script> 
-    </head> 
-    <body> 
-    </body> 
- </html> 
-` 
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title></title>
+        <link rel="stylesheet" href="css/uikit.min.css" />
+        <script src="js/jquery.js"></script>
+        <script src="js/uikit.min.js"></script>
+        <script src="js/uikit-icons.min.js"></script>
+    </head>
+    <body>
+    </body>
+</html>
+``` 
 
 لقد استخدمنا CDN في هذا المثال ، ولكن يمكنك التحقق من الطرق الأخرى لتثبيت UIKit [هنا](https://getuikit.com/docs/introduction) .
 
diff --git a/guide/arabic/css/css-performance/index.md b/guide/arabic/css/css-performance/index.md
index c993630927..43956503e4 100644
--- a/guide/arabic/css/css-performance/index.md
+++ b/guide/arabic/css/css-performance/index.md
@@ -22,10 +22,11 @@ localeTitle: أداء CSS
 
 تخيل CSS التالي:
 
- `nav ul li a { 
-  color: #fff; 
- } 
-` 
+```css
+nav ul li a {
+  color: #fff;
+}
+``` 
 
 هذه ليست فكرة جيدة. هناك طرق أفضل لتحديد عنصر ارتباط في التنقل. ولكن كيف يحدد الكمبيوتر العنصر الصحيح؟ أولا يجدها كل `a` عنصر على الصفحة الخاصة بك. ثم يتحقق إذا كان داخل عنصر `li` ، داخل `ul` داخل `div` . لذا ، يقرأ المتصفح المحددات من اليمين إلى اليسار. إذا كان لديك مئات الروابط ، فقد يستغرق ذلك بعض الوقت ، فما الذي يجب عليك فعله؟
 
diff --git a/guide/arabic/css/css-position/index.md b/guide/arabic/css/css-position/index.md
index f17f36a21a..16864db82b 100644
--- a/guide/arabic/css/css-position/index.md
+++ b/guide/arabic/css/css-position/index.md
@@ -6,12 +6,13 @@ localeTitle: وضع CSS
 
 تحدد خاصية الموضع نوع طريقة تحديد المواقع المستخدمة لعنصر. يحتوي على 5 قيم للكلمات الرئيسية:
 
- `.static         { position: static; } // default value 
- .relative       { position: relative; } 
- .sticky         { position: sticky; } 
- .fixed          { position: fixed; } 
- .absolute       { position: absolute; } 
-` 
+```css
+.static         { position: static; } // default value
+.relative       { position: relative; }
+.sticky         { position: sticky; }
+.fixed          { position: fixed; }
+.absolute       { position: absolute; }
+``` 
 
 ### معلومات اكثر:
 
diff --git a/guide/arabic/css/css-preprocessors/index.md b/guide/arabic/css/css-preprocessors/index.md
index 922af5afd0..aec0dcc939 100644
--- a/guide/arabic/css/css-preprocessors/index.md
+++ b/guide/arabic/css/css-preprocessors/index.md
@@ -28,11 +28,12 @@ localeTitle: CSS Preprocessors
 
 \`\` \`ساس for $ vfoo 35px to 85px { .margin - # {vfoo} { الهامش: $ vfoo 10px؛ } }
 
- `This loop saves us from having the to write the same code multiple times to change the margin size. 
- 
- ### If/Else Statements 
- Yet another feature which CSS lacks are If/Else statements. These will run a set of instructions only if a given condition is true. An example of this in SASS would be: 
-` 
+```
+This loop saves us from having the to write the same code multiple times to change the margin size.
+
+### If/Else Statements
+Yet another feature which CSS lacks are If/Else statements. These will run a set of instructions only if a given condition is true. An example of this in SASS would be:
+``` 
 
 ساس if width (body)> 500px { لون الخلفية: الأزرق. } آخر { لون الخلفية: أبيض. } \`\` \` هنا ، سيغير لون الخلفية اللون حسب عرض نص الصفحة.
 
diff --git a/guide/arabic/css/css-syntax-and-selectors/index.md b/guide/arabic/css/css-syntax-and-selectors/index.md
index eee804e9bb..4e3d9d08a7 100644
--- a/guide/arabic/css/css-syntax-and-selectors/index.md
+++ b/guide/arabic/css/css-syntax-and-selectors/index.md
@@ -18,17 +18,17 @@ localeTitle: CSS المختار والقواعد
 
 إليك مثال على CSS المضمّن. سيكون للكلمات "One" و "Two" لون خلفية باللون الأصفر ولون النص باللون الأحمر. تحتوي كلمة "ثلاثة" على نمط جديد يتجاوز الأول ، وسيكون له لون خلفية باللون الأخضر ونص اللون السماوي. في المثال ، نحن نطبق الأنماط على علامات `<div>` ، ولكن يمكنك تطبيق نمط على أي عنصر HTML.
 
- `
-<div style="color:red; background:yellow"> 
-  One 
-  <div> 
-    Two 
-  </div> 
-  <div style="color:cyan; background:green"> 
-    Three 
-  </div> 
- </div> 
-` 
+```html
+<div style="color:red; background:yellow">
+  One
+  <div>
+    Two
+  </div>
+  <div style="color:cyan; background:green">
+    Three
+  </div>
+</div>
+``` 
 
 ### CSS داخلي
 
@@ -38,48 +38,48 @@ localeTitle: CSS المختار والقواعد
 
 في ما يلي مثال له تأثير مماثل لمثال "مضمنة" أعلاه ، باستثناء أنه تم استخراج CSS إلى منطقته الخاصة. ستتطابق الكلمتان "One" و "Two" مع محدد `div` ويكون النص الأحمر على خلفية صفراء. تتطابق الكلمتان "Three" و "Four" مع محدد `div` أيضًا ، ولكنهما يتطابقان أيضًا مع محدد `.nested_div` الذي ينطبق على أي عنصر HTML يشير إلى هذه الفئة. يتجاوز هذا المحدد المحدد الأول ، وينتهي ظهرا في الظهور كنص أزرق سماوي على خلفية خضراء.
 
- `
-<style type="text/css"> 
-  div { color: red; background: yellow; } 
-  .nested_div { color: cyan; background: green; } 
- </style> 
- 
- <div> 
-  One 
-  <div> 
-    Two 
-  </div> 
-  <div class="nested_div"> 
-    Three 
-  </div> 
-  <div class="nested_div"> 
-    Four 
-  </div> 
- </div> 
-` 
+```html
+<style type="text/css">
+  div { color: red; background: yellow; }
+  .nested_div { color: cyan; background: green; }
+</style>
+
+<div>
+  One
+  <div>
+    Two
+  </div>
+  <div class="nested_div">
+    Three
+  </div>
+  <div class="nested_div">
+    Four
+  </div>
+</div>
+``` 
 
 تعتبر المحددات المبينة أعلاه بسيطة للغاية ، ولكنها قد تكون معقدة للغاية. على سبيل المثال ، من الممكن تطبيق الأنماط فقط على العناصر المتداخلة ؛ وهذا هو ، العنصر الذي هو طفل لعنصر آخر.
 
 في ما يلي مثال على تحديدنا للنمط الذي يجب تطبيقه فقط على عناصر `div` التي تمثل طفلًا مباشرًا لعناصر `div` الأخرى. والنتيجة هي أن "Two" و "Three" سيظهران كنص أحمر على خلفية صفراء ، لكن "One" و "Four" سيظلان غير متأثران (وعلى الأرجح نص أسود على خلفية بيضاء).
 
- `
-<style type="text/css"> 
-  div > div { color: red; background: yellow; } 
- </style> 
- 
- <div> 
-  One 
-  <div> 
-    Two 
-  </div> 
-  <div> 
-    Three 
-  </div> 
- </div> 
- <div> 
-  Four 
- </div> 
-` 
+```html
+<style type="text/css">
+  div > div { color: red; background: yellow; }
+</style>
+
+<div>
+  One
+  <div>
+    Two
+  </div>
+  <div>
+    Three
+  </div>
+</div>
+<div>
+  Four
+</div>
+``` 
 
 ### CSS خارجي
 
diff --git a/guide/arabic/css/css3-2d-transforms/index.md b/guide/arabic/css/css3-2d-transforms/index.md
index 4003d43a79..ab28e912aa 100644
--- a/guide/arabic/css/css3-2d-transforms/index.md
+++ b/guide/arabic/css/css3-2d-transforms/index.md
@@ -37,12 +37,13 @@ localeTitle: CSS3 2d يحول
 
 ### مثال:
 
- `div { 
-  -ms-transform: translate(50px, 100px); /* IE 9 */ 
-  -webkit-transform: translate(50px, 100px); /* Safari */ 
-  transform: translate(50px, 100px); 
- } 
-` 
+```css
+div {
+  -ms-transform: translate(50px, 100px); /* IE 9 */
+  -webkit-transform: translate(50px, 100px); /* Safari */
+  transform: translate(50px, 100px);
+}
+``` 
 
 ## طريقة التدوير ()
 
@@ -52,12 +53,13 @@ localeTitle: CSS3 2d يحول
 
 ### مثال:
 
- `div { 
-  -ms-transform: rotate(20deg); /* IE 9 */ 
-  -webkit-transform: rotate(20deg); /* Safari */ 
-  transform: rotate(20deg); 
- } 
-` 
+```css
+div {
+  -ms-transform: rotate(20deg); /* IE 9 */
+  -webkit-transform: rotate(20deg); /* Safari */
+  transform: rotate(20deg);
+}
+``` 
 
 يؤدي استخدام القيم السالبة إلى تدوير العنصر عكس اتجاه عقارب الساعة.
 
@@ -65,12 +67,13 @@ localeTitle: CSS3 2d يحول
 
 ### مثال:
 
- `div { 
-  -ms-transform: rotate(-20deg); /* IE 9 */ 
-  -webkit-transform: rotate(-20deg); /* Safari */ 
-  transform: rotate(-20deg); 
- } 
-` 
+```css
+div {
+  -ms-transform: rotate(-20deg); /* IE 9 */
+  -webkit-transform: rotate(-20deg); /* Safari */
+  transform: rotate(-20deg);
+}
+``` 
 
 ## مقياس () الطريقة
 
@@ -80,23 +83,25 @@ localeTitle: CSS3 2d يحول
 
 ### مثال:
 
- `div { 
-  -ms-transform: scale(2, 3); /* IE 9 */ 
-  -webkit-transform: scale(2, 3); /* Safari */ 
-  transform: scale(2, 3); 
- } 
-` 
+```css
+div {
+  -ms-transform: scale(2, 3); /* IE 9 */
+  -webkit-transform: scale(2, 3); /* Safari */
+  transform: scale(2, 3);
+}
+``` 
 
 المثال التالي يقلل عنصر `<div>` ليكون نصف أصله الأصلي العرض والارتفاع:
 
 ### مثال:
 
- `div { 
-  -ms-transform: scale(0.5, 0.5); /* IE 9 */ 
-  -webkit-transform: scale(0.5, 0.5); /* Safari */ 
-  transform: scale(0.5, 0.5); 
- } 
-` 
+```css
+div {
+  -ms-transform: scale(0.5, 0.5); /* IE 9 */
+  -webkit-transform: scale(0.5, 0.5); /* Safari */
+  transform: scale(0.5, 0.5);
+}
+``` 
 
 ## طريقة skewX ()
 
@@ -106,12 +111,13 @@ localeTitle: CSS3 2d يحول
 
 ### مثال:
 
- `div { 
-  -ms-transform: skewX(20deg); /* IE 9 */ 
-  -webkit-transform: skewX(20deg); /* Safari */ 
-  transform: skewX(20deg); 
- } 
-` 
+```css
+div {
+  -ms-transform: skewX(20deg); /* IE 9 */
+  -webkit-transform: skewX(20deg); /* Safari */
+  transform: skewX(20deg);
+}
+``` 
 
 ## طريقة (())
 
@@ -121,12 +127,13 @@ localeTitle: CSS3 2d يحول
 
 ### مثال:
 
- `div { 
-  -ms-transform: skewY(20deg); /* IE 9 */ 
-  -webkit-transform: skewY(20deg); /* Safari */ 
-  transform: skewY(20deg); 
- } 
-` 
+```css
+div {
+  -ms-transform: skewY(20deg); /* IE 9 */
+  -webkit-transform: skewY(20deg); /* Safari */
+  transform: skewY(20deg);
+}
+``` 
 
 ## طريقة الانحراف ()
 
@@ -136,23 +143,25 @@ localeTitle: CSS3 2d يحول
 
 ### مثال:
 
- `div { 
-  -ms-transform: skew(20deg, 10deg); /* IE 9 */ 
-  -webkit-transform: skew(20deg, 10deg); /* Safari */ 
-  transform: skew(20deg, 10deg); 
- } 
-` 
+```css
+div {
+  -ms-transform: skew(20deg, 10deg); /* IE 9 */
+  -webkit-transform: skew(20deg, 10deg); /* Safari */
+  transform: skew(20deg, 10deg);
+}
+``` 
 
 إذا لم يتم تحديد المعلمة الثانية ، فإنها تحتوي على قيمة صفرية. لذلك ، ما يلي على سبيل المثال يتخطى عنصر `<div>` 20 درجة على طول المحور X:
 
 ### مثال:
 
- `div { 
-  -ms-transform: skew(20deg); /* IE 9 */ 
-  -webkit-transform: skew(20deg); /* Safari */ 
-  transform: skew(20deg); 
- } 
-` 
+```css
+div {
+  -ms-transform: skew(20deg); /* IE 9 */
+  -webkit-transform: skew(20deg); /* Safari */
+  transform: skew(20deg);
+}
+``` 
 
 ## طريقة المصفوفة ()
 
@@ -164,12 +173,13 @@ localeTitle: CSS3 2d يحول
 
 ### مثال:
 
- `div { 
-  -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */ 
-  -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */ 
-  transform: matrix(1, -0.3, 0, 1, 0, 0); 
- } 
-` 
+```css
+div {
+  -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
+  -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
+  transform: matrix(1, -0.3, 0, 1, 0, 0);
+}
+``` 
 
 ## CSS3 خصائص التحويل
 
diff --git a/guide/arabic/css/css3-at-media-rule/index.md b/guide/arabic/css/css3-at-media-rule/index.md
index ff415132a9..59ffa43237 100644
--- a/guide/arabic/css/css3-at-media-rule/index.md
+++ b/guide/arabic/css/css3-at-media-rule/index.md
@@ -24,12 +24,13 @@ localeTitle: CSS3 في Media Rule
 
 مثال لاستعلام الوسائط هو كما يلي:
 
- `@media screen and (max-width: 1000px) { 
-  body { 
-    background: #000; 
-  } 
- } 
-` 
+```CSS
+@media screen and (max-width: 1000px) {
+  body {
+    background: #000;
+  }
+}
+``` 
 
 لا تنطبق قاعدة CSS في استعلام Media إلا عندما تكون القاعدة صحيحة. على سبيل المثال ، بالنظر إلى المقتطف أعلاه ، سيتم تغيير خلفية النص إلى `#000` فقط عندما يزور أحد المستخدمين الصفحة بجهاز بعرضه 1000 بكسل أو أقل. إذا كانت أعلى من 1000 بكسل ، فلن تنطبق هذه القاعدة.
 
diff --git a/guide/arabic/css/css3-borders-rounded-corners/index.md b/guide/arabic/css/css3-borders-rounded-corners/index.md
index 922d814e41..0a33d37480 100644
--- a/guide/arabic/css/css3-borders-rounded-corners/index.md
+++ b/guide/arabic/css/css3-borders-rounded-corners/index.md
@@ -21,38 +21,43 @@ localeTitle: CSS3 الحدود شعاع الملكية
 
 إذا تم توفير قيمة واحدة فقط ، فسيكون نصف قطر الحدود هو نفسه لجميع الزوايا الأربع ، كما هو موضح في الأمثلة السابقة. ولكن لديك أيضًا خيار تحديد قيم مختلفة لكل ركن.
 
- `.new-shape { 
-  border-radius: 20px 50px 5px 0; /* top left, top right, bottom right, bottom left */ 
- } 
-` 
+```css
+.new-shape {
+  border-radius: 20px 50px 5px 0; /* top left, top right, bottom right, bottom left */
+}
+``` 
 
 في حالة تقديم قيمتين فقط ، يتم تطبيق القيمة الأولى على الركن الأيمن العلوي والسفلي ، وتنطبق القيمة الثانية على الركن الأيمن العلوي والسفلي الأيسر.
 
- `.leaf-shape { 
-  border-radius: 0 50%; 
- } 
-` 
+```css
+.leaf-shape {
+  border-radius: 0 50%;
+}
+``` 
 
 إذا تم تعيين ثلاث قيم ، فسيتم تطبيق القيم الأولى مرة أخرى على نصف قطر أعلى اليسار ، تشير القيمة الثانية إلى اليمين العلوي والسفلي الأيسر ، تاركة القيمة الثالثة للإشارة إلى الركن السفلي الأيمن.
 
- `.odd-shape { 
-  border-radius: 0 20px 50%; 
- } 
-` 
+```css
+.odd-shape {
+  border-radius: 0 20px 50%;
+}
+``` 
 
 ![أمثلة](https://github.com/kaithrendyle/guide-photos/blob/master/odd-shapes.png?raw=true)
 
 لا يجب أن يكون تقريب الزاوية متماثلًا تمامًا. يمكنك تحديد كل من الشعاعين الأفقي والعمودي باستخدام شرطة مائلة ("/") لتحقيق زاوية ذات شكل بيضاوي الشكل. \`\` \`المغلق .elliptical-1 { border-radius: 50px / 10px؛ / \* نصف القطر الأفقي / نصف القطر الرأسي \* / } .elliptical-2 { border-radius: 10px / 50px؛ }
 
- `![examples](https://github.com/kaithrendyle/guide-photos/blob/master/elliptical-basic.png?raw=true) 
- 
- Since only one pair of values is given in the above examples, all four corners are the same. But, of course, if you want a more complex shape, you may supply up to four values for the horizontal radiuses and four for the vertical radiuses. 
-` 
+```
+![examples](https://github.com/kaithrendyle/guide-photos/blob/master/elliptical-basic.png?raw=true)
+
+Since only one pair of values is given in the above examples, all four corners are the same. But, of course, if you want a more complex shape, you may supply up to four values for the horizontal radiuses and four for the vertical radiuses.
+``` 
 
 المغلق .elliptical-3 { border-radius: 50px 20px 50px 20px / 20px 50px 20px 50px؛ / \* أفقية من اليسار إلى اليمين ، أعلى يمين أفقي ، أفقي من أسفل إلى اليمين ، أفقي من أسفل يسار / عمودي إلى يسار علوي ، عمودي أعلى يمين ، عمودي إلى أسفل يمين ، عمودي إلى أسفل يسار \* / }
 
- `Notice how the shorthand above produces the same result as specifying individual properties below. Be aware that when corners are set individually the values are space-separated instead of slash-separated. 
-` 
+```
+Notice how the shorthand above produces the same result as specifying individual properties below. Be aware that when corners are set individually the values are space-separated instead of slash-separated.
+``` 
 
 المغلق .elliptical-4 { نصف قطر أعلى يمين - أقصى: 50 بكسل 20 بكسل ؛ / \* نصف القطر الأفقي ، نصف القطر الرأسي \* / نصف قطر أعلى يمين الحد: 20px 50px؛ نصف قطر الحد السفلي - اليمين - اليمين: 50 بكسل × 20 بكسل ؛ border-bottom-left-radius: 20px 50px؛ } \`\` \` ![أمثلة](https://github.com/kaithrendyle/guide-photos/blob/master/elliptical-advance.png?raw=true)
 
diff --git a/guide/arabic/css/css3-colors/index.md b/guide/arabic/css/css3-colors/index.md
index b1a2de4193..970f808df6 100644
--- a/guide/arabic/css/css3-colors/index.md
+++ b/guide/arabic/css/css3-colors/index.md
@@ -12,10 +12,11 @@ localeTitle: ألوان CSS3
 
 ### بناء الجملة
 
- `p { 
-  color: green; 
- } 
-` 
+```
+p {
+  color: green;
+}
+``` 
 
 هذه القاعدة تغير كل لون الخط لكل
 
@@ -29,10 +30,11 @@ RGB تعني "أحمر" و "أخضر" و "أزرق" ويمكننا أيضًا ت
 
 من المستحيل محاولة حفظ كل رمز لون ولهذا السبب هناك العديد من الأدوات عبر الإنترنت لاختيار الألوان التي تريدها لمشاريعك. على سبيل المثال: https://www.w3schools.com/colors/colors\_picker.asp أو http://htmlcolorcodes.com/color-picker/.
 
- `p { 
-  color: rgb(0, 255, 0); 
- } 
-` 
+```css
+p {
+  color: rgb(0, 255, 0);
+}
+``` 
 
 تغير هذه القاعدة لون الخط لكل عناصر p إلى اللون الأخضر ، تمامًا كما هو موضح أعلاه.
 
@@ -46,10 +48,11 @@ RGB تعني "أحمر" و "أخضر" و "أزرق" ويمكننا أيضًا ت
 
 ### بناء الجملة
 
- `p { 
-  color: #00fe00; 
- } 
-` 
+```
+p {
+  color: #00fe00;
+}
+``` 
 
 تقوم هذه القاعدة مرة أخرى بتغيير لون الخط لكل عناصر p إلى اللون الأخضر.
 
@@ -59,10 +62,11 @@ RGB تعني "أحمر" و "أخضر" و "أزرق" ويمكننا أيضًا ت
 
 ### بناء الجملة
 
- `p { 
-  color: hsl(0, 100%, 50%); 
- } 
-` 
+```
+p {
+  color: hsl(0, 100%, 50%);
+}
+``` 
 
 ### انتاج |
 
diff --git a/guide/arabic/css/css3-gradients/index.md b/guide/arabic/css/css3-gradients/index.md
index 5b0e5f31bf..c0d9126b0b 100644
--- a/guide/arabic/css/css3-gradients/index.md
+++ b/guide/arabic/css/css3-gradients/index.md
@@ -28,32 +28,33 @@ localeTitle: تدرجات CSS3
 
 #### مثال
 
- `<!DOCTYPE html> 
- <html> 
- <head> 
- <style> 
- #grad1 { 
-    height: 200px; 
-    background: red; /* For browsers that do not support gradients */ 
-    background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */ 
-    background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */ 
-    background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */ 
-    background: linear-gradient(red, green); /* Standard syntax (must be last) */ 
- } 
- </style> 
- </head> 
- <body> 
- 
- <h3>Linear Gradient - Top to Bottom</h3> 
- <p>This linear gradient starts at the top. It starts red, transitioning to yellow:</p> 
- 
- <div id="grad1"></div> 
- 
- <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p> 
- 
- </body> 
- </html> 
-` 
+```
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+#grad1 {
+    height: 200px;
+    background: red; /* For browsers that do not support gradients */
+    background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */
+    background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */
+    background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */
+    background: linear-gradient(red, green); /* Standard syntax (must be last) */
+}
+</style>
+</head>
+<body>
+
+<h3>Linear Gradient - Top to Bottom</h3>
+<p>This linear gradient starts at the top. It starts red, transitioning to yellow:</p>
+
+<div id="grad1"></div>
+
+<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
+
+</body>
+</html>
+``` 
 
 ![الافتراضي الخطية التدرج](https://cdn-media-1.freecodecamp.org/imgr/CvtXCMd.jpg)
 
@@ -63,32 +64,33 @@ localeTitle: تدرجات CSS3
 
 #### مثال
 
- `<!DOCTYPE html> 
- <html> 
- <head> 
- <style> 
- #grad1 { 
-    height: 200px; 
-    background: red; /* For browsers that do not support gradients */ 
-    background: -webkit-linear-gradient(left, red , green); /* For Safari 5.1 to 6.0 */ 
-    background: -o-linear-gradient(right, red, green); /* For Opera 11.1 to 12.0 */ 
-    background: -moz-linear-gradient(right, red, green); /* For Firefox 3.6 to 15 */ 
-    background: linear-gradient(to right, red , green); /* Standard syntax (must be last) */ 
- } 
- </style> 
- </head> 
- <body> 
- 
- <h3>Linear Gradient - Left to Right</h3> 
- <p>This linear gradient starts at the left. It starts red, transitioning to yellow:</p> 
- 
- <div id="grad1"></div> 
- 
- <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p> 
- 
- </body> 
- </html> 
-` 
+```
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+#grad1 {
+    height: 200px;
+    background: red; /* For browsers that do not support gradients */
+    background: -webkit-linear-gradient(left, red , green); /* For Safari 5.1 to 6.0 */
+    background: -o-linear-gradient(right, red, green); /* For Opera 11.1 to 12.0 */
+    background: -moz-linear-gradient(right, red, green); /* For Firefox 3.6 to 15 */
+    background: linear-gradient(to right, red , green); /* Standard syntax (must be last) */
+}
+</style>
+</head>
+<body>
+
+<h3>Linear Gradient - Left to Right</h3>
+<p>This linear gradient starts at the left. It starts red, transitioning to yellow:</p>
+
+<div id="grad1"></div>
+
+<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
+
+</body>
+</html>
+``` 
 
 ![من اليسار إلى اليمين](https://cdn-media-1.freecodecamp.org/imgr/k4FSyXz.jpg)
 
@@ -102,32 +104,33 @@ localeTitle: تدرجات CSS3
 
 #### مثال
 
- `<!DOCTYPE html> 
- <html> 
- <head> 
- <style> 
- #grad1 { 
-    height: 200px; 
-    background: red; /* For browsers that do not support gradients */ 
-    background: -webkit-linear-gradient(left top, red, green); /* For Safari 5.1 to 6.0 */ 
-    background: -o-linear-gradient(bottom right, red, green); /* For Opera 11.1 to 12.0 */ 
-    background: -moz-linear-gradient(bottom right, red, green); /* For Firefox 3.6 to 15 */ 
-    background: linear-gradient(to bottom right, red, green); /* Standard syntax (must be last) */ 
- } 
- </style> 
- </head> 
- <body> 
- 
- <h3>Linear Gradient - Diagonal</h3> 
- <p>This linear gradient starts at top left. It starts red, transitioning to yellow:</p> 
- 
- <div id="grad1"></div> 
- 
- <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p> 
- 
- </body> 
- </html> 
-` 
+```
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+#grad1 {
+    height: 200px;
+    background: red; /* For browsers that do not support gradients */
+    background: -webkit-linear-gradient(left top, red, green); /* For Safari 5.1 to 6.0 */
+    background: -o-linear-gradient(bottom right, red, green); /* For Opera 11.1 to 12.0 */
+    background: -moz-linear-gradient(bottom right, red, green); /* For Firefox 3.6 to 15 */
+    background: linear-gradient(to bottom right, red, green); /* Standard syntax (must be last) */
+}
+</style>
+</head>
+<body>
+
+<h3>Linear Gradient - Diagonal</h3>
+<p>This linear gradient starts at top left. It starts red, transitioning to yellow:</p>
+
+<div id="grad1"></div>
+
+<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
+
+</body>
+</html>
+``` 
 
 ![قطري-إكسب](https://cdn-media-1.freecodecamp.org/imgr/8gKRhAp.jpg)
 
diff --git a/guide/arabic/css/css3-nth-child-selector/index.md b/guide/arabic/css/css3-nth-child-selector/index.md
index 7fb16b3889..2128fe0e13 100644
--- a/guide/arabic/css/css3-nth-child-selector/index.md
+++ b/guide/arabic/css/css3-nth-child-selector/index.md
@@ -23,19 +23,21 @@ localeTitle: CSS3 Nth Child Selector
 
 المغلق a: nth-childe (odd) { / \* CSS هنا \* / }
 
- `##### Even 
- 
- Even returns all even elements of a given type. 
-` 
+```
+##### Even
+
+Even returns all even elements of a given type.
+``` 
 
 المغلق a: nth-childe (even) { / \* CSS هنا \* / }
 
- `#### An+B 
- 
- Returns all elements matching the equation An+B for every positive integer value of n (in addition to 0). 
- 
- For example, the following will match every 3rd anchor element: 
-` 
+```
+#### An+B
+
+Returns all elements matching the equation An+B for every positive integer value of n (in addition to 0).
+
+For example, the following will match every 3rd anchor element:
+``` 
 
 المغلق a: nth-childe (3n) { / \* CSS هنا \* / } \`\` \`
 
diff --git a/guide/arabic/css/css3-opacity-property/index.md b/guide/arabic/css/css3-opacity-property/index.md
index 0b979460be..b2bc9fbb22 100644
--- a/guide/arabic/css/css3-opacity-property/index.md
+++ b/guide/arabic/css/css3-opacity-property/index.md
@@ -10,22 +10,23 @@ localeTitle: خاصية عتامة CSS3
 
 ضبط عنصر على `opacity: 0;` لا يزيلها من الصفحة. سيظل العنصر قابلاً للنقر وسيؤثر على تدفق محتوى الصفحة.
 
- `.transparent { 
-    opacity: 0; 
- } 
- 
- .verySeeThrough { 
-    opacity: 0.3; 
- } 
- 
- .slightlySeeThrough { 
-    opacity: 0.7; 
- } 
- 
- .opaque { 
-    opacity: 1; 
- } 
-` 
+```css
+.transparent {
+    opacity: 0;
+}
+
+.verySeeThrough {
+    opacity: 0.3;
+}
+
+.slightlySeeThrough {
+    opacity: 0.7;
+}
+
+.opaque {
+    opacity: 1;
+}
+``` 
 
 [يوضح هذا المثال البسيط](https://jsfiddle.net/1ogmxaf8/1/) كيفية استخدام التعتيم مع تأثير التمرير.
 
diff --git a/guide/arabic/css/css3-transitions/index.md b/guide/arabic/css/css3-transitions/index.md
index 633490595c..79ef65aeae 100644
--- a/guide/arabic/css/css3-transitions/index.md
+++ b/guide/arabic/css/css3-transitions/index.md
@@ -10,13 +10,15 @@ localeTitle: التحولات CSS3
 
 الخاصية `transition` هي خاصية مختزلة لخاصية `transition-property` ، `transition-duration` `transition-timing-function` ، `transition-timing-function` `transition-delay` ، وبناء الجملة هو ما يلي:
 
- `transition: transition-property transition-duration transition-timing-function transition-delay 
-` 
+```css
+transition: transition-property transition-duration transition-timing-function transition-delay
+``` 
 
 فمثلا :
 
- `transition: width 2s ease-in-out 1s; 
-` 
+```
+transition: width 2s ease-in-out 1s;
+``` 
 
 ### وصف الخصائص
 
@@ -34,8 +36,9 @@ localeTitle: التحولات CSS3
 
 فمثلا :
 
- `transition-property: width; /* means the transition applies on the width */ 
-` 
+```
+transition-property: width; /* means the transition applies on the width */
+``` 
 
 #### `transition-duration`
 
@@ -43,8 +46,9 @@ localeTitle: التحولات CSS3
 
 فمثلا :
 
- `transition-duration: 2s /* means the transition effect last 2s */ 
-` 
+```
+transition-duration: 2s /* means the transition effect last 2s */
+``` 
 
 #### `transition-timing-function`
 
@@ -61,8 +65,9 @@ localeTitle: التحولات CSS3
 
 فمثلا :
 
- `transition-timing-function: linear 
-` 
+```css
+transition-timing-function: linear
+``` 
 
 ملاحظة: جميع القيم المذكورة أعلاه هي في الواقع تفاصيل `cubic-bezier` . `linear` ، على سبيل المثال ، تعادل `cubic-bezier(0.25,0.1,0.25,1)`
 
@@ -74,8 +79,9 @@ localeTitle: التحولات CSS3
 
 فمثلا :
 
- `transition-delay: 1s /* means wait 1s before the transition effect start */ 
-` 
+```
+transition-delay: 1s /* means wait 1s before the transition effect start */
+``` 
 
 ### كيفية استخدام التحولات؟
 
@@ -83,25 +89,27 @@ localeTitle: التحولات CSS3
 
 #### استخدام الخاصية المختزلة ( `transition` )
 
- `div { 
-  width: 200px; 
-  transition: all 1s ease-in-out; 
- } 
- 
- div:hover { 
-  width: 300px; 
- } 
-` 
+```css
+div {
+  width: 200px;
+  transition: all 1s ease-in-out;
+}
+
+div:hover {
+  width: 300px;
+}
+``` 
 
 #### إعطاء جميع خصائص النقل قيمة
 
- `div { 
-  width: 200px; 
-  transition-property: width; 
-  transition-duration: 1s; 
-  transition-timing-function: ease-in-out; 
- } 
-` 
+```css
+div {
+  width: 200px;
+  transition-property: width;
+  transition-duration: 1s;
+  transition-timing-function: ease-in-out;
+}
+``` 
 
 ملاحظة: كلا المثالين **متساويان**
 
diff --git a/guide/arabic/css/current-color-keyword/index.md b/guide/arabic/css/current-color-keyword/index.md
index 851ddef2e3..9260caf8f5 100644
--- a/guide/arabic/css/current-color-keyword/index.md
+++ b/guide/arabic/css/current-color-keyword/index.md
@@ -14,21 +14,22 @@ localeTitle: الكلمة الرئيسية الحالية
 
 نعلن أن كل div يحتوي على حدود 3px بلون _currentColor_ ، مما يعني أن كل حد div سيتم تلوينه بنفس قيمة خاصية `color` الخاصة به. تحقق من المثال الحي [هنا](http://jsfiddle.net/tjkp0cm3/)
 
- `div{ 
-  /* The currentColor keyword for the color value, which means that the border will have the value of the respective div's color property */ 
-  border: 3px solid currentColor; 
- } 
- 
- /* This div will have green borders, because its color value is green. */ 
- #div1{ 
-  color: green; 
- } 
- 
- /* This div will have blue borders, because its color value is blue. */ 
- #div2{ 
-  color: blue; 
- } 
-` 
+```css
+div{
+  /* The currentColor keyword for the color value, which means that the border will have the value of the respective div's color property */
+  border: 3px solid currentColor;
+}
+
+/* This div will have green borders, because its color value is green. */
+#div1{
+  color: green;
+}
+
+/* This div will have blue borders, because its color value is blue. */
+#div2{
+  color: blue;
+}
+``` 
 
 ### التطبيق العملي مع SVG
 
@@ -44,37 +45,39 @@ localeTitle: الكلمة الرئيسية الحالية
 
 يمكننا استخدام هذا الرمز الخاص بنا لتحقيق السلوك المطلوب.
 
- `button{ 
-  color: #016898; 
- } 
- 
- .emailIcon{ 
-  fill: #016898; 
- } 
- 
- button:hover { 
-  color: #19B5FE; 
- } 
- 
- button:hover .emailIcon{ 
-  fill: #19B5FE; 
- } 
-` 
+```css
+button{
+  color: #016898;
+}
+
+.emailIcon{
+  fill: #016898;
+}
+
+button:hover {
+  color: #19B5FE;
+}
+
+button:hover .emailIcon{
+  fill: #19B5FE;
+}
+``` 
 
 الآن، بدلا من تغيير SVG في `fill` اللون على تحوم بشكل واضح، فإننا يمكن أن يحدد التعبئة ل `currentColor` . يقوم هذا تلقائيًا بتغيير لون SVG إلى قيمة خاصية `color` الخاصة بالزر. نحن الآن بحاجة فقط إلى تغيير خاصية `color` من الزر. هذا يجعل رمز CSS أقصر وأذكى.
 
- `.emailIcon{ 
-  fill: currentColor; 
- } 
- 
- button{ 
-  color: #016898; 
- } 
- 
- button:hover { 
-  color: #19B5FE; 
- } 
-` 
+```css
+.emailIcon{
+  fill: currentColor;
+}
+
+button{
+  color: #016898;
+}
+
+button:hover {
+  color: #19B5FE;
+}
+``` 
 
 تحقق من المثال المباشر على https://repl.it/NNt9/2.
 
diff --git a/guide/arabic/css/dropdowns/index.md b/guide/arabic/css/dropdowns/index.md
index de662c3efe..e0be179a00 100644
--- a/guide/arabic/css/dropdowns/index.md
+++ b/guide/arabic/css/dropdowns/index.md
@@ -8,38 +8,39 @@ localeTitle: هبوط قطرة
 
 أمثلة:
 
- `
-<div class="dropdown"> 
-  <button class="dropbtn">Name</button> 
-  <div class="dropdownContent"> 
-    <a href="#">One</a> 
-    <a href="#">Two</a> 
-    <a href="#">Three</a> 
-  </div> 
- </div> 
-` 
+```html
+<div class="dropdown">
+  <button class="dropbtn">Name</button>
+  <div class="dropdownContent">
+    <a href="#">One</a>
+    <a href="#">Two</a>
+    <a href="#">Three</a>
+  </div>
+</div>
+``` 
 
 ثم يجب عليك تخصيص الطبقات في CSS
 
- `.dropdown { 
-  position: relative; 
-  display: inline-block; 
- } 
- 
- .dropbtn { 
-  background-color: red; 
-  padding: 10px; 
- } 
- 
- .dropdown-content { 
-  display: none; 
-  position: absolute; 
- } 
- 
- .dropdown:hover .dropdown-content { 
-  display:block; 
- } 
-` 
+```css
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropbtn {
+  background-color: red;
+  padding: 10px;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+}
+
+.dropdown:hover .dropdown-content {
+  display:block;
+}
+``` 
 
 تحتاج إلى فئات div منفصلة لإنشاء الزر ، و div آخر لفصل قائمة ما يحتوي عليه الزر.
 
diff --git a/guide/arabic/css/fonts/index.md b/guide/arabic/css/fonts/index.md
index 5b425fb4ac..8ecfcbfa88 100644
--- a/guide/arabic/css/fonts/index.md
+++ b/guide/arabic/css/fonts/index.md
@@ -29,18 +29,19 @@ localeTitle: الخطوط
 *   مائل - النص موضح في _المائل_
 *   مائل - النص المائل يميل
 
- `.normal { 
-    font-style: normal; 
- } 
- 
- .italic { 
-    font-style: italic; 
- } 
- 
- .oblique { 
-    font-style: oblique; 
- } 
-` 
+```css
+.normal {
+    font-style: normal;
+}
+
+.italic {
+    font-style: italic;
+}
+
+.oblique {
+    font-style: oblique;
+}
+``` 
 
 ### حجم الخط
 
@@ -53,39 +54,41 @@ localeTitle: الخطوط
 *   `small` ، `medium` ، `large` - يُعرف بقيم الحجم المطلقة
 *   `%` - النسب المئوية
 
- `.with-pixels { 
-    font-size: 14px; 
- } 
- 
- .with-ems { 
-    font-size: 0.875em; 
- } 
- 
- .with-absolute { 
-    font-size: large; 
- } 
- 
- .with-percentage { 
-    font-size: 80%; 
- } 
-` 
+```css
+.with-pixels {
+    font-size: 14px;
+}
+
+.with-ems {
+    font-size: 0.875em;
+}
+
+.with-absolute {
+    font-size: large;
+}
+
+.with-percentage {
+    font-size: 80%;
+}
+``` 
 
 ### وزن الخط
 
 تحدد الخاصية `font-weight` الوزن (أو الجرأة) للخط. يقبل الكلمات الرئيسية ( `bold` ، `normal` ، `bolder` ، `lighter` ) أو كلمات رئيسية عددية ( `100` ، `200` ، `300` ، `400` إلخ) `400` هو نفسه `normal` .
 
- `p { 
-   font-weight: bold 
- } 
-` 
+```css
+p {
+   font-weight: bold
+}
+``` 
 
 ### استجابة الخط
 
 يمكن ضبط حجم النص بوحدة عرض vw (عرض إطار العرض). وبهذه الطريقة ، سيتبع حجم النص حجم نافذة المتصفح.
 
- `
-<h1 style="font-size:10vw">Hello World</h1> 
-` 
+```html
+<h1 style="font-size:10vw">Hello World</h1>
+``` 
 
 `Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.`
 
@@ -93,10 +96,11 @@ localeTitle: الخطوط
 
 تحدد خاصية `font-variant` إذا كان يجب عرض النص في خط صغير الحجم (حيث يتم تحويل جميع الأحرف الصغيرة إلى أحرف كبيرة أثناء الظهور في حجم خط أصغر من الأحرف الكبيرة الأصلية في النص).
 
- `p.small { 
-  font-variant: small-caps; 
- } 
-` 
+```css
+p.small {
+  font-variant: small-caps;
+}
+``` 
 
 #### معلومات اكثر:
 
diff --git a/guide/arabic/css/forms/index.md b/guide/arabic/css/forms/index.md
index de221bbec5..e841965f59 100644
--- a/guide/arabic/css/forms/index.md
+++ b/guide/arabic/css/forms/index.md
@@ -6,11 +6,11 @@ localeTitle: إستمارات
 
 يعرّف عنصر نموذج HTML نموذجًا يُستخدم لجمع إدخال المستخدم. أمثلة:
 
- `
-<form> 
-  contents 
- </form> 
-` 
+```html
+<form>
+  contents
+</form>
+``` 
 
 يحتوي نموذج HTML على عناصر النموذج.
 
diff --git a/guide/arabic/css/height-and-width-dimensions/index.md b/guide/arabic/css/height-and-width-dimensions/index.md
index f28e89cb6e..b56610a548 100644
--- a/guide/arabic/css/height-and-width-dimensions/index.md
+++ b/guide/arabic/css/height-and-width-dimensions/index.md
@@ -32,9 +32,9 @@ localeTitle: أبعاد الطول والعرض
 
 **مثال:**
 
- `
-<p id="red">Example text</p> 
-` 
+```html
+<p id="red">Example text</p>
+``` 
 
  `p#red { 
     margin: 0; 
@@ -51,20 +51,22 @@ localeTitle: أبعاد الطول والعرض
 
 **مثال:**
 
- `p#example { 
-  min-height: 400px; 
- } 
-` 
+```css
+p#example {
+  min-height: 400px;
+}
+``` 
 
 تحدد الخاصية `max-height` أقصى ارتفاع يمكن أن يصل إليه العنصر. قد يكون ذلك مفيدًا عندما لا تريد أن يكون العنصر أكبر من حجم معين. إذا كان محتوى العنصر أعلى من قيمة `max-height` المحتوى.
 
 **مثال:**
 
- `p { 
-  max-height: 40px; 
-  background-color: red; 
- } 
-` 
+```css
+p {
+  max-height: 40px;
+  background-color: red;
+}
+``` 
 
 **نتيجة:** ![مثال 3](https://image.prntscr.com/image/eRdqazdUSWO2rdVfcUb5rQ.png)
 
@@ -74,11 +76,12 @@ localeTitle: أبعاد الطول والعرض
 
 **مثال:**
 
- `p { 
-  width: 150px; 
-  background-color: red; 
- } 
-` 
+```css
+p {
+  width: 150px;
+  background-color: red;
+}
+``` 
 
 **نتيجة:** ![مثال 4](https://image.prntscr.com/image/x1_khU6TQsmZQznt7YU9qw.png)
 
@@ -86,20 +89,22 @@ _ملاحظة: لا يمتد المحتوى إلى اليمين ، بل يسته
 
 **مثال:**
 
- `p { 
-  min-width: 50px; 
- } 
-` 
+```css
+p {
+  min-width: 50px;
+}
+``` 
 
 لن يسمح الكود السابق ببساطة لعنصر فقرة أن يتقلص أفقيًا إلى أقل من 50 بكسل.
 
 **مثال:**
 
- `p { 
-  max-width: 300px; 
-  background-color: red; 
- } 
-` 
+```css
+p {
+  max-width: 300px;
+  background-color: red;
+}
+``` 
 
 لن يسمح الرمز أعلاه بعرض عنصر أكبر من 300 بكسل.
 
diff --git a/guide/arabic/css/hover-selector/index.md b/guide/arabic/css/hover-selector/index.md
index 25dcc3c2e4..5ae7da33f3 100644
--- a/guide/arabic/css/hover-selector/index.md
+++ b/guide/arabic/css/hover-selector/index.md
@@ -18,17 +18,18 @@ CSS البناء :يحوم { اعلانات css }
 
 يطبق محدد التمرير فقط الأنماط المتوفرة في القاعدة عندما يدخل العنصر في حالة التمرير. هذا هو عندما يمرر المستخدم فوق العنصر باستخدام الماوس الخاص به.
 
- `button { 
-  color: white; 
-  background-color: green; 
- } 
- 
- button:hover { 
-  background-color: white; 
-  border: 2px solid green; 
-  color: green; 
- } 
-` 
+```css
+button {
+  color: white;
+  background-color: green;
+}
+
+button:hover {
+  background-color: white;
+  border: 2px solid green;
+  color: green;
+}
+``` 
 
 في المثال أعلاه ، يكون التصميم العادي للزر عبارة عن نص أبيض على زر أخضر. عندما يمرر المستخدم فوق الزر باستخدام الماوس الخاص به ، فإن القاعدة مع `:hover` سوف تصبح نشطة ، وسوف يتغير نمط الزر.
 
diff --git a/guide/arabic/css/id-selector/index.md b/guide/arabic/css/id-selector/index.md
index 1d566ff795..2c035c1d89 100644
--- a/guide/arabic/css/id-selector/index.md
+++ b/guide/arabic/css/id-selector/index.md
@@ -8,15 +8,17 @@ localeTitle: محدد الهوية
 
 ### بناء الجملة
 
- `#specified_id { /* styles */ } 
-` 
+```css
+#specified_id { /* styles */ }
+``` 
 
 يمكنك دمج محدد المعرّف مع أنواع أخرى من المحددات لتمييز عنصر محدد جدًا.
 
- `section#about:hover { color: blue; } 
- 
- div.classname#specified_id { color: green; } 
-` 
+```css
+section#about:hover { color: blue; }
+
+div.classname#specified_id { color: green; }
+``` 
 
 ### ملاحظة حول المعرفات
 
@@ -24,9 +26,9 @@ localeTitle: محدد الهوية
 
 تذكر ، يجب أن يتطابق محدد ID مع سمة معرف عنصر HTML.
 
- `
-<div id="specified_id"><!-- content --></div> 
-` 
+```html
+<div id="specified_id"><!-- content --></div>
+``` 
 
 ### النوعية
 
diff --git a/guide/arabic/css/image-galleries/index.md b/guide/arabic/css/image-galleries/index.md
index 155d44a800..390f674288 100644
--- a/guide/arabic/css/image-galleries/index.md
+++ b/guide/arabic/css/image-galleries/index.md
@@ -8,64 +8,65 @@ localeTitle: معرض الصور
 
 ## معرض الصور مثال
 
- `<html> 
- <head> 
- <style> 
- div.gallery { 
-    margin: 5px; 
-    border: 1px solid #ccc; 
-    float: left; 
-    width: 180px; 
- } 
- 
- div.gallery:hover { 
-    border: 1px solid #777; 
- } 
- 
- div.gallery img { 
-    width: 100%; 
-    height: 150px; 
- } 
- 
- div.desc { 
-    padding: 15px; 
-    text-align: center; 
- } 
- </style> 
- </head> 
- <body> 
- 
- <div class="gallery"> 
-  <a target="_blank" href="fjords.jpg"> 
-    <img src="https://www.dropbox.com/s/mdj3pjh4jgyeieo/cat1.jpg?raw=1" alt="Image of staring cat" width="300" height="200"> 
-  </a> 
-  <div class="desc">Add a description of the image here</div> 
- </div> 
- 
- <div class="gallery"> 
-  <a target="_blank" href="forest.jpg"> 
-    <img src="https://www.dropbox.com/s/i1ow97mcl6ubxhv/cat2.jpg?raw=1" alt="Image of fat cat" width="300" height="200"> 
-  </a> 
-  <div class="desc">Add a description of the image here</div> 
- </div> 
- 
- <div class="gallery"> 
-  <a target="_blank" href="lights.jpg"> 
-    <img src="https://www.dropbox.com/s/h6ks8v78ncwur31/cat3.jpg?raw=1" alt="Image of frolicking cat" width="300" height="200"> 
-  </a> 
-  <div class="desc">Add a description of the image here</div> 
- </div> 
- 
- <div class="gallery"> 
-  <a target="_blank" href="mountains.jpg"> 
-    <img src="https://www.dropbox.com/s/zda9llgop3j9bf7/cat4.jpg?raw=1" alt="Image of wide-eyed cat" width="300" height="200"> 
-  </a> 
-  <div class="desc">Add a description of the image here</div> 
- </div> 
- 
- </body> 
- </html> 
-` 
+```
+<html>
+<head>
+<style>
+div.gallery {
+    margin: 5px;
+    border: 1px solid #ccc;
+    float: left;
+    width: 180px;
+}
+
+div.gallery:hover {
+    border: 1px solid #777;
+}
+
+div.gallery img {
+    width: 100%;
+    height: 150px;
+}
+
+div.desc {
+    padding: 15px;
+    text-align: center;
+}
+</style>
+</head>
+<body>
+
+<div class="gallery">
+  <a target="_blank" href="fjords.jpg">
+    <img src="https://www.dropbox.com/s/mdj3pjh4jgyeieo/cat1.jpg?raw=1" alt="Image of staring cat" width="300" height="200">
+  </a>
+  <div class="desc">Add a description of the image here</div>
+</div>
+
+<div class="gallery">
+  <a target="_blank" href="forest.jpg">
+    <img src="https://www.dropbox.com/s/i1ow97mcl6ubxhv/cat2.jpg?raw=1" alt="Image of fat cat" width="300" height="200">
+  </a>
+  <div class="desc">Add a description of the image here</div>
+</div>
+
+<div class="gallery">
+  <a target="_blank" href="lights.jpg">
+    <img src="https://www.dropbox.com/s/h6ks8v78ncwur31/cat3.jpg?raw=1" alt="Image of frolicking cat" width="300" height="200">
+  </a>
+  <div class="desc">Add a description of the image here</div>
+</div>
+
+<div class="gallery">
+  <a target="_blank" href="mountains.jpg">
+    <img src="https://www.dropbox.com/s/zda9llgop3j9bf7/cat4.jpg?raw=1" alt="Image of wide-eyed cat" width="300" height="200">
+  </a>
+  <div class="desc">Add a description of the image here</div>
+</div>
+
+</body>
+</html>
+``` 
 
 ## النتائج:
 
diff --git a/guide/arabic/css/image-opacity-and-transparency/index.md b/guide/arabic/css/image-opacity-and-transparency/index.md
index 56fab8351c..11f8bdd388 100644
--- a/guide/arabic/css/image-opacity-and-transparency/index.md
+++ b/guide/arabic/css/image-opacity-and-transparency/index.md
@@ -33,13 +33,14 @@ localeTitle: تعتيم الصورة والشفافية
 
 المغلق img { التعتيم: 0.3 ؛ filter: alpha (opacity = 30)؛ } img: hover { opacity: 1.0؛ filter: alpha (opacity = 100)؛ }
 
- `[A codepen example to show a transparent image turning opaque on hover](https://codepen.io/lvcoulter/full/JrzxXa/) 
- <!--I cannot figure out how to embed a Codepen. I would really like to know--> 
- 
- You can create the opposite effect with less code since the image is 1.0 opacity by default 
- 
- Example: 
-` 
+```
+[A codepen example to show a transparent image turning opaque on hover](https://codepen.io/lvcoulter/full/JrzxXa/)
+<!--I cannot figure out how to embed a Codepen. I would really like to know-->
+
+You can create the opposite effect with less code since the image is 1.0 opacity by default
+
+Example:
+``` 
 
 المغلق img: hover { التعتيم: 0.3 ؛ filter: alpha (opacity = 30)؛ } \`\` \` [مثال codepen لإظهار الشفافية على الماوس](https://codepen.io/lvcoulter/full/xXBQoR/)
 
diff --git a/guide/arabic/css/layout/display-property/index.md b/guide/arabic/css/layout/display-property/index.md
index 0ffce6f4e6..64b1b1ca25 100644
--- a/guide/arabic/css/layout/display-property/index.md
+++ b/guide/arabic/css/layout/display-property/index.md
@@ -6,32 +6,34 @@ localeTitle: عرض الملكية
 
 تحدد خاصية `display` نوع المربع المستخدم لعنصر HTML. هناك 20 قيمة للكلمات الرئيسية الإجمالية ، على الرغم من استخدام 10 فقط بشكل شائع. هذه هي شائعة الاستخدام:
 
- `.none           {display: none} 
- .block          {display: block} 
- .inline-block   {display: inline-block} 
- .inline         {display: inline} 
- .flex           {display: flex} 
- .inline-flex    {display: inline-flex} 
- .inline-table   {display: inline-table} 
- .table          {display: table} 
- .inherit        {display: inherit} 
- .initial        {display: initial} 
-` 
+```css
+.none           {display: none}
+.block          {display: block}
+.inline-block   {display: inline-block}
+.inline         {display: inline}
+.flex           {display: flex}
+.inline-flex    {display: inline-flex}
+.inline-table   {display: inline-table}
+.table          {display: table}
+.inherit        {display: inherit}
+.initial        {display: initial}
+``` 
 
 **أمثلة شائعة:**
 
- `.myBox { 
-    display: block; 
- } 
- 
- .myContainer { 
-    display: flex; 
- } 
- 
- .inlineList ul > li { 
-    display: inline; 
- } 
-` 
+```css
+.myBox {
+    display: block;
+}
+
+.myContainer {
+    display: flex;
+}
+
+.inlineList ul > li {
+    display: inline;
+}
+``` 
 
 #### معلومات اكثر:
 
diff --git a/guide/arabic/css/layout/flexbox/flex-basis-property/index.md b/guide/arabic/css/layout/flexbox/flex-basis-property/index.md
index e85dddb6b1..83f700f47c 100644
--- a/guide/arabic/css/layout/flexbox/flex-basis-property/index.md
+++ b/guide/arabic/css/layout/flexbox/flex-basis-property/index.md
@@ -8,8 +8,9 @@ localeTitle: خصائص Flex Basis
 
 ## بناء الجملة
 
- `flex-basis: auto | content | <width> | <height>; 
-` 
+```css
+flex-basis: auto | content | <width> | <height>;
+``` 
 
 ## أساس المرن: السيارات
 
diff --git a/guide/arabic/css/layout/flexbox/flex-grow/index.md b/guide/arabic/css/layout/flexbox/flex-grow/index.md
index 91a54cf2b9..89c374a180 100644
--- a/guide/arabic/css/layout/flexbox/flex-grow/index.md
+++ b/guide/arabic/css/layout/flexbox/flex-grow/index.md
@@ -20,21 +20,22 @@ localeTitle: فليكس النمو
 
 HTML
 
- `
-<p class = "ten">1</p> 
- <p class = "twenty">2</p> 
-` 
+```html
+<p class = "ten">1</p>
+<p class = "twenty">2</p>
+``` 
 
 CSS
 
- `body { 
-  display:flex; 
- } 
- 
- p { 
-  flex-grow: 1; 
- } 
-` 
+```css
+body {
+  display:flex;
+}
+
+p {
+  flex-grow: 1;
+}
+``` 
 
 حدث شيئان
 
diff --git a/guide/arabic/css/layout/float-and-clear/index.md b/guide/arabic/css/layout/float-and-clear/index.md
index e82cb738c8..69d7b3603c 100644
--- a/guide/arabic/css/layout/float-and-clear/index.md
+++ b/guide/arabic/css/layout/float-and-clear/index.md
@@ -20,26 +20,29 @@ localeTitle: تعويم وواضحة
 
 ![float image for print layout](https://github.com/jamal-pb95/guides/blob/master/assets/css3-float-print-layout.png "CSS-الحيل تعويم قيمه img")
 
- `img { 
-    float: right; 
- } 
-` 
+```
+img {
+    float: right;
+}
+``` 
 
 يحدد هذا المثال أن الصورة يجب أن تطفو إلى اليمين في صفحة:
 
 ![Float image for web layout](https://github.com/jamal-pb95/guides/blob/master/assets/css3-float-web-text-wrap.png "تعويم img على شبكة الإنترنت")
 
- `img { 
-    float: left; 
- } 
-` 
+```
+img {
+    float: left;
+}
+``` 
 
 يحدد هذا المثال أن الصورة يجب أن تطفو إلى اليسار في صفحة:
 
- `img { 
-    float: none; 
- } 
-` 
+```
+img {
+    float: none;
+}
+``` 
 
 في المثال التالي ، سيتم عرض الصورة فقط في مكان حدوثها في النص ( `float: none;` ):
 
@@ -57,10 +60,11 @@ localeTitle: تعويم وواضحة
 
 ![unclear footer image](https://github.com/jamal-pb95/guides/blob/master/assets/unclearedfooter.png "صورة تذييل غير واضح") المصدر: CSS-TRICS
 
- `div { 
-    clear: left; 
- } 
-` 
+```
+div {
+    clear: left;
+}
+``` 
 
 ![clear footer image](https://github.com/jamal-pb95/guides/blob/master/assets/clearedfooter.png "صورة تذييل واضح") المصدر: CSS-TRICS
 
diff --git a/guide/arabic/css/layout/grid-layout/index.md b/guide/arabic/css/layout/grid-layout/index.md
index e18ed77d46..62e34330df 100644
--- a/guide/arabic/css/layout/grid-layout/index.md
+++ b/guide/arabic/css/layout/grid-layout/index.md
@@ -24,25 +24,27 @@ CSS Network Layout ، والمعروف ببساطة باسم الشبكة ، ه
 
 من الناحية المثالية ، عند إنشاء موقع ، يمكنك تصميمه مع الشبكة واستخدام Flex كحل بديل. يمكنك معرفة ما إذا كان المستعرض يدعم الشبكة باستخدام قاعدة CSS `@support` (يُعرف أيضًا باسم استعلام الميزات). إليك مثال على ذلك:
 
- `.container { 
-  display: grid; /* display grid by default */ 
- } 
- 
- @supports not (display: grid) { /* if grid is not supported by the browser */ 
-  .container { 
-    display: flex; /* display flex instead of grid */ 
-  } 
- } 
-` 
+```css
+.container {
+  display: grid; /* display grid by default */
+}
+
+@supports not (display: grid) { /* if grid is not supported by the browser */
+  .container {
+    display: flex; /* display flex instead of grid */
+  }
+}
+``` 
 
 ### ابدء
 
 لجعل أي عنصر شبكة ، تحتاج إلى تعيين خاصية `display` الخاصة بها إلى `grid` ، مثل:
 
- `.conatiner { 
-  display: grid; 
- } 
-` 
+```css
+.conatiner {
+  display: grid;
+}
+``` 
 
 وهذا كل شيء. لقد قمت للتو `.container` . يصبح كل عنصر داخل `.container` عنصر شبكة بشكل تلقائي.
 
@@ -50,9 +52,10 @@ CSS Network Layout ، والمعروف ببساطة باسم الشبكة ، ه
 
 الصفوف والأعمدة
 
- `grid-template-columns: 1fr 1fr 1fr 1fr; 
- grid-template-rows: auto 300px; 
-` 
+```css
+grid-template-columns: 1fr 1fr 1fr 1fr;
+grid-template-rows: auto 300px;
+``` 
 
 المناطق
 
@@ -65,39 +68,41 @@ CSS Network Layout ، والمعروف ببساطة باسم الشبكة ، ه
 
 أو
 
- `grid-template-areas: 
-  "header header header header" 
-  "nav main main sidebar"; 
-` 
+```css
+grid-template-areas:
+  "header header header header"
+  "nav main main sidebar";
+``` 
 
 ### مناطق الشبكة
 
 فيما يلي بعض نماذج التعليمات البرمجية حول كيفية تحديد مناطق الشبكة وتعيينها
 
- `.site { 
-  display: grid; 
-  grid-template-areas: /* applied to grid container */ 
-    "head head" /* you're assigning cells to areas by giving the cells an area name */ 
-    "nav  main" /* how many values kind of depends on how many cells you have in the grid */ 
-    "nav  foot"; 
- } 
- 
- .site > header { 
-  grid-area: head; 
- } 
- 
- .site > nav { 
-  grid-area: nav; 
- } 
- 
- .site > main { 
-    grid-area: main; 
- } 
- 
- .site > footer { 
-    grid-area: foot; 
- } 
-` 
+```css
+.site {
+  display: grid;
+  grid-template-areas: /* applied to grid container */
+    "head head" /* you're assigning cells to areas by giving the cells an area name */
+    "nav  main" /* how many values kind of depends on how many cells you have in the grid */
+    "nav  foot";
+}
+
+.site > header {
+  grid-area: head;
+}
+
+.site > nav {
+  grid-area: nav;
+}
+
+.site > main {
+    grid-area: main;
+}
+
+.site > footer {
+    grid-area: foot;
+}
+``` 
 
 ### وحدة `fr`
 
@@ -111,25 +116,26 @@ CSS Network Layout ، والمعروف ببساطة باسم الشبكة ، ه
 
 الحل البسيط هو تغيير `grid-template-areas` أساس حجم الشاشة. يمكنك أيضًا **تغيير عدد الأعمدة والصفوف بناءً على حجم الشاشة** أيضًا. هذا هو بديل أنظف وأبسط بكثير لنظام Bootstrap الشبكة ( `col-xs-8 col-sm-6 col-md-4 col-lg-3` ).
 
- `.site { 
-  display: grid; 
-  grid-template-columns: 1fr 1fr; 
-  grid-template-areas: 
-    "title title" 
-    "main header" 
-    "main sidebar" 
- } 
- 
- @media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */ 
-  .site { 
-    grid-template-columns: 2fr 1fr 1fr; 
-    grid-template-areas: 
-      "title title title" 
-      "main header header" 
-      "main sidebar footer" 
-  } 
- } 
-` 
+```css
+.site {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas:
+    "title title"
+    "main header"
+    "main sidebar"
+}
+
+@media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */
+  .site {
+    grid-template-columns: 2fr 1fr 1fr;
+    grid-template-areas:
+      "title title title"
+      "main header header"
+      "main sidebar footer"
+  }
+}
+``` 
 
 انظر [شبكة](https://codepen.io/aamnah/pen/RLVVoE/) القلم [المغلق من خلال المثال - 2 (مناطق الشبكة + شبكة الفجوة) من](https://codepen.io/aamnah/pen/RLVVoE/) قبل Aamnah أكرم ( [aamnah](https://codepen.io/aamnah) ) على [CodePen](https://codepen.io) .
 
diff --git a/guide/arabic/css/legal-color-values/index.md b/guide/arabic/css/legal-color-values/index.md
index 04fb38b7ce..1e39a98eed 100644
--- a/guide/arabic/css/legal-color-values/index.md
+++ b/guide/arabic/css/legal-color-values/index.md
@@ -27,23 +27,24 @@ localeTitle: قيم اللون القانونية
 
 هنا ألوان عرافة مختلفة. ابحث عن المثال المباشر على https://jsfiddle.net/qg9revp4/2/.
 
- `#divRed{ 
-  color: #ff0000; /* red */ 
- } 
- 
- #divGreen{ 
-  color: #00ff00; /* green */ 
- } 
- 
- #divBlue{ 
-  color: #0000ff; /* blue */ 
- } 
- 
- #divWhite{ 
-  color: #ffffff; /* white */ 
-  background: #000000; /* black background, so that the text is visible */ 
- } 
-` 
+```css
+#divRed{
+  color: #ff0000; /* red */
+}
+
+#divGreen{
+  color: #00ff00; /* green */
+}
+
+#divBlue{
+  color: #0000ff; /* blue */
+}
+
+#divWhite{
+  color: #ffffff; /* white */
+  background: #000000; /* black background, so that the text is visible */
+}
+``` 
 
 ### ألوان RGB
 
@@ -59,23 +60,24 @@ localeTitle: قيم اللون القانونية
 
 هنا ألوان RGB مختلفة. ابحث عن المثال الحي على https://jsfiddle.net/vspepeth/1/.
 
- `#divRed{ 
-  color: rgb(255, 0, 0); /* red */ 
- } 
- 
- #divGreen{ 
-  color: rgb(0, 255, 0); /* green */ 
- } 
- 
- #divBlue{ 
-  color: rgb(0, 0, 255); /* blue */ 
- } 
- 
- #divWhite{ 
-  color: rgb(255, 255, 255); /* white */ 
-  background: rgb(0, 0, 0); /* black background, so that the text is visible */ 
- } 
-` 
+```css
+#divRed{
+  color: rgb(255, 0, 0); /* red */
+}
+
+#divGreen{
+  color: rgb(0, 255, 0); /* green */
+}
+
+#divBlue{
+  color: rgb(0, 0, 255); /* blue */
+}
+
+#divWhite{
+  color: rgb(255, 255, 255); /* white */
+  background: rgb(0, 0, 0); /* black background, so that the text is visible */
+}
+``` 
 
 ### ألوان RGBA
 
@@ -91,23 +93,24 @@ localeTitle: قيم اللون القانونية
 
 هنا مختلف ألوان RGBA. ابحث عن المثال المباشر على https://jsfiddle.net/hq0ngwg2/1/.
 
- `#divRed{ 
-  color: rgba(255, 0, 0, 0.3); /* red with opacity */ 
- } 
- 
- #divGreen{ 
-  color: rgba(0, 255, 0, 0.7); /* green with opacity */ 
- } 
- 
- #divBlue{ 
-  color: rgba(0, 0, 255, 0.5); /* blue with opacity */ 
- } 
- 
- #divWhite{ 
-  color: rgba(255, 255, 255, 0.6); /* white with opacity */ 
-  background: rgba(0, 0, 0, 0.8); /* black background with opacity */ 
- } 
-` 
+```css
+#divRed{
+  color: rgba(255, 0, 0, 0.3); /* red with opacity */
+}
+
+#divGreen{
+  color: rgba(0, 255, 0, 0.7); /* green with opacity */
+}
+
+#divBlue{
+  color: rgba(0, 0, 255, 0.5); /* blue with opacity */
+}
+
+#divWhite{
+  color: rgba(255, 255, 255, 0.6); /* white with opacity */
+  background: rgba(0, 0, 0, 0.8); /* black background with opacity */
+}
+``` 
 
 ### ألوان HSL
 
@@ -134,19 +137,20 @@ HSL تعني الصباغة والتشبع والخفة. يتم تحديده ك
 
 ابحث عن المثال المباشر على https://jsfiddle.net/g10zpL28/1/.
 
- `#div1 { 
-  background-color: hsl(240, 100%, 50%); /* blue */ 
- } 
- #div2 { 
-  background-color: hsl(195, 53%, 79%); /* light blue */ 
- } 
- #div3 { 
-  background-color: hsl(240, 100%, 25%); /* dark blue */ 
- } 
- #div4 { 
-  background-color: hsl(187, 75%, 86%); /* pastel blue */ 
- } 
-` 
+```css
+#div1 {
+  background-color: hsl(240, 100%, 50%); /* blue */
+}
+#div2 {
+  background-color: hsl(195, 53%, 79%); /* light blue */
+}
+#div3 {
+  background-color: hsl(240, 100%, 25%); /* dark blue */
+}
+#div4 {
+  background-color: hsl(187, 75%, 86%); /* pastel blue */
+}
+``` 
 
 ### ألوان HSLA
 
@@ -171,19 +175,20 @@ HSLA تعني التدرج والتشبع والخفة وقناة ألفا. تم
 
 فيما يلي أمثلة على ألوان HSLA. انظر لهم يعيشون في https://jsfiddle.net/2Lxscgfy/1/.
 
- `#div1 { 
-  background-color: hsla(240, 100%, 50%, 0.5); /* blue with transparency */ 
- } 
- #div2 { 
-  background-color: hsla(195, 53%, 79%, 0.8); /* light blue with transparency */ 
- } 
- #div3 { 
-  background-color: hsla(240, 100%, 25%, 0.3); /* dark blue with transparency */ 
- } 
- #div4 { 
-  background-color: hsla(187, 75%, 86%, 1.0); /* pastel blue with transparency */ 
- } 
-` 
+```css
+#div1 {
+  background-color: hsla(240, 100%, 50%, 0.5); /* blue with transparency */
+}
+#div2 {
+  background-color: hsla(195, 53%, 79%, 0.8); /* light blue with transparency */
+}
+#div3 {
+  background-color: hsla(240, 100%, 25%, 0.3); /* dark blue with transparency */
+}
+#div4 {
+  background-color: hsla(187, 75%, 86%, 1.0); /* pastel blue with transparency */
+}
+``` 
 
 ### أسماء اللون المعرفة مسبقا
 
@@ -195,22 +200,23 @@ HSLA تعني التدرج والتشبع والخفة وقناة ألفا. تم
 
 فيما يلي بعض أسماء الألوان المستخدمة. تحقق من المثال الحي على https://jsfiddle.net/rqygumpy/. ابحث عن القائمة الكاملة في [مستندات MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Color_keywords) .
 
- `#div1{ 
-  color: BlueViolet; 
- } 
- 
- #div2{ 
-  color: RebeccaPurple; 
- } 
- 
- #div3{ 
-  color: RoyalBlue; 
- } 
- 
- #div4{ 
-  color: Salmon; 
- } 
-` 
+```css
+#div1{
+  color: BlueViolet;
+}
+
+#div2{
+  color: RebeccaPurple;
+}
+
+#div3{
+  color: RoyalBlue;
+}
+
+#div4{
+  color: Salmon;
+}
+``` 
 
 #### معلومات اكثر:
 
diff --git a/guide/arabic/css/linear-gradient/index.md b/guide/arabic/css/linear-gradient/index.md
index 85ed0872ba..48c03343d0 100644
--- a/guide/arabic/css/linear-gradient/index.md
+++ b/guide/arabic/css/linear-gradient/index.md
@@ -20,8 +20,9 @@ localeTitle: الخطي التدرج
 
 لإنشاء تدرج خطي ، يجب تحديد إيقافين للألوان على الأقل. (وهي الألوان التي يتم إنشاء الانتقالات بينها). يتم الإعلان على إما **الخلفية** أو خصائص **الصورة الخلفية** .
 
- `background: linear-gradient(direction, colour-stop1, colour-stop2, ...); 
-` 
+```
+background: linear-gradient(direction, colour-stop1, colour-stop2, ...);
+``` 
 
 **ملاحظة: في حالة عدم تحديد أي اتجاه ، يكون النقل من أعلى إلى أسفل بشكل افتراضي**
 
@@ -29,8 +30,9 @@ localeTitle: الخطي التدرج
 
 **من اعلى لاسفل :**
 
- `background: linear-gradient(red, yellow); 
-` 
+```
+background: linear-gradient(red, yellow);
+``` 
 
 ![من اعلى لاسفل](https://cdn.discordapp.com/attachments/261391445074771978/371702268803809301/image.png)
 
@@ -38,8 +40,9 @@ localeTitle: الخطي التدرج
 
 لجعله اليسار إلى اليمين، يمكنك إضافة معلمة إضافية في بداية الخطية التدرج () بدءا من كلمة **الذي** يشير إلى الاتجاه:
 
- `background: linear-gradient(to right, red , yellow); 
-` 
+```
+background: linear-gradient(to right, red , yellow);
+``` 
 
 ![من اليسار إلى اليمين](https://cdn.discordapp.com/attachments/261391445074771978/371702990161051648/image.png)
 
@@ -58,13 +61,15 @@ localeTitle: الخطي التدرج
 
 يمكنك أيضًا استخدام الزوايا ، لتكون أكثر دقة في تحديد اتجاه التدرج:
 
- `background: linear-gradient(angle, colour-stop1, colour-stop2); 
-` 
+```
+background: linear-gradient(angle, colour-stop1, colour-stop2);
+``` 
 
 يتم تحديد الزاوية كزاوية بين الخط الأفقي وخط التدرج.
 
- `background: linear-gradient(90deg, red, yellow); 
-` 
+```
+background: linear-gradient(90deg, red, yellow);
+``` 
 
 ![90 درجة](https://cdn.discordapp.com/attachments/261391445074771978/371710718698848256/image.png)
 
@@ -72,8 +77,9 @@ localeTitle: الخطي التدرج
 
 لا تقتصر على لونين فقط ، يمكنك استخدام العديد من الألوان المفصولة بفواصل كما تريد.
 
- `background: linear-gradient(red, yellow, green); 
-` 
+```
+background: linear-gradient(red, yellow, green);
+``` 
 
 ![تدرج مع 3 توقفات لونية](https://cdn.discordapp.com/attachments/261391445074771978/371706534591201281/image.png)
 
@@ -83,8 +89,9 @@ localeTitle: الخطي التدرج
 
 لا يمكنك استخدام التدرجات اللونية فقط للانتقال باستخدام ألوان باهتة ، ولكن يمكنك أيضًا استخدامها للتغيير من لون واحد إلى لون خالص آخر على الفور
 
- `background: linear-gradient(to right,red 15%, yellow 15%); 
-` 
+```
+background: linear-gradient(to right,red 15%, yellow 15%);
+``` 
 
 ![توقف اللون الصلب](https://cdn.discordapp.com/attachments/261391445074771978/371716730046775318/image.png)
 
diff --git a/guide/arabic/css/margins/index.md b/guide/arabic/css/margins/index.md
index 79afc2fdbe..ad8de574e3 100644
--- a/guide/arabic/css/margins/index.md
+++ b/guide/arabic/css/margins/index.md
@@ -10,10 +10,11 @@ localeTitle: هوامش
 
 ## بناء الجملة
 
- `.element { 
-    margin: margin-top || margin-right || margin-bottom || margin-left; 
- } 
-` 
+```css
+.element {
+    margin: margin-top || margin-right || margin-bottom || margin-left;
+}
+``` 
 
 يمكن تحديد هذه الخاصية باستخدام قيم واحدة أو اثنتين أو ثلاثة أو أربعة.
 
diff --git a/guide/arabic/css/navigation-bars/index.md b/guide/arabic/css/navigation-bars/index.md
index 811ee56d32..73c0a68af7 100644
--- a/guide/arabic/css/navigation-bars/index.md
+++ b/guide/arabic/css/navigation-bars/index.md
@@ -19,44 +19,45 @@ localeTitle: أشرطة الملاحة
 
 هناك جزءان لأي التنقل: HTML و CSS. هذا مجرد مثال سريع.
 
- `
-<nav class="myNav">                                 <!-- Any element can be used here --> 
-    <ul> 
-        <li><a href="index.html">Home</a></li> 
-        <li><a href="about.html">About</a></li> 
-        <li><a href="contact.html">Contact</a></li> 
-    </ul> 
- </nav> 
-` 
+```html
+<nav class="myNav">                                 <!-- Any element can be used here -->
+    <ul>
+        <li><a href="index.html">Home</a></li>
+        <li><a href="about.html">About</a></li>
+        <li><a href="contact.html">Contact</a></li>
+    </ul>
+</nav>
+``` 
 
- `/* Define the main Navigation block */ 
- .myNav { 
-    display: block; 
-    height: 50px; 
-    line-height: 50px; 
-    background-color: #333; 
- } 
- /* Remove bullets, margin and padding */ 
- .myNav ul { 
-    list-style: none; 
-    padding: 0; 
-    margin: 0; 
- } 
- .myNav li { 
-    float: left; 
-    /* Or you can use display: inline; */ 
- } 
- /* Define the block styling for the links */ 
- .myNav li a { 
-    display: inline-block; 
-    text-align: center; 
-    padding: 14px 16px; 
- } 
- /* This is optional, however if you want to display the active link differently apply a background to it */ 
- .myNav li a.active { 
-    background-color: #3786E1; 
- } 
-` 
+```css
+/* Define the main Navigation block */
+.myNav {
+    display: block;
+    height: 50px;
+    line-height: 50px;
+    background-color: #333;
+}
+/* Remove bullets, margin and padding */
+.myNav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+.myNav li {
+    float: left;
+    /* Or you can use display: inline; */
+}
+/* Define the block styling for the links */
+.myNav li a {
+    display: inline-block;
+    text-align: center;
+    padding: 14px 16px;
+}
+/* This is optional, however if you want to display the active link differently apply a background to it */
+.myNav li a.active {
+    background-color: #3786E1;
+}
+``` 
 
 #### معلومات اكثر:
 
diff --git a/guide/arabic/css/object-fit/index.md b/guide/arabic/css/object-fit/index.md
index aebe33df29..41ba0911bd 100644
--- a/guide/arabic/css/object-fit/index.md
+++ b/guide/arabic/css/object-fit/index.md
@@ -12,10 +12,11 @@ localeTitle: كائن صالح
 
 ## بناء الجملة
 
- `.element { 
-    object-fit: fill || contain || cover || none || scale-down; 
- } 
-` 
+```css
+.element {
+    object-fit: fill || contain || cover || none || scale-down;
+}
+``` 
 
 ## القيم
 
diff --git a/guide/arabic/css/overflow/index.md b/guide/arabic/css/overflow/index.md
index e068d21438..ffc7e77904 100644
--- a/guide/arabic/css/overflow/index.md
+++ b/guide/arabic/css/overflow/index.md
@@ -23,29 +23,33 @@ localeTitle: فيض
 
 ### مرئي:
 
- `.box-element { overflow: visible; } 
-` 
+```css
+.box-element { overflow: visible; }
+``` 
 
 ![صورة المثال](https://s26.postimg.org/gweu6g5yh/1-vissible.png)
 
 ### المخفية:
 
- `.box-element { overflow: hidden; } 
-` 
+```css
+.box-element { overflow: hidden; }
+``` 
 
 ![صورة المثال](https://s26.postimg.org/l49mf77e1/2-hidden.png)
 
 ### انتقل:
 
- `.box-element { overflow: scroll; } 
-` 
+```css
+.box-element { overflow: scroll; }
+``` 
 
 ![صورة المثال](https://s26.postimg.org/d8z30dxrd/3-scroll.png)
 
 ### تلقاءي:
 
- `.box-element { overflow: auto; } 
-` 
+```css
+.box-element { overflow: auto; }
+``` 
 
 ![صورة المثال](https://s26.postimg.org/z5q7ei0bt/4-autoank.png)
 
diff --git a/guide/arabic/css/padding/index.md b/guide/arabic/css/padding/index.md
index ad556f285e..2f3d6996d4 100644
--- a/guide/arabic/css/padding/index.md
+++ b/guide/arabic/css/padding/index.md
@@ -10,10 +10,11 @@ localeTitle: حشوة
 
 ## بناء الجملة
 
- `.element { 
-    padding: [padding-top] || [padding-right] || [padding-bottom] || [padding-left]; 
- } 
-` 
+```css
+.element {
+    padding: [padding-top] || [padding-right] || [padding-bottom] || [padding-left];
+}
+``` 
 
 يمكن تحديد هذه الخاصية باستخدام قيم واحدة أو اثنتين أو ثلاثة أو أربعة.
 
diff --git a/guide/arabic/css/properties/background-color-property/index.md b/guide/arabic/css/properties/background-color-property/index.md
index c88d668e70..752ecf2432 100644
--- a/guide/arabic/css/properties/background-color-property/index.md
+++ b/guide/arabic/css/properties/background-color-property/index.md
@@ -8,18 +8,19 @@ localeTitle: خاصية لون الخلفية
 
 **مثال:**
 
- `body { 
-    background-color: crimson; 
- } 
- 
- div { 
-    background-color: #ffffff; 
- } 
- 
- .myClass { 
-    background-color: rgba(0, 0, 0, 0.5); 
- } 
-` 
+```css
+body {
+    background-color: crimson;
+}
+
+div {
+    background-color: #ffffff;
+}
+
+.myClass {
+    background-color: rgba(0, 0, 0, 0.5);
+}
+``` 
 
 #### قيم الملكية:
 
diff --git a/guide/arabic/css/properties/background-property/index.md b/guide/arabic/css/properties/background-property/index.md
index 3f29770723..6f101931e9 100644
--- a/guide/arabic/css/properties/background-property/index.md
+++ b/guide/arabic/css/properties/background-property/index.md
@@ -19,26 +19,27 @@ localeTitle: خاصية الخلفية
 
 التركيب 1 :
 
- `body { 
-  /* Using a <background-color> */ 
-  background: green; 
- } 
- 
- .error { 
-  /* Using a <bg-image> and <repeat-style> */ 
-  background: url("test.jpg") repeat-y; 
- } 
- 
- header { 
-  /* Using a <box> and <background-color> */ 
-  background: border-box red; 
- } 
- 
- .topbanner { 
-  /* A single image, centered and scaled */ 
-  background: no-repeat center/80% url("../img/image.png"); 
- } 
-` 
+```css
+body {
+  /* Using a <background-color> */
+  background: green;
+}
+
+.error {
+  /* Using a <bg-image> and <repeat-style> */
+  background: url("test.jpg") repeat-y;
+}
+
+header {
+  /* Using a <box> and <background-color> */
+  background: border-box red;
+}
+
+.topbanner {
+  /* A single image, centered and scaled */
+  background: no-repeat center/80% url("../img/image.png");
+}
+``` 
 
 ### مصادر
 
diff --git a/guide/arabic/css/properties/background-repeat-property/index.md b/guide/arabic/css/properties/background-repeat-property/index.md
index f33a79d881..b46d6c19fa 100644
--- a/guide/arabic/css/properties/background-repeat-property/index.md
+++ b/guide/arabic/css/properties/background-repeat-property/index.md
@@ -10,8 +10,9 @@ localeTitle: تكرار الخلفية الملكية
 
 بناء الجملة:
 
- `background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit; 
-` 
+```css
+background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
+``` 
 
 *   تكرار: سيتم تكرار صورة الخلفية عموديًا وأفقيًا. هذا هو الافتراضي
     
@@ -28,19 +29,21 @@ localeTitle: تكرار الخلفية الملكية
 
 أمثلة: لتكرار الصورة أفقياً وعمودياً
 
- `body { 
-    background-image:url(smiley.gif); 
-    background-repeat:repeat; 
- } 
-` 
+```css
+body {
+    background-image:url(smiley.gif);
+    background-repeat:repeat;
+}
+``` 
 
 لتكرار الصورة أفقيا
 
- `body { 
-    background-image:url(smiley.gif); 
-    background-repeat:repeat-x; 
- } 
-` 
+```css
+body {
+    background-image:url(smiley.gif);
+    background-repeat:repeat-x;
+}
+``` 
 
 #### معلومات اكثر:
 
diff --git a/guide/arabic/css/properties/clear-property/index.md b/guide/arabic/css/properties/clear-property/index.md
index a1d3024b8e..1355a06c19 100644
--- a/guide/arabic/css/properties/clear-property/index.md
+++ b/guide/arabic/css/properties/clear-property/index.md
@@ -10,13 +10,14 @@ localeTitle: واضح الممتلكات
 
 يتم استخدام هذه الخاصية بعد استخدام الخاصية `float` "مسح" خارج `float` .
 
- `clear: none; 
- clear: left; 
- clear: right; 
- clear: both; 
- clear: inline-start; 
- clear: inline-end; 
-` 
+```css
+clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+``` 
 
 ### مثال:
 
diff --git a/guide/arabic/css/properties/color-property/index.md b/guide/arabic/css/properties/color-property/index.md
index 22e26db86b..7fba3e9328 100644
--- a/guide/arabic/css/properties/color-property/index.md
+++ b/guide/arabic/css/properties/color-property/index.md
@@ -10,45 +10,51 @@ localeTitle: خاصية اللون
 
 *   بالاسم (ملاحظة: هذا يعمل فقط مع ألوان معينة)
 
- `h1{ 
-    color: blue; 
- } 
-` 
+```css
+h1{
+    color: blue;
+}
+``` 
 
 *   سداسي عشري (تم تحديده كـ #rrggbb)
 
- `h1{ 
-    color:  #0000ff; 
- } 
-` 
+```css
+h1{
+    color:  #0000ff;
+}
+``` 
 
 *   RGB (تم تحديده على أنه rgb (r، g، b))
 
- `h1{ 
-    color: rgb(0, 0, 255); 
- } 
-` 
+```css
+h1{
+    color: rgb(0, 0, 255);
+}
+``` 
 
 *   RGBA (تم تحديده كـ rgba (r، g، b، alpha))
 
- `h1{ 
-    color: rgba(0, 0, 255, 0.5); 
- } 
-` 
+```css
+h1{
+    color: rgba(0, 0, 255, 0.5);
+}
+``` 
 
 *   HSL (هوى ، خفة ، تشبع)
 
- `h1{ 
-    color: hsl(240, 100%, 50%); 
- } 
-` 
+```css
+h1{
+    color: hsl(240, 100%, 50%);
+}
+``` 
 
 *   HSLA (هوى ، خفة ، تشبع ، ألفا)
 
- `h1{ 
-    color: hsl(240, 100%, 50%, 0.5); 
- } 
-` 
+```css
+h1{
+    color: hsl(240, 100%, 50%, 0.5);
+}
+``` 
 
 ## خصائص CSS الألوان موضحة
 
diff --git a/guide/arabic/css/properties/css3-text-shadow-property/index.md b/guide/arabic/css/properties/css3-text-shadow-property/index.md
index 4399097e14..1ee360e8a3 100644
--- a/guide/arabic/css/properties/css3-text-shadow-property/index.md
+++ b/guide/arabic/css/properties/css3-text-shadow-property/index.md
@@ -8,8 +8,9 @@ localeTitle: خاصية الظل النص CSS3
 
 ظل النص: X-offset Y-offset blur-radius color
 
- `**Example :** 
-` 
+```
+**Example :**
+``` 
 
 المغلق ص { الظل النص: 2px 2px 8px # FF0000؛ } \`\` \`