fix: converted single to triple backticks2 (#36229)

guide/arabic/canvas/particle-sim/index.md

@@ -8,11 +8,12 @@ localeTitle: الجسيمات نعم
 
 سنرغب في إنشاء مجموعة من الجسيمات مع التسارع والسرعات. سنقوم بإنشاء 100 جسيم في نقاط عشوائية على اللوحة.
 
- `canvas = document.getElementById("canvas"); 
+```js
- ctx = canvas.getContext('2d'); 
+canvas = document.getElementById("canvas");
+ctx = canvas.getContext('2d');
 
- var particles = []; 
+var particles = [];
- for(var i=0; i<100; i++) { 
+for(var i=0; i<100; i++) {
   particles.push(
     {
       x:Math.random()*canvas.width,
@@ -23,12 +24,13 @@ localeTitle: الجسيمات نعم
       ay:0
     }
   );
- } 
+}
-` 
+``` 
 
 في حلقة الرسم لدينا ، نقدم هذه الجسيمات.
 
- `function draw() { 
+```js
+function draw() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   for(var i=0; i<particles.length; i++) {
     // update state
@@ -40,9 +42,9 @@ localeTitle: الجسيمات نعم
   }
 
   window.requestAnimationFrame(draw);
- } 
+}
- window.requestAnimationFrame(draw); 
+window.requestAnimationFrame(draw);
-` 
+``` 
 
 الآن ، كل ما نحتاجه هو تحديث السرعة وتسريع كل إطار. سنضيف التسارع إلى السرعة وإضافة السرعة إلى الموضع.
 

guide/arabic/canvas/paths/index.md

@@ -8,24 +8,26 @@ localeTitle: مسارات
 
 يمكننا خلق مسارات استخدام مع `beginPath` ، `fill` ، و `stroke` .
 
- `ctx.beginPath(); 
+```js
- ctx.rect(0, 0, 100, 100); 
+ctx.beginPath();
- ctx.fillStyle="black"; 
+ctx.rect(0, 0, 100, 100);
- ctx.fill(); 
+ctx.fillStyle="black";
-` 
+ctx.fill();
+``` 
 
 يؤدي هذا إلى إنشاء مربع أسود في الزاوية العلوية اليمنى من اللوحة القماشية. يمكننا تغيير `strokeStyle` والتعبئات باستخدام `strokeStyle` و `fillStyle` ، `fillStyle` سلاسل ألوان تشبه CSS. يمكننا أيضا استخدام `lineWidth` لجعل السكتات الدماغية أكثر سمكا.
 
- `ctx.beginPath(); 
+```js
- ctx.moveTo(0,0); 
+ctx.beginPath();
- ctx.lineTo(300,150); 
+ctx.moveTo(0,0);
- ctx.moveTo(0, 100); 
+ctx.lineTo(300,150);
- ctx.lineTo(300, 250); 
+ctx.moveTo(0, 100);
+ctx.lineTo(300, 250);
 
- ctx.strokeStyle="red"; 
+ctx.strokeStyle="red";
- ctx.lineWidth=2; 
+ctx.lineWidth=2;
- ctx.stroke(); 
+ctx.stroke();
-` 
+``` 
 
 هناك أربع وظائف الرسم الأساسية: `rect` ، `moveTo` ، `lineTo` ، و `arc` .
 
@@ -36,27 +38,29 @@ localeTitle: مسارات
 
 لاحظ أن هذه الوظائف تضيف إلى مسار العمل. لا ينشئون مسارات جديدة.
 
- `//example 1 
+```js
- ctx.beginPath(); 
+//example 1
- ctx.rect(0, 0, 50, 50); 
+ctx.beginPath();
- ctx.rect(100, 100, 50, 50); 
+ctx.rect(0, 0, 50, 50);
- ctx.fill(); 
+ctx.rect(100, 100, 50, 50);
+ctx.fill();
 
- //example 2 
+//example 2
- ctx.beginPath(); 
+ctx.beginPath();
- ctx.rect(0, 0, 50, 50); 
+ctx.rect(0, 0, 50, 50);
- ctx.beginPath(); 
+ctx.beginPath();
- ctx.rect(100, 100, 50, 50); 
+ctx.rect(100, 100, 50, 50);
- ctx.fill(); 
+ctx.fill();
-` 
+``` 
 
 `beginPath` المثال الأول مربعين ، بينما يرسم الثاني مربعًا واحدًا منذ أن قام `beginPath` من المستطيل الأول على مسار العمل القديم.
 
 هذه الحقيقة تؤدي إلى خطأ شائع في صنع الرسوم المتحركة `canvas` .
 
- `var x = 0; 
+```js
- var y = 0; 
+var x = 0;
- function draw() { 
+var y = 0;
+function draw() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
 
   ctx.rect(x, y, 50, 50);
@@ -64,10 +68,10 @@ localeTitle: مسارات
   x+=1;
 
   window.requestAnimationFrame(draw);
- } 
+}
 
- window.requestAnimationFrame(draw); 
+window.requestAnimationFrame(draw);
-` 
+``` 
 
 الرسم المتحرك أعلاه ، الذي من المفترض أن يقوم بتحريك مربع عبر الشاشة ، ينشئ شريط أسود طويل بدلاً من ذلك. السبب هو أن `beginPath` لا يسمى داخل حلقة `draw` .
 

guide/arabic/certifications/apis-and-microservices/basic-node-and-express/chain-middleware-to-create-a-time-server/index.md

@@ -8,13 +8,14 @@ localeTitle: سلسلة Middleware لإنشاء خادم الوقت
 
 بدلاً من الاستجابة مع الوقت ، يمكننا أيضًا إضافة سلسلة إلى الطلب وتمريرها إلى الوظيفة التالية. هذا تافه ، لكنه يجعل مثالًا جيدًا. يبدو الرمز مثل:
 
- `app.get("/now", middleware(req, res, next) { 
+```javascript
+app.get("/now", middleware(req, res, next) {
   req.string = "example";
   next();
- }, 
+},
   function (req, res) {
       res.send(req.string); // This will display "example" to the user
   });
-` 
+``` 
 
 [ساعد مجتمعنا على توسيع هذه التلميحات والأدلة](https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/apis-and-microservices/basic-node-and-express/chain-middleware-to-create-a-time-server/index.md) .

guide/arabic/certifications/apis-and-microservices/basic-node-and-express/get-data-from-post-requests/index.md

@@ -8,9 +8,10 @@ localeTitle: الحصول على البيانات من طلبات POST
 
 للحصول على بيانات من طلب النشر ، يكون التنسيق العام هو:
 
- `app.post(PATH, function(req, res) { 
+```javascript
+app.post(PATH, function(req, res) {
   // Handle the data in the request
- }); 
+});
-` 
+``` 
 
 [ساعد مجتمعنا على توسيع هذه التلميحات والأدلة](https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests/index.md) .

guide/arabic/certifications/apis-and-microservices/basic-node-and-express/get-route-parameter-input-from-the-client/index.md

@@ -6,10 +6,11 @@ localeTitle: الحصول على إدخال معلمة المسار من الع
 
 إذا طلب منك أحد الأشخاص إنشاء GET أو POST ، فستفعل app.get (…) أو app.post (…) وفقًا لذلك. الهيكل الأساسي للتحدي هو:
 
- `app.get("/:word/echo", function(req, res) { 
+```javascript
+app.get("/:word/echo", function(req, res) {
   // word = req.params.word;
   // respond with the json object
- }); 
+});
-` 
+``` 
 
 [ساعد مجتمعنا على توسيع هذه التلميحات والأدلة](https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/apis-and-microservices/basic-node-and-express/get-route-parameter-input-from-the-client/index.md) .

guide/arabic/certifications/apis-and-microservices/basic-node-and-express/implement-a-root-level-request-logger-middleware/index.md

@@ -8,12 +8,13 @@ localeTitle: تنفيذ برنامج طلب تسجيل مستوى الجذر ا
 
 لإعداد البرنامج الوسيط الخاص بك ، يمكنك القيام بذلك كما يلي:
 
- `app.use(function middleware(req, res, next) { 
+```javascript
+app.use(function middleware(req, res, next) {
   // Do something
   // Call the next function in line:
   next();
- }); 
+});
-` 
+``` 
 
 إذا واجهتك مشكلة في تنسيق السلسلة بشكل صحيح ، فستبدو طريقة واحدة لتنفيذها كما يلي:
 

guide/arabic/certifications/apis-and-microservices/basic-node-and-express/start-a-working-express-server/index.md

@@ -6,16 +6,18 @@ localeTitle: بدء تشغيل خادم اكسبرس العمل
 
 إذا كان لديك موقع ويب على "example.com/" وأردت تقديم سلسلة مثل "Hello World" لمن يزور النطاق الجذر ، فيمكنك إجراء ذلك بسهولة باستخدام العقدة و / أو التعبير السريع:
 
- `app.get("/", function(req, res) { 
+```javascript
+app.get("/", function(req, res) {
   res.send("Hello World");
- }); 
+});
-` 
+``` 
 
 أيضًا ، باستخدام ES6 + يمكنك حفظ بعض الكتابة باستخدام "=>" بدلاً من "الوظيفة" ، والتي تبدو كالتالي:
 
- `app.get("/", (req, res) => { 
+```javascript
+app.get("/", (req, res) => {
   res.send("Hello World");
- }); 
+});
-` 
+``` 
 
 [ساعد مجتمعنا على توسيع هذه التلميحات والأدلة](https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/apis-and-microservices/basic-node-and-express/start-a-working-express-server/index.md) .

guide/arabic/certifications/apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests/index.md

@@ -6,10 +6,11 @@ localeTitle: استخدام محلل الجسم إلى Parse POST الطلبات
 
 يجب إضافة محلل الجسد بالفعل إلى مشروعك إذا كنت تستخدم النص المتوفر ، ولكن إذا لم يكن كذلك ، فيجب أن يكون موجودًا على النحو التالي:
 
- `"dependencies": { 
+```code
+"dependencies": {
     "body-parser": "^1.4.3",
     ...
-` 
+``` 
 
 ما عليك القيام به لهذا التحدي هو تمرير الوسيطة إلى app.use (). تأكد من أنها تأتي قبل المسارات التي تحتاج إلى استخدامها.
 

guide/arabic/certifications/apis-and-microservices/mongodb-and-mongoose/chain-search-query-helpers-to-narrow-search-results/index.md

@@ -6,13 +6,15 @@ localeTitle: سلسلة بحث مساعدة المساعدين لضيق نتائ
 
 1.  لإنشاء ولكن لا يتم تنفيذ استعلام بحث
 
- `Model.find( {name: 'Leah'} ) 
+```javascript
-` 
+Model.find( {name: 'Leah'} )
+``` 
 
 2.  لتخزين استعلام البحث في متغير لاستخدامه لاحقًا:
 
- `var findQuery = YourModel.find( {name: 'Leah'} ) 
+```javascript
-` 
+var findQuery = YourModel.find( {name: 'Leah'} )
+``` 
 
 3.  لفرز مصفوفة:
 
@@ -21,35 +23,40 @@ localeTitle: سلسلة بحث مساعدة المساعدين لضيق نتائ
 
 4.  لتحديد حجم المصفوفة:
 
- `yourArray.limit(5)  // return array which has 5 items in it. 
+```javascript
-` 
+yourArray.limit(5)  // return array which has 5 items in it.
+``` 
 
 5.  لإخفاء خاصية معينة من النتيجة:
 
- `yourArray.select( {name: 0, age: 1} ) // Here: 0 means false and thus hide name property; 1 means true so age property will show. 
+```javascript
-` 
+yourArray.select( {name: 0, age: 1} ) // Here: 0 means false and thus hide name property; 1 means true so age property will show.
+``` 
 
 6.  لتنفيذ هذا الاستعلام ، يمكنك إما:  
     1) رد الاتصال:
 
- `YourQuery.exec(function(err, docs) { 
+```javascript
+YourQuery.exec(function(err, docs) {
     //do something here
- }) 
+})
-` 
+``` 
 
 أو 2) وعد
 
- `YourQuery.exec.then(function(err, docs) { 
+```javascript
+YourQuery.exec.then(function(err, docs) {
     //do something here
- }) 
+})
-` 
+``` 
 
 7.  سلسلة كل ذلك معا:
 
- `Person.find({age: 55}).sort({name: -1}).limit(5).select( {favoriteFoods: 0} ).exec(function(error, people) { 
+```javascript
+Person.find({age: 55}).sort({name: -1}).limit(5).select( {favoriteFoods: 0} ).exec(function(error, people) {
   //do something here
- }) 
+})
-` 
+``` 
 
   
   

guide/arabic/certifications/coding-interview-prep/algorithms/implement-bubble-sort/index.md

@@ -16,12 +16,13 @@ localeTitle: تنفيذ فرز الفقاعة
 
 #### الحل 1: الأساسي
 
- `function swap(a, b, arr){ 
+```js
+function swap(a, b, arr){
   let tmp = arr[a];
   arr[a] = arr[b];
   arr[b] = tmp;
- } 
+}
- function bubbleSort(array) { 
+function bubbleSort(array) {
   for (let i = 0; i < array.length; i++){
     for (let j = 0; j < array.length-1-i; j++){ // -i because the largest element will be bubbled at the end so we don't have to compare.
       if (array[j] > array[j+1]){
@@ -30,8 +31,8 @@ localeTitle: تنفيذ فرز الفقاعة
     }
   }
   return array;
- } 
+}
-` 
+``` 
 
 #### الحل 2: متقدم
 

guide/arabic/certifications/coding-interview-prep/algorithms/implement-insertion-sort/index.md

@@ -19,7 +19,8 @@ localeTitle: تنفيذ فرز الإدراج
 
 ### حل:
 
- `function insertionSort(array) { 
+```js
+function insertionSort(array) {
   for (let i = 1; i < array.length; i++){
     let curr = array[i];
     for (var j = i-1; j >= 0 && array[j] > curr; j--){
@@ -28,8 +29,8 @@ localeTitle: تنفيذ فرز الإدراج
     array[j+1] = curr;
   }
   return array;
- } 
+}
-` 
+``` 
 
 
 ### المراجع:

guide/arabic/certifications/coding-interview-prep/algorithms/implement-selection-sort/index.md

@@ -18,12 +18,13 @@ localeTitle: تنفيذ فرز التحديد
 
 ### حل:
 
- `function swap(a, b, arr){ 
+```js
+function swap(a, b, arr){
   let tmp = arr[a];
   arr[a] = arr[b];
   arr[b] = tmp;
- } 
+}
- function selectionSort(array) { 
+function selectionSort(array) {
   for (let i = 0; i < array.length-1; i++){
     let min = i;
     for (let j = i+1; j < array.length; j++){
@@ -32,8 +33,8 @@ localeTitle: تنفيذ فرز التحديد
     swap(i, min, array);
   }
   return array;
- } 
+}
-` 
+``` 
 
 ### المراجع:
 

guide/arabic/certifications/coding-interview-prep/data-structures/breadth-first-search/index.md

@@ -6,12 +6,13 @@ localeTitle: اتساع البحث الأول
 
 دعونا أولا تحديد فئة `Tree` لاستخدامها لتنفيذ خوارزمية Breadth First Search.
 
- `class Tree: 
+```python
+class Tree:
   def __init__(self, x):
     self.val = x
     self.left = None
     self.right = None
-` 
+``` 
 
 تنتقل خوارزمية البحث الأولى والاتساع من مستوى إلى آخر بدءًا من جذر الشجرة. سنستخدم `queue` لهذا الغرض.
 

guide/arabic/certifications/coding-interview-prep/data-structures/create-a-stack-class/index.md

@@ -24,7 +24,8 @@ localeTitle: إنشاء فئة مكدس
 
 #### الأساسية:
 
- `function Stack() { 
+```js
+function Stack() {
     var collection = [];
     this.print = function() {
         console.log(collection);
@@ -44,12 +45,13 @@ localeTitle: إنشاء فئة مكدس
     this.clear = function(){
         collection.length = 0;
     }
- } 
+}
-` 
+``` 
 
 #### متقدم - بنية ES6 Class:
 
- `class Stack { 
+```js
+class Stack {
     constructor() {
         this.collection = [];
     }
@@ -71,8 +73,8 @@ localeTitle: إنشاء فئة مكدس
     clear(){
         return this.collection.length = 0;
     }
- } 
+}
-` 
+``` 
 
 \### مصادر:
 

guide/arabic/certifications/coding-interview-prep/data-structures/find-the-minimum-and-maximum-height-of-a-binary-search-tree/index.md

@@ -19,32 +19,37 @@ localeTitle: ابحث عن الحد الأدنى والحد الأقصى لار
 
 ### لوحة المفاتيح
 
- `Ctrl + Shift + I 
+```
-` 
+Ctrl + Shift + I
+``` 
 
 ### شريط القوائم
 
 #### ثعلب النار
 
- `Tools ➤ Web Developer ➤ Toggle Tools 
+```
-` 
+Tools ➤ Web Developer ➤ Toggle Tools
+``` 
 
 #### كروم / الكروم
 
- `Tools ➤ Developer Tools 
+```
-` 
+Tools ➤ Developer Tools
+``` 
 
 #### رحلات السفاري
 
- `Develop ➤ Show Web Inspector. 
+```
-` 
+Develop ➤ Show Web Inspector.
+``` 
 
 إذا لم تتمكن من رؤية قائمة التطوير ، فانتقل إلى `Safari ➤ Preferences ➤ Advanced` وتحقق من مربع الاختيار `Show Develop menu` في شريط القائمة.
 
 #### دار الأوبرا
 
- `Developer ➤ Web Inspector 
+```
-` 
+Developer ➤ Web Inspector
+``` 
 
 ### قائمة السياق
 

guide/arabic/certifications/coding-interview-prep/data-structures/learn-how-a-stack-works/index.md

@@ -14,11 +14,12 @@ localeTitle: تعرف على كيفية عمل Stack
 
 ### حل:
 
- `var homeworkStack = ["BIO12","HIS80","MAT122","PSY44"]; 
+```js
+var homeworkStack = ["BIO12","HIS80","MAT122","PSY44"];
 
- homeworkStack.pop(); 
+homeworkStack.pop();
- homeworkStack.push("CS50"); 
+homeworkStack.push("CS50");
-` 
+``` 
 
 ### مرجع:
 

guide/arabic/certifications/coding-interview-prep/data-structures/typed-arrays/index.md

@@ -11,12 +11,13 @@ localeTitle: مصفوفات مكتوبة
 
 ### حل:
 
- `//Create a buffer of 64 bytes 
+```js
- var buffer = new ArrayBuffer(64); 
+//Create a buffer of 64 bytes
+var buffer = new ArrayBuffer(64);
 
- //Make 32-bit int typed array with the above buffer 
+//Make 32-bit int typed array with the above buffer
- var i32View = new Int32Array(buffer); 
+var i32View = new Int32Array(buffer);
-` 
+``` 
 
 ### المراجع:
 

guide/arabic/certifications/coding-interview-prep/project-euler/problem-1-multiples-of-3-and-5/index.md

@@ -13,15 +13,16 @@ localeTitle: مضاعفات 3 و 5
 
 ### حل:
 
- `function multiplesOf3and5(number) { 
+```js
+function multiplesOf3and5(number) {
   let sum = 0, i = 3;
   while (i < number){
     if (i % 3 == 0 || i % 5 == 0) sum += i;
     i++;
   }
   return sum;
- } 
+}
-` 
+``` 
 
 
 ### مرجع:

guide/arabic/certifications/coding-interview-prep/project-euler/problem-2-even-fibonacci-numbers/index.md

@@ -21,7 +21,8 @@ localeTitle: حتى أرقام فيبوناتشي
 
 #### الحل الأساسي - تكراري:
 
- `function fiboEvenSum(n) { 
+```js
+function fiboEvenSum(n) {
   let first = 1, second = 2, sum = 2, fibNum; // declaring and initializing variables
   if (n <= 1) return sum; // edge case
   for (let i = 2; i <= n; i++){  // looping till n
@@ -31,13 +32,14 @@ localeTitle: حتى أرقام فيبوناتشي
     if (fibNum%2 == 0) sum+=fibNum;  // If even add to the sum variable
   }
   return sum;
- } 
+}
-` 
+``` 
 
 #### حل متقدم - متكرر:
 
- `// We use memoization technique to save ith fibonacci number to the fib array 
+```js
- function fiboEvenSum(n){ 
+// We use memoization technique to save ith fibonacci number to the fib array
+function fiboEvenSum(n){
   const fib = [1, 2];
   let sumEven = fib[1];
   function fibonacci(n){
@@ -51,8 +53,8 @@ localeTitle: حتى أرقام فيبوناتشي
   }
   fibonacci(n); // run the recursive function
   return sumEven;
- } 
+}
-` 
+``` 
 
 
 ### المراجع:

guide/arabic/certifications/coding-interview-prep/project-euler/problem-3-largest-prime-factor/index.md

@@ -12,7 +12,8 @@ localeTitle: أكبر عامل رئيسي
 
 ### حل:
 
- `function largestPrimeFactor(number) { 
+```js
+function largestPrimeFactor(number) {
   let prime = 2, max = 1;
   while (prime <= number){
     if (number % prime == 0) {
@@ -22,8 +23,8 @@ localeTitle: أكبر عامل رئيسي
     else prime++; //Only increment the prime number if the number isn't divisible by it
   }
   return max;
- } 
+}
-` 
+``` 
 
 
 ### مصادر:

guide/arabic/certifications/data-visualization/data-visualization-with-d3/change-styles-based-on-data/index.md

@@ -28,22 +28,24 @@ else {
 
 }
 
- `What you need to remember is the bracket that the if-else logic associate with, (argument) and {statement} 
+```
+What you need to remember is the bracket that the if-else logic associate with, (argument) and {statement}
 
- **Try Yourself Now**  👩‍💻👨‍💻 
+**Try Yourself Now**  👩‍💻👨‍💻
 
 
 
- **Ternary operator** 
+**Ternary operator**
 
- A more detailed explanation [here](https://codeburst.io/javascript-the-conditional-ternary-operator-explained-cac7218beeff). Ternary operator is a lot more concise and quicker to remember for a simple true or false statement. Read [this](https://www.thoughtco.com/javascript-by-example-use-of-the-ternary-operator-2037394) 
+A more detailed explanation [here](https://codeburst.io/javascript-the-conditional-ternary-operator-explained-cac7218beeff). Ternary operator is a lot more concise and quicker to remember for a simple true or false statement. Read [this](https://www.thoughtco.com/javascript-by-example-use-of-the-ternary-operator-2037394)
-` 
+``` 
 
 جافا سكريبت
 
 شرط ؟ القيمة إذا كانت صحيحة: value if false
 
- `For someone who still not sure here is a solution by using If-else statement 
+```
-` 
+For someone who still not sure here is a solution by using If-else statement
+``` 
 
 جافا سكريبت .style ("color"، (d) => { إذا ((د <20) { العودة "الحمراء" } else { العودة "الخضراء" } }) \`\` \`

guide/arabic/certifications/front-end-libraries/bootstrap/add-elements-within-your-bootstrap-wells/index.md

@@ -10,15 +10,15 @@ localeTitle: إضافة عناصر داخل الآبار Bootstrap الخاص ب
 
 يتم الإعلان عن زر على النحو التالي:
 
- `
+```html
 <button></button>
-` 
+``` 
 
 ### حل
 
 نظرًا لأنه يتعين علينا إعلان 3 زر في كل بئر ، سنفعل ما يلي:
 
- `
+```html
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>
   <div class="row">
@@ -37,5 +37,5 @@ localeTitle: إضافة عناصر داخل الآبار Bootstrap الخاص ب
       </div>
     </div>
   </div>
- </div> 
+</div>
-`
+```

guide/arabic/certifications/front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons/index.md

@@ -25,9 +25,9 @@ localeTitle: إضافة أيقونات روعة للخط إلى جميع أزر
 
 ### حل:
 
- `
+```html
 <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
- <style> 
+<style>
   h2 {
     font-family: Lobster, Monospace;
   }
@@ -38,9 +38,9 @@ localeTitle: إضافة أيقونات روعة للخط إلى جميع أزر
     border-style: solid;
     border-radius: 50%;
   }
- </style> 
+</style>
 
- <div class="container-fluid"> 
+<div class="container-fluid">
   <div class="row">
     <div class="col-xs-8">
       <h2 class="text-primary text-center">CatPhotoApp</h2>
@@ -82,5 +82,5 @@ localeTitle: إضافة أيقونات روعة للخط إلى جميع أزر
     <input type="text" placeholder="cat photo URL" required>
     <button type="submit">Submit</button>
   </form>
- </div> 
+</div>
-`
+```

guide/arabic/certifications/front-end-libraries/bootstrap/add-id-attributes-to-bootstrap-elements/index.md

@@ -10,9 +10,9 @@ localeTitle: أضف سمات المعرف إلى عناصر Bootstrap
 
 يتم تعريف معرف على النحو التالي:
 
- `
+```html
 <element id="id(s)List"></element>
-` 
+``` 
 
 ### تلميح 2
 
@@ -30,7 +30,7 @@ localeTitle: أضف سمات المعرف إلى عناصر Bootstrap
 
 نظرًا لأنك تحتاج إلى إضافة معرّف (معرّفات) إلى كلٍّ من الآبار ولديك كلاً من معرف فريد ، فإن ما يلي هو الحل:
 
- `
+```html
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>
   <div class="row">
@@ -49,5 +49,5 @@ localeTitle: أضف سمات المعرف إلى عناصر Bootstrap
       </div>
     </div>
   </div>
- </div> 
+</div>
-`
+```

guide/arabic/certifications/front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style/index.md

@@ -10,15 +10,15 @@ localeTitle: قم بتطبيق نمط زر Bootstrap الافتراضي
 
 يتم تعريف الفئة باستخدام بناء الجملة التالي:
 
- `
+```html
 <button class="class(es)Name"></button>
-` 
+``` 
 
 ### حل
 
 نظرًا لأنك `btn` إلى إضافة فئات `btn` و `btn-default` ، فإن ما يلي هو الحل:
 
- `
+```html
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>
   <div class="row">
@@ -37,5 +37,5 @@ localeTitle: قم بتطبيق نمط زر Bootstrap الافتراضي
       </div>
     </div>
   </div>
- </div> 
+</div>
-`
+```

guide/arabic/certifications/front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors/index.md

@@ -14,7 +14,7 @@ localeTitle: إنشاء فئة إلى الهدف باستخدام محددات j
 
 نظرًا لأنك مضطر لإضافة فئة `target` ، فإن ما يلي هو الحل:
 
- `
+```html
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>
   <div class="row">
@@ -33,5 +33,5 @@ localeTitle: إنشاء فئة إلى الهدف باستخدام محددات j
       </div>
     </div>
   </div>
- </div> 
+</div>
-`
+```

guide/arabic/certifications/front-end-libraries/bootstrap/index.md

@@ -8,8 +8,9 @@ localeTitle: التمهيد
 
 مقتبس من موقع Bootstrap:
 
- `Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery. 
+```
-` 
+Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
+``` 
 
 يجد إطار العمل قابلية للتوظيف في العديد من مشاريع الواجهة الأمامية ويعتبر نوي هو أشهر إطار عمل HTML و CSS.
 

guide/arabic/certifications/front-end-libraries/jquery/target-elements-by-class-using-jquery/index.md

@@ -9,10 +9,11 @@ localeTitle: عناصر الهدف حسب الفئة باستخدام jQuery
 
 ## حل
 
- `<script> 
+```javascript
+<script>
   $(document).ready(function() {
     $(".well").addClass("animated bounce");
     $(".well").addClass("shake");
   });
- </script> 
+</script>
-`
+```

guide/arabic/certifications/front-end-libraries/jquery/target-elements-by-id-using-jquery/index.md

@@ -6,11 +6,12 @@ localeTitle: عناصر الهدف عن طريق id استخدام jQuery
 
 ## حل
 
- `<script> 
+```javascript
+<script>
   $(document).ready(function() {
     $("button").addClass("animated bounce");
     $(".well").addClass("animated shake");
     $("#target3").addClass("fadeOut"); // Target elements with the id "target3" and add the class "fadeOut" to them.
   });
- </script> 
+</script>
-`
+```

guide/arabic/certifications/front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery/index.md

@@ -8,19 +8,21 @@ localeTitle: عناصر HTML الهدف مع المحددات باستخدام j
 
 ## مثال
 
- `//You can select all <p> elements on a page like this  =  $("p") 
+```javascipt
+//You can select all <p> elements on a page like this  =  $("p")
   $(document).ready(function(){
     $("button").click(function(){
         $("p").hide();
     });
- }); 
+});
-` 
+``` 
 
 ## حل
 
- `<script> 
+```javascript
+<script>
   $(document).ready(function() {
       $("button").addClass("animated bounce"); // We are selecting the button elements and adding "animated bounce" class to them.
   });
- </script> 
+</script>
-`
+```

guide/arabic/certifications/front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery/index.md

@@ -6,9 +6,10 @@ localeTitle: استهداف أصل عنصر باستخدام jQuery
 
 ## حل
 
- `<script> 
+```js
+<script>
   $(document).ready(function() {
     $("#target1").parent().css("background-color", "red"); // Selects the parent of #target1 and changes its background-color to red
   });
- </script> 
+</script>
-`
+```

guide/arabic/certifications/front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors/index.md

@@ -6,11 +6,12 @@ localeTitle: استهدف عنصر نفسه باستخدام محددات jQuery
 
 ## حل
 
- `<script> 
+```javascript
+<script>
   $(document).ready(function() {
     $("button").addClass("animated"); // Target elements with type "button" and add the class "animated" to them.
     $(".btn").addClass("shake"); // Target elements with class ".btn" and add the class "shake" to them.
     $("#target1").addClass("btn-primary"); // Target elements with id "#target1" and add the class "btn-primary" to them.
   });
- </script> 
+</script>
-`
+```

guide/arabic/certifications/front-end-libraries/jquery/use-jquery-to-modify-the-entire-page/index.md

@@ -14,8 +14,9 @@ localeTitle: استخدم jQuery لتعديل الصفحة بأكملها
 
 ### حل:
 
- `<script> 
+```javascript
+<script>
   $("body").addClass("animated hinge");
   });
- </script> 
+</script>
-`
+```

guide/arabic/certifications/front-end-libraries/react-and-redux/extract-state-logic-to-redux/index.md

@@ -10,20 +10,21 @@ localeTitle: استخراج الدولة المنطق إلى Redux
 
 الحل المقترح:
 
- `const ADD = 'ADD'; 
+```javascript
+const ADD = 'ADD';
 
- function addMessage(message) { 
+function addMessage(message) {
   return {
     type: ADD,
     message: message
   };
- }; 
+};
 
- function messageReducer (previousState, action) { 
+function messageReducer (previousState, action) {
   return [...previousState, action.message];
- } 
+}
 
- let store = { 
+let store = {
   state: [],
   getState: () => store.state,
   dispatch: (action) => {
@@ -31,5 +32,5 @@ localeTitle: استخراج الدولة المنطق إلى Redux
       store.state = messageReducer(store.state, action);
     }
   }
- }; 
+};
-`
+```

guide/arabic/certifications/front-end-libraries/react/add-comments-in-jsx/index.md

@@ -8,8 +8,9 @@ localeTitle: أضف تعليقات في JSX
 
 *   تعليق سطر واحد:
 
- `{/*<h1>Hanoi University of Science</h1>*/} 
+```jsx
-` 
+{/*<h1>Hanoi University of Science</h1>*/}
+``` 
 
 *   تعليقات متعددة الخطوط:
 
@@ -21,6 +22,6 @@ localeTitle: أضف تعليقات في JSX
 
 ملاحظة: لا يمكنك استخدام تعليق HTML في JSX على النحو التالي:
 
- `
+```html
 <!-- not working -->
-`
+```

guide/arabic/certifications/front-end-libraries/react/add-event-listeners/index.md

@@ -10,7 +10,8 @@ localeTitle: اضافة المستمعين الحدث
 
 ملاحظة: document.addEventListener و document.removeEventListener سوف يأخذ في سلسلة مقتبسة عن الحدث الخاص به ، وعند تمريره في الدالة ، ستشير إليه handleKeyPress () باسم this.handleKeyPress. إذا قمت باستدعاء الدالة على هذا .handleKeyPress () ، سيقوم مستمع الحدث بتقييم الدالة أولاً وسيعيد قيمة غير معرفة.
 
- `class MyComponent extends React.Component { 
+```javascript
+class MyComponent extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -44,8 +45,8 @@ localeTitle: اضافة المستمعين الحدث
       </div>
     );
   }
- }; 
+};
-` 
+``` 
 
 ### مصادر
 

guide/arabic/certifications/front-end-libraries/react/add-inline-styles-in-react/index.md

@@ -8,7 +8,8 @@ localeTitle: إضافة أنماط مضمنة في React
 
 ### المفسد
 
- `class Colorful extends React.Component { 
+```jsx
+class Colorful extends React.Component {
   render() {
     // change code below this line
     return (
@@ -16,8 +17,8 @@ localeTitle: إضافة أنماط مضمنة في React
     );
     // change code above this line
   }
- }; 
+};
-` 
+``` 
 
 ### مصادر
 

guide/arabic/certifications/front-end-libraries/react/bind-this-to-a-class-method/index.md

@@ -23,7 +23,8 @@ localeTitle: ربط "هذا" لطريقة Class
 
 ## المفسد
 
- `class MyComponent extends React.Component { 
+```jsx
+class MyComponent extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -48,5 +49,5 @@ localeTitle: ربط "هذا" لطريقة Class
       </div>
     );
   }
- } 
+}
-`
+```

guide/arabic/certifications/front-end-libraries/react/change-inline-css-conditionally-based-on-component-state/index.md

@@ -8,8 +8,9 @@ localeTitle: تغيير CSS المضمنة بناء على حالة المكون
 
 ستقوم بالتحقق من طول هذا `this.state.input` بحيث تستخدم خاصية `.length` .
 
- `this.state.input.length 
+```
-` 
+this.state.input.length
+``` 
 
 ## تلميح 2:
 
@@ -19,7 +20,8 @@ localeTitle: تغيير CSS المضمنة بناء على حالة المكون
 
 ستستخدم عبارة `if/then` للتحقق من قيمة هذا `this.state.input.length` . إذا كان أطول من 15 ، `inputStyle.border` `'3px solid red'` إلى `inputStyle.border` .
 
- `class GateKeeper extends React.Component { 
+```jsx
+class GateKeeper extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -50,8 +52,8 @@ localeTitle: تغيير CSS المضمنة بناء على حالة المكون
       </div>
     );
   }
- }; 
+};
-` 
+``` 
 
 ## حل
 

guide/arabic/certifications/front-end-libraries/react/compose-react-components/index.md

@@ -12,7 +12,8 @@ localeTitle: تأليف React Components
 
 ما يلي هو الحل لل chakkenge ، حيث تجعل الحمضيات و NonCitrus في مكون ثم يتم تقديمها في آخر:
 
- `class Fruits extends React.Component { 
+```jsx
+class Fruits extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -25,9 +26,9 @@ localeTitle: تأليف React Components
       </div>
     );
   }
- }; 
+};
 
- class TypesOfFood extends React.Component { 
+class TypesOfFood extends React.Component {
   constructor(props) {
      super(props);
   }
@@ -39,8 +40,8 @@ localeTitle: تأليف React Components
       </div>
     );
   }
- }; 
+};
-` 
+``` 
 
 ### روابط ذات صلة:
 

guide/arabic/certifications/front-end-libraries/react/create-a-component-with-composition/index.md

@@ -20,7 +20,8 @@ localeTitle: إنشاء مكون مع التركيب
 
 سوف يقدم التالية في ChildComponent في ParentComponent ، كما هو مطلوب:
 
- `class ParentComponent extends React.Component { 
+```javascript
+class ParentComponent extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -32,5 +33,5 @@ localeTitle: إنشاء مكون مع التركيب
       </div>
     );
   }
- }; 
+};
-`
+```

guide/arabic/certifications/front-end-libraries/react/create-a-controlled-form/index.md

@@ -26,5 +26,6 @@ localeTitle: إنشاء نموذج التحكم
 
 والآن بعد أن يتم التعامل مع بياناتك في الحالة ، يمكننا استخدام هذه البيانات. قم بإنشاء عنصر `h1` . داخل عنصر `h1` ضع متغير "إرسال" الخاص بك. تذكر أن "submit" يقع داخل الولاية لذا ستحتاج إلى استخدام هذا `this.state` . بالإضافة إلى ذلك ، يتطلب وضع المتغير داخل JSX أقواسًا متعرجة `{ }` لأنها جافا سكريبت.
 
- `<h1>{this.state.submit}</h1> 
+```jsx
-`
+<h1>{this.state.submit}</h1>
+```

guide/arabic/certifications/front-end-libraries/react/create-a-controlled-input/index.md

@@ -10,26 +10,30 @@ localeTitle: إنشاء مدخلات متحكم بها
 
 لذلك أنت الخطوة الأولى سوف يجعل وظيفة يقوم بتغيير المتغير الدولة `input` .
 
- `handleChange(event) { 
+```
+handleChange(event) {
     this.setState({
       input: event.target.value
     });
- } 
+}
-` 
+``` 
 
 ستشمل خطوتك التالية إنشاء مربع إدخال وتشغيله عند كتابة أي شخص لأي شيء. لحسن الحظ لدينا حدث يسمى `onChange()` لخدمة هذا الغرض. PS - وهنا طريقة أخرى لربط `this` في وظيفة
 
- `<input onChange = {this.handleChange.bind(this)}/> 
+```
-` 
+<input onChange = {this.handleChange.bind(this)}/>
+``` 
 
 لكن هذا لن يخدم هدفك. على الرغم من أنك قد تشعر أن عملها. إذن ما يحدث هنا هو تحديثات النص من المتصفح وليس الدولة. لذا ، لتصحيح ذلك ، سنضيف سمة `value` `this.state.input` على `this.state.input` لعنصر الإدخال الذي سيجعل الإدخال يتحكم في الحالة.
 
- `<input value = {this.state.input} onChange = {this.handleChange.bind(this)}/> 
+```
-` 
+<input value = {this.state.input} onChange = {this.handleChange.bind(this)}/>
+``` 
 
 يمكن أن يكون من الصعب جدًا استيعابها ولكن لجعل الأمور أكثر وضوحًا ، جرّب إزالة أمر `onChange` بأكمله حتى تبدو الشفرة مثل هذا
 
- `<input value = {this.state.input}/> 
+```
-` 
+<input value = {this.state.input}/>
+``` 
 
 الآن قم بتشغيل الاختبارات مرة أخرى هل أنت قادر على كتابة أي شيء؟ سيكون الجواب عليه "لا" لأن مربع الإدخال الخاص بك يحصل على قيمة من `input` متغير الحالة حيث لا يوجد تغيير في `input` الحالة (سلسلة فارغة مبدئياً) والذي سيحدث فقط عندما تقوم بتشغيل الدالة `handleChange()` والتي سوف يحدث فقط عندما يكون لديك معالج حدث مثل `onChange()` ومن ثم ستظل السلسلة داخل مربع الإدخال كما هي ، أي سلسلة فارغة.

guide/arabic/certifications/front-end-libraries/react/create-a-react-component/index.md

@@ -12,7 +12,8 @@ localeTitle: إنشاء مكون React
 
 ## حل
 
- `class MyComponent extends React.Component { 
+```javascript
+class MyComponent extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -25,7 +26,7 @@ localeTitle: إنشاء مكون React
     );
     // change code above this line
   }
- }; 
+};
-` 
+``` 
 
 لاحظ أنك لا تحتاج إلى وضع علامات اقتباس حول النص ، لأنه عندما تعمل مع JSX يتم التعامل معه على أنه HTML. تحقق أيضًا من صحة التهجئة والحالة وعلامات الترقيم! إذا كان كل هذا التعليمة البرمجية يبدو غريبا ، اذهب إلى الاطلاع على بعض المواد الرائعة الموجودة على Javascript ES6 هنا على freeCodeCamp.

guide/arabic/certifications/front-end-libraries/react/create-a-stateful-component/index.md

@@ -6,7 +6,8 @@ localeTitle: إنشاء مكون Stateful
 
 #### تلميح 1:
 
- `class StatefulComponent extends React.Component { 
+```JSX
+class StatefulComponent extends React.Component {
   constructor(props) {
     super(props);
     // initialize state here
@@ -20,8 +21,8 @@ localeTitle: إنشاء مكون Stateful
       </div>
     );
   }
- }; 
+};
-` 
+``` 
 
 ## حل
 

guide/arabic/certifications/front-end-libraries/react/create-a-stateless-functional-component/index.md

@@ -14,10 +14,11 @@ localeTitle: إنشاء مكون وظيفي عديم الحالة
 
 تتم إضافة وظيفة إرجاع مثل هذا
 
- `return( 
+```jsx
+return(
     <return elements>
- ); 
+);
-` 
+``` 
 
 ### حل
 

guide/arabic/certifications/front-end-libraries/react/define-an-html-class-in-jsx/index.md

@@ -15,9 +15,10 @@ localeTitle: تحديد فئة HTML في JSX
 
 ## حل
 
- `const JSX = ( 
+```javascript
+const JSX = (
   <div className = "myDiv">
     <h1>Add a class to this div</h1>
   </div>
- ); 
+);
-`
+```

guide/arabic/certifications/front-end-libraries/react/learn-about-self-closing-jsx-tags/index.md

@@ -6,7 +6,8 @@ localeTitle: تعرف على علامات JSX ذاتية الإغلاق
 
 ## تلميح 1:
 
- `const JSX = ( 
+```js
+const JSX = (
   <div>
     {/* remove comment and change code below this line // Remember that comments in JSX have parentheses.
     <h2>Welcome to React!</h2> <br > // ?
@@ -14,8 +15,8 @@ localeTitle: تعرف على علامات JSX ذاتية الإغلاق
     <hr >  // ?
     remove comment and change code above this line */} // Remember that comments in JSX have parentheses.
   </div>
- ); 
+);
-` 
+``` 
 
 ## حل
 

guide/arabic/certifications/front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate/index.md

@@ -12,7 +12,8 @@ localeTitle: تحسين Re-Renders مع shouldComponentUpdate
 
 بالنسبة لهذا الحل ، ستستخدم عبارة `if/then` للتحقق مما إذا كانت قيمة `nextProps` متساوية. تختلف `nextProps` عن `props` في أنها قيمة لم يتم تقديمها في واجهة المستخدم بعد ، لذا في أسلوب `shouldComponentUpdate()` ، فأنت تطلب بشكل أساسي إذنًا لتحديث واجهة المستخدم بقيمة `nextProps` .
 
- `class OnlyEvens extends React.Component { 
+```jsx
+class OnlyEvens extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -34,9 +35,9 @@ localeTitle: تحسين Re-Renders مع shouldComponentUpdate
   render() {
     return <h1>{this.props.value}</h1>
   }
- }; 
+};
 
- class Controller extends React.Component { 
+class Controller extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -57,5 +58,5 @@ localeTitle: تحسين Re-Renders مع shouldComponentUpdate
       </div>
     );
   }
- }; 
+};
-`
+```

guide/arabic/certifications/front-end-libraries/react/pass-a-callback-as-props/index.md

@@ -16,7 +16,8 @@ localeTitle: تمرير رد الاتصال على النحو الدعائم
 
 ### حل
 
- `class MyApp extends React.Component { 
+```javascript
+class MyApp extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -41,5 +42,5 @@ localeTitle: تمرير رد الاتصال على النحو الدعائم
        </div>
     );
   }
- }; 
+};
-`
+```

guide/arabic/certifications/front-end-libraries/react/pass-an-array-as-props/index.md

@@ -6,11 +6,12 @@ localeTitle: تمرير صفيف كما الدعائم
 
 لتمرير مصفوفة كبروب ، يجب أن يتم الإعلان أولاً عن صفيف على أنه دعم "المهام" على كل مكون من المكونات التي سيتم تقديمها:
 
- `const List= (props) => { 
+```javascript
+const List= (props) => {
   return <p></p>
- }; 
+};
 
- class ToDo extends React.Component { 
+class ToDo extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -25,17 +26,18 @@ localeTitle: تمرير صفيف كما الدعائم
       </div>
     );
   }
- }; 
+};
-` 
+``` 
 
 ثم ، يجب التعامل مع الدعائم داخل مكون "قائمة":
 
- `const List= (props) => { 
+```javascript
+const List= (props) => {
   return <p>{props.tasks.join(", ")}</p>
- }; 
+};
 
- // ... same as above 
+// ... same as above
-` 
+``` 
 
 يتم استخدام طريقة `.join(", ")` لأخذ كل عنصر من داخل الصفيف ثم `.join(", ")` إلى سلسلة ليتم عرضها.
 

guide/arabic/certifications/front-end-libraries/react/pass-props-to-a-stateless-functional-component/index.md

@@ -8,8 +8,9 @@ localeTitle: تمرير الدعائم إلى مكون وظيفي عديم ال
 
 حدد تاريخًا مسمى للدعم في مكون التقويم كما يلي:
 
- `<CurrentDate date={Date()} /> 
+```jsx
-` 
+<CurrentDate date={Date()} />
+``` 
 
 \`
 
@@ -21,15 +22,16 @@ localeTitle: تمرير الدعائم إلى مكون وظيفي عديم ال
 
 قم بتعيين تاريخ مسمى للدعم في مكون التقويم كما يلي وقم بعرضه في مكون التقويم ، مثل:
 
- `const CurrentDate = (props) => { 
+```jsx
+const CurrentDate = (props) => {
   return (
     <div>
       <p>The current date is: {props.date}</p>
     </div>
   );
- }; 
+};
 
- class Calendar extends React.Component { 
+class Calendar extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -41,5 +43,5 @@ localeTitle: تمرير الدعائم إلى مكون وظيفي عديم ال
       </div>
     );
   }
- }; 
+};
-`
+```

guide/arabic/certifications/front-end-libraries/react/pass-state-as-props-to-child-components/index.md

@@ -6,7 +6,8 @@ localeTitle: تمرير حالة الدعائم إلى مكونات الأطفا
 
 في هذا التحدي ، سنمرر الدولة ، ولكن بما أن الحالة محلية لمكونها الأم ، يجب أن نستخدم **الدعائم** لتمريرها إلى المكون الفرعي. سيسمح لنا استخدام الدعائم في المكونات الفرعية بالاحتفاظ بكل بيانات الحالة في المكون الرئيسي ويمكننا تمرير البيانات في اتجاه واحد إلى مكونات الأطفال.
 
- `class MyApp extends React.Component { 
+```javascript
+class MyApp extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -22,9 +23,9 @@ localeTitle: تمرير حالة الدعائم إلى مكونات الأطفا
        </div>
     );
   }
- }; 
+};
 
- class Navbar extends React.Component { 
+class Navbar extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -37,5 +38,5 @@ localeTitle: تمرير حالة الدعائم إلى مكونات الأطفا
     </div>
     );
   }
- }; 
+};
-`
+```

guide/arabic/certifications/front-end-libraries/react/render-a-class-component-to-the-dom/index.md

@@ -6,7 +6,8 @@ localeTitle: تقديم مكون فئة إلى DOM
 
 من المفترض أن ينتهي رمزك بالظهور على النحو التالي:
 
- `class TypesOfVehicles extends React.Component { 
+```javascript
+class TypesOfVehicles extends React.Component {
     constructor(props) {
         super(props);
     }
@@ -19,9 +20,9 @@ localeTitle: تقديم مكون فئة إلى DOM
           </div>
         );
     }
- } 
+}
- ReactDOM.render(<TypesOfVehicles />,'node-id') 
+ReactDOM.render(<TypesOfVehicles />,'node-id')
-` 
+``` 
 
 قد يكون بناء جملة ReactDOM.render خادعاً قليلاً ، تحتاج إلى استخدام أقواس المثلث عند المرور في مكون Class. كما يتم الإعلان عن المكونين الفرعيين خلف الكواليس ، مما قد يكون مربكًا إذا كنت معتادًا على جميع المتغيرات التي يتم تحديدها في محرر الشفرة ومرئية أمامك.
 

guide/arabic/certifications/front-end-libraries/react/render-html-elements-to-the-dom/index.md

@@ -6,12 +6,14 @@ localeTitle: تقديم عناصر HTML إلى DOM
 
 لتقديم عنصر إلى DOM ، نستخدم بناء الجملة التالي
 
- `ReactDOM.render(<item to be rendered>, <where to be rendered>); 
+```javascript
-` 
+ReactDOM.render(<item to be rendered>, <where to be rendered>);
+``` 
 
 ## حل
 
 بعد بناء الجملة ، نضيف هذا السطر من التعليمة البرمجية لتحويل عنصر JSX إلى div بمعرف عقدة التحدي.
 
- `ReactDOM.render(JSX,document.getElementById('challenge-node')); 
+```javascript
-`
+ReactDOM.render(JSX,document.getElementById('challenge-node'));
+```

guide/arabic/certifications/front-end-libraries/react/render-react-on-the-server-with-rendertostring/index.md

@@ -8,15 +8,16 @@ localeTitle: تجعل رد فعل على الخادم مع renderToString
 
 يمكنك تمرير `class` `.renderToString()` إلى `.renderToString()` مثلما تقوم بتمرير مكون إلى طريقة `render` .
 
- `class App extends React.Component { 
+```jsx
+class App extends React.Component {
   constructor(props) {
     super(props);
   }
   render() {
     return <div/>
   }
- }; 
+};
 
- // change code below this line 
+// change code below this line
- ReactDOMServer.renderToString(<App />); 
+ReactDOMServer.renderToString(<App />);
-`
+```

guide/arabic/certifications/front-end-libraries/react/render-state-in-the-user-interface-another-way/index.md

@@ -6,7 +6,8 @@ localeTitle: تقديم الدولة في واجهة المستخدم بطريق
 
 #### تلميح 1:
 
- `class MyComponent extends React.Component { 
+```JSX
+class MyComponent extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -26,12 +27,13 @@ localeTitle: تقديم الدولة في واجهة المستخدم بطريق
       </div>
     );
   }
- }; 
+};
-` 
+``` 
 
 ## حل
 
- `class MyComponent extends React.Component { 
+```JSX
+class MyComponent extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -50,5 +52,5 @@ localeTitle: تقديم الدولة في واجهة المستخدم بطريق
       </div>
     );
   }
- }; 
+};
-`
+```

guide/arabic/certifications/front-end-libraries/react/review-using-props-with-stateless-functional-components/index.md

@@ -12,16 +12,17 @@ localeTitle: استعراض استخدام الدعائم مع مكونات وظ
 
 ### حل
 
- `const Camper = props => (<p>{props.name}</p>); 
+```javascript
+const Camper = props => (<p>{props.name}</p>);
 
- Camper.defaultProps = { 
+Camper.defaultProps = {
   name: 'CamperBot'
- }; 
+};
 
- Camper.propTypes = { 
+Camper.propTypes = {
   name: PropTypes.string.isRequired
- }; 
+};
-` 
+``` 
 
 ### رابط ذو صلة
 

guide/arabic/certifications/front-end-libraries/react/use--for-a-more-concise-conditional/index.md

@@ -6,8 +6,9 @@ localeTitle: استخدم && من أجل شرطي أكثر موجزًا
 
 المثال المعطى هو
 
- `{condition && <p>markup</p>} 
+```
-` 
+{condition && <p>markup</p>}
+``` 
 
 والذي يظهر أدناه باستخدام حالة this.state.dinnerCoined boolean. إذا كان الأمر المنطقي صحيحًا ، فسيتم عرض الترميز المضمن في {} مع الشرط ، وإلا فلن يتم عرضه
 

guide/arabic/certifications/front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering/index.md

@@ -10,8 +10,9 @@ localeTitle: استخدم تعبير Ternary للعرض الشرطي
 
 يتكون المشغل الثلاثي من ثلاثة أجزاء ، ولكن يمكنك الجمع بين عدة تعبيرات ثلاثية معًا. وإليك البنية الأساسية:
 
- `condition ? expressionIfTrue : expressionIfFalse 
+```
-` 
+condition ? expressionIfTrue : expressionIfFalse
+``` 
 
 ## حل
 

guide/arabic/certifications/front-end-libraries/react/use-advanced-javascript-in-react-render-method/index.md

@@ -12,8 +12,9 @@ localeTitle: استخدم جافا سكريبت المتقدمة في طريقة
 
 ### حل
 
- `const answer = possibleAnswers[this.state.randomIndex]; 
+```js
-` 
+const answer = possibleAnswers[this.state.randomIndex];
+``` 
 
 بعد ذلك ، أدخل "الإجابة" الخاصة بك في علامات p. تأكد من لفها بأقواس معقوفة `{ }` .
 

guide/arabic/certifications/front-end-libraries/react/use-default-props/index.md

@@ -6,28 +6,31 @@ localeTitle: استخدام الدعائم الافتراضية
 
 هذا التحدي قد قمت بتعريف دعم افتراضي لمكون ShoppingCart
 
- `const ShoppingCart = (props) => { 
+```javascript
+const ShoppingCart = (props) => {
   return (
     <div>
       <h1>Shopping Cart Component</h1>
     </div>
   )
- }; 
+};
-` 
+``` 
 
 لإعلان دعامة افتراضية ، فإن الصيغة التي يجب اتباعها هي
 
- `itemName.defaultProps = { 
+```javascript
+itemName.defaultProps = {
   prop-x: value,
   prop-y: value
- } 
+}
-` 
+``` 
 
 باتباع "بناء الجملة" ، يجب أن يتم تعريف التعليمة البرمجية التالية أدناه التعليمات البرمجية المحددة
 
- `ShoppingCart.defaultProps = { 
+```javascript
+ShoppingCart.defaultProps = {
   items: 0
- } 
+}
-` 
+``` 
 
 هذا يعلن دعامة تسمى "العناصر" بقيمة "0".

guide/arabic/certifications/front-end-libraries/react/use-react-to-render-nested-components/index.md

@@ -13,9 +13,10 @@ localeTitle: استخدم React لتقديم العناصر المتداخلة
 
 في هذا الاختبار ، قمنا بتعريف مكونين وظيفيين عديمي الأهلية ، أي استخدام وظائف JavaScript. تذكر ، بمجرد إنشاء مكون ، يمكن تقديمه بنفس طريقة علامة HTML ، باستخدام اسم المكون داخل أقواس فتح وإغلاق HTML. على سبيل المثال ، لتضمين مكون يدعى Dog داخل مكون رئيسي يسمى Animals ، يمكنك ببساطة إرجاع مكون Dog من مكون الحيوانات مثل:
 
- `return ( 
+```javascript
+return (
   <Dog />
- ) 
+)
-` 
+``` 
 
 جرب هذا مع مكونات TypesOfFruit و Fruits.

guide/arabic/certifications/front-end-libraries/react/use-state-to-toggle-an-element/index.md

@@ -19,7 +19,8 @@ localeTitle: استخدم الدولة لتبديل عنصر
 
 ## حل:
 
- `class MyComponent extends React.Component { 
+```jsx
+class MyComponent extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -57,5 +58,5 @@ localeTitle: استخدم الدولة لتبديل عنصر
       );
     }
   }
- }; 
+};
-`
+```

guide/arabic/certifications/front-end-libraries/react/write-a-react-component-from-scratch/index.md

@@ -6,10 +6,11 @@ localeTitle: اكتب مكون React من سكراتش
 
 في هذا التحدي ، نرغب في إنشاء مكون تفاعل `class` (يمكن أن تكون مكونات React مكونات `class` أو مكونات `function` ). جميع مكونات الفصل لدينا ستكون `React.Component` لـ `React.Component` . على سبيل المثال ، يمكننا البدء في إنشاء مكون يسمى `FirstComponent` مع:
 
- `class FirstComponent extends React.Component { 
+```javascript
+class FirstComponent extends React.Component {
 
- }; 
+};
-` 
+``` 
 
 نحتاج أيضًا إلى التأكد من تعريف `constructor` لفئتنا الجديدة. ومن أفضل الممارسات لاستدعاء أي مكون `constructor` مع `super` ولتمرير `props` على حد سواء. `super` تسحب `constructor` الفئة الأصل المكون لدينا (في هذه الحالة `React.Component` ). الآن ، تبدو الشفرة الخاصة بمكوننا كما يلي:
 
@@ -23,7 +24,8 @@ localeTitle: اكتب مكون React من سكراتش
 
 الآن كل ما تبقى القيام به هو تحديد ما `render` ! نقوم بذلك عن طريق استدعاء طريقة `render` المكون ، وإرجاع رمز JSX الخاص بنا:
 
- `class FirstComponent extends React.Component { 
+```javascript
+class FirstComponent extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -32,7 +34,7 @@ localeTitle: اكتب مكون React من سكراتش
       // The JSX code you put here is what your component will render
     );
   }
- }; 
+};
-` 
+``` 
 
 بمجرد وجود شفرة JSX الخاصة بك ، اكتمل المكون الخاص بك! إذا كنت تريد تعليمي أكثر دقة من مكونات React [كتب](https://medium.freecodecamp.org/how-to-write-your-first-react-js-component-d728d759cabc) سامر بونا [مقالة رائعة](https://medium.freecodecamp.org/how-to-write-your-first-react-js-component-d728d759cabc) .

guide/arabic/certifications/front-end-libraries/react/write-a-simple-counter/index.md

@@ -36,7 +36,8 @@ localeTitle: اكتب عداد بسيط
 
 ## حل:
 
- `class Counter extends React.Component { 
+```JSX
+class Counter extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -63,5 +64,5 @@ localeTitle: اكتب عداد بسيط
       </div>
     );
   }
- }; 
+};
-`
+```

guide/arabic/certifications/front-end-libraries/redux/create-a-redux-store/index.md

@@ -12,19 +12,22 @@ localeTitle: قم بإنشاء مخزن Redux
 
 ### الخطوة 1. أعلن المتغير.
 
- `const yourVariableName; 
+```javascript
-` 
+const yourVariableName;
+``` 
 
 ### الخطوة 2. تعيين المتغير الخاص بك إلى طريقة.
 
- `const yourVariableName = yourMethodName(); 
+```javascript
-` 
+const yourVariableName = yourMethodName();
+``` 
 
 تلميح: ضع في اعتبارك أن طريقة `createStore()` متاحة من الكائن Redux. على سبيل المثال: `Redux.createStore()`
 
 ### الخطوة 3. تمرير في جدال للطريقة الخاصة بك.
 
- `const yourVariableName = yourMethodName(yourArgumentName); 
+```javascript
-` 
+const yourVariableName = yourMethodName(yourArgumentName);
+``` 
 
 حظا طيبا وفقك الله!

guide/arabic/certifications/front-end-libraries/redux/define-an-action-creator/index.md

@@ -8,10 +8,11 @@ localeTitle: قم بتعريف عمل الخالق
 
 يتم تعريف الدالة باستخدام بناء الجملة التالي:
 
- `functionName(){ 
+```javascript
+functionName(){
   console.log("Do something");
- } 
+}
-` 
+``` 
 
 حيث يمكن تغيير console.log حسب الحاجة.
 
@@ -21,7 +22,8 @@ localeTitle: قم بتعريف عمل الخالق
 
 ### حل
 
- `function actionCreator(){ 
+```javascript
+function actionCreator(){
     return action;
- } 
+}
-`
+```

guide/arabic/certifications/front-end-libraries/redux/handle-an-action-in-the-store/index.md

@@ -6,11 +6,12 @@ localeTitle: التعامل مع العمل في المتجر
 
 ### حل
 
- `const defaultState = { 
+```javascript
+const defaultState = {
   login: false
- }; 
+};
 
- const reducer = (state = defaultState, action) => { 
+const reducer = (state = defaultState, action) => {
   // change code below this line
   if (action.type === 'LOGIN') {
     return  {
@@ -20,13 +21,13 @@ localeTitle: التعامل مع العمل في المتجر
       return defaultState
   };
   // change code above this line
- }; 
+};
 
- const store = Redux.createStore(reducer); 
+const store = Redux.createStore(reducer);
 
- const loginAction = () => { 
+const loginAction = () => {
   return {
     type: 'LOGIN'
   }
- }; 
+};
-`
+```

guide/arabic/certifications/front-end-libraries/redux/register-a-store-listener/index.md

@@ -20,36 +20,39 @@ localeTitle: تسجيل مستمع المتجر
 
 وظيفة رد الاتصال هي ببساطة دالة يتم استدعائها بعد إجراء وظيفة أخرى يتم تنفيذها. في العالم الحقيقي ، قد يكون شيء من هذا القبيل:
 
- `// You drop your car off at the mechanic and you want the shop to 'call you back' when your car is fixed. 
+```javascript
- let carIsBroken = true; 
+// You drop your car off at the mechanic and you want the shop to 'call you back' when your car is fixed.
- const callCarOwner = () => console.log('Hello your car is done!'); 
+let carIsBroken = true;
- const fixCar = (carIsBroken, callCarOwner) => { 
+const callCarOwner = () => console.log('Hello your car is done!');
+const fixCar = (carIsBroken, callCarOwner) => {
   if (carIsBroken === true) {
     carIsBroken = false;
   }
   console.log(carIsBroken);
   // After the car is fixed, the last thing we do is call the car owner - that's our 'callback function'.
   callCarOwner();
- } 
+}
- fixCar(carIsBroken, callCarOwner); 
+fixCar(carIsBroken, callCarOwner);
-` 
+``` 
 
 ### كيف تزيد من عدد المتغيرات؟
 
 يمكننا القيام بذلك عن طريق استخدام عامل التشغيل "+ =".
 
- `let count = 1; 
+```javascript
- const addOne = () => count +=1; 
+let count = 1;
-` 
+const addOne = () => count +=1;
+``` 
 
 ### كيف يمكنك تمرير وظيفة إلى طريقة؟
 
 يمكننا تمرير وظيفة إلى طريقة بالطريقة نفسها التي قد نمرر بها متغيرًا إلى طريقة ما. فقط قم بتمريرها كحجة!
 
- `function sayHi() { 
+```javascript
+function sayHi() {
   console.log('Hi!');
- } 
+}
- store.subscribe(sayHi); 
+store.subscribe(sayHi);
-` 
+``` 
 
 تريد تحديث هذا؟ [تحرير هذا كعب الرهان على جيثب.](https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/redux/register-a-store-listener/index.md)

guide/arabic/certifications/front-end-libraries/redux/use-const-for-action-types/index.md

@@ -10,13 +10,14 @@ localeTitle: استخدم const for Action Types
 
 يمكنك `type: 'LOGIN'` الهجاء `type: 'LOGIN'` بشكل صحيح في منشئ الفعل الخاص بك ولكن `type: 'LOGN'` الخطأ `type: 'LOGN'` في المخفض كما هو موضح أدناه.
 
- `const loginUser = () => { 
+```
+const loginUser = () => {
   return {
     type: 'LOGIN'
   }
- }; 
+};
 
- const authReducer = (state = defaultState, action) => { 
+const authReducer = (state = defaultState, action) => {
 
   switch (action.type) {
 
@@ -35,29 +36,30 @@ localeTitle: استخدم const for Action Types
 
   }
 
- }; 
+};
-` 
+``` 
 
 باستخدام const لنوع الإجراء ، لن يهم ما إذا كانت السلسلة تحتوي على أخطاء إملائية لأن كل من رمز تبديل المُخفض ونوع الإجراء `const` نفس `const` . باستخدام `const` قد يؤدي أيضا محرر التعليمات البرمجية ليشير إلى `const` كما كنت تكتب عليه، وبالتالي تقليل فرصة mispelling و `const` .
 
 سيظهر الرمز الموضح أدناه.
 
- `const LOGIN = 'blahblahblah'; 
+```
- const LOGOUT = 'wahwahwahwah'; 
+const LOGIN = 'blahblahblah';
+const LOGOUT = 'wahwahwahwah';
 
- const loginUser = () => { 
+const loginUser = () => {
   return {
     type: LOGIN
   }
- }; 
+};
 
- const logoutUser = () => { 
+const logoutUser = () => {
   return {
     type: LOGOUT
   }
- }; 
+};
 
- const authReducer = (state = defaultState, action) => { 
+const authReducer = (state = defaultState, action) => {
 
   switch (action.type) {
 
@@ -76,5 +78,5 @@ localeTitle: استخدم const for Action Types
 
   }
 
- }; 
+};
-`
+```

guide/arabic/certifications/front-end-libraries/sass/create-reusable-css-with-mixins/index.md

@@ -8,17 +8,19 @@ localeTitle: إنشاء CSS القابل لإعادة الاستخدام مع Mi
 
 لإنشاء مزيج يجب اتباع النظام التالي:
 
- `@mixin custom-mixin-name($param1, $param2, ....) { 
+```scss
+@mixin custom-mixin-name($param1, $param2, ....) {
     // CSS Properties Here...
- } 
+}
-` 
+``` 
 
 ولاستخدامه في العنصر (العناصر) ، يجب عليك استخدام `@include` يليه اسم `Mixin` الخاص بك ، على النحو التالي:
 
- `element { 
+```scss
+element {
     @include custom-mixin-name(value1, value2, ....);
- } 
+}
-` 
+``` 
 
 * * *
 
@@ -28,19 +30,20 @@ localeTitle: إنشاء CSS القابل لإعادة الاستخدام مع Mi
 
 #### HTML
 
- `
+```html
 <h4>This text needs a Shadow!</h4>
-` 
+``` 
 
 #### SASS _(مكتوبة في بناء جملة SCSS)_
 
- `@mixin custom-text-shadow($offsetX, $offsetY, $blurRadius, $color) { 
+```scss
+@mixin custom-text-shadow($offsetX, $offsetY, $blurRadius, $color) {
     -webkit-text-shadow: $offsetX, $offsetY, $blurRadius, $color;
     -moz-text-shadow: $offsetX, $offsetY, $blurRadius, $color;
     -ms-text-shadow: $offsetX, $offsetY, $blurRadius, $color;
     text-shadow: $offsetX, $offsetY, $blurRadius, $color;
- } 
+}
- h2 { 
+h2 {
     @include custom-text-shadow(1px, 3px, 5px, #999999)
- } 
+}
-`
+```

guide/arabic/certifications/front-end-libraries/sass/nest-css-with-sass/index.md

@@ -9,17 +9,18 @@ localeTitle: عش المغلق مع ساس
 
 ## مثال
 
- `.title{ 
+```sass
+.title{
   strong{}
   em{}
- } 
+}
 
- // This will be compiled into: 
+// This will be compiled into:
 
- .title{} 
+.title{}
- .title strong{} 
+.title strong{}
- .title em{} 
+.title em{}
-` 
+``` 
 
 ## تلميح 1:
 

guide/arabic/certifications/front-end-libraries/sass/use-for-to-create-a-sass-loop/index.md

@@ -8,17 +8,19 @@ localeTitle: استخدمfor لإنشاء Sass Loop
 
 *   ل - من خلال حلقة:
 
- `@for $i from <start number> through <end number> { 
+```sass
+@for $i from <start number> through <end number> {
   // some CSS
- } 
+}
-` 
+``` 
 
 *   ل- للحلقة:
 
- `@for $i from <start number> to <end number> { 
+```sass
+@for $i from <start number> to <end number> {
   // some CSS
- } 
+}
-` 
+``` 
 
 لاحظ أن الاختلاف الرئيسي هو أن "البداية إلى النهاية" **تستبعد** الرقم النهائي ، و "البدء من خلال النهاية" **يتضمن** الرقم النهائي.
 
@@ -26,32 +28,35 @@ localeTitle: استخدمfor لإنشاء Sass Loop
 
 *   ل - من خلال حلقة:
 
- `@for $i from 1 through 3 { 
+```sass
+@for $i from 1 through 3 {
   // some CSS
- } 
+}
 
- // 1 2 
+// 1 2
-` 
+``` 
 
 *   ل- للحلقة:
 
- `@for $i from 1 to 3 { 
+```sass
+@for $i from 1 to 3 {
   // some CSS
- } 
+}
 
- // 1 2 3 
+// 1 2 3
-` 
+``` 
 
 3.  المبدأ التوجيهي من [المبادئ التوجيهية SASS](https://sass-guidelin.es/#loops)
 
 قد تكون حلقة `@for` مفيدة عند دمجها مع CSS `:nth-*` pseudo-classes. باستثناء هذه السيناريوهات ، تفضل حلقة `@each` إذا كان عليك التكرار أكثر من شيء ما.
 
- `@for $i from 1 through 10 { 
+```sass
+@for $i from 1 through 10 {
   .foo:nth-of-type(#{$i}) {
     border-color: hsl($i * 36, 50%, 50%);
   }
- } 
+}
-` 
+``` 
 
 استخدم دائمًا `$i` كاسم متغير للالتزام بالاتفاقية المعتادة وما لم يكن لديك سبب جيد بالفعل ، لا تستخدم الكلمة المفتاحية أبدًا: استخدمها دائمًا. العديد من المطورين لا يعرفون حتى Sass يقدم هذا الاختلاف. قد يؤدي استخدامها إلى الارتباك.
 

guide/arabic/certifications/information-security-and-quality-assurance/advanced-node-and-express/registration-of-new-users/index.md

@@ -6,13 +6,15 @@ localeTitle: تسجيل المستخدمين الجدد
 
 تأكد من تعديل الملفات الشخصية / الصلصال / الملف الشخصي.الخط 11:
 
- `h1.border.center FCC Advanced Node and Express 
+```pug
-` 
+h1.border.center FCC Advanced Node and Express
+``` 
 
 إلى
 
- `h1.border.center Profile Home 
+```pug
-` 
+h1.border.center Profile Home
+``` 
 
 وإلا لن تمر الاختبارات