fix: converted single to triple backticks6 (#36233)

guide/arabic/csharp/foreach/index.md

@@ -23,7 +23,8 @@ localeTitle: Foreach حلقة
 
 ### انتاج:
 
- `> We have Jim 
+```sh
- > We have Jane 
+> We have Jim
- > We have Jack 
+> We have Jane
-`
+> We have Jack
+```

guide/arabic/csharp/if-else-statement/index.md

@@ -8,32 +8,34 @@ localeTitle: إذا كان البيان الآخر
 
 ## مثال
 
- `if(boolean expression) 
+```
- { 
+if(boolean expression)
- // execute this code block if expression evalutes to true 
+{
- } 
+// execute this code block if expression evalutes to true
- else 
+}
- { 
+else
- // always execute this code block when above if expression is false 
+{
- } 
+// always execute this code block when above if expression is false
- 
+}
- 
+
- int Price = 30; 
+
- 
+int Price = 30;
- If (Price = 30) 
+
- { 
+If (Price = 30)
-  Console.WriteLine("Price is equal to 30."); 
+{
- } 
+  Console.WriteLine("Price is equal to 30.");
- 
+}
- Else 
+
- { 
+Else
-  Console.WriteLine("Price is not equal to 30."); 
+{
- } 
+  Console.WriteLine("Price is not equal to 30.");
-` 
+}
+``` 
 
 بما أننا أعلنا بالفعل أن السعر لدينا هو 30 ، سيكون هذا هو الناتج المتوقع.
 
 ## انتاج |
 
- `Price is equal to 30. 
+```
-`
+Price is equal to 30.
+```

guide/arabic/csharp/indeterminate-parameters/index.md

@@ -28,8 +28,9 @@ localeTitle: معلمات غير محددة
 
 ## انتاج:
 
- `> Parameter 0 is 1 
+```
- > Parameter 1 is 2 
+> Parameter 0 is 1
- > Parameter 2 is 3 
+> Parameter 1 is 2
- > Parameter 0 is 4 
+> Parameter 2 is 3
-`
+> Parameter 0 is 4
+```

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);
- }
+}
-`
+```
 
 * * *
 

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);
+``` 
 
 ## مثال
 

guide/arabic/csharp/linq/any/index.md

@@ -8,28 +8,30 @@ localeTitle: أي
 
 ### التوقيع
 
- `public static bool Any<TSource>(this IEnumerable<TSource> source); 
+```csharp
- public static bool Any<TSource>(this IEnumerable<TSource> source, Func<TSource, bool> predicate); 
+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>() { 
+```csharp
-    new Fruit() { Id = 1, Name = "Orange",     Color = "Orange", Quantity: 3   }, 
+var fruits = new List<Fruit>() {
-    new Fruit() { Id = 2, Name = "Strawberry", Color = "Red",    Quantity: 12  }, 
+    new Fruit() { Id = 1, Name = "Orange",     Color = "Orange", Quantity: 3   },
-    new Fruit() { Id = 3, Name = "Grape",      Color = "Purple", Quantity: 25  }, 
+    new Fruit() { Id = 2, Name = "Strawberry", Color = "Red",    Quantity: 12  },
-    new Fruit() { Id = 4, Name = "Pineapple",  Color = "Yellow", Quantity: 1   }, 
+    new Fruit() { Id = 3, Name = "Grape",      Color = "Purple", Quantity: 25  },
-    new Fruit() { Id = 5, Name = "Apple",      Color = "Red",    Quantity: 5   }, 
+    new Fruit() { Id = 4, Name = "Pineapple",  Color = "Yellow", Quantity: 1   },
-    new Fruit() { Id = 6, Name = "Mango",      Color = "Yellow", Quantity: 2   } 
+    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 
+// 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 
+// Any Fruit with color Green
- 
+var anyGreen = fruits.Any(f => f.Color == "Green"); // false
- var hasFruits = fruits.Any(); // true 
+
- 
+var hasFruits = fruits.Any(); // true
- var hasYellowFruit = fruits.Any(f => f.Color == "Yellow"); // true 
+
-`
+var hasYellowFruit = fruits.Any(f => f.Color == "Yellow"); // true
+```

guide/arabic/csharp/linq/single-or-default/index.md

@@ -13,16 +13,17 @@ localeTitle: واحد أو افتراضي
 
 ## مثال
 
- `var fruits = new List<Fruit>() { 
+```csharp
-    new Fruit() { Id = 1, Name = "Orange",     Color = "Orange", Quantity: 3   }, 
+var fruits = new List<Fruit>() {
-    new Fruit() { Id = 2, Name = "Strawberry", Color = "Red",    Quantity: 12  }, 
+    new Fruit() { Id = 1, Name = "Orange",     Color = "Orange", Quantity: 3   },
-    new Fruit() { Id = 3, Name = "Grape",      Color = "Purple", Quantity: 25  }, 
+    new Fruit() { Id = 2, Name = "Strawberry", Color = "Red",    Quantity: 12  },
-    new Fruit() { Id = 4, Name = "Pineapple",  Color = "Yellow", Quantity: 1   }, 
+    new Fruit() { Id = 3, Name = "Grape",      Color = "Purple", Quantity: 25  },
-    new Fruit() { Id = 5, Name = "Apple",      Color = "Red",    Quantity: 5   }, 
+    new Fruit() { Id = 4, Name = "Pineapple",  Color = "Yellow", Quantity: 1   },
-    new Fruit() { Id = 6, Name = "Mango",      Color = "Yellow", Quantity: 2   } 
+    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 purpleFruit = fruits.SingleOrDefault(f => f.Color == "Purple"); // Grape
- var greenFruit = fruits.SingleOrDefault(f => f.Color == "Green"); // null 
+
-`
+var greenFruit = fruits.SingleOrDefault(f => f.Color == "Green"); // null
+```

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"))؛
 

guide/arabic/csharp/nameof-expressions/index.md

@@ -8,21 +8,23 @@ localeTitle: nameof التعبيرات
 
 # #
 
- `public void ProcessStudent(Student student) 
+```
- { 
+public void ProcessStudent(Student student)
-    if (student == null) throw new ArgumentNullException("student"); 
+{
- } 
+    if (student == null) throw new ArgumentNullException("student");
-` 
+}
+``` 
 
 ومع ذلك ، إذا كان سيتم إعادة تسمية المعلمة الطالب ، يجب عليك أن تتذكر أيضا تعديل سلسلة حرفية. الآن مع تعبير nameof ، لن تحتاج إلى استخدام القيم الحرفية للسلسلة وسيتمكن المترجم من تحذيرك إذا كنت تستخدم اسمًا غير صحيح.
 
 # #
 
- `public void ProcessStudent(Student student) 
+```
- { 
+public void ProcessStudent(Student student)
-    if (student == null) throw new ArgumentNullException(nameof(student)); 
+{
- } 
+    if (student == null) throw new ArgumentNullException(nameof(student));
-` 
+}
+``` 
 
 بعض الأمثلة من حيث قد تكون تعبيرات nameof مفيدة تشمل:
 

guide/arabic/csharp/nested-if-statement/index.md

@@ -6,19 +6,21 @@ localeTitle: متداخلة If بيان
 
 يتم استخدام البيان المتداخل If عند إنشاء عبارة if تريد نقطة ثانوية للتحقق أو إذا كانت عبارة داخلها.
 
- `int Price = 100; 
+```
- int Quantity = 20; 
+int Price = 100;
- 
+int Quantity = 20;
- if (Price == 100) 
+
- { 
+if (Price == 100)
-  if (Quantity == 20) 
+{
-  { 
+  if (Quantity == 20)
-    Console.WriteLine("Price of an item is 200, and we have 20 in quantity."); 
+  {
-  } 
+    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. 
+```
-`
+Price of an item is 200, and we have 20 in quantity.
+```

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; 
+```cs
- 
+string name = null;
- string clientName = name ?? "John Doe"; 
- 
- Console.WriteLine(clientName); 
-` 
 
- `> John Doe 
+string clientName = name ?? "John Doe";
-` 
+
+Console.WriteLine(clientName);
+``` 
+
+```cs
+> John Doe
+``` 
 
 ## مثال 2
 
 نظرًا لأن `name` ليس `null` ، فسيتم تعيين `name` `clientName` ، وهو "Jane Smith".
 
- `string name = "Jane Smith"; 
+```cs
- 
+string name = "Jane Smith";
- string clientName = name ?? "John Doe"; 
- 
- Console.WriteLine(clientName); 
-` 
 
- `> 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";
+``` 
 
 ## المراجع
 

guide/arabic/csharp/null-conditional-operator/index.md

@@ -6,29 +6,33 @@ localeTitle: مشغل شرطي لاغية
 
 تسمح عوامل الشرطية خالية التحقق خالية مع الحد الأدنى من التعليمات البرمجية. على سبيل المثال ، إذا كان لديك متغير الموظف من نوع الموظف مع خاصية من نوع العنوان ، قد تفعل فحص فارغ كما يلي:
 
- `Address address = null; 
+```csharp
- if (employee != null) 
+Address address = null;
- { 
+if (employee != null)
-    address = employee.Address; 
+{
- } 
+    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() 
+```csharp
- { 
+public string GetStringValue()
-    return null; 
+{
- } 
+    return null;
- 
+}
- // Display the value of s if s is NOT null. If x IS null, display the string "It was null." 
+
- 
+// Display the value of s if s is NOT null. If x IS null, display the string "It was null."
- string x = GetStringValue(); 
+
- 
+string x = GetStringValue();
- Console.WriteLine(x ?? "It was null."); 
+
- 
+Console.WriteLine(x ?? "It was null.");
- // Result: 
+
- 
+// Result:
- "It was null." 
+
-`
+"It was null."
+```

guide/arabic/csharp/nullable-types/index.md

@@ -8,24 +8,25 @@ localeTitle: أنواع nullable
 
 #### كيفية استخدام نوع nullable
 
- `// Declare a variable of Nullable type (Nullable<int>) 
+```csharp
- int? i = null; 
+// Declare a variable of Nullable type (Nullable<int>)
- 
+int? i = null;
- int  j = 0; 
+
- int defaultValue = 0; 
+int  j = 0;
- 
+int defaultValue = 0;
- // test for null and assign value to another variable 
+
- if (i.HasValue) 
+// test for null and assign value to another variable
- { 
+if (i.HasValue)
-    j = i.Value; 
+{
- } 
+    j = i.Value;
- 
+}
- // get assigned value or default when current value is null 
+
- j = i.GetValueOrDefault(); // i.GetValueOrDefault(defaultValue) 
+// 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; 
+//use coalescing operator to assign default value when current value is null
-` 
+j = i ?? defaultValue;
+``` 
 
 لمزيد من المعلومات ، قم بزيارة الرابط التالي:
 

guide/arabic/csharp/string-interpolation/index.md

@@ -8,21 +8,24 @@ localeTitle: الاستيفاء سلسلة
 
 # #
 
- `string message = "Hello " + firstName + " " + lastName + "!"; 
+```
- 
+string message = "Hello " + firstName + " " + lastName + "!";
- string message2 = string.Format("Hello {0} {1}!", 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; 
+int a = 3;
- string result = $"{a}+{b} = {a+b}"; 
+int b = 454;
-`
+string result = $"{a}+{b} = {a+b}";
+```

guide/arabic/csharp/switch-case/index.md

@@ -8,41 +8,43 @@ localeTitle: تبديل القضية
 
 ## مثال
 
- `public enum Colors { Red, Blue, Green, Orange } 
+```
- 
+public enum Colors { Red, Blue, Green, Orange }
- Colors myColor; 
+
- 
+Colors myColor;
- ... myColor is set to one of the enum values ... 
+
- 
+... myColor is set to one of the enum values ...
- switch(myColor){ 
+
-  case Colors.Red: 
+switch(myColor){
-    Console.WriteLine("How you like them apples?"); 
+  case Colors.Red:
-    break; 
+    Console.WriteLine("How you like them apples?");
-  case Colors.Blue: 
+    break;
-    Console.WriteLine("Ice Ice Baby..."); 
+  case Colors.Blue:
-    break; 
+    Console.WriteLine("Ice Ice Baby...");
-  case Colors.Green: 
+    break;
-    Console.WriteLine("Fore!"); 
+  case Colors.Green:
-    break; 
+    Console.WriteLine("Fore!");
-  default: 
+    break;
-    Console.WriteLine("I have a hard time when I try to rhyme."); 
+  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.Red:
- 
+> How you like them apples?
- If myColor is Colors.Blue: 
+
- > Ice Ice Baby... 
+If myColor is Colors.Blue:
- 
+> Ice Ice Baby...
- If myColor is Colors.Green: 
+
- > Fore! 
+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.Orange:
-` 
+> I have a hard time when I try to rhyme.
+``` 
 
 ### مصادر:
 

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; 
+// initialize - set true or false here to view different result
- 
+bool hasFreeSweet = false;
- string str = hasFreeSweet ? "Free sweet!" : "No free sweet."; 
+
- 
+string str = hasFreeSweet ? "Free sweet!" : "No free sweet.";
- //output in console 
+
- Console.WriteLine(str); 
+//output in console
-` 
+Console.WriteLine(str);
+``` 
 
 ## انتاج |
 
- `if hasFreeSweet == true 
+```
- > Free sweet! 
+if hasFreeSweet == true
- 
+> Free sweet!
- if hasFreeSweet == false 
+
- > No free sweet. 
+if hasFreeSweet == false
-`
+> No free sweet.
+```

guide/arabic/csharp/try-catch/index.md

@@ -12,22 +12,23 @@ localeTitle: حاول الصيد في النهاية
 
 ## بناء الجملة
 
- `try 
+```csharp
- { 
+try
-   // Code which could potentially throw an exception 
+{
-   var parsedValue = Int32.Parse("abcde"); 
+   // Code which could potentially throw an exception
- } 
+   var parsedValue = Int32.Parse("abcde");
- catch(Exception e) 
+}
- { 
+catch(Exception e)
-    // Code to handle the exception 
+{
-    Console.WriteLine("Exception: " + e.Message); 
+    // Code to handle the exception
- } 
+    Console.WriteLine("Exception: " + e.Message);
- finally 
+}
- { 
+finally
-    // Code which will always run no matter what. 
+{
-    Console.WriteLine("Try-Catch block has finished execution"); 
+    // 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 
+```csharp
- { 
+try
-    // Read user input from the console. 
+{
-    var userInput = Console.ReadLine(); 
+    // Read user input from the console.
- } 
+    var userInput = Console.ReadLine();
- catch(Exception e) 
+}
- { 
+catch(Exception e)
-    Console.WriteLine("Exception: " + e.Message); 
+{
- } 
+    Console.WriteLine("Exception: " + e.Message);
- 
+}
- //Outside the Try block 
+
- var parsedUserInput = Int32.Parse(userInput);  // Not correct 
+//Outside the Try block
-` 
+var parsedUserInput = Int32.Parse(userInput);  // Not correct
+``` 
 
 سيعطيك ما سبق خطأ في وقت الترجمة لأن القيمة 'userInput' لا يمكن الوصول إليها. إذا كنت تحتاج إلى الوصول إلى متغير خارج كتلة try-catch ستحتاج إلى تعريف المتغير قبل كتلة المحاولة.
 
- `var userInput = ""; 
+```csharp
- try 
+var userInput = "";
- { 
+try
-    // Read user input from the console. 
+{
-    userInput = Console.ReadLine(); 
+    // Read user input from the console.
- } 
+    userInput = Console.ReadLine();
- catch(Exception e) 
+}
- { 
+catch(Exception e)
-    Console.WriteLine("Exception: " + e.Message); 
+{
- } 
+    Console.WriteLine("Exception: " + e.Message);
- 
+}
- //Outside the Try block 
+
- var parsedUserInput = Int32.Parse(userInput);  // Correct 
+//Outside the Try block
-` 
+var parsedUserInput = Int32.Parse(userInput);  // Correct
+``` 
 
 ## كتلة الصيد
 
 هذه الكتلة هي المكان الذي تحدد فيه نوع `Exception` الذي تريد التقاطه. إذا كنت تريد التقاط كافة الاستثناءات الممكنة ، يمكنك استخدام الفئة الأساسية `Exception` . إذا كنت تريد فقط التقاط نوع معين من الاستثناء ، فيمكنك تحديد ذلك بدلاً من ذلك. بعض الأمثلة على أنواع الاستثناءات الأخرى هي `ArgumentException` و `OutOfMemoryException` و `FormatException` .
 
- `try 
+```csharp
- { 
+try
-   var parsedValue = Int32.Parse("abcde"); 
+{
- } 
+   var parsedValue = Int32.Parse("abcde");
- // Only FormatExceptions will be caught in this catch block. 
+}
- catch(FormatException exceptionVariable) 
+// Only FormatExceptions will be caught in this catch block.
- { 
+catch(FormatException exceptionVariable)
-    Console.WriteLine(exceptionVariable.Message); 
+{
- } 
+    Console.WriteLine(exceptionVariable.Message);
-` 
+}
+``` 
 
 المتغير المعلن بعد نوع الاستثناء سيحتوي على كل بيانات الاستثناء ويمكن استخدامه داخل كتلة `Catch` .
 
@@ -89,14 +93,15 @@ localeTitle: حاول الصيد في النهاية
 
 يتم **دائمًا** تشغيل الكتلة الأخيرة في النهاية بعد كتل `Try` and `Catch` . وعادة ما يستخدم هذا القسم لعندما يكون هناك شيء **يجب أن** يحدث في نهاية بغض النظر عما إذا كان طرح استثناء أم لا. على سبيل المثال ، لنفترض أننا بحاجة إلى متغير ليتم إعادة تنشيطه مرة أخرى إلى رقم محدد بعد التلاعب به طوال الوقت.
 
- `int initalValue = 12; 
+```csharp
- try 
+int initalValue = 12;
- { 
+try
-    // Code which manipulates 'initialValue' 
+{
- } 
+    // Code which manipulates 'initialValue'
- finally 
+}
- { 
+finally
-    Console.WriteLine("re-initalising value back to 12"); 
+{
-    initialValue = 12; 
+    Console.WriteLine("re-initalising value back to 12");
- } 
+    initialValue = 12;
-`
+}
+```

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"> 
+```XAML
-    <Label Content="Hello World!" /> 
+<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
- </UserControl> 
+    <Label Content="Hello World!" />
-` 
+</UserControl>
+``` 
 
 ### معلومات اكثر:
 

guide/arabic/css/background-opacity/index.md

@@ -14,37 +14,40 @@ localeTitle: تعتيم الخلفية
 
 **كامد بالكامل**
 
- `.class-name { 
+```css
-  opacity:1; 
+.class-name {
- } 
+  opacity:1;
- 
+}
- OR 
+
- 
+OR
- .class-name { 
+
-  opacity:1.0; 
+.class-name {
- } 
+  opacity:1.0;
-` 
+}
+``` 
 
 **شفافي نصف شفاف**
 
- `.class-name { 
+```css
-  opacity:0.5; 
+.class-name {
- } 
+  opacity:0.5;
- Opacity value can be anything between 0 and 1; 
+}
-` 
+Opacity value can be anything between 0 and 1;
+``` 
 
 **شفاف**
 
- `.class-name { 
+```css
-  opacity:0; 
+.class-name {
- } 
+  opacity:0;
- 
+}
- OR 
+
- 
+OR
- .class-name { 
+
-  opacity:0.0; 
+.class-name {
- } 
+  opacity:0.0;
-` 
+}
+``` 
 
 بدلا من ذلك يمكنك استخدام قيمة rgba شفافة مثل هذا: \`\` \`المغلق
 

guide/arabic/css/background-size/index.md

@@ -18,11 +18,12 @@ localeTitle: حجم الخلفية
 
 لتعيين هذه الخاصية على صور خلفية متعددة ، قم بفصل القيم بفاصلة:
 
- `.multiple { 
+```css
-    background-image: url(1.png), url(2.png); 
+.multiple {
-    background-size: 3px 3px, cover; 
+    background-image: url(1.png), url(2.png);
- } 
+    background-size: 3px 3px, cover;
-` 
+}
+``` 
 
 #### معلومات اكثر:
 

guide/arabic/css/background/index.md

@@ -43,19 +43,21 @@ localeTitle: خلفية
 
 يمكنك استخدام خاصية صورة الخلفية لتعيين صورة كخلفية لعنصر. يتم تكرار الصورة افتراضيًا بحيث تغطي العنصر بأكمله.
 
- `body { 
+```css
-  background-image: url("barn.jpg"); 
+body {
- } 
+  background-image: url("barn.jpg");
-` 
+}
+``` 
 
 ![صورة](https://user-images.githubusercontent.com/26467304/31036366-eb1fc260-a539-11e7-835d-e3f935a22c86.png)
 
 يمكنك أيضًا ربط الصور أو صور gif التي تعثر عليها عبر الإنترنت باستخدام رابطها (على سبيل المثال ، من صور Google البحث).
 
- `body { 
+```css
-  background-image: url("https://mdn.mozillademos.org/files/11983/starsolid.gif"); 
+body {
- } 
+  background-image: url("https://mdn.mozillademos.org/files/11983/starsolid.gif");
-` 
+}
+``` 
 
 ### صورة الخلفية - خاصية التكرار
 
@@ -63,29 +65,32 @@ localeTitle: خلفية
 
 إليك مثال يكرر الصورة عموديًا.
 
- `body { 
+```css
-  background-image: url("barn.jpg"); 
+body {
-  background-repeat: repeat-y; 
+  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 { 
+```css
-  background-image: url("barn.jpg"); 
+body {
-  background-repeat: repeat-x; 
+  background-image: url("barn.jpg");
- } 
+  background-repeat: repeat-x;
-` 
+}
+``` 
 
 يمكنك أيضًا استخدام خاصية تكرار الخلفية لتعيين صورة لعدم تكرارها.
 
- `body { 
+```css
-  background-image: url("barn.jpg"); 
+body {
-  background-repeat: no-repeat; 
+  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 { 
+```css
-  background-image: url("barn.jpg"); 
+body {
-  background-repeat: no-repeat; 
+  background-image: url("barn.jpg");
-  background-position: right top; 
+  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 { 
+```css
-  background-image: url("barn.jpg"); 
+body {
-  background-repeat: no-repeat; 
+  background-image: url("barn.jpg");
-  background-position: right top; 
+  background-repeat: no-repeat;
-  background-attachment: fixed; 
+  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 { 
+```css
-  background: url("barn.jpg") no-repeat right top; 
+body {
- } 
+  background: url("barn.jpg") no-repeat right top;
-` 
+}
+``` 
 
 يمكنك ترك الممتلكات التي لا تحتاج إليها عند استخدام خاصية الاختزال ، ولكن الخصائص يجب استخدامها في ترتيب معين. الترتيب هو:
 
@@ -145,10 +153,11 @@ localeTitle: خلفية
 
 يمكنك تحديد صور خلفية متعددة في خاصية خلفية واحدة.
 
- `body { 
+```css
-  background: url("barn.jpg"), url("stars.jpg"), linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)); 
+body {
- } 
+  background: url("barn.jpg"), url("stars.jpg"), linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
-` 
+}
+``` 
 
 الصورة الأولى (أو التدرج) المحددة هي الأكثر في الأعلى ، والثانية تأتي بعدها ، وهكذا. إذا كان أحد العناصر غير صحيح بسبب عنوان URL الخاص به أو بناء الجملة الخاص به ، فسيتم تجاهل السطر بأكمله بواسطة المستعرض.
 

guide/arabic/css/before-selector/index.md

@@ -8,25 +8,26 @@ localeTitle: قبل المختار
 
 لنلق نظرة على بعض الأمثلة:
 
- `p::before { 
+```css
-    content: ""; 
+p::before {
-    border: solid 5px #ccc 
+    content: "";
- } 
+    border: solid 5px #ccc
- 
+}
- span.comment::before{ 
-  content: "Comment: "; 
-  color: blue; 
- } 
-` 
 
- `
+span.comment::before{
-<p> To infinity and beyond</p> 
+  content: "Comment: ";
- <p> I am buz lightyear, I come in peace.</p> 
+  color: blue;
- 
+}
- <span class="comment"> May the force be with you</span> 
+``` 
- <br/> 
+
- <span> Do. Or do not. There is no try</span> 
+```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: قبل المختار
    } 
 ` 
 
- `
+```html
-<p>world!!</p> 
+<p>world!!</p>
-` 
+``` 
 
 هذا سيظهر `Hello world!!` في الصفحة.
 

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] 
+```
- 
+As shown, the border property allows you to select different sections of it. [top, bottom, left, right]
- ### Border Width 
+
- 
+### 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 
+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
- values: thin, medium, or thick. 
+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: 
+
-` 
+Example:
+``` 
 
 المغلق
 
 table { border-width: 7px; border-style: outset; } td { border-width: medium; border-style: outset; } p { border-width: thick; border-style: solid; }
 
- `### Border Color 
+```
- 
+### 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. 
+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: 
+
-` 
+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 
+```
- 
+### 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. 
+
- 
+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: 
+
-` 
+Example:
+``` 
 
 المغلق
 

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. 
+```
- 
+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 
+
- 
+### Examples
- #### Basic use 
+
-` 
+#### Basic use
+``` 
 
 المغلق div { العرض: 200 بكسل ؛ الارتفاع: 50 بكسل ؛ لون الخلفية: # 333 ؛ box-shadow: 10px 10px 5px #ccc؛ }
 
- `10px - offset-x 
+```
- 10px - offset-y 
+10px - offset-x
- 5px -  blur 
+10px - offset-y
- #ccc - light gray color 
+5px -  blur
- 
+#ccc - light gray color
- It will display 
+
- 
+It will display
- ![image](https://raw.githubusercontent.com/krzysiekh/images/master/box-shadow1.png) 
+
- 
+![image](https://raw.githubusercontent.com/krzysiekh/images/master/box-shadow1.png)
- #### Inside box shadow 
+
-` 
+#### 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 
+```
- 
+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) 
+
- 
+![image](https://raw.githubusercontent.com/krzysiekh/images/master/box-shadow2.png)
- 
+
- #### Multiple box shadows 
+
-` 
+#### Multiple box shadows
+``` 
 
 المغلق div { العرض: 200 بكسل ؛ الارتفاع: 50 بكسل ؛ لون الخلفية: # 333 ؛ box-shadow: inset 10px 10px 5px #ccc، 10px 10px 5px #ccc؛ } \`\` \`
 

guide/arabic/css/breakpoints/index.md

@@ -27,66 +27,67 @@ localeTitle: نقاط
 
 وهنا مثال على ذلك
 
- `/* ----------- iPhone 6, 6S, 7 and 8 ----------- */ 
+```
- 
+/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
- /* Portrait */ 
+
- 
+/* Portrait */
- @media only screen 
+
- 
+@media only screen
- and (min-device-width: 375px) 
+
- 
+and (min-device-width: 375px)
- and (max-device-width: 667px) 
+
- 
+and (max-device-width: 667px)
- and (-webkit-min-device-pixel-ratio: 2) 
+
- 
+and (-webkit-min-device-pixel-ratio: 2)
- and (orientation: portrait) { 
+
- 
+and (orientation: portrait) {
- } 
+
- 
+}
- /* Landscape */ 
+
- 
+/* Landscape */
- @media only screen 
+
- 
+@media only screen
- and (min-device-width: 375px) 
+
- 
+and (min-device-width: 375px)
- and (max-device-width: 667px) 
+
- 
+and (max-device-width: 667px)
- and (-webkit-min-device-pixel-ratio: 2) 
+
- 
+and (-webkit-min-device-pixel-ratio: 2)
- and (orientation: landscape) { 
+
- 
+and (orientation: landscape) {
- } 
+
- 
+}
- /* ----------- Google Pixel ----------- */ 
+
- 
+/* ----------- Google Pixel ----------- */
- /* Portrait */ 
+
- 
+/* Portrait */
- @media screen 
+
- 
+@media screen
- and (device-width: 360px) 
+
- 
+and (device-width: 360px)
- and (device-height: 640px) 
+
- 
+and (device-height: 640px)
- and (-webkit-device-pixel-ratio: 3) 
+
- 
+and (-webkit-device-pixel-ratio: 3)
- and (orientation: portrait) { 
+
- 
+and (orientation: portrait) {
- } 
+
- 
+}
- /* Landscape */ 
+
- 
+/* Landscape */
- @media screen 
+
- 
+@media screen
- and (device-width: 360px) 
+
- 
+and (device-width: 360px)
- and (device-height: 640px) 
+
- 
+and (device-height: 640px)
- and (-webkit-device-pixel-ratio: 3) 
+
- 
+and (-webkit-device-pixel-ratio: 3)
- and (orientation: landscape) { 
+
- 
+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 { 
+```css
-    font-size: 16px; 
+.text1 {
- } 
+    font-size: 16px;
- @media (min-width: 1200px) { 
+}
-    .text1 { 
+@media (min-width: 1200px) {
-        font-size: 20px; 
+    .text1 {
-    } 
+        font-size: 20px;
- } 
+    }
-` 
+}
+``` 
 
 **للراحة لدينا،** وكتابة `.text1` التصميم الأساسي أولا ... ثم بعد ذلك سنقوم تحديد `@media` القواعد.
 
@@ -134,13 +138,14 @@ localeTitle: نقاط
 
 من الجيد تمامًا استخدام `@media (max-width) {}` . هنا مثال:
 
- `.text1 { 
+```css
-    font-size: 20px; 
+.text1 {
- } 
+    font-size: 20px;
- @media (max-width: 1199px) { 
+}
-    font-size: 16px; 
+@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) { 
+```css
-  something { 
+@media only screen and (min-width: 700px) {
-    something: something; 
+  something {
-  } 
+    something: something;
- } 
+  }
-` 
+}
+``` 
 
 يمكنك أيضًا تعيين الحد الأدنى والحد الأقصى للعرض ، والذي يتيح لك إجراء التجارب باستخدام نطاقات مختلفة. هذا واحد تقريبا يطلق بين الهاتف smar وأكبر حجم سطح المكتب وأحجام الشاشة
 
- `@media only screen and (min-width: 700px) and (max-width: 1500px) { 
+```code
-  something { 
+@media only screen and (min-width: 700px) and (max-width: 1500px) {
-    something: something; 
+  something {
-  } 
+    something: something;
- } 
+  }
-` 
+}
+``` 
 
 #### معلومات اكثر:
 

guide/arabic/css/class-selector/index.md

@@ -14,44 +14,48 @@ localeTitle: اختيار الطبقة
 
 أمثلة:
 
- `
+```html
-<h1 class="test">This is a heading 1</h1> 
+<h1 class="test">This is a heading 1</h1>
- <p class="test">This is a paragraph 1</p> 
+<p class="test">This is a paragraph 1</p>
- <h2 class="test">This is a heading 2</h2> 
+<h2 class="test">This is a heading 2</h2>
- <p class="test">This is a paragraph 2</p> 
+<p class="test">This is a paragraph 2</p>
- <div class="test2 test3">This is a div 1</div> 
+<div class="test2 test3">This is a div 1</div>
-` 
+``` 
 
 نظرًا لأن اسم الفئة ليس فريدًا ، فإن سمة فئة HTML تجعل من الممكن تعريف أنماط متساوية للعناصر التي تحمل نفس اسم الفئة. **فيما يلي كيفية تحديد الطبقة في ملف CSS لعناصر النمط (لاحظ تدوين.):**
 
 **سيتم تطبيق جميع عناصر `test` الصف باستخدام هذا النمط:**
 
- `.test { 
+```css
-  color: green; 
+.test {
- } 
+  color: green;
-` 
+}
+``` 
 
 **سيتم تطبيق جميع عناصر `<p>` `test` الصف باستخدام هذا النمط:**
 
- `p.test { 
+```css
-  border: 1px solid black; 
+p.test {
-  color: red; 
+  border: 1px solid black;
- } 
+  color: red;
-` 
+}
+``` 
 
 **سيتم تطبيق جميع عناصر `<h1>` و `<h2>` `test` الصف باستخدام هذا النمط:**
 
- `h1.test, h2.test { 
+```css
-  color: blue; 
+h1.test, h2.test {
- } 
+  color: blue;
-` 
+}
+``` 
 
 **سيتم تطبيق جميع العناصر التي تشتمل على كلا النوعين `test2` و `test3` مع هذا النمط:**
 
- `.test2.test3 { 
+```css
-  color: green; 
+.test2.test3 {
- } 
+  color: green;
-` 
+}
+``` 
 
 **نصائح: لا توجد مساحة بين فئات متعددة.**
 

guide/arabic/css/colors/index.md

@@ -48,19 +48,20 @@ Hexcode ، وهو اختصار للرمز السداسي العشري ، هو ط
 
 #### أمثلة
 
- `
+```html
-<html> 
+<html>
-  <body> 
+  <body>
-    <p>Hello Moto</p> 
+    <p>Hello Moto</p>
-  </body> 
+  </body>
- </html> 
+</html>
-` 
+``` 
 
- `body { 
+```css
-  background-color: green; 
+body {
-  color: white; 
+  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 { 
+```css
-  background-color: hsl(184, 87%, 94%); // bright blue 
+body {
- } 
+  background-color: hsl(184, 87%, 94%); // bright blue
-` 
+}
+``` 
 
 يظهر أعلاه فقرات مصممة باللون البرتقالي اللامع و 20٪ شفافة ، وعناصر h2 بلون وردي من سمك السلمون ، وخلفية الجسم زاهية اللون.
 

guide/arabic/css/css-buttons/index.md

@@ -36,12 +36,13 @@ localeTitle: أزرار CSS
 
 لإضافة حد ملون إلى زر ، استخدم خاصية الحدود:
 
- `button { 
+```
-  background-color: #FFF; 
+button {
-  color: #FFF; 
+  background-color: #FFF;
-  border: 2px solid #6ba0f4; 
+  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; 
+button:hover {
-  color: #FFF; 
+  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;
-` 
+}
+``` 
 
 #### معلومات اكثر:
 

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);
-` 
+}
+``` 
 
 #### معلومات اكثر:
 

guide/arabic/css/css-custom-properties/index.md

@@ -10,11 +10,12 @@ localeTitle: خصائص CSS مخصصة
 
 ضمن محدد ، يتم تعريف الخصائص المخصصة باستخدام واصلين (-) والاسم ، متبوعًا بالقيمة. يمكن أن تكون القيمة بسيطة ، مثل اللون (RGB ، hexcode ، إلخ) أو الحجم (باستخدام البكسل ، em ، rem ، إلخ) ، أو يمكن أن تكون أكثر تعقيدًا ، مثل تعريف dropshadow. انظر الأمثلة أدناه.
 
- `:root { 
+```css
-  --firstVariable: red; 
+:root {
-  --headerSize: 16px; 
+  --firstVariable: red;
-  --dropShadow: 1px 1px 2px 2px rgba(100,100,100,0.2); 
+  --headerSize: 16px;
-` 
+  --dropShadow: 1px 1px 2px 2px rgba(100,100,100,0.2);
+``` 
 
 الإعلان عن الخصائص المخصصة في `:root` محدد `:root` جعل هذه الخصائص متاحة على مستوى العالم. يمكن اعتبار `:root` محدد `:root` نفس محدد `html` .
 

guide/arabic/css/css-frameworks/css-framework-bulma/index.md

@@ -10,22 +10,22 @@ Bulma هو إطار CSS حديث يعتمد على [Flexbox وقابلاً](http
 
 في ما يلي نموذج HTML بسيط يشتمل على أحدث ملفات CSS المجمعة والمختصرة لمكتبة Bulma.
 
- `
+```html
-    <!DOCTYPE html> 
+    <!DOCTYPE html>
-    <html lang="en"> 
+    <html lang="en">
-      <head> 
+      <head>
-        <meta charset="utf-8"> 
+        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1"> 
+        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>Bulma Template</title> 
+        <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://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"> 
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.23/css/bulma.min.css">
-      </head> 
+      </head>
-      <body> 
+      <body>
-        <h1>Hello World</h1> 
+        <h1>Hello World</h1>
-        <!-- Add all HTML Code here --> 
+        <!-- Add all HTML Code here -->
-      </body> 
+      </body>
-    </html> 
+    </html>
-` 
+``` 
 
 لقد استخدمنا CDN في هذا المثال ، ولكن يمكنك التحقق من الطرق الأخرى لتثبيت Bulma [هنا](http://bulma.io/documentation/overview/start/) .
 

guide/arabic/css/css-frameworks/css-framework-foundation/index.md

@@ -10,23 +10,23 @@ localeTitle: مؤسسة CSS Framework
 
 في ما يلي نموذج HTML بسيط يشتمل على أحدث CSS وملف Javascript مجمّعة ومختصرة لمكتبة المؤسسة.
 
- `
+```html
-    <!DOCTYPE html> 
+    <!DOCTYPE html>
-    <html lang="en"> 
+    <html lang="en">
-      <head> 
+      <head>
-        <meta charset="utf-8"> 
+        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1"> 
+        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>Foundation Template</title> 
+        <title>Foundation Template</title>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css"> 
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css">
-      </head> 
+      </head>
-      <body> 
+      <body>
-        <h1>Hello World</h1> 
+        <h1>Hello World</h1>
-        <!-- Add all HTML Code here --> 
+        <!-- Add all HTML Code here -->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
+        <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> 
+        <script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script>
-      </body> 
+      </body>
-    </html> 
+    </html>
-` 
+``` 
 
 يستخدم هذا المثال استخدام CDN الذي يقوم بتحميل الإعدادات الافتراضية. إذا كنت ترغب في تخصيص تخطيط الشبكة ، قم بتغيير الألوان أو إضافة وإزالة المكونات التي يمكنك القيام بها على صفحة [تنزيل](http://foundation.zurb.com/sites/download/) Foundation.
 

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.
 
- `
+```html
-<!DOCTYPE html> 
+<!DOCTYPE html>
- <html> 
+<html>
-    <head> 
+    <head>
-        <title></title> 
+        <title></title>
-        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
+        <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"> 
+        <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> 
+        <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
-    </head> 
+    </head>
-    <body> 
+    <body>
-    </body> 
+    </body>
- </html> 
+</html>
-` 
+``` 
 
 لقد استخدمنا CDN في هذا المثال ، ولكن يمكنك التحقق من الطرق الأخرى لتثبيت MDL [هنا](https://getmdl.io/started/index.html) .
 

guide/arabic/css/css-frameworks/css-framework-materialize/index.md

@@ -10,27 +10,27 @@ localeTitle: CSS Framework تتحقق
 
 في ما يلي نموذج HTML بسيط يشتمل على أحدث CSS وملف Javascript مجمّعة ومختصرة لمكتبة Materialize.
 
- `
+```html
-    <!DOCTYPE html> 
+    <!DOCTYPE html>
-  <html> 
+  <html>
-    <head> 
+    <head>
-      <!--Import Google Icon Font--> 
+      <!--Import Google Icon Font-->
-      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
+      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-      <!--Import materialize.css--> 
+      <!--Import materialize.css-->
-      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.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--> 
+      <!--Let browser know website is optimized for mobile-->
-      <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
+      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    </head> 
+    </head>
- 
+
-    <body> 
+    <body>
-      <h1>Hello World!</h1> 
+      <h1>Hello World!</h1>
-      <!--Import jQuery before materialize.js--> 
+      <!--Import jQuery before materialize.js-->
-      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
+      <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> 
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
-    </body> 
+    </body>
-  </html> 
+  </html>
-` 
+``` 
 
 لقد استخدمنا CDN في هذا المثال ، ولكن يمكنك التحقق من طرق أخرى لتثبيت ثريتم [هنا](http://materializecss.com/getting-started) .
 

guide/arabic/css/css-frameworks/css-framework-skeleton/index.md

@@ -10,24 +10,24 @@ localeTitle: CSS Framework Skeleton
 
 في ما يلي نموذج HTML بسيط يشتمل على أحدث ملف CSS مجمع ومختزن لمكتبة Skeleton.
 
- `
+```html
-    <!DOCTYPE html> 
+    <!DOCTYPE html>
-    <html lang="en"> 
+    <html lang="en">
-      <head> 
+      <head>
-        <meta charset="utf-8"> 
+        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1"> 
+        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>Skeleton Template</title> 
+        <title>Skeleton Template</title>
-        <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css"> 
+        <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/normalize/4.1.1/normalize.min.css">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"> 
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
-      </head> 
+      </head>
-      <body> 
+      <body>
-        <h1>Hello World</h1> 
+        <h1>Hello World</h1>
-        <!-- Add all HTML Code here --> 
+        <!-- Add all HTML Code here -->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
-      </body> 
+      </body>
-    </html> 
+    </html>
-` 
+``` 
 
  [![](//discourse-user-assets.s3.amazonaws.com/original/2X/3/31bd555700f1ee85bb4ddcacf595f0dfd8a16254.png) **JSBin Demo**](http://jsbin.com/sekojaxali/edit?html,output)
 

guide/arabic/css/css-frameworks/css-frameworks-uikit/index.md

@@ -10,20 +10,20 @@ UIKit هو إطار أمامي خفيف الوزن ومعياري لتطوير
 
 هنا هو قالب HTML بسيط يتضمن أحدث CSS المترجمة والمختصرة لمكتبة UIKit.
 
- `
+```html
-<!DOCTYPE html> 
+<!DOCTYPE html>
- <html> 
+<html>
-    <head> 
+    <head>
-        <title></title> 
+        <title></title>
-        <link rel="stylesheet" href="css/uikit.min.css" /> 
+        <link rel="stylesheet" href="css/uikit.min.css" />
-        <script src="js/jquery.js"></script> 
+        <script src="js/jquery.js"></script>
-        <script src="js/uikit.min.js"></script> 
+        <script src="js/uikit.min.js"></script>
-        <script src="js/uikit-icons.min.js"></script> 
+        <script src="js/uikit-icons.min.js"></script>
-    </head> 
+    </head>
-    <body> 
+    <body>
-    </body> 
+    </body>
- </html> 
+</html>
-` 
+``` 
 
 لقد استخدمنا CDN في هذا المثال ، ولكن يمكنك التحقق من الطرق الأخرى لتثبيت UIKit [هنا](https://getuikit.com/docs/introduction) .
 

guide/arabic/css/css-performance/index.md

@@ -22,10 +22,11 @@ localeTitle: أداء CSS
 
 تخيل CSS التالي:
 
- `nav ul li a { 
+```css
-  color: #fff; 
+nav ul li a {
- } 
+  color: #fff;
-` 
+}
+``` 
 
 هذه ليست فكرة جيدة. هناك طرق أفضل لتحديد عنصر ارتباط في التنقل. ولكن كيف يحدد الكمبيوتر العنصر الصحيح؟ أولا يجدها كل `a` عنصر على الصفحة الخاصة بك. ثم يتحقق إذا كان داخل عنصر `li` ، داخل `ul` داخل `div` . لذا ، يقرأ المتصفح المحددات من اليمين إلى اليسار. إذا كان لديك مئات الروابط ، فقد يستغرق ذلك بعض الوقت ، فما الذي يجب عليك فعله؟
 

guide/arabic/css/css-position/index.md

@@ -6,12 +6,13 @@ localeTitle: وضع CSS
 
 تحدد خاصية الموضع نوع طريقة تحديد المواقع المستخدمة لعنصر. يحتوي على 5 قيم للكلمات الرئيسية:
 
- `.static         { position: static; } // default value 
+```css
- .relative       { position: relative; } 
+.static         { position: static; } // default value
- .sticky         { position: sticky; } 
+.relative       { position: relative; }
- .fixed          { position: fixed; } 
+.sticky         { position: sticky; }
- .absolute       { position: absolute; } 
+.fixed          { position: fixed; }
-` 
+.absolute       { position: absolute; }
+``` 
 
 ### معلومات اكثر:
 

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. 
+```
- 
+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/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 { لون الخلفية: الأزرق. } آخر { لون الخلفية: أبيض. } \`\` \` هنا ، سيغير لون الخلفية اللون حسب عرض نص الصفحة.
 

guide/arabic/css/css-syntax-and-selectors/index.md

@@ -18,17 +18,17 @@ localeTitle: CSS المختار والقواعد
 
 إليك مثال على CSS المضمّن. سيكون للكلمات "One" و "Two" لون خلفية باللون الأصفر ولون النص باللون الأحمر. تحتوي كلمة "ثلاثة" على نمط جديد يتجاوز الأول ، وسيكون له لون خلفية باللون الأخضر ونص اللون السماوي. في المثال ، نحن نطبق الأنماط على علامات `<div>` ، ولكن يمكنك تطبيق نمط على أي عنصر HTML.
 
- `
+```html
-<div style="color:red; background:yellow"> 
+<div style="color:red; background:yellow">
-  One 
+  One
-  <div> 
+  <div>
-    Two 
+    Two
-  </div> 
+  </div>
-  <div style="color:cyan; background:green"> 
+  <div style="color:cyan; background:green">
-    Three 
+    Three
-  </div> 
+  </div>
- </div> 
+</div>
-` 
+``` 
 
 ### CSS داخلي
 
@@ -38,48 +38,48 @@ localeTitle: CSS المختار والقواعد
 
 في ما يلي مثال له تأثير مماثل لمثال "مضمنة" أعلاه ، باستثناء أنه تم استخراج CSS إلى منطقته الخاصة. ستتطابق الكلمتان "One" و "Two" مع محدد `div` ويكون النص الأحمر على خلفية صفراء. تتطابق الكلمتان "Three" و "Four" مع محدد `div` أيضًا ، ولكنهما يتطابقان أيضًا مع محدد `.nested_div` الذي ينطبق على أي عنصر HTML يشير إلى هذه الفئة. يتجاوز هذا المحدد المحدد الأول ، وينتهي ظهرا في الظهور كنص أزرق سماوي على خلفية خضراء.
 
- `
+```html
-<style type="text/css"> 
+<style type="text/css">
-  div { color: red; background: yellow; } 
+  div { color: red; background: yellow; }
-  .nested_div { color: cyan; background: green; } 
+  .nested_div { color: cyan; background: green; }
- </style> 
+</style>
- 
+
- <div> 
+<div>
-  One 
+  One
-  <div> 
+  <div>
-    Two 
+    Two
-  </div> 
+  </div>
-  <div class="nested_div"> 
+  <div class="nested_div">
-    Three 
+    Three
-  </div> 
+  </div>
-  <div class="nested_div"> 
+  <div class="nested_div">
-    Four 
+    Four
-  </div> 
+  </div>
- </div> 
+</div>
-` 
+``` 
 
 تعتبر المحددات المبينة أعلاه بسيطة للغاية ، ولكنها قد تكون معقدة للغاية. على سبيل المثال ، من الممكن تطبيق الأنماط فقط على العناصر المتداخلة ؛ وهذا هو ، العنصر الذي هو طفل لعنصر آخر.
 
 في ما يلي مثال على تحديدنا للنمط الذي يجب تطبيقه فقط على عناصر `div` التي تمثل طفلًا مباشرًا لعناصر `div` الأخرى. والنتيجة هي أن "Two" و "Three" سيظهران كنص أحمر على خلفية صفراء ، لكن "One" و "Four" سيظلان غير متأثران (وعلى الأرجح نص أسود على خلفية بيضاء).
 
- `
+```html
-<style type="text/css"> 
+<style type="text/css">
-  div > div { color: red; background: yellow; } 
+  div > div { color: red; background: yellow; }
- </style> 
+</style>
- 
+
- <div> 
+<div>
-  One 
+  One
-  <div> 
+  <div>
-    Two 
+    Two
-  </div> 
+  </div>
-  <div> 
+  <div>
-    Three 
+    Three
-  </div> 
+  </div>
- </div> 
+</div>
- <div> 
+<div>
-  Four 
+  Four
- </div> 
+</div>
-` 
+``` 
 
 ### CSS خارجي
 

guide/arabic/css/css3-2d-transforms/index.md

@@ -37,12 +37,13 @@ localeTitle: CSS3 2d يحول
 
 ### مثال:
 
- `div { 
+```css
-  -ms-transform: translate(50px, 100px); /* IE 9 */ 
+div {
-  -webkit-transform: translate(50px, 100px); /* Safari */ 
+  -ms-transform: translate(50px, 100px); /* IE 9 */
-  transform: translate(50px, 100px); 
+  -webkit-transform: translate(50px, 100px); /* Safari */
- } 
+  transform: translate(50px, 100px);
-` 
+}
+``` 
 
 ## طريقة التدوير ()
 
@@ -52,12 +53,13 @@ localeTitle: CSS3 2d يحول
 
 ### مثال:
 
- `div { 
+```css
-  -ms-transform: rotate(20deg); /* IE 9 */ 
+div {
-  -webkit-transform: rotate(20deg); /* Safari */ 
+  -ms-transform: rotate(20deg); /* IE 9 */
-  transform: rotate(20deg); 
+  -webkit-transform: rotate(20deg); /* Safari */
- } 
+  transform: rotate(20deg);
-` 
+}
+``` 
 
 يؤدي استخدام القيم السالبة إلى تدوير العنصر عكس اتجاه عقارب الساعة.
 
@@ -65,12 +67,13 @@ localeTitle: CSS3 2d يحول
 
 ### مثال:
 
- `div { 
+```css
-  -ms-transform: rotate(-20deg); /* IE 9 */ 
+div {
-  -webkit-transform: rotate(-20deg); /* Safari */ 
+  -ms-transform: rotate(-20deg); /* IE 9 */
-  transform: rotate(-20deg); 
+  -webkit-transform: rotate(-20deg); /* Safari */
- } 
+  transform: rotate(-20deg);
-` 
+}
+``` 
 
 ## مقياس () الطريقة
 
@@ -80,23 +83,25 @@ localeTitle: CSS3 2d يحول
 
 ### مثال:
 
- `div { 
+```css
-  -ms-transform: scale(2, 3); /* IE 9 */ 
+div {
-  -webkit-transform: scale(2, 3); /* Safari */ 
+  -ms-transform: scale(2, 3); /* IE 9 */
-  transform: scale(2, 3); 
+  -webkit-transform: scale(2, 3); /* Safari */
- } 
+  transform: scale(2, 3);
-` 
+}
+``` 
 
 المثال التالي يقلل عنصر `<div>` ليكون نصف أصله الأصلي العرض والارتفاع:
 
 ### مثال:
 
- `div { 
+```css
-  -ms-transform: scale(0.5, 0.5); /* IE 9 */ 
+div {
-  -webkit-transform: scale(0.5, 0.5); /* Safari */ 
+  -ms-transform: scale(0.5, 0.5); /* IE 9 */
-  transform: scale(0.5, 0.5); 
+  -webkit-transform: scale(0.5, 0.5); /* Safari */
- } 
+  transform: scale(0.5, 0.5);
-` 
+}
+``` 
 
 ## طريقة skewX ()
 
@@ -106,12 +111,13 @@ localeTitle: CSS3 2d يحول
 
 ### مثال:
 
- `div { 
+```css
-  -ms-transform: skewX(20deg); /* IE 9 */ 
+div {
-  -webkit-transform: skewX(20deg); /* Safari */ 
+  -ms-transform: skewX(20deg); /* IE 9 */
-  transform: skewX(20deg); 
+  -webkit-transform: skewX(20deg); /* Safari */
- } 
+  transform: skewX(20deg);
-` 
+}
+``` 
 
 ## طريقة (())
 
@@ -121,12 +127,13 @@ localeTitle: CSS3 2d يحول
 
 ### مثال:
 
- `div { 
+```css
-  -ms-transform: skewY(20deg); /* IE 9 */ 
+div {
-  -webkit-transform: skewY(20deg); /* Safari */ 
+  -ms-transform: skewY(20deg); /* IE 9 */
-  transform: skewY(20deg); 
+  -webkit-transform: skewY(20deg); /* Safari */
- } 
+  transform: skewY(20deg);
-` 
+}
+``` 
 
 ## طريقة الانحراف ()
 
@@ -136,23 +143,25 @@ localeTitle: CSS3 2d يحول
 
 ### مثال:
 
- `div { 
+```css
-  -ms-transform: skew(20deg, 10deg); /* IE 9 */ 
+div {
-  -webkit-transform: skew(20deg, 10deg); /* Safari */ 
+  -ms-transform: skew(20deg, 10deg); /* IE 9 */
-  transform: skew(20deg, 10deg); 
+  -webkit-transform: skew(20deg, 10deg); /* Safari */
- } 
+  transform: skew(20deg, 10deg);
-` 
+}
+``` 
 
 إذا لم يتم تحديد المعلمة الثانية ، فإنها تحتوي على قيمة صفرية. لذلك ، ما يلي على سبيل المثال يتخطى عنصر `<div>` 20 درجة على طول المحور X:
 
 ### مثال:
 
- `div { 
+```css
-  -ms-transform: skew(20deg); /* IE 9 */ 
+div {
-  -webkit-transform: skew(20deg); /* Safari */ 
+  -ms-transform: skew(20deg); /* IE 9 */
-  transform: skew(20deg); 
+  -webkit-transform: skew(20deg); /* Safari */
- } 
+  transform: skew(20deg);
-` 
+}
+``` 
 
 ## طريقة المصفوفة ()
 
@@ -164,12 +173,13 @@ localeTitle: CSS3 2d يحول
 
 ### مثال:
 
- `div { 
+```css
-  -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */ 
+div {
-  -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */ 
+  -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-  transform: matrix(1, -0.3, 0, 1, 0, 0); 
+  -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
- } 
+  transform: matrix(1, -0.3, 0, 1, 0, 0);
-` 
+}
+``` 
 
 ## CSS3 خصائص التحويل
 

guide/arabic/css/css3-at-media-rule/index.md

@@ -24,12 +24,13 @@ localeTitle: CSS3 في Media Rule
 
 مثال لاستعلام الوسائط هو كما يلي:
 
- `@media screen and (max-width: 1000px) { 
+```CSS
-  body { 
+@media screen and (max-width: 1000px) {
-    background: #000; 
+  body {
-  } 
+    background: #000;
- } 
+  }
-` 
+}
+``` 
 
 لا تنطبق قاعدة CSS في استعلام Media إلا عندما تكون القاعدة صحيحة. على سبيل المثال ، بالنظر إلى المقتطف أعلاه ، سيتم تغيير خلفية النص إلى `#000` فقط عندما يزور أحد المستخدمين الصفحة بجهاز بعرضه 1000 بكسل أو أقل. إذا كانت أعلى من 1000 بكسل ، فلن تنطبق هذه القاعدة.
 

guide/arabic/css/css3-borders-rounded-corners/index.md

@@ -21,38 +21,43 @@ localeTitle: CSS3 الحدود شعاع الملكية
 
 إذا تم توفير قيمة واحدة فقط ، فسيكون نصف قطر الحدود هو نفسه لجميع الزوايا الأربع ، كما هو موضح في الأمثلة السابقة. ولكن لديك أيضًا خيار تحديد قيم مختلفة لكل ركن.
 
- `.new-shape { 
+```css
-  border-radius: 20px 50px 5px 0; /* top left, top right, bottom right, bottom left */ 
+.new-shape {
- } 
+  border-radius: 20px 50px 5px 0; /* top left, top right, bottom right, bottom left */
-` 
+}
+``` 
 
 في حالة تقديم قيمتين فقط ، يتم تطبيق القيمة الأولى على الركن الأيمن العلوي والسفلي ، وتنطبق القيمة الثانية على الركن الأيمن العلوي والسفلي الأيسر.
 
- `.leaf-shape { 
+```css
-  border-radius: 0 50%; 
+.leaf-shape {
- } 
+  border-radius: 0 50%;
-` 
+}
+``` 
 
 إذا تم تعيين ثلاث قيم ، فسيتم تطبيق القيم الأولى مرة أخرى على نصف قطر أعلى اليسار ، تشير القيمة الثانية إلى اليمين العلوي والسفلي الأيسر ، تاركة القيمة الثالثة للإشارة إلى الركن السفلي الأيمن.
 
- `.odd-shape { 
+```css
-  border-radius: 0 20px 50%; 
+.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) 
+```
- 
+![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. 
+
-` 
+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)
 

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 { 
+```css
-  color: rgb(0, 255, 0); 
+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%);
-` 
+}
+``` 
 
 ### انتاج |
 

guide/arabic/css/css3-gradients/index.md

@@ -28,32 +28,33 @@ localeTitle: تدرجات CSS3
 
 #### مثال
 
- `<!DOCTYPE html> 
+```
- <html> 
+<!DOCTYPE html>
- <head> 
+<html>
- <style> 
+<head>
- #grad1 { 
+<style>
-    height: 200px; 
+#grad1 {
-    background: red; /* For browsers that do not support gradients */ 
+    height: 200px;
-    background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */ 
+    background: red; /* For browsers that do not support gradients */
-    background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */ 
+    background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */
-    background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */ 
+    background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */
-    background: linear-gradient(red, green); /* Standard syntax (must be last) */ 
+    background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */
- } 
+    background: linear-gradient(red, green); /* Standard syntax (must be last) */
- </style> 
+}
- </head> 
+</style>
- <body> 
+</head>
- 
+<body>
- <h3>Linear Gradient - Top to Bottom</h3> 
+
- <p>This linear gradient starts at the top. It starts red, transitioning to yellow:</p> 
+<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> 
+
- 
+<div id="grad1"></div>
- <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p> 
+
- 
+<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
- </body> 
+
- </html> 
+</body>
-` 
+</html>
+``` 
 
 ![الافتراضي الخطية التدرج](https://cdn-media-1.freecodecamp.org/imgr/CvtXCMd.jpg)
 
@@ -63,32 +64,33 @@ localeTitle: تدرجات CSS3
 
 #### مثال
 
- `<!DOCTYPE html> 
+```
- <html> 
+<!DOCTYPE html>
- <head> 
+<html>
- <style> 
+<head>
- #grad1 { 
+<style>
-    height: 200px; 
+#grad1 {
-    background: red; /* For browsers that do not support gradients */ 
+    height: 200px;
-    background: -webkit-linear-gradient(left, red , green); /* For Safari 5.1 to 6.0 */ 
+    background: red; /* For browsers that do not support gradients */
-    background: -o-linear-gradient(right, red, green); /* For Opera 11.1 to 12.0 */ 
+    background: -webkit-linear-gradient(left, red , green); /* For Safari 5.1 to 6.0 */
-    background: -moz-linear-gradient(right, red, green); /* For Firefox 3.6 to 15 */ 
+    background: -o-linear-gradient(right, red, green); /* For Opera 11.1 to 12.0 */
-    background: linear-gradient(to right, red , green); /* Standard syntax (must be last) */ 
+    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> 
+</style>
- <body> 
+</head>
- 
+<body>
- <h3>Linear Gradient - Left to Right</h3> 
+
- <p>This linear gradient starts at the left. It starts red, transitioning to yellow:</p> 
+<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> 
+
- 
+<div id="grad1"></div>
- <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p> 
+
- 
+<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
- </body> 
+
- </html> 
+</body>
-` 
+</html>
+``` 
 
 ![من اليسار إلى اليمين](https://cdn-media-1.freecodecamp.org/imgr/k4FSyXz.jpg)
 
@@ -102,32 +104,33 @@ localeTitle: تدرجات CSS3
 
 #### مثال
 
- `<!DOCTYPE html> 
+```
- <html> 
+<!DOCTYPE html>
- <head> 
+<html>
- <style> 
+<head>
- #grad1 { 
+<style>
-    height: 200px; 
+#grad1 {
-    background: red; /* For browsers that do not support gradients */ 
+    height: 200px;
-    background: -webkit-linear-gradient(left top, red, green); /* For Safari 5.1 to 6.0 */ 
+    background: red; /* For browsers that do not support gradients */
-    background: -o-linear-gradient(bottom right, red, green); /* For Opera 11.1 to 12.0 */ 
+    background: -webkit-linear-gradient(left top, red, green); /* For Safari 5.1 to 6.0 */
-    background: -moz-linear-gradient(bottom right, red, green); /* For Firefox 3.6 to 15 */ 
+    background: -o-linear-gradient(bottom right, red, green); /* For Opera 11.1 to 12.0 */
-    background: linear-gradient(to bottom right, red, green); /* Standard syntax (must be last) */ 
+    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> 
+</style>
- <body> 
+</head>
- 
+<body>
- <h3>Linear Gradient - Diagonal</h3> 
+
- <p>This linear gradient starts at top left. It starts red, transitioning to yellow:</p> 
+<h3>Linear Gradient - Diagonal</h3>
- 
+<p>This linear gradient starts at top left. It starts red, transitioning to yellow:</p>
- <div id="grad1"></div> 
+
- 
+<div id="grad1"></div>
- <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p> 
+
- 
+<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
- </body> 
+
- </html> 
+</body>
-` 
+</html>
+``` 
 
 ![قطري-إكسب](https://cdn-media-1.freecodecamp.org/imgr/8gKRhAp.jpg)
 

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
- Even returns all even elements of a given type. 
+
-` 
+Even returns all even elements of a given type.
+``` 
 
 المغلق a: nth-childe (even) { / \* CSS هنا \* / }
 
- `#### An+B 
+```
- 
+#### An+B
- Returns all elements matching the equation An+B for every positive integer value of n (in addition to 0). 
+
- 
+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: 
+
-` 
+For example, the following will match every 3rd anchor element:
+``` 
 
 المغلق a: nth-childe (3n) { / \* CSS هنا \* / } \`\` \`
 

guide/arabic/css/css3-opacity-property/index.md

@@ -10,22 +10,23 @@ localeTitle: خاصية عتامة CSS3
 
 ضبط عنصر على `opacity: 0;` لا يزيلها من الصفحة. سيظل العنصر قابلاً للنقر وسيؤثر على تدفق محتوى الصفحة.
 
- `.transparent { 
+```css
-    opacity: 0; 
+.transparent {
- } 
+    opacity: 0;
- 
+}
- .verySeeThrough { 
+
-    opacity: 0.3; 
+.verySeeThrough {
- } 
+    opacity: 0.3;
- 
+}
- .slightlySeeThrough { 
+
-    opacity: 0.7; 
+.slightlySeeThrough {
- } 
+    opacity: 0.7;
- 
+}
- .opaque { 
+
-    opacity: 1; 
+.opaque {
- } 
+    opacity: 1;
-` 
+}
+``` 
 
 [يوضح هذا المثال البسيط](https://jsfiddle.net/1ogmxaf8/1/) كيفية استخدام التعتيم مع تأثير التمرير.
 

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 { 
+```css
-  width: 200px; 
+div {
-  transition: all 1s ease-in-out; 
+  width: 200px;
- } 
+  transition: all 1s ease-in-out;
- 
+}
- div:hover { 
+
-  width: 300px; 
+div:hover {
- } 
+  width: 300px;
-` 
+}
+``` 
 
 #### إعطاء جميع خصائص النقل قيمة
 
- `div { 
+```css
-  width: 200px; 
+div {
-  transition-property: width; 
+  width: 200px;
-  transition-duration: 1s; 
+  transition-property: width;
-  transition-timing-function: ease-in-out; 
+  transition-duration: 1s;
- } 
+  transition-timing-function: ease-in-out;
-` 
+}
+``` 
 
 ملاحظة: كلا المثالين **متساويان**
 

guide/arabic/css/current-color-keyword/index.md

@@ -14,21 +14,22 @@ localeTitle: الكلمة الرئيسية الحالية
 
 نعلن أن كل div يحتوي على حدود 3px بلون _currentColor_ ، مما يعني أن كل حد div سيتم تلوينه بنفس قيمة خاصية `color` الخاصة به. تحقق من المثال الحي [هنا](http://jsfiddle.net/tjkp0cm3/)
 
- `div{ 
+```css
-  /* The currentColor keyword for the color value, which means that the border will have the value of the respective div's color property */ 
+div{
-  border: 3px solid currentColor; 
+  /* 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{ 
+/* This div will have green borders, because its color value is green. */
-  color: green; 
+#div1{
- } 
+  color: green;
- 
+}
- /* This div will have blue borders, because its color value is blue. */ 
+
- #div2{ 
+/* This div will have blue borders, because its color value is blue. */
-  color: blue; 
+#div2{
- } 
+  color: blue;
-` 
+}
+``` 
 
 ### التطبيق العملي مع SVG
 
@@ -44,37 +45,39 @@ localeTitle: الكلمة الرئيسية الحالية
 
 يمكننا استخدام هذا الرمز الخاص بنا لتحقيق السلوك المطلوب.
 
- `button{ 
+```css
-  color: #016898; 
+button{
- } 
+  color: #016898;
- 
+}
- .emailIcon{ 
+
-  fill: #016898; 
+.emailIcon{
- } 
+  fill: #016898;
- 
+}
- button:hover { 
+
-  color: #19B5FE; 
+button:hover {
- } 
+  color: #19B5FE;
- 
+}
- button:hover .emailIcon{ 
+
-  fill: #19B5FE; 
+button:hover .emailIcon{
- } 
+  fill: #19B5FE;
-` 
+}
+``` 
 
 الآن، بدلا من تغيير SVG في `fill` اللون على تحوم بشكل واضح، فإننا يمكن أن يحدد التعبئة ل `currentColor` . يقوم هذا تلقائيًا بتغيير لون SVG إلى قيمة خاصية `color` الخاصة بالزر. نحن الآن بحاجة فقط إلى تغيير خاصية `color` من الزر. هذا يجعل رمز CSS أقصر وأذكى.
 
- `.emailIcon{ 
+```css
-  fill: currentColor; 
+.emailIcon{
- } 
+  fill: currentColor;
- 
+}
- button{ 
+
-  color: #016898; 
+button{
- } 
+  color: #016898;
- 
+}
- button:hover { 
+
-  color: #19B5FE; 
+button:hover {
- } 
+  color: #19B5FE;
-` 
+}
+``` 
 
 تحقق من المثال المباشر على https://repl.it/NNt9/2.
 

guide/arabic/css/dropdowns/index.md

@@ -8,38 +8,39 @@ localeTitle: هبوط قطرة
 
 أمثلة:
 
- `
+```html
-<div class="dropdown"> 
+<div class="dropdown">
-  <button class="dropbtn">Name</button> 
+  <button class="dropbtn">Name</button>
-  <div class="dropdownContent"> 
+  <div class="dropdownContent">
-    <a href="#">One</a> 
+    <a href="#">One</a>
-    <a href="#">Two</a> 
+    <a href="#">Two</a>
-    <a href="#">Three</a> 
+    <a href="#">Three</a>
-  </div> 
+  </div>
- </div> 
+</div>
-` 
+``` 
 
 ثم يجب عليك تخصيص الطبقات في CSS
 
- `.dropdown { 
+```css
-  position: relative; 
+.dropdown {
-  display: inline-block; 
+  position: relative;
- } 
+  display: inline-block;
- 
+}
- .dropbtn { 
+
-  background-color: red; 
+.dropbtn {
-  padding: 10px; 
+  background-color: red;
- } 
+  padding: 10px;
- 
+}
- .dropdown-content { 
+
-  display: none; 
+.dropdown-content {
-  position: absolute; 
+  display: none;
- } 
+  position: absolute;
- 
+}
- .dropdown:hover .dropdown-content { 
+
-  display:block; 
+.dropdown:hover .dropdown-content {
- } 
+  display:block;
-` 
+}
+``` 
 
 تحتاج إلى فئات div منفصلة لإنشاء الزر ، و div آخر لفصل قائمة ما يحتوي عليه الزر.
 

guide/arabic/css/fonts/index.md

@@ -29,18 +29,19 @@ localeTitle: الخطوط
 *   مائل - النص موضح في _المائل_
 *   مائل - النص المائل يميل
 
- `.normal { 
+```css
-    font-style: normal; 
+.normal {
- } 
+    font-style: normal;
- 
+}
- .italic { 
+
-    font-style: italic; 
+.italic {
- } 
+    font-style: italic;
- 
+}
- .oblique { 
+
-    font-style: oblique; 
+.oblique {
- } 
+    font-style: oblique;
-` 
+}
+``` 
 
 ### حجم الخط
 
@@ -53,39 +54,41 @@ localeTitle: الخطوط
 *   `small` ، `medium` ، `large` - يُعرف بقيم الحجم المطلقة
 *   `%` - النسب المئوية
 
- `.with-pixels { 
+```css
-    font-size: 14px; 
+.with-pixels {
- } 
+    font-size: 14px;
- 
+}
- .with-ems { 
+
-    font-size: 0.875em; 
+.with-ems {
- } 
+    font-size: 0.875em;
- 
+}
- .with-absolute { 
+
-    font-size: large; 
+.with-absolute {
- } 
+    font-size: large;
- 
+}
- .with-percentage { 
+
-    font-size: 80%; 
+.with-percentage {
- } 
+    font-size: 80%;
-` 
+}
+``` 
 
 ### وزن الخط
 
 تحدد الخاصية `font-weight` الوزن (أو الجرأة) للخط. يقبل الكلمات الرئيسية ( `bold` ، `normal` ، `bolder` ، `lighter` ) أو كلمات رئيسية عددية ( `100` ، `200` ، `300` ، `400` إلخ) `400` هو نفسه `normal` .
 
- `p { 
+```css
-   font-weight: bold 
+p {
- } 
+   font-weight: bold
-` 
+}
+``` 
 
 ### استجابة الخط
 
 يمكن ضبط حجم النص بوحدة عرض vw (عرض إطار العرض). وبهذه الطريقة ، سيتبع حجم النص حجم نافذة المتصفح.
 
- `
+```html
-<h1 style="font-size:10vw">Hello World</h1> 
+<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 { 
+```css
-  font-variant: small-caps; 
+p.small {
- } 
+  font-variant: small-caps;
-` 
+}
+``` 
 
 #### معلومات اكثر:
 

guide/arabic/css/forms/index.md

@@ -6,11 +6,11 @@ localeTitle: إستمارات
 
 يعرّف عنصر نموذج HTML نموذجًا يُستخدم لجمع إدخال المستخدم. أمثلة:
 
- `
+```html
-<form> 
+<form>
-  contents 
+  contents
- </form> 
+</form>
-` 
+``` 
 
 يحتوي نموذج HTML على عناصر النموذج.
 

guide/arabic/css/height-and-width-dimensions/index.md

@@ -32,9 +32,9 @@ localeTitle: أبعاد الطول والعرض
 
 **مثال:**
 
- `
+```html
-<p id="red">Example text</p> 
+<p id="red">Example text</p>
-` 
+``` 
 
  `p#red { 
     margin: 0; 
@@ -51,20 +51,22 @@ localeTitle: أبعاد الطول والعرض
 
 **مثال:**
 
- `p#example { 
+```css
-  min-height: 400px; 
+p#example {
- } 
+  min-height: 400px;
-` 
+}
+``` 
 
 تحدد الخاصية `max-height` أقصى ارتفاع يمكن أن يصل إليه العنصر. قد يكون ذلك مفيدًا عندما لا تريد أن يكون العنصر أكبر من حجم معين. إذا كان محتوى العنصر أعلى من قيمة `max-height` المحتوى.
 
 **مثال:**
 
- `p { 
+```css
-  max-height: 40px; 
+p {
-  background-color: red; 
+  max-height: 40px;
- } 
+  background-color: red;
-` 
+}
+``` 
 
 **نتيجة:** ![مثال 3](https://image.prntscr.com/image/eRdqazdUSWO2rdVfcUb5rQ.png)
 
@@ -74,11 +76,12 @@ localeTitle: أبعاد الطول والعرض
 
 **مثال:**
 
- `p { 
+```css
-  width: 150px; 
+p {
-  background-color: red; 
+  width: 150px;
- } 
+  background-color: red;
-` 
+}
+``` 
 
 **نتيجة:** ![مثال 4](https://image.prntscr.com/image/x1_khU6TQsmZQznt7YU9qw.png)
 
@@ -86,20 +89,22 @@ _ملاحظة: لا يمتد المحتوى إلى اليمين ، بل يسته
 
 **مثال:**
 
- `p { 
+```css
-  min-width: 50px; 
+p {
- } 
+  min-width: 50px;
-` 
+}
+``` 
 
 لن يسمح الكود السابق ببساطة لعنصر فقرة أن يتقلص أفقيًا إلى أقل من 50 بكسل.
 
 **مثال:**
 
- `p { 
+```css
-  max-width: 300px; 
+p {
-  background-color: red; 
+  max-width: 300px;
- } 
+  background-color: red;
-` 
+}
+``` 
 
 لن يسمح الرمز أعلاه بعرض عنصر أكبر من 300 بكسل.
 

guide/arabic/css/hover-selector/index.md

@@ -18,17 +18,18 @@ CSS البناء :يحوم { اعلانات css }
 
 يطبق محدد التمرير فقط الأنماط المتوفرة في القاعدة عندما يدخل العنصر في حالة التمرير. هذا هو عندما يمرر المستخدم فوق العنصر باستخدام الماوس الخاص به.
 
- `button { 
+```css
-  color: white; 
+button {
-  background-color: green; 
+  color: white;
- } 
+  background-color: green;
- 
+}
- button:hover { 
+
-  background-color: white; 
+button:hover {
-  border: 2px solid green; 
+  background-color: white;
-  color: green; 
+  border: 2px solid green;
- } 
+  color: green;
-` 
+}
+``` 
 
 في المثال أعلاه ، يكون التصميم العادي للزر عبارة عن نص أبيض على زر أخضر. عندما يمرر المستخدم فوق الزر باستخدام الماوس الخاص به ، فإن القاعدة مع `:hover` سوف تصبح نشطة ، وسوف يتغير نمط الزر.
 

guide/arabic/css/id-selector/index.md

@@ -8,15 +8,17 @@ localeTitle: محدد الهوية
 
 ### بناء الجملة
 
- `#specified_id { /* styles */ } 
+```css
-` 
+#specified_id { /* styles */ }
+``` 
 
 يمكنك دمج محدد المعرّف مع أنواع أخرى من المحددات لتمييز عنصر محدد جدًا.
 
- `section#about:hover { color: blue; } 
+```css
- 
+section#about:hover { color: blue; }
- div.classname#specified_id { color: green; } 
+
-` 
+div.classname#specified_id { color: green; }
+``` 
 
 ### ملاحظة حول المعرفات
 
@@ -24,9 +26,9 @@ localeTitle: محدد الهوية
 
 تذكر ، يجب أن يتطابق محدد ID مع سمة معرف عنصر HTML.
 
- `
+```html
-<div id="specified_id"><!-- content --></div> 
+<div id="specified_id"><!-- content --></div>
-` 
+``` 
 
 ### النوعية
 

guide/arabic/css/image-galleries/index.md

@@ -8,64 +8,65 @@ localeTitle: معرض الصور
 
 ## معرض الصور مثال
 
- `<html> 
+```
- <head> 
+<html>
- <style> 
+<head>
- div.gallery { 
+<style>
-    margin: 5px; 
+div.gallery {
-    border: 1px solid #ccc; 
+    margin: 5px;
-    float: left; 
+    border: 1px solid #ccc;
-    width: 180px; 
+    float: left;
- } 
+    width: 180px;
- 
+}
- div.gallery:hover { 
+
-    border: 1px solid #777; 
+div.gallery:hover {
- } 
+    border: 1px solid #777;
- 
+}
- div.gallery img { 
+
-    width: 100%; 
+div.gallery img {
-    height: 150px; 
+    width: 100%;
- } 
+    height: 150px;
- 
+}
- div.desc { 
+
-    padding: 15px; 
+div.desc {
-    text-align: center; 
+    padding: 15px;
- } 
+    text-align: center;
- </style> 
+}
- </head> 
+</style>
- <body> 
+</head>
- 
+<body>
- <div class="gallery"> 
+
-  <a target="_blank" href="fjords.jpg"> 
+<div class="gallery">
-    <img src="https://www.dropbox.com/s/mdj3pjh4jgyeieo/cat1.jpg?raw=1" alt="Image of staring cat" width="300" height="200"> 
+  <a target="_blank" href="fjords.jpg">
-  </a> 
+    <img src="https://www.dropbox.com/s/mdj3pjh4jgyeieo/cat1.jpg?raw=1" alt="Image of staring cat" width="300" height="200">
-  <div class="desc">Add a description of the image here</div> 
+  </a>
- </div> 
+  <div class="desc">Add a description of the image here</div>
- 
+</div>
- <div class="gallery"> 
+
-  <a target="_blank" href="forest.jpg"> 
+<div class="gallery">
-    <img src="https://www.dropbox.com/s/i1ow97mcl6ubxhv/cat2.jpg?raw=1" alt="Image of fat cat" width="300" height="200"> 
+  <a target="_blank" href="forest.jpg">
-  </a> 
+    <img src="https://www.dropbox.com/s/i1ow97mcl6ubxhv/cat2.jpg?raw=1" alt="Image of fat cat" width="300" height="200">
-  <div class="desc">Add a description of the image here</div> 
+  </a>
- </div> 
+  <div class="desc">Add a description of the image here</div>
- 
+</div>
- <div class="gallery"> 
+
-  <a target="_blank" href="lights.jpg"> 
+<div class="gallery">
-    <img src="https://www.dropbox.com/s/h6ks8v78ncwur31/cat3.jpg?raw=1" alt="Image of frolicking cat" width="300" height="200"> 
+  <a target="_blank" href="lights.jpg">
-  </a> 
+    <img src="https://www.dropbox.com/s/h6ks8v78ncwur31/cat3.jpg?raw=1" alt="Image of frolicking cat" width="300" height="200">
-  <div class="desc">Add a description of the image here</div> 
+  </a>
- </div> 
+  <div class="desc">Add a description of the image here</div>
- 
+</div>
- <div class="gallery"> 
+
-  <a target="_blank" href="mountains.jpg"> 
+<div class="gallery">
-    <img src="https://www.dropbox.com/s/zda9llgop3j9bf7/cat4.jpg?raw=1" alt="Image of wide-eyed cat" width="300" height="200"> 
+  <a target="_blank" href="mountains.jpg">
-  </a> 
+    <img src="https://www.dropbox.com/s/zda9llgop3j9bf7/cat4.jpg?raw=1" alt="Image of wide-eyed cat" width="300" height="200">
-  <div class="desc">Add a description of the image here</div> 
+  </a>
- </div> 
+  <div class="desc">Add a description of the image here</div>
- 
+</div>
- </body> 
+
- </html> 
+</body>
-` 
+</html>
+``` 
 
 ## النتائج:
 

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--> 
+[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 
+
- 
+You can create the opposite effect with less code since the image is 1.0 opacity by default
- Example: 
+
-` 
+Example:
+``` 
 
 المغلق img: hover { التعتيم: 0.3 ؛ filter: alpha (opacity = 30)؛ } \`\` \` [مثال codepen لإظهار الشفافية على الماوس](https://codepen.io/lvcoulter/full/xXBQoR/)
 

guide/arabic/css/layout/display-property/index.md

@@ -6,32 +6,34 @@ localeTitle: عرض الملكية
 
 تحدد خاصية `display` نوع المربع المستخدم لعنصر HTML. هناك 20 قيمة للكلمات الرئيسية الإجمالية ، على الرغم من استخدام 10 فقط بشكل شائع. هذه هي شائعة الاستخدام:
 
- `.none           {display: none} 
+```css
- .block          {display: block} 
+.none           {display: none}
- .inline-block   {display: inline-block} 
+.block          {display: block}
- .inline         {display: inline} 
+.inline-block   {display: inline-block}
- .flex           {display: flex} 
+.inline         {display: inline}
- .inline-flex    {display: inline-flex} 
+.flex           {display: flex}
- .inline-table   {display: inline-table} 
+.inline-flex    {display: inline-flex}
- .table          {display: table} 
+.inline-table   {display: inline-table}
- .inherit        {display: inherit} 
+.table          {display: table}
- .initial        {display: initial} 
+.inherit        {display: inherit}
-` 
+.initial        {display: initial}
+``` 
 
 **أمثلة شائعة:**
 
- `.myBox { 
+```css
-    display: block; 
+.myBox {
- } 
+    display: block;
- 
+}
- .myContainer { 
+
-    display: flex; 
+.myContainer {
- } 
+    display: flex;
- 
+}
- .inlineList ul > li { 
+
-    display: inline; 
+.inlineList ul > li {
- } 
+    display: inline;
-` 
+}
+``` 
 
 #### معلومات اكثر:
 

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>;
+``` 
 
 ## أساس المرن: السيارات
 

guide/arabic/css/layout/flexbox/flex-grow/index.md

@@ -20,21 +20,22 @@ localeTitle: فليكس النمو
 
 HTML
 
- `
+```html
-<p class = "ten">1</p> 
+<p class = "ten">1</p>
- <p class = "twenty">2</p> 
+<p class = "twenty">2</p>
-` 
+``` 
 
 CSS
 
- `body { 
+```css
-  display:flex; 
+body {
- } 
+  display:flex;
- 
+}
- p { 
+
-  flex-grow: 1; 
+p {
- } 
+  flex-grow: 1;
-` 
+}
+``` 
 
 حدث شيئان
 

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
 

guide/arabic/css/layout/grid-layout/index.md

@@ -24,25 +24,27 @@ CSS Network Layout ، والمعروف ببساطة باسم الشبكة ، ه
 
 من الناحية المثالية ، عند إنشاء موقع ، يمكنك تصميمه مع الشبكة واستخدام Flex كحل بديل. يمكنك معرفة ما إذا كان المستعرض يدعم الشبكة باستخدام قاعدة CSS `@support` (يُعرف أيضًا باسم استعلام الميزات). إليك مثال على ذلك:
 
- `.container { 
+```css
-  display: grid; /* display grid by default */ 
+.container {
- } 
+  display: grid; /* display grid by default */
- 
+}
- @supports not (display: grid) { /* if grid is not supported by the browser */ 
+
-  .container { 
+@supports not (display: grid) { /* if grid is not supported by the browser */
-    display: flex; /* display flex instead of grid */ 
+  .container {
-  } 
+    display: flex; /* display flex instead of grid */
- } 
+  }
-` 
+}
+``` 
 
 ### ابدء
 
 لجعل أي عنصر شبكة ، تحتاج إلى تعيين خاصية `display` الخاصة بها إلى `grid` ، مثل:
 
- `.conatiner { 
+```css
-  display: grid; 
+.conatiner {
- } 
+  display: grid;
-` 
+}
+``` 
 
 وهذا كل شيء. لقد قمت للتو `.container` . يصبح كل عنصر داخل `.container` عنصر شبكة بشكل تلقائي.
 
@@ -50,9 +52,10 @@ CSS Network Layout ، والمعروف ببساطة باسم الشبكة ، ه
 
 الصفوف والأعمدة
 
- `grid-template-columns: 1fr 1fr 1fr 1fr; 
+```css
- grid-template-rows: auto 300px; 
+grid-template-columns: 1fr 1fr 1fr 1fr;
-` 
+grid-template-rows: auto 300px;
+``` 
 
 المناطق
 
@@ -65,39 +68,41 @@ CSS Network Layout ، والمعروف ببساطة باسم الشبكة ، ه
 
 أو
 
- `grid-template-areas: 
+```css
-  "header header header header" 
+grid-template-areas:
-  "nav main main sidebar"; 
+  "header header header header"
-` 
+  "nav main main sidebar";
+``` 
 
 ### مناطق الشبكة
 
 فيما يلي بعض نماذج التعليمات البرمجية حول كيفية تحديد مناطق الشبكة وتعيينها
 
- `.site { 
+```css
-  display: grid; 
+.site {
-  grid-template-areas: /* applied to grid container */ 
+  display: grid;
-    "head head" /* you're assigning cells to areas by giving the cells an area name */ 
+  grid-template-areas: /* applied to grid container */
-    "nav  main" /* how many values kind of depends on how many cells you have in the grid */ 
+    "head head" /* you're assigning cells to areas by giving the cells an area name */
-    "nav  foot"; 
+    "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 > header {
- } 
+  grid-area: head;
- 
+}
- .site > nav { 
+
-  grid-area: nav; 
+.site > nav {
- } 
+  grid-area: nav;
- 
+}
- .site > main { 
+
-    grid-area: main; 
+.site > main {
- } 
+    grid-area: main;
- 
+}
- .site > footer { 
+
-    grid-area: foot; 
+.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 { 
+```css
-  display: grid; 
+.site {
-  grid-template-columns: 1fr 1fr; 
+  display: grid;
-  grid-template-areas: 
+  grid-template-columns: 1fr 1fr;
-    "title title" 
+  grid-template-areas:
-    "main header" 
+    "title title"
-    "main sidebar" 
+    "main header"
- } 
+    "main sidebar"
- 
+}
- @media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */ 
+
-  .site { 
+@media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */
-    grid-template-columns: 2fr 1fr 1fr; 
+  .site {
-    grid-template-areas: 
+    grid-template-columns: 2fr 1fr 1fr;
-      "title title title" 
+    grid-template-areas:
-      "main header header" 
+      "title title title"
-      "main sidebar footer" 
+      "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) .
 

guide/arabic/css/legal-color-values/index.md

@@ -27,23 +27,24 @@ localeTitle: قيم اللون القانونية
 
 هنا ألوان عرافة مختلفة. ابحث عن المثال المباشر على https://jsfiddle.net/qg9revp4/2/.
 
- `#divRed{ 
+```css
-  color: #ff0000; /* red */ 
+#divRed{
- } 
+  color: #ff0000; /* red */
- 
+}
- #divGreen{ 
+
-  color: #00ff00; /* green */ 
+#divGreen{
- } 
+  color: #00ff00; /* green */
- 
+}
- #divBlue{ 
+
-  color: #0000ff; /* blue */ 
+#divBlue{
- } 
+  color: #0000ff; /* blue */
- 
+}
- #divWhite{ 
+
-  color: #ffffff; /* white */ 
+#divWhite{
-  background: #000000; /* black background, so that the text is visible */ 
+  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{ 
+```css
-  color: rgb(255, 0, 0); /* red */ 
+#divRed{
- } 
+  color: rgb(255, 0, 0); /* red */
- 
+}
- #divGreen{ 
+
-  color: rgb(0, 255, 0); /* green */ 
+#divGreen{
- } 
+  color: rgb(0, 255, 0); /* green */
- 
+}
- #divBlue{ 
+
-  color: rgb(0, 0, 255); /* blue */ 
+#divBlue{
- } 
+  color: rgb(0, 0, 255); /* blue */
- 
+}
- #divWhite{ 
+
-  color: rgb(255, 255, 255); /* white */ 
+#divWhite{
-  background: rgb(0, 0, 0); /* black background, so that the text is visible */ 
+  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{ 
+```css
-  color: rgba(255, 0, 0, 0.3); /* red with opacity */ 
+#divRed{
- } 
+  color: rgba(255, 0, 0, 0.3); /* red with opacity */
- 
+}
- #divGreen{ 
+
-  color: rgba(0, 255, 0, 0.7); /* green with opacity */ 
+#divGreen{
- } 
+  color: rgba(0, 255, 0, 0.7); /* green with opacity */
- 
+}
- #divBlue{ 
+
-  color: rgba(0, 0, 255, 0.5); /* blue with opacity */ 
+#divBlue{
- } 
+  color: rgba(0, 0, 255, 0.5); /* blue with opacity */
- 
+}
- #divWhite{ 
+
-  color: rgba(255, 255, 255, 0.6); /* white with opacity */ 
+#divWhite{
-  background: rgba(0, 0, 0, 0.8); /* black background with opacity */ 
+  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 { 
+```css
-  background-color: hsl(240, 100%, 50%); /* blue */ 
+#div1 {
- } 
+  background-color: hsl(240, 100%, 50%); /* blue */
- #div2 { 
+}
-  background-color: hsl(195, 53%, 79%); /* light blue */ 
+#div2 {
- } 
+  background-color: hsl(195, 53%, 79%); /* light blue */
- #div3 { 
+}
-  background-color: hsl(240, 100%, 25%); /* dark blue */ 
+#div3 {
- } 
+  background-color: hsl(240, 100%, 25%); /* dark blue */
- #div4 { 
+}
-  background-color: hsl(187, 75%, 86%); /* pastel blue */ 
+#div4 {
- } 
+  background-color: hsl(187, 75%, 86%); /* pastel blue */
-` 
+}
+``` 
 
 ### ألوان HSLA
 
@@ -171,19 +175,20 @@ HSLA تعني التدرج والتشبع والخفة وقناة ألفا. تم
 
 فيما يلي أمثلة على ألوان HSLA. انظر لهم يعيشون في https://jsfiddle.net/2Lxscgfy/1/.
 
- `#div1 { 
+```css
-  background-color: hsla(240, 100%, 50%, 0.5); /* blue with transparency */ 
+#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 */ 
+#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 */ 
+#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 */ 
+#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{ 
+```css
-  color: BlueViolet; 
+#div1{
- } 
+  color: BlueViolet;
- 
+}
- #div2{ 
+
-  color: RebeccaPurple; 
+#div2{
- } 
+  color: RebeccaPurple;
- 
+}
- #div3{ 
+
-  color: RoyalBlue; 
+#div3{
- } 
+  color: RoyalBlue;
- 
+}
- #div4{ 
+
-  color: Salmon; 
+#div4{
- } 
+  color: Salmon;
-` 
+}
+``` 
 
 #### معلومات اكثر:
 

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)
 

guide/arabic/css/margins/index.md

@@ -10,10 +10,11 @@ localeTitle: هوامش
 
 ## بناء الجملة
 
- `.element { 
+```css
-    margin: margin-top || margin-right || margin-bottom || margin-left; 
+.element {
- } 
+    margin: margin-top || margin-right || margin-bottom || margin-left;
-` 
+}
+``` 
 
 يمكن تحديد هذه الخاصية باستخدام قيم واحدة أو اثنتين أو ثلاثة أو أربعة.
 

guide/arabic/css/navigation-bars/index.md

@@ -19,44 +19,45 @@ localeTitle: أشرطة الملاحة
 
 هناك جزءان لأي التنقل: HTML و CSS. هذا مجرد مثال سريع.
 
- `
+```html
-<nav class="myNav">                                 <!-- Any element can be used here --> 
+<nav class="myNav">                                 <!-- Any element can be used here -->
-    <ul> 
+    <ul>
-        <li><a href="index.html">Home</a></li> 
+        <li><a href="index.html">Home</a></li>
-        <li><a href="about.html">About</a></li> 
+        <li><a href="about.html">About</a></li>
-        <li><a href="contact.html">Contact</a></li> 
+        <li><a href="contact.html">Contact</a></li>
-    </ul> 
+    </ul>
- </nav> 
+</nav>
-` 
+``` 
 
- `/* Define the main Navigation block */ 
+```css
- .myNav { 
+/* Define the main Navigation block */
-    display: block; 
+.myNav {
-    height: 50px; 
+    display: block;
-    line-height: 50px; 
+    height: 50px;
-    background-color: #333; 
+    line-height: 50px;
- } 
+    background-color: #333;
- /* Remove bullets, margin and padding */ 
+}
- .myNav ul { 
+/* Remove bullets, margin and padding */
-    list-style: none; 
+.myNav ul {
-    padding: 0; 
+    list-style: none;
-    margin: 0; 
+    padding: 0;
- } 
+    margin: 0;
- .myNav li { 
+}
-    float: left; 
+.myNav li {
-    /* Or you can use display: inline; */ 
+    float: left;
- } 
+    /* Or you can use display: inline; */
- /* Define the block styling for the links */ 
+}
- .myNav li a { 
+/* Define the block styling for the links */
-    display: inline-block; 
+.myNav li a {
-    text-align: center; 
+    display: inline-block;
-    padding: 14px 16px; 
+    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 { 
+/* This is optional, however if you want to display the active link differently apply a background to it */
-    background-color: #3786E1; 
+.myNav li a.active {
- } 
+    background-color: #3786E1;
-` 
+}
+``` 
 
 #### معلومات اكثر:
 

guide/arabic/css/object-fit/index.md

@@ -12,10 +12,11 @@ localeTitle: كائن صالح
 
 ## بناء الجملة
 
- `.element { 
+```css
-    object-fit: fill || contain || cover || none || scale-down; 
+.element {
- } 
+    object-fit: fill || contain || cover || none || scale-down;
-` 
+}
+``` 
 
 ## القيم
 

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)
 

guide/arabic/css/padding/index.md

@@ -10,10 +10,11 @@ localeTitle: حشوة
 
 ## بناء الجملة
 
- `.element { 
+```css
-    padding: [padding-top] || [padding-right] || [padding-bottom] || [padding-left]; 
+.element {
- } 
+    padding: [padding-top] || [padding-right] || [padding-bottom] || [padding-left];
-` 
+}
+``` 
 
 يمكن تحديد هذه الخاصية باستخدام قيم واحدة أو اثنتين أو ثلاثة أو أربعة.
 

guide/arabic/css/properties/background-color-property/index.md

@@ -8,18 +8,19 @@ localeTitle: خاصية لون الخلفية
 
 **مثال:**
 
- `body { 
+```css
-    background-color: crimson; 
+body {
- } 
+    background-color: crimson;
- 
+}
- div { 
+
-    background-color: #ffffff; 
+div {
- } 
+    background-color: #ffffff;
- 
+}
- .myClass { 
+
-    background-color: rgba(0, 0, 0, 0.5); 
+.myClass {
- } 
+    background-color: rgba(0, 0, 0, 0.5);
-` 
+}
+``` 
 
 #### قيم الملكية:
 

guide/arabic/css/properties/background-property/index.md

@@ -19,26 +19,27 @@ localeTitle: خاصية الخلفية
 
 التركيب 1 :
 
- `body { 
+```css
-  /* Using a <background-color> */ 
+body {
-  background: green; 
+  /* Using a <background-color> */
- } 
+  background: green;
- 
+}
- .error { 
+
-  /* Using a <bg-image> and <repeat-style> */ 
+.error {
-  background: url("test.jpg") repeat-y; 
+  /* Using a <bg-image> and <repeat-style> */
- } 
+  background: url("test.jpg") repeat-y;
- 
+}
- header { 
+
-  /* Using a <box> and <background-color> */ 
+header {
-  background: border-box red; 
+  /* Using a <box> and <background-color> */
- } 
+  background: border-box red;
- 
+}
- .topbanner { 
+
-  /* A single image, centered and scaled */ 
+.topbanner {
-  background: no-repeat center/80% url("../img/image.png"); 
+  /* A single image, centered and scaled */
- } 
+  background: no-repeat center/80% url("../img/image.png");
-` 
+}
+``` 
 
 ### مصادر
 

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 { 
+```css
-    background-image:url(smiley.gif); 
+body {
-    background-repeat:repeat; 
+    background-image:url(smiley.gif);
- } 
+    background-repeat:repeat;
-` 
+}
+``` 
 
 لتكرار الصورة أفقيا
 
- `body { 
+```css
-    background-image:url(smiley.gif); 
+body {
-    background-repeat:repeat-x; 
+    background-image:url(smiley.gif);
- } 
+    background-repeat:repeat-x;
-` 
+}
+``` 
 
 #### معلومات اكثر:
 

guide/arabic/css/properties/clear-property/index.md

@@ -10,13 +10,14 @@ localeTitle: واضح الممتلكات
 
 يتم استخدام هذه الخاصية بعد استخدام الخاصية `float` "مسح" خارج `float` .
 
- `clear: none; 
+```css
- clear: left; 
+clear: none;
- clear: right; 
+clear: left;
- clear: both; 
+clear: right;
- clear: inline-start; 
+clear: both;
- clear: inline-end; 
+clear: inline-start;
-` 
+clear: inline-end;
+``` 
 
 ### مثال:
 

guide/arabic/css/properties/color-property/index.md

@@ -10,45 +10,51 @@ localeTitle: خاصية اللون
 
 *   بالاسم (ملاحظة: هذا يعمل فقط مع ألوان معينة)
 
- `h1{ 
+```css
-    color: blue; 
+h1{
- } 
+    color: blue;
-` 
+}
+``` 
 
 *   سداسي عشري (تم تحديده كـ #rrggbb)
 
- `h1{ 
+```css
-    color:  #0000ff; 
+h1{
- } 
+    color:  #0000ff;
-` 
+}
+``` 
 
 *   RGB (تم تحديده على أنه rgb (r، g، b))
 
- `h1{ 
+```css
-    color: rgb(0, 0, 255); 
+h1{
- } 
+    color: rgb(0, 0, 255);
-` 
+}
+``` 
 
 *   RGBA (تم تحديده كـ rgba (r، g، b، alpha))
 
- `h1{ 
+```css
-    color: rgba(0, 0, 255, 0.5); 
+h1{
- } 
+    color: rgba(0, 0, 255, 0.5);
-` 
+}
+``` 
 
 *   HSL (هوى ، خفة ، تشبع)
 
- `h1{ 
+```css
-    color: hsl(240, 100%, 50%); 
+h1{
- } 
+    color: hsl(240, 100%, 50%);
-` 
+}
+``` 
 
 *   HSLA (هوى ، خفة ، تشبع ، ألفا)
 
- `h1{ 
+```css
-    color: hsl(240, 100%, 50%, 0.5); 
+h1{
- } 
+    color: hsl(240, 100%, 50%, 0.5);
-` 
+}
+``` 
 
 ## خصائص CSS الألوان موضحة
 

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؛ } \`\` \`