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 Jim
 > We have Jane
 > We have Jack
-`
+```

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

@@ -8,7 +8,8 @@ localeTitle: إذا كان البيان الآخر
 
 ## مثال
 
- `if(boolean expression) 
+```
+if(boolean expression)
 {
 // execute this code block if expression evalutes to true
 }
@@ -29,11 +30,12 @@ localeTitle: إذا كان البيان الآخر
 {
   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 0 is 1
 > Parameter 1 is 2
 > 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,13 +8,15 @@ localeTitle: أي
 
 ### التوقيع
 
- `public static bool Any<TSource>(this IEnumerable<TSource> source); 
+```csharp
+public static bool Any<TSource>(this IEnumerable<TSource> source);
 public static bool Any<TSource>(this IEnumerable<TSource> source, Func<TSource, bool> predicate);
-` 
+``` 
 
 ## مثال
 
- `var fruits = new List<Fruit>() { 
+```csharp
+var fruits = new List<Fruit>() {
     new Fruit() { Id = 1, Name = "Orange",     Color = "Orange", Quantity: 3   },
     new Fruit() { Id = 2, Name = "Strawberry", Color = "Red",    Quantity: 12  },
     new Fruit() { Id = 3, Name = "Grape",      Color = "Purple", Quantity: 25  },
@@ -32,4 +34,4 @@ localeTitle: أي
 var hasFruits = fruits.Any(); // true
 
 var hasYellowFruit = fruits.Any(f => f.Color == "Yellow"); // true
-`
+```

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

@@ -13,7 +13,8 @@ localeTitle: واحد أو افتراضي
 
 ## مثال
 
- `var fruits = new List<Fruit>() { 
+```csharp
+var fruits = new List<Fruit>() {
     new Fruit() { Id = 1, Name = "Orange",     Color = "Orange", Quantity: 3   },
     new Fruit() { Id = 2, Name = "Strawberry", Color = "Red",    Quantity: 12  },
     new Fruit() { Id = 3, Name = "Grape",      Color = "Purple", Quantity: 25  },
@@ -25,4 +26,4 @@ localeTitle: واحد أو افتراضي
 var purpleFruit = fruits.SingleOrDefault(f => f.Color == "Purple"); // Grape
 
 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");
 }
-` 
+``` 
 
 ومع ذلك ، إذا كان سيتم إعادة تسمية المعلمة الطالب ، يجب عليك أن تتذكر أيضا تعديل سلسلة حرفية. الآن مع تعبير nameof ، لن تحتاج إلى استخدام القيم الحرفية للسلسلة وسيتمكن المترجم من تحذيرك إذا كنت تستخدم اسمًا غير صحيح.
 
 # #
 
- `public void ProcessStudent(Student student) 
+```
+public void ProcessStudent(Student student)
 {
     if (student == null) throw new ArgumentNullException(nameof(student));
 }
-` 
+``` 
 
 بعض الأمثلة من حيث قد تكون تعبيرات nameof مفيدة تشمل:
 

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

@@ -6,7 +6,8 @@ localeTitle: متداخلة If بيان
 
 يتم استخدام البيان المتداخل If عند إنشاء عبارة if تريد نقطة ثانوية للتحقق أو إذا كانت عبارة داخلها.
 
- `int Price = 100; 
+```
+int Price = 100;
 int Quantity = 20;
 
 if (Price == 100)
@@ -16,9 +17,10 @@ localeTitle: متداخلة If بيان
     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 
+```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 
+```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
+Address address = null;
 if (employee != null)
 {
     address = employee.Address;
 }
-` 
+``` 
 
 يمكنك استخدام عامل تشغيل شرطي قياسي لجعل ذلك الاختيار أكثر إيجازًا:
 
- `Address address = employee != null ? employee.Address : null; 
+```csharp
-` 
+Address address = employee != null ? employee.Address : null;
+``` 
 
 ومع ذلك ، في C # 6.0 دخلت المشغلين خالية الشرطي ، لذلك الآن يمكن للخط أعلاه ببساطة يتم تمثيله على النحو التالي:
 
- `Address address = student?.Address; 
+```csharp
-` 
+Address address = student?.Address;
+``` 
 
 إذا كان الموظف فارغًا ، فسيتم تعيين العنوان ببساطة ، ولن يحدث أي NullReferenceExeception. هذا يصبح أكثر فائدة مع الرسوم البيانية كائن أعمق ، كما يمكنك التعامل مع سلسلة من وصول الأعضاء المشروط.
 
 فمثلا:
 
- `string city = student?.Address?.City; 
+```csharp
-` 
+string city = student?.Address?.City;
+``` 
 
 المشغلين الشرطيين هم دوائر قصيرة ، وذلك بمجرد التحقق من وصول العضو الشرطي إرجاع لا شيء ، والباقي لا يحدث.
 
@@ -38,7 +42,8 @@ localeTitle: مشغل شرطي لاغية
 
 فمثلا:
 
- `public string GetStringValue() 
+```csharp
+public string GetStringValue()
 {
     return null;
 }
@@ -52,4 +57,4 @@ localeTitle: مشغل شرطي لاغية
 // Result:
 
 "It was null."
-`
+```

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

@@ -8,7 +8,8 @@ localeTitle: أنواع nullable
 
 #### كيفية استخدام نوع nullable
 
- `// Declare a variable of Nullable type (Nullable<int>) 
+```csharp
+// Declare a variable of Nullable type (Nullable<int>)
 int? i = null;
 
 int  j = 0;
@@ -25,7 +26,7 @@ localeTitle: أنواع nullable
 
 //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 message = $"Hello {firstName} {lastName}!"; 
+```
-` 
+string message = $"Hello {firstName} {lastName}!";
+``` 
 
 **القليل من المعلومات المفيدة** في الاستيفاء سلسلة لديك القدرة على استدعاء وظائف ، والخصائص والمشغلين الثلاثي:
 
- `int a = 3; 
+```
+int a = 3;
 int b = 454;
 string result = $"{a}+{b} = {a+b}";
-`
+```

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

@@ -8,7 +8,8 @@ localeTitle: تبديل القضية
 
 ## مثال
 
- `public enum Colors { Red, Blue, Green, Orange } 
+```
+public enum Colors { Red, Blue, Green, Orange }
 
 Colors myColor;
 
@@ -27,11 +28,12 @@ localeTitle: تبديل القضية
   default:
     Console.WriteLine("I have a hard time when I try to rhyme.");
 }
-` 
+``` 
 
 ## انتاج |
 
- `If myColor is Colors.Red: 
+```
+If myColor is Colors.Red:
 > How you like them apples?
 
 If myColor is Colors.Blue:
@@ -42,7 +44,7 @@ localeTitle: تبديل القضية
 
 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 
+```
+// initialize - set true or false here to view different result
 bool hasFreeSweet = false;
 
 string str = hasFreeSweet ? "Free sweet!" : "No free sweet.";
 
 //output in console
 Console.WriteLine(str);
-` 
+``` 
 
 ## انتاج |
 
- `if hasFreeSweet == true 
+```
+if hasFreeSweet == true
 > Free sweet!
 
 if hasFreeSweet == false
 > No free sweet.
-`
+```

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

@@ -12,7 +12,8 @@ localeTitle: حاول الصيد في النهاية
 
 ## بناء الجملة
 
- `try 
+```csharp
+try
 {
    // Code which could potentially throw an exception
    var parsedValue = Int32.Parse("abcde");
@@ -27,7 +28,7 @@ localeTitle: حاول الصيد في النهاية
     // Code which will always run no matter what.
     Console.WriteLine("Try-Catch block has finished execution");
 }
-` 
+``` 
 
 في المثال أعلاه ، نحاول تحويل "abcde" إلى قيمة عددية. سيقوم هذا الخط بطرح استثناء لأنه لا يمكن تحويله إلى رقم بنجاح. سيتم اكتشاف الاستثناء في كتلة catch وسيتم تخزين رسالة الاستثناء والتفاصيل الأخرى في المتغير المعين في كتلة catch (الحرف 'e' في المثال أعلاه). بعد تنفيذ كل هذا ، سيتم تنفيذ القسم "أخيرًا" لإنهائه.
 
@@ -37,7 +38,8 @@ localeTitle: حاول الصيد في النهاية
 
 كتلة المحاولة لها نطاق طريقة خاص بها ، لذلك لن يتم الوصول إلى أي من المتغيرات التي يتم الإعلان عنها داخل كتلة المحاولة خارج نطاق المحاولة.
 
- `try 
+```csharp
+try
 {
     // Read user input from the console.
     var userInput = Console.ReadLine();
@@ -49,11 +51,12 @@ localeTitle: حاول الصيد في النهاية
 
 //Outside the Try block
 var parsedUserInput = Int32.Parse(userInput);  // Not correct
-` 
+``` 
 
 سيعطيك ما سبق خطأ في وقت الترجمة لأن القيمة 'userInput' لا يمكن الوصول إليها. إذا كنت تحتاج إلى الوصول إلى متغير خارج كتلة try-catch ستحتاج إلى تعريف المتغير قبل كتلة المحاولة.
 
- `var userInput = ""; 
+```csharp
+var userInput = "";
 try
 {
     // Read user input from the console.
@@ -66,13 +69,14 @@ localeTitle: حاول الصيد في النهاية
 
 //Outside the Try block
 var parsedUserInput = Int32.Parse(userInput);  // Correct
-` 
+``` 
 
 ## كتلة الصيد
 
 هذه الكتلة هي المكان الذي تحدد فيه نوع `Exception` الذي تريد التقاطه. إذا كنت تريد التقاط كافة الاستثناءات الممكنة ، يمكنك استخدام الفئة الأساسية `Exception` . إذا كنت تريد فقط التقاط نوع معين من الاستثناء ، فيمكنك تحديد ذلك بدلاً من ذلك. بعض الأمثلة على أنواع الاستثناءات الأخرى هي `ArgumentException` و `OutOfMemoryException` و `FormatException` .
 
- `try 
+```csharp
+try
 {
    var parsedValue = Int32.Parse("abcde");
 }
@@ -81,7 +85,7 @@ localeTitle: حاول الصيد في النهاية
 {
     Console.WriteLine(exceptionVariable.Message);
 }
-` 
+``` 
 
 المتغير المعلن بعد نوع الاستثناء سيحتوي على كل بيانات الاستثناء ويمكن استخدامه داخل كتلة `Catch` .
 
@@ -89,7 +93,8 @@ localeTitle: حاول الصيد في النهاية
 
 يتم **دائمًا** تشغيل الكتلة الأخيرة في النهاية بعد كتل `Try` and `Catch` . وعادة ما يستخدم هذا القسم لعندما يكون هناك شيء **يجب أن** يحدث في نهاية بغض النظر عما إذا كان طرح استثناء أم لا. على سبيل المثال ، لنفترض أننا بحاجة إلى متغير ليتم إعادة تنشيطه مرة أخرى إلى رقم محدد بعد التلاعب به طوال الوقت.
 
- `int initalValue = 12; 
+```csharp
+int initalValue = 12;
 try
 {
     // Code which manipulates 'initialValue'
@@ -99,4 +104,4 @@ localeTitle: حاول الصيد في النهاية
     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
+<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
     <Label Content="Hello World!" />
 </UserControl>
-` 
+``` 
 
 ### معلومات اكثر:
 

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

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

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

@@ -18,11 +18,12 @@ localeTitle: حجم الخلفية
 
 لتعيين هذه الخاصية على صور خلفية متعددة ، قم بفصل القيم بفاصلة:
 
- `.multiple { 
+```css
+.multiple {
     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
+body {
   background-image: url("barn.jpg");
 }
-` 
+``` 
 
 ![صورة](https://user-images.githubusercontent.com/26467304/31036366-eb1fc260-a539-11e7-835d-e3f935a22c86.png)
 
 يمكنك أيضًا ربط الصور أو صور gif التي تعثر عليها عبر الإنترنت باستخدام رابطها (على سبيل المثال ، من صور Google البحث).
 
- `body { 
+```css
+body {
   background-image: url("https://mdn.mozillademos.org/files/11983/starsolid.gif");
 }
-` 
+``` 
 
 ### صورة الخلفية - خاصية التكرار
 
@@ -63,29 +65,32 @@ localeTitle: خلفية
 
 إليك مثال يكرر الصورة عموديًا.
 
- `body { 
+```css
+body {
   background-image: url("barn.jpg");
   background-repeat: repeat-y;
 }
-` 
+``` 
 
 ![عمودي](https://user-images.githubusercontent.com/26467304/31039770-8962c7a6-a54e-11e7-9d25-4fb09760d219.PNG)
 
 يمكنك تكرار الصورة أفقيًا عن طريق تعيين الخاصية background-repeat إلى "repeat-x".
 
- `body { 
+```css
+body {
   background-image: url("barn.jpg");
   background-repeat: repeat-x;
 }
-` 
+``` 
 
 يمكنك أيضًا استخدام خاصية تكرار الخلفية لتعيين صورة لعدم تكرارها.
 
- `body { 
+```css
+body {
   background-image: url("barn.jpg");
   background-repeat: no-repeat;
 }
-` 
+``` 
 
 ![norepeat](https://user-images.githubusercontent.com/26467304/31039801-c8761efc-a54e-11e7-8bb9-ec5b88885a50.PNG)
 
@@ -93,12 +98,13 @@ localeTitle: خلفية
 
 يمكنك استخدام خاصية الموضع لتحديد مكان صورتك على صفحة الويب.
 
- `body { 
+```css
+body {
   background-image: url("barn.jpg");
   background-repeat: no-repeat;
   background-position: right top;
 }
-` 
+``` 
 
 ![موضع](https://user-images.githubusercontent.com/26467304/31039828-077d1038-a54f-11e7-8aa6-092253ca92b8.PNG)
 
@@ -106,13 +112,14 @@ localeTitle: خلفية
 
 يمكنك استخدام خاصية "إرفاق الخلفية" لتعيين صورة إلى موضع ثابت. يجعل موقع ثابت الصورة بحيث لا يتم التمرير مع باقي الصفحة.
 
- `body { 
+```css
+body {
   background-image: url("barn.jpg");
   background-repeat: no-repeat;
   background-position: right top;
   background-attachment: fixed;
 }
-` 
+``` 
 
 ![ثابت](https://user-images.githubusercontent.com/26467304/31039859-39612c92-a54f-11e7-93ca-9d7bcb938225.PNG)
 
@@ -128,10 +135,11 @@ localeTitle: خلفية
 
 يمكنك كتابة خصائص الخلفية على سطر واحد. وهذا ما يسمى خاصية الاختزال.
 
- `body { 
+```css
+body {
   background: url("barn.jpg") no-repeat right top;
 }
-` 
+``` 
 
 يمكنك ترك الممتلكات التي لا تحتاج إليها عند استخدام خاصية الاختزال ، ولكن الخصائص يجب استخدامها في ترتيب معين. الترتيب هو:
 
@@ -145,10 +153,11 @@ localeTitle: خلفية
 
 يمكنك تحديد صور خلفية متعددة في خاصية خلفية واحدة.
 
- `body { 
+```css
+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,7 +8,8 @@ localeTitle: قبل المختار
 
 لنلق نظرة على بعض الأمثلة:
 
- `p::before { 
+```css
+p::before {
     content: "";
     border: solid 5px #ccc
 }
@@ -17,16 +18,16 @@ localeTitle: قبل المختار
   content: "Comment: ";
   color: blue;
 }
-` 
+``` 
 
- `
+```html
 <p> To infinity and beyond</p>
 <p> I am buz lightyear, I come in peace.</p>
 
 <span class="comment"> May the force be with you</span>
 <br/>
 <span> Do. Or do not. There is no try</span>
-` 
+``` 
 
 في المثال أعلاه ، سنقوم بترقيم حدود رمادية قبل كل عنصر فقرة في الصفحة ، ونحن نقوم أيضًا بإضافة كلمة "تعليق" باللون الأزرق قبل كل عنصر في الامتداد مع تعليق الفصل.
 
@@ -41,9 +42,9 @@ localeTitle: قبل المختار
    } 
 ` 
 
- `
+```html
 <p>world!!</p>
-` 
+``` 
 
 هذا سيظهر `Hello world!!` في الصفحة.
 

guide/arabic/css/borders/index.md

@@ -45,12 +45,14 @@ 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
 
@@ -59,19 +61,20 @@ localeTitle: الملكية الحدودية
 values: thin, medium, or thick.
 
 Example:
-` 
+``` 
 
 المغلق
 
 table { border-width: 7px; border-style: outset; } td { border-width: medium; border-style: outset; } p { border-width: thick; border-style: solid; }
 
- `### Border Color 
+```
+### Border Color
 
 Now for the creative aspect of CSS Borders! With the use of the border-color attribute, you will be able to create customized borders to fit the flow and layout
 of your website. Border colors can be any color defined by RGB, hexadecimal, or key terms. Below is an example of each of these types.
 
 Example:
-` 
+``` 
 
 المغلق
 
@@ -89,12 +92,13 @@ table { border-color: rgb( 100, 100, 255); border-style: dashed; } td { border-c
 
 المغلق border-radius: 15٪ 10px 30٪ 5px؛
 
- `### Border: All in One 
+```
+### Border: All in One
 
 While it is nice that CSS allows a web developer to be very specific in creating a customized border, sometimes it is just easier and less of a headache to create a uniform border, all in single line of CSS code.
 
 Example:
-` 
+``` 
 
 المغلق
 

guide/arabic/css/box-shadow/index.md

@@ -41,16 +41,18 @@ 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
 
 #### Basic use
-` 
+``` 
 
 المغلق div { العرض: 200 بكسل ؛ الارتفاع: 50 بكسل ؛ لون الخلفية: # 333 ؛ box-shadow: 10px 10px 5px #ccc؛ }
 
- `10px - offset-x 
+```
+10px - offset-x
 10px - offset-y
 5px -  blur
 #ccc - light gray color
@@ -60,17 +62,18 @@ localeTitle: صندوق الظل
 ![image](https://raw.githubusercontent.com/krzysiekh/images/master/box-shadow1.png)
 
 #### Inside box shadow
-` 
+``` 
 
 المغلق div { العرض: 200 بكسل ؛ الارتفاع: 50 بكسل ؛ لون الخلفية: # 333 ؛ box-shadow: inset 10px 10px 5px #ccc؛ }
 
- `It uses very similar code, but with inset value, which displays shadow inside the div element 
+```
+It uses very similar code, but with inset value, which displays shadow inside the div element
 
 ![image](https://raw.githubusercontent.com/krzysiekh/images/master/box-shadow2.png)
 
 
 #### Multiple box shadows
-` 
+``` 
 
 المغلق div { العرض: 200 بكسل ؛ الارتفاع: 50 بكسل ؛ لون الخلفية: # 333 ؛ box-shadow: inset 10px 10px 5px #ccc، 10px 10px 5px #ccc؛ } \`\` \`
 

guide/arabic/css/breakpoints/index.md

@@ -27,7 +27,8 @@ localeTitle: نقاط
 
 وهنا مثال على ذلك
 
- `/* ----------- iPhone 6, 6S, 7 and 8 ----------- */ 
+```
+/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
 
 /* Portrait */
 
@@ -86,7 +87,7 @@ localeTitle: نقاط
 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,7 +121,8 @@ localeTitle: نقاط
 
 دعونا نحولها إلى رمز CSS:
 
- `.text1 { 
+```css
+.text1 {
     font-size: 16px;
 }
 @media (min-width: 1200px) {
@@ -126,7 +130,7 @@ localeTitle: نقاط
         font-size: 20px;
     }
 }
-` 
+``` 
 
 **للراحة لدينا،** وكتابة `.text1` التصميم الأساسي أولا ... ثم بعد ذلك سنقوم تحديد `@media` القواعد.
 
@@ -134,13 +138,14 @@ localeTitle: نقاط
 
 من الجيد تمامًا استخدام `@media (max-width) {}` . هنا مثال:
 
- `.text1 { 
+```css
+.text1 {
     font-size: 20px;
 }
 @media (max-width: 1199px) {
     font-size: 16px;
 }
-` 
+``` 
 
  `// Normal, basic styles 
  // that look great on small screens 
@@ -161,21 +166,23 @@ localeTitle: نقاط
 
 نقاط التوقف المستندة إلى محتوى بدلاً من الجهاز تكون أقل تعقيدًا. إليك مقتطف بسيط يتم `code 700px` عندما يكون عرض الجهاز أعلى من حجم شاشة الهاتف الذكي بحجم `code 700px` تقريبًا
 
- `@media only screen and (min-width: 700px) { 
+```css
+@media only screen and (min-width: 700px) {
   something {
     something: something;
   }
 }
-` 
+``` 
 
 يمكنك أيضًا تعيين الحد الأدنى والحد الأقصى للعرض ، والذي يتيح لك إجراء التجارب باستخدام نطاقات مختلفة. هذا واحد تقريبا يطلق بين الهاتف smar وأكبر حجم سطح المكتب وأحجام الشاشة
 
- `@media only screen and (min-width: 700px) and (max-width: 1500px) { 
+```code
+@media only screen and (min-width: 700px) and (max-width: 1500px) {
   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>
 <p class="test">This is a paragraph 1</p>
 <h2 class="test">This is a heading 2</h2>
 <p class="test">This is a paragraph 2</p>
 <div class="test2 test3">This is a div 1</div>
-` 
+``` 
 
 نظرًا لأن اسم الفئة ليس فريدًا ، فإن سمة فئة HTML تجعل من الممكن تعريف أنماط متساوية للعناصر التي تحمل نفس اسم الفئة. **فيما يلي كيفية تحديد الطبقة في ملف CSS لعناصر النمط (لاحظ تدوين.):**
 
 **سيتم تطبيق جميع عناصر `test` الصف باستخدام هذا النمط:**
 
- `.test { 
+```css
+.test {
   color: green;
 }
-` 
+``` 
 
 **سيتم تطبيق جميع عناصر `<p>` `test` الصف باستخدام هذا النمط:**
 
- `p.test { 
+```css
+p.test {
   border: 1px solid black;
   color: red;
 }
-` 
+``` 
 
 **سيتم تطبيق جميع عناصر `<h1>` و `<h2>` `test` الصف باستخدام هذا النمط:**
 
- `h1.test, h2.test { 
+```css
+h1.test, h2.test {
   color: blue;
 }
-` 
+``` 
 
 **سيتم تطبيق جميع العناصر التي تشتمل على كلا النوعين `test2` و `test3` مع هذا النمط:**
 
- `.test2.test3 { 
+```css
+.test2.test3 {
   color: green;
 }
-` 
+``` 
 
 **نصائح: لا توجد مساحة بين فئات متعددة.**
 

guide/arabic/css/colors/index.md

@@ -48,19 +48,20 @@ Hexcode ، وهو اختصار للرمز السداسي العشري ، هو ط
 
 #### أمثلة
 
- `
+```html
 <html>
   <body>
     <p>Hello Moto</p>
   </body>
 </html>
-` 
+``` 
 
- `body { 
+```css
+body {
   background-color: green;
   color: white;
 }
-` 
+``` 
 
 في المثال أعلاه ، يتحول `background-color: green` إلى عنصر `<body>` باللون الأخضر. يؤدي هذا إلى تحويل صفحة الويب بأكملها إلى اللون الأخضر. تكون عناصر `<p>` بيضاء بعد `color: white` أيضًا. يمكنك استخدام ألوان مسمى ، مثل `green` `blue` `yellow` `red` `purple` وغيرها الكثير. ولكن بالنسبة للألوان المخصصة ، يمكنك استخدام الأكواد العشرية ( `#147ACC` ) ، قيم RGB ( `rgb(20, 122, 204)` ) ، وحتى قيم HSL ( `hsl(145, 59%, 30%)` ).
 
@@ -75,10 +76,11 @@ Hexcode ، وهو اختصار للرمز السداسي العشري ، هو ط
 
 يمكنك أيضًا إضافة قيمة ألفا ، أو الشفافية للألوان. الشفافية تسمح بتراكب النص على صورة وتمييز الصورة بشكل جزئي من خلال النص ، أو يمكن استخدامها لتغيير ظل اللون إذا لم تكن هناك عناصر أخرى أمام أو خلف النص. استخدم `rgba()` أو `hsla()` وقم بتعبئة قيم الألوان الخاصة بك. تنخفض قيمة alpha ويتم تحويلها إلى قيمة عشرية. (على سبيل المثال ، 20٪ هي 0.2 ، 75٪ هي 0.75 ، إلخ.)
 
- `body { 
+```css
+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 { 
+```
+button {
   background-color: #FFF;
   color: #FFF;
   border: 2px solid #6ba0f4;
 }
-` 
+``` 
 
 ![Button Border](https://image.ibb.co/kUqymR/button_border_blue.png "حدود الزر")
 
@@ -81,11 +82,12 @@ localeTitle: أزرار CSS
 
 لتغيير نمط زر عند تحريك الماوس فوقه ، استخدم: select hover:
 
- `button:hover { 
+```
+button:hover {
   background-color: #0E2C5B;
   color: #FFF;
 }
-` 
+``` 
 
 ![Hoverable Buttons](https://image.ibb.co/hxQnfm/button_hover.png "أزرار Hoverable")
 
@@ -95,10 +97,11 @@ localeTitle: أزرار CSS
 
 لتعطيل زر ، استخدم خاصية المؤشر:
 
- `button { 
+```
+button {
   cursor: not-allowed;
 }
-` 
+``` 
 
 #### معلومات اكثر:
 

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

@@ -44,10 +44,11 @@ localeTitle: مؤشرات CSS
 
 يمكنك أيضًا تعيين صورة كمؤشر.
 
- `.custom-cursor { 
+```
+.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
+:root {
   --firstVariable: red;
   --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,7 +10,7 @@ Bulma هو إطار CSS حديث يعتمد على [Flexbox وقابلاً](http
 
 في ما يلي نموذج HTML بسيط يشتمل على أحدث ملفات CSS المجمعة والمختصرة لمكتبة Bulma.
 
- `
+```html
     <!DOCTYPE html>
     <html lang="en">
       <head>
@@ -25,7 +25,7 @@ Bulma هو إطار CSS حديث يعتمد على [Flexbox وقابلاً](http
         <!-- Add all HTML Code here -->
       </body>
     </html>
-` 
+``` 
 
 لقد استخدمنا CDN في هذا المثال ، ولكن يمكنك التحقق من الطرق الأخرى لتثبيت Bulma [هنا](http://bulma.io/documentation/overview/start/) .
 

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

@@ -10,7 +10,7 @@ localeTitle: مؤسسة CSS Framework
 
 في ما يلي نموذج HTML بسيط يشتمل على أحدث CSS وملف Javascript مجمّعة ومختصرة لمكتبة المؤسسة.
 
- `
+```html
     <!DOCTYPE html>
     <html lang="en">
       <head>
@@ -26,7 +26,7 @@ localeTitle: مؤسسة CSS Framework
         <script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script>
       </body>
     </html>
-` 
+``` 
 
 يستخدم هذا المثال استخدام CDN الذي يقوم بتحميل الإعدادات الافتراضية. إذا كنت ترغب في تخصيص تخطيط الشبكة ، قم بتغيير الألوان أو إضافة وإزالة المكونات التي يمكنك القيام بها على صفحة [تنزيل](http://foundation.zurb.com/sites/download/) Foundation.
 

guide/arabic/css/css-frameworks/css-framework-material-design-lite/index.md

@@ -10,7 +10,7 @@ localeTitle: CSS Framework Material Design Lite
 
 في ما يلي نموذج HTML بسيط يشتمل على أحدث CSS مجمع ومختزن لمكتبة MDL.
 
- `
+```html
 <!DOCTYPE html>
 <html>
     <head>
@@ -22,7 +22,7 @@ localeTitle: CSS Framework Material Design Lite
     <body>
     </body>
 </html>
-` 
+``` 
 
 لقد استخدمنا CDN في هذا المثال ، ولكن يمكنك التحقق من الطرق الأخرى لتثبيت MDL [هنا](https://getmdl.io/started/index.html) .
 

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

@@ -10,7 +10,7 @@ localeTitle: CSS Framework تتحقق
 
 في ما يلي نموذج HTML بسيط يشتمل على أحدث CSS وملف Javascript مجمّعة ومختصرة لمكتبة Materialize.
 
- `
+```html
     <!DOCTYPE html>
   <html>
     <head>
@@ -30,7 +30,7 @@ localeTitle: CSS Framework تتحقق
       <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
     </body>
   </html>
-` 
+``` 
 
 لقد استخدمنا CDN في هذا المثال ، ولكن يمكنك التحقق من طرق أخرى لتثبيت ثريتم [هنا](http://materializecss.com/getting-started) .
 

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

@@ -10,7 +10,7 @@ localeTitle: CSS Framework Skeleton
 
 في ما يلي نموذج HTML بسيط يشتمل على أحدث ملف CSS مجمع ومختزن لمكتبة Skeleton.
 
- `
+```html
     <!DOCTYPE html>
     <html lang="en">
       <head>
@@ -27,7 +27,7 @@ localeTitle: CSS Framework Skeleton
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
       </body>
     </html>
-` 
+``` 
 
  [![](//discourse-user-assets.s3.amazonaws.com/original/2X/3/31bd555700f1ee85bb4ddcacf595f0dfd8a16254.png) **JSBin Demo**](http://jsbin.com/sekojaxali/edit?html,output)
 

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

@@ -10,7 +10,7 @@ UIKit هو إطار أمامي خفيف الوزن ومعياري لتطوير
 
 هنا هو قالب HTML بسيط يتضمن أحدث CSS المترجمة والمختصرة لمكتبة UIKit.
 
- `
+```html
 <!DOCTYPE html>
 <html>
     <head>
@@ -23,7 +23,7 @@ UIKit هو إطار أمامي خفيف الوزن ومعياري لتطوير
     <body>
     </body>
 </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
+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
+.static         { position: static; } // default value
 .relative       { position: relative; }
 .sticky         { position: sticky; }
 .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 width (body)> 500px { لون الخلفية: الأزرق. } آخر { لون الخلفية: أبيض. } \`\` \` هنا ، سيغير لون الخلفية اللون حسب عرض نص الصفحة.
 

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

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

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

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

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

@@ -24,12 +24,13 @@ localeTitle: CSS3 في Media Rule
 
 مثال لاستعلام الوسائط هو كما يلي:
 
- `@media screen and (max-width: 1000px) { 
+```CSS
+@media screen and (max-width: 1000px) {
   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
+.new-shape {
   border-radius: 20px 50px 5px 0; /* top left, top right, bottom right, bottom left */
 }
-` 
+``` 
 
 في حالة تقديم قيمتين فقط ، يتم تطبيق القيمة الأولى على الركن الأيمن العلوي والسفلي ، وتنطبق القيمة الثانية على الركن الأيمن العلوي والسفلي الأيسر.
 
- `.leaf-shape { 
+```css
+.leaf-shape {
   border-radius: 0 50%;
 }
-` 
+``` 
 
 إذا تم تعيين ثلاث قيم ، فسيتم تطبيق القيم الأولى مرة أخرى على نصف قطر أعلى اليسار ، تشير القيمة الثانية إلى اليمين العلوي والسفلي الأيسر ، تاركة القيمة الثالثة للإشارة إلى الركن السفلي الأيمن.
 
- `.odd-shape { 
+```css
+.odd-shape {
   border-radius: 0 20px 50%;
 }
-` 
+``` 
 
 ![أمثلة](https://github.com/kaithrendyle/guide-photos/blob/master/odd-shapes.png?raw=true)
 
 لا يجب أن يكون تقريب الزاوية متماثلًا تمامًا. يمكنك تحديد كل من الشعاعين الأفقي والعمودي باستخدام شرطة مائلة ("/") لتحقيق زاوية ذات شكل بيضاوي الشكل. \`\` \`المغلق .elliptical-1 { border-radius: 50px / 10px؛ / \* نصف القطر الأفقي / نصف القطر الرأسي \* / } .elliptical-2 { border-radius: 10px / 50px؛ }
 
- `![examples](https://github.com/kaithrendyle/guide-photos/blob/master/elliptical-basic.png?raw=true) 
+```
+![examples](https://github.com/kaithrendyle/guide-photos/blob/master/elliptical-basic.png?raw=true)
 
 Since only one pair of values is given in the above examples, all four corners are the same. But, of course, if you want a more complex shape, you may supply up to four values for the horizontal radiuses and four for the vertical radiuses.
-` 
+``` 
 
 المغلق .elliptical-3 { border-radius: 50px 20px 50px 20px / 20px 50px 20px 50px؛ / \* أفقية من اليسار إلى اليمين ، أعلى يمين أفقي ، أفقي من أسفل إلى اليمين ، أفقي من أسفل يسار / عمودي إلى يسار علوي ، عمودي أعلى يمين ، عمودي إلى أسفل يمين ، عمودي إلى أسفل يسار \* / }
 
- `Notice how the shorthand above produces the same result as specifying individual properties below. Be aware that when corners are set individually the values are space-separated instead of slash-separated. 
+```
-` 
+Notice how the shorthand above produces the same result as specifying individual properties below. Be aware that when corners are set individually the values are space-separated instead of slash-separated.
+``` 
 
 المغلق .elliptical-4 { نصف قطر أعلى يمين - أقصى: 50 بكسل 20 بكسل ؛ / \* نصف القطر الأفقي ، نصف القطر الرأسي \* / نصف قطر أعلى يمين الحد: 20px 50px؛ نصف قطر الحد السفلي - اليمين - اليمين: 50 بكسل × 20 بكسل ؛ border-bottom-left-radius: 20px 50px؛ } \`\` \` ![أمثلة](https://github.com/kaithrendyle/guide-photos/blob/master/elliptical-advance.png?raw=true)
 

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

@@ -12,10 +12,11 @@ localeTitle: ألوان CSS3
 
 ### بناء الجملة
 
- `p { 
+```
+p {
   color: green;
 }
-` 
+``` 
 
 هذه القاعدة تغير كل لون الخط لكل
 
@@ -29,10 +30,11 @@ RGB تعني "أحمر" و "أخضر" و "أزرق" ويمكننا أيضًا ت
 
 من المستحيل محاولة حفظ كل رمز لون ولهذا السبب هناك العديد من الأدوات عبر الإنترنت لاختيار الألوان التي تريدها لمشاريعك. على سبيل المثال: https://www.w3schools.com/colors/colors\_picker.asp أو http://htmlcolorcodes.com/color-picker/.
 
- `p { 
+```css
+p {
   color: rgb(0, 255, 0);
 }
-` 
+``` 
 
 تغير هذه القاعدة لون الخط لكل عناصر p إلى اللون الأخضر ، تمامًا كما هو موضح أعلاه.
 
@@ -46,10 +48,11 @@ RGB تعني "أحمر" و "أخضر" و "أزرق" ويمكننا أيضًا ت
 
 ### بناء الجملة
 
- `p { 
+```
+p {
   color: #00fe00;
 }
-` 
+``` 
 
 تقوم هذه القاعدة مرة أخرى بتغيير لون الخط لكل عناصر p إلى اللون الأخضر.
 
@@ -59,10 +62,11 @@ RGB تعني "أحمر" و "أخضر" و "أزرق" ويمكننا أيضًا ت
 
 ### بناء الجملة
 
- `p { 
+```
+p {
   color: hsl(0, 100%, 50%);
 }
-` 
+``` 
 
 ### انتاج |
 

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

@@ -28,7 +28,8 @@ localeTitle: تدرجات CSS3
 
 #### مثال
 
- `<!DOCTYPE html> 
+```
+<!DOCTYPE html>
 <html>
 <head>
 <style>
@@ -53,7 +54,7 @@ localeTitle: تدرجات CSS3
 
 </body>
 </html>
-` 
+``` 
 
 ![الافتراضي الخطية التدرج](https://cdn-media-1.freecodecamp.org/imgr/CvtXCMd.jpg)
 
@@ -63,7 +64,8 @@ localeTitle: تدرجات CSS3
 
 #### مثال
 
- `<!DOCTYPE html> 
+```
+<!DOCTYPE html>
 <html>
 <head>
 <style>
@@ -88,7 +90,7 @@ localeTitle: تدرجات CSS3
 
 </body>
 </html>
-` 
+``` 
 
 ![من اليسار إلى اليمين](https://cdn-media-1.freecodecamp.org/imgr/k4FSyXz.jpg)
 
@@ -102,7 +104,8 @@ localeTitle: تدرجات CSS3
 
 #### مثال
 
- `<!DOCTYPE html> 
+```
+<!DOCTYPE html>
 <html>
 <head>
 <style>
@@ -127,7 +130,7 @@ localeTitle: تدرجات CSS3
 
 </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.
-` 
+``` 
 
 المغلق 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).
 
 For example, the following will match every 3rd anchor element:
-` 
+``` 
 
 المغلق a: nth-childe (3n) { / \* CSS هنا \* / } \`\` \`
 

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

@@ -10,7 +10,8 @@ localeTitle: خاصية عتامة CSS3
 
 ضبط عنصر على `opacity: 0;` لا يزيلها من الصفحة. سيظل العنصر قابلاً للنقر وسيؤثر على تدفق محتوى الصفحة.
 
- `.transparent { 
+```css
+.transparent {
     opacity: 0;
 }
 
@@ -25,7 +26,7 @@ localeTitle: خاصية عتامة CSS3
 .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,7 +89,8 @@ localeTitle: التحولات CSS3
 
 #### استخدام الخاصية المختزلة ( `transition` )
 
- `div { 
+```css
+div {
   width: 200px;
   transition: all 1s ease-in-out;
 }
@@ -91,17 +98,18 @@ localeTitle: التحولات CSS3
 div:hover {
   width: 300px;
 }
-` 
+``` 
 
 #### إعطاء جميع خصائص النقل قيمة
 
- `div { 
+```css
+div {
   width: 200px;
   transition-property: width;
   transition-duration: 1s;
   transition-timing-function: ease-in-out;
 }
-` 
+``` 
 
 ملاحظة: كلا المثالين **متساويان**
 

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

@@ -14,7 +14,8 @@ localeTitle: الكلمة الرئيسية الحالية
 
 نعلن أن كل div يحتوي على حدود 3px بلون _currentColor_ ، مما يعني أن كل حد div سيتم تلوينه بنفس قيمة خاصية `color` الخاصة به. تحقق من المثال الحي [هنا](http://jsfiddle.net/tjkp0cm3/)
 
- `div{ 
+```css
+div{
   /* The currentColor keyword for the color value, which means that the border will have the value of the respective div's color property */
   border: 3px solid currentColor;
 }
@@ -28,7 +29,7 @@ localeTitle: الكلمة الرئيسية الحالية
 #div2{
   color: blue;
 }
-` 
+``` 
 
 ### التطبيق العملي مع SVG
 
@@ -44,7 +45,8 @@ localeTitle: الكلمة الرئيسية الحالية
 
 يمكننا استخدام هذا الرمز الخاص بنا لتحقيق السلوك المطلوب.
 
- `button{ 
+```css
+button{
   color: #016898;
 }
 
@@ -59,11 +61,12 @@ localeTitle: الكلمة الرئيسية الحالية
 button:hover .emailIcon{
   fill: #19B5FE;
 }
-` 
+``` 
 
 الآن، بدلا من تغيير SVG في `fill` اللون على تحوم بشكل واضح، فإننا يمكن أن يحدد التعبئة ل `currentColor` . يقوم هذا تلقائيًا بتغيير لون SVG إلى قيمة خاصية `color` الخاصة بالزر. نحن الآن بحاجة فقط إلى تغيير خاصية `color` من الزر. هذا يجعل رمز CSS أقصر وأذكى.
 
- `.emailIcon{ 
+```css
+.emailIcon{
   fill: currentColor;
 }
 
@@ -74,7 +77,7 @@ localeTitle: الكلمة الرئيسية الحالية
 button:hover {
   color: #19B5FE;
 }
-` 
+``` 
 
 تحقق من المثال المباشر على https://repl.it/NNt9/2.
 

guide/arabic/css/dropdowns/index.md

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

guide/arabic/css/fonts/index.md

@@ -29,7 +29,8 @@ localeTitle: الخطوط
 *   مائل - النص موضح في _المائل_
 *   مائل - النص المائل يميل
 
- `.normal { 
+```css
+.normal {
     font-style: normal;
 }
 
@@ -40,7 +41,7 @@ localeTitle: الخطوط
 .oblique {
     font-style: oblique;
 }
-` 
+``` 
 
 ### حجم الخط
 
@@ -53,7 +54,8 @@ localeTitle: الخطوط
 *   `small` ، `medium` ، `large` - يُعرف بقيم الحجم المطلقة
 *   `%` - النسب المئوية
 
- `.with-pixels { 
+```css
+.with-pixels {
     font-size: 14px;
 }
 
@@ -68,24 +70,25 @@ localeTitle: الخطوط
 .with-percentage {
     font-size: 80%;
 }
-` 
+``` 
 
 ### وزن الخط
 
 تحدد الخاصية `font-weight` الوزن (أو الجرأة) للخط. يقبل الكلمات الرئيسية ( `bold` ، `normal` ، `bolder` ، `lighter` ) أو كلمات رئيسية عددية ( `100` ، `200` ، `300` ، `400` إلخ) `400` هو نفسه `normal` .
 
- `p { 
+```css
+p {
    font-weight: bold
 }
-` 
+``` 
 
 ### استجابة الخط
 
 يمكن ضبط حجم النص بوحدة عرض vw (عرض إطار العرض). وبهذه الطريقة ، سيتبع حجم النص حجم نافذة المتصفح.
 
- `
+```html
 <h1 style="font-size:10vw">Hello World</h1>
-` 
+``` 
 
 `Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.`
 
@@ -93,10 +96,11 @@ localeTitle: الخطوط
 
 تحدد خاصية `font-variant` إذا كان يجب عرض النص في خط صغير الحجم (حيث يتم تحويل جميع الأحرف الصغيرة إلى أحرف كبيرة أثناء الظهور في حجم خط أصغر من الأحرف الكبيرة الأصلية في النص).
 
- `p.small { 
+```css
+p.small {
   font-variant: small-caps;
 }
-` 
+``` 
 
 #### معلومات اكثر:
 

guide/arabic/css/forms/index.md

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

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

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

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

@@ -18,7 +18,8 @@ CSS البناء :يحوم { اعلانات css }
 
 يطبق محدد التمرير فقط الأنماط المتوفرة في القاعدة عندما يدخل العنصر في حالة التمرير. هذا هو عندما يمرر المستخدم فوق العنصر باستخدام الماوس الخاص به.
 
- `button { 
+```css
+button {
   color: white;
   background-color: green;
 }
@@ -28,7 +29,7 @@ CSS البناء :يحوم { اعلانات css }
   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; }
-` 
+``` 
 
 ### ملاحظة حول المعرفات
 
@@ -24,9 +26,9 @@ localeTitle: محدد الهوية
 
 تذكر ، يجب أن يتطابق محدد ID مع سمة معرف عنصر HTML.
 
- `
+```html
 <div id="specified_id"><!-- content --></div>
-` 
+``` 
 
 ### النوعية
 

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

@@ -8,7 +8,8 @@ localeTitle: معرض الصور
 
 ## معرض الصور مثال
 
- `<html> 
+```
+<html>
 <head>
 <style>
 div.gallery {
@@ -65,7 +66,7 @@ localeTitle: معرض الصور
 
 </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/) 
+```
+[A codepen example to show a transparent image turning opaque on hover](https://codepen.io/lvcoulter/full/JrzxXa/)
 <!--I cannot figure out how to embed a Codepen. I would really like to know-->
 
 You can create the opposite effect with less code since the image is 1.0 opacity by default
 
 Example:
-` 
+``` 
 
 المغلق img: hover { التعتيم: 0.3 ؛ filter: alpha (opacity = 30)؛ } \`\` \` [مثال codepen لإظهار الشفافية على الماوس](https://codepen.io/lvcoulter/full/xXBQoR/)
 

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

@@ -6,7 +6,8 @@ localeTitle: عرض الملكية
 
 تحدد خاصية `display` نوع المربع المستخدم لعنصر HTML. هناك 20 قيمة للكلمات الرئيسية الإجمالية ، على الرغم من استخدام 10 فقط بشكل شائع. هذه هي شائعة الاستخدام:
 
- `.none           {display: none} 
+```css
+.none           {display: none}
 .block          {display: block}
 .inline-block   {display: inline-block}
 .inline         {display: inline}
@@ -16,11 +17,12 @@ localeTitle: عرض الملكية
 .table          {display: table}
 .inherit        {display: inherit}
 .initial        {display: initial}
-` 
+``` 
 
 **أمثلة شائعة:**
 
- `.myBox { 
+```css
+.myBox {
     display: block;
 }
 
@@ -31,7 +33,7 @@ localeTitle: عرض الملكية
 .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 = "twenty">2</p>
-` 
+``` 
 
 CSS
 
- `body { 
+```css
+body {
   display:flex;
 }
 
 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 { 
+```
+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 { 
+```
+img {
     float: left;
 }
-` 
+``` 
 
 يحدد هذا المثال أن الصورة يجب أن تطفو إلى اليسار في صفحة:
 
- `img { 
+```
+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 { 
+```
+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,7 +24,8 @@ CSS Network Layout ، والمعروف ببساطة باسم الشبكة ، ه
 
 من الناحية المثالية ، عند إنشاء موقع ، يمكنك تصميمه مع الشبكة واستخدام Flex كحل بديل. يمكنك معرفة ما إذا كان المستعرض يدعم الشبكة باستخدام قاعدة CSS `@support` (يُعرف أيضًا باسم استعلام الميزات). إليك مثال على ذلك:
 
- `.container { 
+```css
+.container {
   display: grid; /* display grid by default */
 }
 
@@ -33,16 +34,17 @@ CSS Network Layout ، والمعروف ببساطة باسم الشبكة ، ه
     display: flex; /* display flex instead of grid */
   }
 }
-` 
+``` 
 
 ### ابدء
 
 لجعل أي عنصر شبكة ، تحتاج إلى تعيين خاصية `display` الخاصة بها إلى `grid` ، مثل:
 
- `.conatiner { 
+```css
+.conatiner {
   display: grid;
 }
-` 
+``` 
 
 وهذا كل شيء. لقد قمت للتو `.container` . يصبح كل عنصر داخل `.container` عنصر شبكة بشكل تلقائي.
 
@@ -50,9 +52,10 @@ CSS Network Layout ، والمعروف ببساطة باسم الشبكة ، ه
 
 الصفوف والأعمدة
 
- `grid-template-columns: 1fr 1fr 1fr 1fr; 
+```css
+grid-template-columns: 1fr 1fr 1fr 1fr;
 grid-template-rows: auto 300px;
-` 
+``` 
 
 المناطق
 
@@ -65,16 +68,18 @@ CSS Network Layout ، والمعروف ببساطة باسم الشبكة ، ه
 
 أو
 
- `grid-template-areas: 
+```css
+grid-template-areas:
   "header header header header"
   "nav main main sidebar";
-` 
+``` 
 
 ### مناطق الشبكة
 
 فيما يلي بعض نماذج التعليمات البرمجية حول كيفية تحديد مناطق الشبكة وتعيينها
 
- `.site { 
+```css
+.site {
   display: grid;
   grid-template-areas: /* applied to grid container */
     "head head" /* you're assigning cells to areas by giving the cells an area name */
@@ -97,7 +102,7 @@ CSS Network Layout ، والمعروف ببساطة باسم الشبكة ، ه
 .site > footer {
     grid-area: foot;
 }
-` 
+``` 
 
 ### وحدة `fr`
 
@@ -111,7 +116,8 @@ CSS Network Layout ، والمعروف ببساطة باسم الشبكة ، ه
 
 الحل البسيط هو تغيير `grid-template-areas` أساس حجم الشاشة. يمكنك أيضًا **تغيير عدد الأعمدة والصفوف بناءً على حجم الشاشة** أيضًا. هذا هو بديل أنظف وأبسط بكثير لنظام Bootstrap الشبكة ( `col-xs-8 col-sm-6 col-md-4 col-lg-3` ).
 
- `.site { 
+```css
+.site {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-areas:
@@ -129,7 +135,7 @@ CSS Network Layout ، والمعروف ببساطة باسم الشبكة ، ه
       "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,7 +27,8 @@ localeTitle: قيم اللون القانونية
 
 هنا ألوان عرافة مختلفة. ابحث عن المثال المباشر على https://jsfiddle.net/qg9revp4/2/.
 
- `#divRed{ 
+```css
+#divRed{
   color: #ff0000; /* red */
 }
 
@@ -43,7 +44,7 @@ localeTitle: قيم اللون القانونية
   color: #ffffff; /* white */
   background: #000000; /* black background, so that the text is visible */
 }
-` 
+``` 
 
 ### ألوان RGB
 
@@ -59,7 +60,8 @@ localeTitle: قيم اللون القانونية
 
 هنا ألوان RGB مختلفة. ابحث عن المثال الحي على https://jsfiddle.net/vspepeth/1/.
 
- `#divRed{ 
+```css
+#divRed{
   color: rgb(255, 0, 0); /* red */
 }
 
@@ -75,7 +77,7 @@ localeTitle: قيم اللون القانونية
   color: rgb(255, 255, 255); /* white */
   background: rgb(0, 0, 0); /* black background, so that the text is visible */
 }
-` 
+``` 
 
 ### ألوان RGBA
 
@@ -91,7 +93,8 @@ localeTitle: قيم اللون القانونية
 
 هنا مختلف ألوان RGBA. ابحث عن المثال المباشر على https://jsfiddle.net/hq0ngwg2/1/.
 
- `#divRed{ 
+```css
+#divRed{
   color: rgba(255, 0, 0, 0.3); /* red with opacity */
 }
 
@@ -107,7 +110,7 @@ localeTitle: قيم اللون القانونية
   color: rgba(255, 255, 255, 0.6); /* white with opacity */
   background: rgba(0, 0, 0, 0.8); /* black background with opacity */
 }
-` 
+``` 
 
 ### ألوان HSL
 
@@ -134,7 +137,8 @@ HSL تعني الصباغة والتشبع والخفة. يتم تحديده ك
 
 ابحث عن المثال المباشر على https://jsfiddle.net/g10zpL28/1/.
 
- `#div1 { 
+```css
+#div1 {
   background-color: hsl(240, 100%, 50%); /* blue */
 }
 #div2 {
@@ -146,7 +150,7 @@ HSL تعني الصباغة والتشبع والخفة. يتم تحديده ك
 #div4 {
   background-color: hsl(187, 75%, 86%); /* pastel blue */
 }
-` 
+``` 
 
 ### ألوان HSLA
 
@@ -171,7 +175,8 @@ HSLA تعني التدرج والتشبع والخفة وقناة ألفا. تم
 
 فيما يلي أمثلة على ألوان HSLA. انظر لهم يعيشون في https://jsfiddle.net/2Lxscgfy/1/.
 
- `#div1 { 
+```css
+#div1 {
   background-color: hsla(240, 100%, 50%, 0.5); /* blue with transparency */
 }
 #div2 {
@@ -183,7 +188,7 @@ HSLA تعني التدرج والتشبع والخفة وقناة ألفا. تم
 #div4 {
   background-color: hsla(187, 75%, 86%, 1.0); /* pastel blue with transparency */
 }
-` 
+``` 
 
 ### أسماء اللون المعرفة مسبقا
 
@@ -195,7 +200,8 @@ HSLA تعني التدرج والتشبع والخفة وقناة ألفا. تم
 
 فيما يلي بعض أسماء الألوان المستخدمة. تحقق من المثال الحي على https://jsfiddle.net/rqygumpy/. ابحث عن القائمة الكاملة في [مستندات MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Color_keywords) .
 
- `#div1{ 
+```css
+#div1{
   color: BlueViolet;
 }
 
@@ -210,7 +216,7 @@ HSLA تعني التدرج والتشبع والخفة وقناة ألفا. تم
 #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
+.element {
     margin: margin-top || margin-right || margin-bottom || margin-left;
 }
-` 
+``` 
 
 يمكن تحديد هذه الخاصية باستخدام قيم واحدة أو اثنتين أو ثلاثة أو أربعة.
 

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

@@ -19,7 +19,7 @@ localeTitle: أشرطة الملاحة
 
 هناك جزءان لأي التنقل: HTML و CSS. هذا مجرد مثال سريع.
 
- `
+```html
 <nav class="myNav">                                 <!-- Any element can be used here -->
     <ul>
         <li><a href="index.html">Home</a></li>
@@ -27,9 +27,10 @@ localeTitle: أشرطة الملاحة
         <li><a href="contact.html">Contact</a></li>
     </ul>
 </nav>
-` 
+``` 
 
- `/* Define the main Navigation block */ 
+```css
+/* Define the main Navigation block */
 .myNav {
     display: block;
     height: 50px;
@@ -56,7 +57,7 @@ localeTitle: أشرطة الملاحة
 .myNav li a.active {
     background-color: #3786E1;
 }
-` 
+``` 
 
 #### معلومات اكثر:
 

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

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

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

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

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

@@ -19,7 +19,8 @@ localeTitle: خاصية الخلفية
 
 التركيب 1 :
 
- `body { 
+```css
+body {
   /* Using a <background-color> */
   background: green;
 }
@@ -38,7 +39,7 @@ localeTitle: خاصية الخلفية
   /* 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
+body {
     background-image:url(smiley.gif);
     background-repeat:repeat;
 }
-` 
+``` 
 
 لتكرار الصورة أفقيا
 
- `body { 
+```css
+body {
     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: none;
 clear: left;
 clear: right;
 clear: both;
 clear: inline-start;
 clear: inline-end;
-` 
+``` 
 
 ### مثال:
 

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

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