diff --git a/guide/arabic/canvas/particle-sim/index.md b/guide/arabic/canvas/particle-sim/index.md
index f3cb75ad98..c56d7d0313 100644
--- a/guide/arabic/canvas/particle-sim/index.md
+++ b/guide/arabic/canvas/particle-sim/index.md
@@ -8,41 +8,43 @@ localeTitle: الجسيمات نعم
 
 سنرغب في إنشاء مجموعة من الجسيمات مع التسارع والسرعات. سنقوم بإنشاء 100 جسيم في نقاط عشوائية على اللوحة.
 
- `canvas = document.getElementById("canvas"); 
- ctx = canvas.getContext('2d'); 
- 
- var particles = []; 
- for(var i=0; i<100; i++) { 
-  particles.push( 
-    { 
-      x:Math.random()*canvas.width, 
-      y:Math.random()*canvas.height, 
-      vx:0, 
-      vy:0, 
-      ax:0, 
-      ay:0 
-    } 
-  ); 
- } 
-` 
+```js
+canvas = document.getElementById("canvas");
+ctx = canvas.getContext('2d');
+
+var particles = [];
+for(var i=0; i<100; i++) {
+  particles.push(
+    {
+      x:Math.random()*canvas.width,
+      y:Math.random()*canvas.height,
+      vx:0,
+      vy:0,
+      ax:0,
+      ay:0
+    }
+  );
+}
+``` 
 
 في حلقة الرسم لدينا ، نقدم هذه الجسيمات.
 
- `function draw() { 
-  ctx.clearRect(0, 0, canvas.width, canvas.height); 
-  for(var i=0; i<particles.length; i++) { 
-    // update state 
- 
-    // render state 
-    ctx.beginPath(); 
-    ctx.arc(particles[i].x, particles[i].y, 5, 0, 2*Math.PI); 
-    ctx.fill(); 
-  } 
- 
-  window.requestAnimationFrame(draw); 
- } 
- window.requestAnimationFrame(draw); 
-` 
+```js
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  for(var i=0; i<particles.length; i++) {
+    // update state
+
+    // render state
+    ctx.beginPath();
+    ctx.arc(particles[i].x, particles[i].y, 5, 0, 2*Math.PI);
+    ctx.fill();
+  }
+
+  window.requestAnimationFrame(draw);
+}
+window.requestAnimationFrame(draw);
+``` 
 
 الآن ، كل ما نحتاجه هو تحديث السرعة وتسريع كل إطار. سنضيف التسارع إلى السرعة وإضافة السرعة إلى الموضع.
 
diff --git a/guide/arabic/canvas/paths/index.md b/guide/arabic/canvas/paths/index.md
index 68efa62f0a..2c1f128348 100644
--- a/guide/arabic/canvas/paths/index.md
+++ b/guide/arabic/canvas/paths/index.md
@@ -8,24 +8,26 @@ localeTitle: مسارات
 
 يمكننا خلق مسارات استخدام مع `beginPath` ، `fill` ، و `stroke` .
 
- `ctx.beginPath(); 
- ctx.rect(0, 0, 100, 100); 
- ctx.fillStyle="black"; 
- ctx.fill(); 
-` 
+```js
+ctx.beginPath();
+ctx.rect(0, 0, 100, 100);
+ctx.fillStyle="black";
+ctx.fill();
+``` 
 
 يؤدي هذا إلى إنشاء مربع أسود في الزاوية العلوية اليمنى من اللوحة القماشية. يمكننا تغيير `strokeStyle` والتعبئات باستخدام `strokeStyle` و `fillStyle` ، `fillStyle` سلاسل ألوان تشبه CSS. يمكننا أيضا استخدام `lineWidth` لجعل السكتات الدماغية أكثر سمكا.
 
- `ctx.beginPath(); 
- ctx.moveTo(0,0); 
- ctx.lineTo(300,150); 
- ctx.moveTo(0, 100); 
- ctx.lineTo(300, 250); 
- 
- ctx.strokeStyle="red"; 
- ctx.lineWidth=2; 
- ctx.stroke(); 
-` 
+```js
+ctx.beginPath();
+ctx.moveTo(0,0);
+ctx.lineTo(300,150);
+ctx.moveTo(0, 100);
+ctx.lineTo(300, 250);
+
+ctx.strokeStyle="red";
+ctx.lineWidth=2;
+ctx.stroke();
+``` 
 
 هناك أربع وظائف الرسم الأساسية: `rect` ، `moveTo` ، `lineTo` ، و `arc` .
 
@@ -36,38 +38,40 @@ localeTitle: مسارات
 
 لاحظ أن هذه الوظائف تضيف إلى مسار العمل. لا ينشئون مسارات جديدة.
 
- `//example 1 
- ctx.beginPath(); 
- ctx.rect(0, 0, 50, 50); 
- ctx.rect(100, 100, 50, 50); 
- ctx.fill(); 
- 
- //example 2 
- ctx.beginPath(); 
- ctx.rect(0, 0, 50, 50); 
- ctx.beginPath(); 
- ctx.rect(100, 100, 50, 50); 
- ctx.fill(); 
-` 
+```js
+//example 1
+ctx.beginPath();
+ctx.rect(0, 0, 50, 50);
+ctx.rect(100, 100, 50, 50);
+ctx.fill();
+
+//example 2
+ctx.beginPath();
+ctx.rect(0, 0, 50, 50);
+ctx.beginPath();
+ctx.rect(100, 100, 50, 50);
+ctx.fill();
+``` 
 
 `beginPath` المثال الأول مربعين ، بينما يرسم الثاني مربعًا واحدًا منذ أن قام `beginPath` من المستطيل الأول على مسار العمل القديم.
 
 هذه الحقيقة تؤدي إلى خطأ شائع في صنع الرسوم المتحركة `canvas` .
 
- `var x = 0; 
- var y = 0; 
- function draw() { 
-  ctx.clearRect(0, 0, canvas.width, canvas.height); 
- 
-  ctx.rect(x, y, 50, 50); 
-  ctx.fill(); 
-  x+=1; 
- 
-  window.requestAnimationFrame(draw); 
- } 
- 
- window.requestAnimationFrame(draw); 
-` 
+```js
+var x = 0;
+var y = 0;
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  ctx.rect(x, y, 50, 50);
+  ctx.fill();
+  x+=1;
+
+  window.requestAnimationFrame(draw);
+}
+
+window.requestAnimationFrame(draw);
+``` 
 
 الرسم المتحرك أعلاه ، الذي من المفترض أن يقوم بتحريك مربع عبر الشاشة ، ينشئ شريط أسود طويل بدلاً من ذلك. السبب هو أن `beginPath` لا يسمى داخل حلقة `draw` .
 
diff --git a/guide/arabic/certifications/apis-and-microservices/basic-node-and-express/chain-middleware-to-create-a-time-server/index.md b/guide/arabic/certifications/apis-and-microservices/basic-node-and-express/chain-middleware-to-create-a-time-server/index.md
index 4308b3deff..cd0afd3331 100644
--- a/guide/arabic/certifications/apis-and-microservices/basic-node-and-express/chain-middleware-to-create-a-time-server/index.md
+++ b/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) { 
-  req.string = "example"; 
-  next(); 
- }, 
-  function (req, res) { 
-      res.send(req.string); // This will display "example" to the user 
-  }); 
-` 
+```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) .
\ No newline at end of file
diff --git a/guide/arabic/certifications/apis-and-microservices/basic-node-and-express/get-data-from-post-requests/index.md b/guide/arabic/certifications/apis-and-microservices/basic-node-and-express/get-data-from-post-requests/index.md
index 9c027dd6ab..276c8ee6ea 100644
--- a/guide/arabic/certifications/apis-and-microservices/basic-node-and-express/get-data-from-post-requests/index.md
+++ b/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) { 
-  // Handle the data in the request 
- }); 
-` 
+```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) .
\ No newline at end of file
diff --git a/guide/arabic/certifications/apis-and-microservices/basic-node-and-express/get-route-parameter-input-from-the-client/index.md b/guide/arabic/certifications/apis-and-microservices/basic-node-and-express/get-route-parameter-input-from-the-client/index.md
index 9c644b29b8..2257ff7770 100644
--- a/guide/arabic/certifications/apis-and-microservices/basic-node-and-express/get-route-parameter-input-from-the-client/index.md
+++ b/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) { 
-  // word = req.params.word; 
-  // respond with the json object 
- }); 
-` 
+```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) .
\ No newline at end of file
diff --git a/guide/arabic/certifications/apis-and-microservices/basic-node-and-express/implement-a-root-level-request-logger-middleware/index.md b/guide/arabic/certifications/apis-and-microservices/basic-node-and-express/implement-a-root-level-request-logger-middleware/index.md
index a4eaf2b14b..b1544b3868 100644
--- a/guide/arabic/certifications/apis-and-microservices/basic-node-and-express/implement-a-root-level-request-logger-middleware/index.md
+++ b/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) { 
-  // Do something 
-  // Call the next function in line: 
-  next(); 
- }); 
-` 
+```javascript
+app.use(function middleware(req, res, next) {
+  // Do something
+  // Call the next function in line:
+  next();
+});
+``` 
 
 إذا واجهتك مشكلة في تنسيق السلسلة بشكل صحيح ، فستبدو طريقة واحدة لتنفيذها كما يلي:
 
diff --git a/guide/arabic/certifications/apis-and-microservices/basic-node-and-express/start-a-working-express-server/index.md b/guide/arabic/certifications/apis-and-microservices/basic-node-and-express/start-a-working-express-server/index.md
index e434897e17..124fce3a6f 100644
--- a/guide/arabic/certifications/apis-and-microservices/basic-node-and-express/start-a-working-express-server/index.md
+++ b/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) { 
-  res.send("Hello World"); 
- }); 
-` 
+```javascript
+app.get("/", function(req, res) {
+  res.send("Hello World");
+});
+``` 
 
 أيضًا ، باستخدام ES6 + يمكنك حفظ بعض الكتابة باستخدام "=>" بدلاً من "الوظيفة" ، والتي تبدو كالتالي:
 
- `app.get("/", (req, res) => { 
-  res.send("Hello World"); 
- }); 
-` 
+```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) .
\ No newline at end of file
diff --git a/guide/arabic/certifications/apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests/index.md b/guide/arabic/certifications/apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests/index.md
index f680df2fc8..a69758540b 100644
--- a/guide/arabic/certifications/apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests/index.md
+++ b/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": { 
-    "body-parser": "^1.4.3", 
-    ... 
-` 
+```code
+"dependencies": {
+    "body-parser": "^1.4.3",
+    ...
+``` 
 
 ما عليك القيام به لهذا التحدي هو تمرير الوسيطة إلى app.use (). تأكد من أنها تأتي قبل المسارات التي تحتاج إلى استخدامها.
 
diff --git a/guide/arabic/certifications/apis-and-microservices/mongodb-and-mongoose/chain-search-query-helpers-to-narrow-search-results/index.md b/guide/arabic/certifications/apis-and-microservices/mongodb-and-mongoose/chain-search-query-helpers-to-narrow-search-results/index.md
index 91a26c0b11..2b42023612 100644
--- a/guide/arabic/certifications/apis-and-microservices/mongodb-and-mongoose/chain-search-query-helpers-to-narrow-search-results/index.md
+++ b/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) { 
-    //do something here 
- }) 
-` 
+```javascript
+YourQuery.exec(function(err, docs) {
+    //do something here
+})
+``` 
 
 أو 2) وعد
 
- `YourQuery.exec.then(function(err, docs) { 
-    //do something here 
- }) 
-` 
+```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) { 
-  //do something here 
- }) 
-` 
+```javascript
+Person.find({age: 55}).sort({name: -1}).limit(5).select( {favoriteFoods: 0} ).exec(function(error, people) {
+  //do something here
+})
+``` 
 
   
   
diff --git a/guide/arabic/certifications/coding-interview-prep/algorithms/implement-bubble-sort/index.md b/guide/arabic/certifications/coding-interview-prep/algorithms/implement-bubble-sort/index.md
index 84a3951888..027644baf4 100644
--- a/guide/arabic/certifications/coding-interview-prep/algorithms/implement-bubble-sort/index.md
+++ b/guide/arabic/certifications/coding-interview-prep/algorithms/implement-bubble-sort/index.md
@@ -16,22 +16,23 @@ localeTitle: تنفيذ فرز الفقاعة
 
 #### الحل 1: الأساسي
 
- `function swap(a, b, arr){ 
-  let tmp = arr[a]; 
-  arr[a] = arr[b]; 
-  arr[b] = tmp; 
- } 
- 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]){ 
-        swap(j, j+1, array); 
-      } 
-    } 
-  } 
-  return array; 
- } 
-` 
+```js
+function swap(a, b, arr){
+  let tmp = arr[a];
+  arr[a] = arr[b];
+  arr[b] = tmp;
+}
+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]){
+        swap(j, j+1, array);
+      }
+    }
+  }
+  return array;
+}
+``` 
 
 #### الحل 2: متقدم
 
diff --git a/guide/arabic/certifications/coding-interview-prep/algorithms/implement-insertion-sort/index.md b/guide/arabic/certifications/coding-interview-prep/algorithms/implement-insertion-sort/index.md
index b25df00093..dbe2bfb468 100644
--- a/guide/arabic/certifications/coding-interview-prep/algorithms/implement-insertion-sort/index.md
+++ b/guide/arabic/certifications/coding-interview-prep/algorithms/implement-insertion-sort/index.md
@@ -19,17 +19,18 @@ localeTitle: تنفيذ فرز الإدراج
 
 ### حل:
 
- `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--){ 
-      array[j+1] = array[j]; 
-    } 
-    array[j+1] = curr; 
-  } 
-  return 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--){
+      array[j+1] = array[j];
+    }
+    array[j+1] = curr;
+  }
+  return array;
+}
+``` 
 
 
 ### المراجع:
diff --git a/guide/arabic/certifications/coding-interview-prep/algorithms/implement-selection-sort/index.md b/guide/arabic/certifications/coding-interview-prep/algorithms/implement-selection-sort/index.md
index 0e754a2251..b9887bacd4 100644
--- a/guide/arabic/certifications/coding-interview-prep/algorithms/implement-selection-sort/index.md
+++ b/guide/arabic/certifications/coding-interview-prep/algorithms/implement-selection-sort/index.md
@@ -18,22 +18,23 @@ localeTitle: تنفيذ فرز التحديد
 
 ### حل:
 
- `function swap(a, b, arr){ 
-  let tmp = arr[a]; 
-  arr[a] = arr[b]; 
-  arr[b] = tmp; 
- } 
- function selectionSort(array) { 
-  for (let i = 0; i < array.length-1; i++){ 
-    let min = i; 
-    for (let j = i+1; j < array.length; j++){ 
-      if (array[min] > array[j]) min = j; 
-    } 
-    swap(i, min, array); 
-  } 
-  return array; 
- } 
-` 
+```js
+function swap(a, b, arr){
+  let tmp = arr[a];
+  arr[a] = arr[b];
+  arr[b] = tmp;
+}
+function selectionSort(array) {
+  for (let i = 0; i < array.length-1; i++){
+    let min = i;
+    for (let j = i+1; j < array.length; j++){
+      if (array[min] > array[j]) min = j;
+    }
+    swap(i, min, array);
+  }
+  return array;
+}
+``` 
 
 ### المراجع:
 
diff --git a/guide/arabic/certifications/coding-interview-prep/data-structures/breadth-first-search/index.md b/guide/arabic/certifications/coding-interview-prep/data-structures/breadth-first-search/index.md
index 11e2286ef1..908653a282 100644
--- a/guide/arabic/certifications/coding-interview-prep/data-structures/breadth-first-search/index.md
+++ b/guide/arabic/certifications/coding-interview-prep/data-structures/breadth-first-search/index.md
@@ -6,12 +6,13 @@ localeTitle: اتساع البحث الأول
 
 دعونا أولا تحديد فئة `Tree` لاستخدامها لتنفيذ خوارزمية Breadth First Search.
 
- `class Tree: 
-  def __init__(self, x): 
-    self.val = x 
-    self.left = None 
-    self.right = None 
-` 
+```python
+class Tree:
+  def __init__(self, x):
+    self.val = x
+    self.left = None
+    self.right = None
+``` 
 
 تنتقل خوارزمية البحث الأولى والاتساع من مستوى إلى آخر بدءًا من جذر الشجرة. سنستخدم `queue` لهذا الغرض.
 
diff --git a/guide/arabic/certifications/coding-interview-prep/data-structures/create-a-stack-class/index.md b/guide/arabic/certifications/coding-interview-prep/data-structures/create-a-stack-class/index.md
index 3a7e838c00..a9cc902d42 100644
--- a/guide/arabic/certifications/coding-interview-prep/data-structures/create-a-stack-class/index.md
+++ b/guide/arabic/certifications/coding-interview-prep/data-structures/create-a-stack-class/index.md
@@ -24,55 +24,57 @@ localeTitle: إنشاء فئة مكدس
 
 #### الأساسية:
 
- `function Stack() { 
-    var collection = []; 
-    this.print = function() { 
-        console.log(collection); 
-    }; 
-    this.push = function(val){ 
-        return collection.push(val); 
-    } 
-    this.pop = function(){ 
-        return collection.pop(); 
-    } 
-    this.peek = function(){ 
-        return collection[collection.length-1]; 
-    } 
-    this.isEmpty = function(){ 
-        return collection.length === 0; 
-    } 
-    this.clear = function(){ 
-        collection.length = 0; 
-    } 
- } 
-` 
+```js
+function Stack() {
+    var collection = [];
+    this.print = function() {
+        console.log(collection);
+    };
+    this.push = function(val){
+        return collection.push(val);
+    }
+    this.pop = function(){
+        return collection.pop();
+    }
+    this.peek = function(){
+        return collection[collection.length-1];
+    }
+    this.isEmpty = function(){
+        return collection.length === 0;
+    }
+    this.clear = function(){
+        collection.length = 0;
+    }
+}
+``` 
 
 #### متقدم - بنية ES6 Class:
 
- `class Stack { 
-    constructor() { 
-        this.collection = []; 
-    } 
-    print(){ 
-        console.log(this.collection); 
-    } 
-    push(val){ 
-        retiurn this.collection.push(val); 
-    } 
-    pop(){ 
-        return this.collection.pop(); 
-    } 
-    peek(){ 
-        return this.collection[this.collection.length-1]; 
-    } 
-    isEmpty(){ 
-        return this.collection.length === 0; 
-    } 
-    clear(){ 
-        return this.collection.length = 0; 
-    } 
- } 
-` 
+```js
+class Stack {
+    constructor() {
+        this.collection = [];
+    }
+    print(){
+        console.log(this.collection);
+    }
+    push(val){
+        retiurn this.collection.push(val);
+    }
+    pop(){
+        return this.collection.pop();
+    }
+    peek(){
+        return this.collection[this.collection.length-1];
+    }
+    isEmpty(){
+        return this.collection.length === 0;
+    }
+    clear(){
+        return this.collection.length = 0;
+    }
+}
+``` 
 
 \### مصادر:
 
diff --git a/guide/arabic/certifications/coding-interview-prep/data-structures/find-the-minimum-and-maximum-height-of-a-binary-search-tree/index.md b/guide/arabic/certifications/coding-interview-prep/data-structures/find-the-minimum-and-maximum-height-of-a-binary-search-tree/index.md
index 8fa54276c5..83cbfad3c9 100644
--- a/guide/arabic/certifications/coding-interview-prep/data-structures/find-the-minimum-and-maximum-height-of-a-binary-search-tree/index.md
+++ b/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
+``` 
 
 ### قائمة السياق
 
diff --git a/guide/arabic/certifications/coding-interview-prep/data-structures/learn-how-a-stack-works/index.md b/guide/arabic/certifications/coding-interview-prep/data-structures/learn-how-a-stack-works/index.md
index 548e981e4f..ba26e75f7e 100644
--- a/guide/arabic/certifications/coding-interview-prep/data-structures/learn-how-a-stack-works/index.md
+++ b/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"]; 
- 
- homeworkStack.pop(); 
- homeworkStack.push("CS50"); 
-` 
+```js
+var homeworkStack = ["BIO12","HIS80","MAT122","PSY44"];
+
+homeworkStack.pop();
+homeworkStack.push("CS50");
+``` 
 
 ### مرجع:
 
diff --git a/guide/arabic/certifications/coding-interview-prep/data-structures/typed-arrays/index.md b/guide/arabic/certifications/coding-interview-prep/data-structures/typed-arrays/index.md
index 73b3af8e0b..9346747111 100644
--- a/guide/arabic/certifications/coding-interview-prep/data-structures/typed-arrays/index.md
+++ b/guide/arabic/certifications/coding-interview-prep/data-structures/typed-arrays/index.md
@@ -11,12 +11,13 @@ localeTitle: مصفوفات مكتوبة
 
 ### حل:
 
- `//Create a buffer of 64 bytes 
- var buffer = new ArrayBuffer(64); 
- 
- //Make 32-bit int typed array with the above buffer 
- var i32View = new Int32Array(buffer); 
-` 
+```js
+//Create a buffer of 64 bytes
+var buffer = new ArrayBuffer(64);
+
+//Make 32-bit int typed array with the above buffer
+var i32View = new Int32Array(buffer);
+``` 
 
 ### المراجع:
 
diff --git a/guide/arabic/certifications/coding-interview-prep/project-euler/problem-1-multiples-of-3-and-5/index.md b/guide/arabic/certifications/coding-interview-prep/project-euler/problem-1-multiples-of-3-and-5/index.md
index 6a258afeab..f6679bc95b 100644
--- a/guide/arabic/certifications/coding-interview-prep/project-euler/problem-1-multiples-of-3-and-5/index.md
+++ b/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) { 
-  let sum = 0, i = 3; 
-  while (i < number){ 
-    if (i % 3 == 0 || i % 5 == 0) sum += i; 
-    i++; 
-  } 
-  return sum; 
- } 
-` 
+```js
+function multiplesOf3and5(number) {
+  let sum = 0, i = 3;
+  while (i < number){
+    if (i % 3 == 0 || i % 5 == 0) sum += i;
+    i++;
+  }
+  return sum;
+}
+``` 
 
 
 ### مرجع:
diff --git a/guide/arabic/certifications/coding-interview-prep/project-euler/problem-2-even-fibonacci-numbers/index.md b/guide/arabic/certifications/coding-interview-prep/project-euler/problem-2-even-fibonacci-numbers/index.md
index 2b8b3a1bd8..f44ec5ba82 100644
--- a/guide/arabic/certifications/coding-interview-prep/project-euler/problem-2-even-fibonacci-numbers/index.md
+++ b/guide/arabic/certifications/coding-interview-prep/project-euler/problem-2-even-fibonacci-numbers/index.md
@@ -21,38 +21,40 @@ localeTitle: حتى أرقام فيبوناتشي
 
 #### الحل الأساسي - تكراري:
 
- `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 
-    fibNum = first + second;    // getting the ith fibonacci number 
-    first = second; 
-    second = fibNum; 
-    if (fibNum%2 == 0) sum+=fibNum;  // If even add to the sum variable 
-  } 
-  return sum; 
- } 
-` 
+```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
+    fibNum = first + second;    // getting the ith fibonacci number
+    first = second;
+    second = fibNum;
+    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 
- function fiboEvenSum(n){ 
-  const fib = [1, 2]; 
-  let sumEven = fib[1]; 
-  function fibonacci(n){ 
-    if (n <= 1) return fib[n]; // base condition 
-    else if (fib[n]) return fib[n]; // if the number exists in the array we cache it and return 
-    else { 
-      fib[n] = fibonacci(n-1) + fibonacci(n-2); // otherwise calculcate and save it to the array 
-      if (fib[n]%2 == 0) sumEven+=fib[n];  //if the number is even, add it to the sumEven variable 
-      return fib[n]; 
-    } 
-  } 
-  fibonacci(n); // run the recursive function 
-  return sumEven; 
- } 
-` 
+```js
+// 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){
+    if (n <= 1) return fib[n]; // base condition
+    else if (fib[n]) return fib[n]; // if the number exists in the array we cache it and return
+    else {
+      fib[n] = fibonacci(n-1) + fibonacci(n-2); // otherwise calculcate and save it to the array
+      if (fib[n]%2 == 0) sumEven+=fib[n];  //if the number is even, add it to the sumEven variable
+      return fib[n];
+    }
+  }
+  fibonacci(n); // run the recursive function
+  return sumEven;
+}
+``` 
 
 
 ### المراجع:
diff --git a/guide/arabic/certifications/coding-interview-prep/project-euler/problem-3-largest-prime-factor/index.md b/guide/arabic/certifications/coding-interview-prep/project-euler/problem-3-largest-prime-factor/index.md
index 168f6bf8a7..85490c00a3 100644
--- a/guide/arabic/certifications/coding-interview-prep/project-euler/problem-3-largest-prime-factor/index.md
+++ b/guide/arabic/certifications/coding-interview-prep/project-euler/problem-3-largest-prime-factor/index.md
@@ -12,18 +12,19 @@ localeTitle: أكبر عامل رئيسي
 
 ### حل:
 
- `function largestPrimeFactor(number) { 
-  let prime = 2, max = 1; 
-  while (prime <= number){ 
-    if (number % prime == 0) { 
-      max = prime; 
-      number = number/prime; 
-    } 
-    else prime++; //Only increment the prime number if the number isn't divisible by it 
-  } 
-  return max; 
- } 
-` 
+```js
+function largestPrimeFactor(number) {
+  let prime = 2, max = 1;
+  while (prime <= number){
+    if (number % prime == 0) {
+      max = prime;
+      number = number/prime;
+    }
+    else prime++; //Only increment the prime number if the number isn't divisible by it
+  }
+  return max;
+}
+``` 
 
 
 ### مصادر:
diff --git a/guide/arabic/certifications/data-visualization/data-visualization-with-d3/change-styles-based-on-data/index.md b/guide/arabic/certifications/data-visualization/data-visualization-with-d3/change-styles-based-on-data/index.md
index 8f644cb76a..d0f499c8d4 100644
--- a/guide/arabic/certifications/data-visualization/data-visualization-with-d3/change-styles-based-on-data/index.md
+++ b/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} 
- 
- **Try Yourself Now**  👩‍💻👨‍💻 
- 
- 
- 
- **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) 
-` 
+```
+What you need to remember is the bracket that the if-else logic associate with, (argument) and {statement}
+
+**Try Yourself Now**  👩‍💻👨‍💻
+
+
+
+**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)
+``` 
 
 جافا سكريبت
 
 شرط ؟ القيمة إذا كانت صحيحة: 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 { العودة "الخضراء" } }) \`\` \`
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/bootstrap/add-elements-within-your-bootstrap-wells/index.md b/guide/arabic/certifications/front-end-libraries/bootstrap/add-elements-within-your-bootstrap-wells/index.md
index 36de2f24d1..097b83a19e 100644
--- a/guide/arabic/certifications/front-end-libraries/bootstrap/add-elements-within-your-bootstrap-wells/index.md
+++ b/guide/arabic/certifications/front-end-libraries/bootstrap/add-elements-within-your-bootstrap-wells/index.md
@@ -10,32 +10,32 @@ localeTitle: إضافة عناصر داخل الآبار Bootstrap الخاص ب
 
 يتم الإعلان عن زر على النحو التالي:
 
- `
-<button></button> 
-` 
+```html
+<button></button>
+``` 
 
 ### حل
 
 نظرًا لأنه يتعين علينا إعلان 3 زر في كل بئر ، سنفعل ما يلي:
 
- `
-<div class="container-fluid"> 
-  <h3 class="text-primary text-center">jQuery Playground</h3> 
-  <div class="row"> 
-    <div class="col-xs-6"> 
-      <div class="well"> 
-        <button></button> 
-        <button></button> 
-        <button></button> 
-      </div> 
-    </div> 
-    <div class="col-xs-6"> 
-      <div class="well"> 
-        <button></button> 
-        <button></button> 
-        <button></button> 
-      </div> 
-    </div> 
-  </div> 
- </div> 
-`
\ No newline at end of file
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <div class="well">
+        <button></button>
+        <button></button>
+        <button></button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <div class="well">
+        <button></button>
+        <button></button>
+        <button></button>
+      </div>
+    </div>
+  </div>
+</div>
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons/index.md b/guide/arabic/certifications/front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons/index.md
index 77ff0c7d57..e3dc10c638 100644
--- a/guide/arabic/certifications/front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons/index.md
+++ b/guide/arabic/certifications/front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons/index.md
@@ -25,62 +25,62 @@ localeTitle: إضافة أيقونات روعة للخط إلى جميع أزر
 
 ### حل:
 
- `
-<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> 
- <style> 
-  h2 { 
-    font-family: Lobster, Monospace; 
-  } 
- 
-  .thick-green-border { 
-    border-color: green; 
-    border-width: 10px; 
-    border-style: solid; 
-    border-radius: 50%; 
-  } 
- </style> 
- 
- <div class="container-fluid"> 
-  <div class="row"> 
-    <div class="col-xs-8"> 
-      <h2 class="text-primary text-center">CatPhotoApp</h2> 
-    </div> 
-    <div class="col-xs-4"> 
-      <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a> 
-    </div> 
-  </div> 
-  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera."> 
-  <div class="row"> 
-    <div class="col-xs-4"> 
-      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button> 
-    </div> 
-    <div class="col-xs-4"> 
-      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i>Info</button> 
-    </div> 
-    <div class="col-xs-4"> 
-      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i>Delete</button> 
-    </div> 
-  </div> 
-  <p>Things cats <span class="text-danger">love:</span></p> 
-  <ul> 
-    <li>cat nip</li> 
-    <li>laser pointers</li> 
-    <li>lasagna</li> 
-  </ul> 
-  <p>Top 3 things cats hate:</p> 
-  <ol> 
-    <li>flea treatment</li> 
-    <li>thunder</li> 
-    <li>other cats</li> 
-  </ol> 
-  <form action="/submit-cat-photo"> 
-    <label><input type="radio" name="indoor-outdoor"> Indoor</label> 
-    <label><input type="radio" name="indoor-outdoor"> Outdoor</label> 
-    <label><input type="checkbox" name="personality"> Loving</label> 
-    <label><input type="checkbox" name="personality"> Lazy</label> 
-    <label><input type="checkbox" name="personality"> Crazy</label> 
-    <input type="text" placeholder="cat photo URL" required> 
-    <button type="submit">Submit</button> 
-  </form> 
- </div> 
-`
\ No newline at end of file
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+</style>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-8">
+      <h2 class="text-primary text-center">CatPhotoApp</h2>
+    </div>
+    <div class="col-xs-4">
+      <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i>Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i>Delete</button>
+    </div>
+  </div>
+  <p>Things cats <span class="text-danger">love:</span></p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/bootstrap/add-id-attributes-to-bootstrap-elements/index.md b/guide/arabic/certifications/front-end-libraries/bootstrap/add-id-attributes-to-bootstrap-elements/index.md
index c910f0972c..0bb1f528cd 100644
--- a/guide/arabic/certifications/front-end-libraries/bootstrap/add-id-attributes-to-bootstrap-elements/index.md
+++ b/guide/arabic/certifications/front-end-libraries/bootstrap/add-id-attributes-to-bootstrap-elements/index.md
@@ -10,9 +10,9 @@ localeTitle: أضف سمات المعرف إلى عناصر Bootstrap
 
 يتم تعريف معرف على النحو التالي:
 
- `
-<element id="id(s)List"></element> 
-` 
+```html
+<element id="id(s)List"></element>
+``` 
 
 ### تلميح 2
 
@@ -30,24 +30,24 @@ localeTitle: أضف سمات المعرف إلى عناصر Bootstrap
 
 نظرًا لأنك تحتاج إلى إضافة معرّف (معرّفات) إلى كلٍّ من الآبار ولديك كلاً من معرف فريد ، فإن ما يلي هو الحل:
 
- `
-<div class="container-fluid"> 
-  <h3 class="text-primary text-center">jQuery Playground</h3> 
-  <div class="row"> 
-    <div class="col-xs-6"> 
-      <div class="well" id="left-well"> 
-        <button class="btn btn-default target"></button> 
-        <button class="btn btn-default target"></button> 
-        <button class="btn btn-default target"></button> 
-      </div> 
-    </div> 
-    <div class="col-xs-6"> 
-      <div class="well" id="right-well"> 
-        <button class="btn btn-default target"></button> 
-        <button class="btn btn-default target"></button> 
-        <button class="btn btn-default target"></button> 
-      </div> 
-    </div> 
-  </div> 
- </div> 
-`
\ No newline at end of file
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <div class="well" id="left-well">
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <div class="well" id="right-well">
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+      </div>
+    </div>
+  </div>
+</div>
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style/index.md b/guide/arabic/certifications/front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style/index.md
index 6ac674fdc0..19848492d2 100644
--- a/guide/arabic/certifications/front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style/index.md
+++ b/guide/arabic/certifications/front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style/index.md
@@ -10,32 +10,32 @@ localeTitle: قم بتطبيق نمط زر Bootstrap الافتراضي
 
 يتم تعريف الفئة باستخدام بناء الجملة التالي:
 
- `
-<button class="class(es)Name"></button> 
-` 
+```html
+<button class="class(es)Name"></button>
+``` 
 
 ### حل
 
 نظرًا لأنك `btn` إلى إضافة فئات `btn` و `btn-default` ، فإن ما يلي هو الحل:
 
- `
-<div class="container-fluid"> 
-  <h3 class="text-primary text-center">jQuery Playground</h3> 
-  <div class="row"> 
-    <div class="col-xs-6"> 
-      <div class="well"> 
-        <button class="btn btn-default"></button> 
-        <button class="btn btn-default"></button> 
-        <button class="btn btn-default"></button> 
-      </div> 
-    </div> 
-    <div class="col-xs-6"> 
-      <div class="well"> 
-        <button class="btn btn-default"></button> 
-        <button class="btn btn-default"></button> 
-        <button class="btn btn-default"></button> 
-      </div> 
-    </div> 
-  </div> 
- </div> 
-`
\ No newline at end of file
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <div class="well">
+        <button class="btn btn-default"></button>
+        <button class="btn btn-default"></button>
+        <button class="btn btn-default"></button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <div class="well">
+        <button class="btn btn-default"></button>
+        <button class="btn btn-default"></button>
+        <button class="btn btn-default"></button>
+      </div>
+    </div>
+  </div>
+</div>
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors/index.md b/guide/arabic/certifications/front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors/index.md
index bfaf0277c5..c842118cf5 100644
--- a/guide/arabic/certifications/front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors/index.md
+++ b/guide/arabic/certifications/front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors/index.md
@@ -14,24 +14,24 @@ localeTitle: إنشاء فئة إلى الهدف باستخدام محددات j
 
 نظرًا لأنك مضطر لإضافة فئة `target` ، فإن ما يلي هو الحل:
 
- `
-<div class="container-fluid"> 
-  <h3 class="text-primary text-center">jQuery Playground</h3> 
-  <div class="row"> 
-    <div class="col-xs-6"> 
-      <div class="well"> 
-        <button class="btn btn-default target"></button> 
-        <button class="btn btn-default target"></button> 
-        <button class="btn btn-default target"></button> 
-      </div> 
-    </div> 
-    <div class="col-xs-6"> 
-      <div class="well"> 
-        <button class="btn btn-default target"></button> 
-        <button class="btn btn-default target"></button> 
-        <button class="btn btn-default target"></button> 
-      </div> 
-    </div> 
-  </div> 
- </div> 
-`
\ No newline at end of file
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <div class="well">
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <div class="well">
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+      </div>
+    </div>
+  </div>
+</div>
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/bootstrap/index.md b/guide/arabic/certifications/front-end-libraries/bootstrap/index.md
index 7c95bff316..93bb145b68 100644
--- a/guide/arabic/certifications/front-end-libraries/bootstrap/index.md
+++ b/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.
 
diff --git a/guide/arabic/certifications/front-end-libraries/jquery/target-elements-by-class-using-jquery/index.md b/guide/arabic/certifications/front-end-libraries/jquery/target-elements-by-class-using-jquery/index.md
index 125f060d99..b938d3ebe1 100644
--- a/guide/arabic/certifications/front-end-libraries/jquery/target-elements-by-class-using-jquery/index.md
+++ b/guide/arabic/certifications/front-end-libraries/jquery/target-elements-by-class-using-jquery/index.md
@@ -9,10 +9,11 @@ localeTitle: عناصر الهدف حسب الفئة باستخدام jQuery
 
 ## حل
 
- `<script> 
-  $(document).ready(function() { 
-    $(".well").addClass("animated bounce"); 
-    $(".well").addClass("shake"); 
-  }); 
- </script> 
-`
\ No newline at end of file
+```javascript
+<script>
+  $(document).ready(function() {
+    $(".well").addClass("animated bounce");
+    $(".well").addClass("shake");
+  });
+</script>
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/jquery/target-elements-by-id-using-jquery/index.md b/guide/arabic/certifications/front-end-libraries/jquery/target-elements-by-id-using-jquery/index.md
index 9c976e8c07..6ad6b075f7 100644
--- a/guide/arabic/certifications/front-end-libraries/jquery/target-elements-by-id-using-jquery/index.md
+++ b/guide/arabic/certifications/front-end-libraries/jquery/target-elements-by-id-using-jquery/index.md
@@ -6,11 +6,12 @@ localeTitle: عناصر الهدف عن طريق id استخدام jQuery
 
 ## حل
 
- `<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> 
-`
\ No newline at end of file
+```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>
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery/index.md b/guide/arabic/certifications/front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery/index.md
index 21697b64ae..2f81f1002f 100644
--- a/guide/arabic/certifications/front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery/index.md
+++ b/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") 
-  $(document).ready(function(){ 
-    $("button").click(function(){ 
-        $("p").hide(); 
-    }); 
- }); 
-` 
+```javascipt
+//You can select all <p> elements on a page like this  =  $("p")
+  $(document).ready(function(){
+    $("button").click(function(){
+        $("p").hide();
+    });
+});
+``` 
 
 ## حل
 
- `<script> 
-  $(document).ready(function() { 
-      $("button").addClass("animated bounce"); // We are selecting the button elements and adding "animated bounce" class to them. 
-  }); 
- </script> 
-`
+```javascript
+<script>
+  $(document).ready(function() {
+      $("button").addClass("animated bounce"); // We are selecting the button elements and adding "animated bounce" class to them.
+  });
+</script>
+```
diff --git a/guide/arabic/certifications/front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery/index.md b/guide/arabic/certifications/front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery/index.md
index f924176c0e..acec7b25c8 100644
--- a/guide/arabic/certifications/front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery/index.md
+++ b/guide/arabic/certifications/front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery/index.md
@@ -6,9 +6,10 @@ localeTitle: استهداف أصل عنصر باستخدام jQuery
 
 ## حل
 
- `<script> 
-  $(document).ready(function() { 
-    $("#target1").parent().css("background-color", "red"); // Selects the parent of #target1 and changes its background-color to red 
-  }); 
- </script> 
-`
\ No newline at end of file
+```js
+<script>
+  $(document).ready(function() {
+    $("#target1").parent().css("background-color", "red"); // Selects the parent of #target1 and changes its background-color to red
+  });
+</script>
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors/index.md b/guide/arabic/certifications/front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors/index.md
index f1001d08e3..9087ac7cbb 100644
--- a/guide/arabic/certifications/front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors/index.md
+++ b/guide/arabic/certifications/front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors/index.md
@@ -6,11 +6,12 @@ localeTitle: استهدف عنصر نفسه باستخدام محددات jQuery
 
 ## حل
 
- `<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> 
-`
\ No newline at end of file
+```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>
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/jquery/use-jquery-to-modify-the-entire-page/index.md b/guide/arabic/certifications/front-end-libraries/jquery/use-jquery-to-modify-the-entire-page/index.md
index 88b66b97c8..235e6b016a 100644
--- a/guide/arabic/certifications/front-end-libraries/jquery/use-jquery-to-modify-the-entire-page/index.md
+++ b/guide/arabic/certifications/front-end-libraries/jquery/use-jquery-to-modify-the-entire-page/index.md
@@ -14,8 +14,9 @@ localeTitle: استخدم jQuery لتعديل الصفحة بأكملها
 
 ### حل:
 
- `<script> 
-  $("body").addClass("animated hinge"); 
-  }); 
- </script> 
-`
\ No newline at end of file
+```javascript
+<script>
+  $("body").addClass("animated hinge");
+  });
+</script>
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/react-and-redux/extract-state-logic-to-redux/index.md b/guide/arabic/certifications/front-end-libraries/react-and-redux/extract-state-logic-to-redux/index.md
index 7601c18d49..2b174860fb 100644
--- a/guide/arabic/certifications/front-end-libraries/react-and-redux/extract-state-logic-to-redux/index.md
+++ b/guide/arabic/certifications/front-end-libraries/react-and-redux/extract-state-logic-to-redux/index.md
@@ -10,26 +10,27 @@ localeTitle: استخراج الدولة المنطق إلى Redux
 
 الحل المقترح:
 
- `const ADD = 'ADD'; 
- 
- function addMessage(message) { 
-  return { 
-    type: ADD, 
-    message: message 
-  }; 
- }; 
- 
- function messageReducer (previousState, action) { 
-  return [...previousState, action.message]; 
- } 
- 
- let store = { 
-  state: [], 
-  getState: () => store.state, 
-  dispatch: (action) => { 
-    if (action.type === ADD) { 
-      store.state = messageReducer(store.state, action); 
-    } 
-  } 
- }; 
-`
\ No newline at end of file
+```javascript
+const ADD = 'ADD';
+
+function addMessage(message) {
+  return {
+    type: ADD,
+    message: message
+  };
+};
+
+function messageReducer (previousState, action) {
+  return [...previousState, action.message];
+}
+
+let store = {
+  state: [],
+  getState: () => store.state,
+  dispatch: (action) => {
+    if (action.type === ADD) {
+      store.state = messageReducer(store.state, action);
+    }
+  }
+};
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/react/add-comments-in-jsx/index.md b/guide/arabic/certifications/front-end-libraries/react/add-comments-in-jsx/index.md
index 7aebb4820f..ef62d1f005 100644
--- a/guide/arabic/certifications/front-end-libraries/react/add-comments-in-jsx/index.md
+++ b/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 على النحو التالي:
 
- `
-<!-- not working --> 
-`
\ No newline at end of file
+```html
+<!-- not working -->
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/react/add-event-listeners/index.md b/guide/arabic/certifications/front-end-libraries/react/add-event-listeners/index.md
index 4d31ffca82..f35e5b0753 100644
--- a/guide/arabic/certifications/front-end-libraries/react/add-event-listeners/index.md
+++ b/guide/arabic/certifications/front-end-libraries/react/add-event-listeners/index.md
@@ -10,42 +10,43 @@ localeTitle: اضافة المستمعين الحدث
 
 ملاحظة: document.addEventListener و document.removeEventListener سوف يأخذ في سلسلة مقتبسة عن الحدث الخاص به ، وعند تمريره في الدالة ، ستشير إليه handleKeyPress () باسم this.handleKeyPress. إذا قمت باستدعاء الدالة على هذا .handleKeyPress () ، سيقوم مستمع الحدث بتقييم الدالة أولاً وسيعيد قيمة غير معرفة.
 
- `class MyComponent extends React.Component { 
-  constructor(props) { 
-    super(props); 
-    this.state = { 
-      message: '' 
-    }; 
-    this.handleEnter = this.handleEnter.bind(this); 
-    this.handleKeyPress = this.handleKeyPress.bind(this); 
-  } 
-  // change code below this line 
-  componentDidMount() { 
-    document.addEventListener("keydown", this.handleKeyPress) 
-  } 
-  componentWillUnmount() { 
-    document.removeEventListener("keydown", this.handleKeyPress) 
-  } 
-  // change code above this line 
-  handleEnter() { 
-    this.setState({ 
-      message: this.state.message + 'You pressed the enter key! ' 
-    }); 
-  } 
-  handleKeyPress(event) { 
-    if (event.keyCode === 13) { 
-      this.handleEnter(); 
-    } 
-  } 
-  render() { 
-    return ( 
-      <div> 
-        <h1>{this.state.message}</h1> 
-      </div> 
-    ); 
-  } 
- }; 
-` 
+```javascript
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      message: ''
+    };
+    this.handleEnter = this.handleEnter.bind(this);
+    this.handleKeyPress = this.handleKeyPress.bind(this);
+  }
+  // change code below this line
+  componentDidMount() {
+    document.addEventListener("keydown", this.handleKeyPress)
+  }
+  componentWillUnmount() {
+    document.removeEventListener("keydown", this.handleKeyPress)
+  }
+  // change code above this line
+  handleEnter() {
+    this.setState({
+      message: this.state.message + 'You pressed the enter key! '
+    });
+  }
+  handleKeyPress(event) {
+    if (event.keyCode === 13) {
+      this.handleEnter();
+    }
+  }
+  render() {
+    return (
+      <div>
+        <h1>{this.state.message}</h1>
+      </div>
+    );
+  }
+};
+``` 
 
 ### مصادر
 
diff --git a/guide/arabic/certifications/front-end-libraries/react/add-inline-styles-in-react/index.md b/guide/arabic/certifications/front-end-libraries/react/add-inline-styles-in-react/index.md
index 68c207fcf7..2ea1fdc1f4 100644
--- a/guide/arabic/certifications/front-end-libraries/react/add-inline-styles-in-react/index.md
+++ b/guide/arabic/certifications/front-end-libraries/react/add-inline-styles-in-react/index.md
@@ -8,16 +8,17 @@ localeTitle: إضافة أنماط مضمنة في React
 
 ### المفسد
 
- `class Colorful extends React.Component { 
-  render() { 
-    // change code below this line 
-    return ( 
-      <div style={{color: "yellow", fontSize: 24}}>Style Me!</div> 
-    ); 
-    // change code above this line 
-  } 
- }; 
-` 
+```jsx
+class Colorful extends React.Component {
+  render() {
+    // change code below this line
+    return (
+      <div style={{color: "yellow", fontSize: 24}}>Style Me!</div>
+    );
+    // change code above this line
+  }
+};
+``` 
 
 ### مصادر
 
diff --git a/guide/arabic/certifications/front-end-libraries/react/bind-this-to-a-class-method/index.md b/guide/arabic/certifications/front-end-libraries/react/bind-this-to-a-class-method/index.md
index 07992ad32a..c68a436303 100644
--- a/guide/arabic/certifications/front-end-libraries/react/bind-this-to-a-class-method/index.md
+++ b/guide/arabic/certifications/front-end-libraries/react/bind-this-to-a-class-method/index.md
@@ -23,30 +23,31 @@ localeTitle: ربط "هذا" لطريقة Class
 
 ## المفسد
 
- `class MyComponent extends React.Component { 
-  constructor(props) { 
-    super(props); 
-    this.state = { 
-      itemCount: 0 
-    }; 
-    // change code below this line 
-    this.addItem = this.addItem.bind(this); 
-    // change code above this line 
-  } 
-  addItem() { 
-    this.setState({ 
-      itemCount: this.state.itemCount + 1 
-    }); 
-  } 
-  render() { 
-    return ( 
-      <div> 
-        { /* change code below this line */ } 
-        <button onClick={this.addItem}>Click Me</button> 
-        { /* change code above this line */ } 
-        <h1>Current Item Count: {this.state.itemCount}</h1> 
-      </div> 
-    ); 
-  } 
- } 
-`
\ No newline at end of file
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      itemCount: 0
+    };
+    // change code below this line
+    this.addItem = this.addItem.bind(this);
+    // change code above this line
+  }
+  addItem() {
+    this.setState({
+      itemCount: this.state.itemCount + 1
+    });
+  }
+  render() {
+    return (
+      <div>
+        { /* change code below this line */ }
+        <button onClick={this.addItem}>Click Me</button>
+        { /* change code above this line */ }
+        <h1>Current Item Count: {this.state.itemCount}</h1>
+      </div>
+    );
+  }
+}
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/react/change-inline-css-conditionally-based-on-component-state/index.md b/guide/arabic/certifications/front-end-libraries/react/change-inline-css-conditionally-based-on-component-state/index.md
index 0c2217b549..0bfc8b0706 100644
--- a/guide/arabic/certifications/front-end-libraries/react/change-inline-css-conditionally-based-on-component-state/index.md
+++ b/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,39 +20,40 @@ localeTitle: تغيير CSS المضمنة بناء على حالة المكون
 
 ستستخدم عبارة `if/then` للتحقق من قيمة هذا `this.state.input.length` . إذا كان أطول من 15 ، `inputStyle.border` `'3px solid red'` إلى `inputStyle.border` .
 
- `class GateKeeper extends React.Component { 
-  constructor(props) { 
-    super(props); 
-    this.state = { 
-      input: '' 
-    }; 
-    this.handleChange = this.handleChange.bind(this); 
-  } 
-  handleChange(event) { 
-    this.setState({ input: event.target.value }) 
-  } 
-  render() { 
-    let inputStyle = { 
-      border: '1px solid black' 
-    }; 
-    // change code below this line 
-    if (this.state.input.length > 15) { 
-      inputStyle.border = '3px solid red'; 
-    } 
-    // change code above this line 
-    return ( 
-      <div> 
-        <h3>Don't Type Too Much:</h3> 
-        <input 
-          type="text" 
-          style={inputStyle} 
-          value={this.state.input} 
-          onChange={this.handleChange} /> 
-      </div> 
-    ); 
-  } 
- }; 
-` 
+```jsx
+class GateKeeper extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: ''
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleChange(event) {
+    this.setState({ input: event.target.value })
+  }
+  render() {
+    let inputStyle = {
+      border: '1px solid black'
+    };
+    // change code below this line
+    if (this.state.input.length > 15) {
+      inputStyle.border = '3px solid red';
+    }
+    // change code above this line
+    return (
+      <div>
+        <h3>Don't Type Too Much:</h3>
+        <input
+          type="text"
+          style={inputStyle}
+          value={this.state.input}
+          onChange={this.handleChange} />
+      </div>
+    );
+  }
+};
+``` 
 
 ## حل
 
diff --git a/guide/arabic/certifications/front-end-libraries/react/compose-react-components/index.md b/guide/arabic/certifications/front-end-libraries/react/compose-react-components/index.md
index 4ceb3f3fe4..a330051915 100644
--- a/guide/arabic/certifications/front-end-libraries/react/compose-react-components/index.md
+++ b/guide/arabic/certifications/front-end-libraries/react/compose-react-components/index.md
@@ -12,35 +12,36 @@ localeTitle: تأليف React Components
 
 ما يلي هو الحل لل chakkenge ، حيث تجعل الحمضيات و NonCitrus في مكون ثم يتم تقديمها في آخر:
 
- `class Fruits extends React.Component { 
-  constructor(props) { 
-    super(props); 
-  } 
-  render() { 
-    return ( 
-      <div> 
-        <h2>Fruits:</h2> 
-        <NonCitrus /> 
-        <Citrus /> 
-      </div> 
-    ); 
-  } 
- }; 
- 
- class TypesOfFood extends React.Component { 
-  constructor(props) { 
-     super(props); 
-  } 
-  render() { 
-    return ( 
-      <div> 
-        <Fruits /> 
-        <Vegetables /> 
-      </div> 
-    ); 
-  } 
- }; 
-` 
+```jsx
+class Fruits extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h2>Fruits:</h2>
+        <NonCitrus />
+        <Citrus />
+      </div>
+    );
+  }
+};
+
+class TypesOfFood extends React.Component {
+  constructor(props) {
+     super(props);
+  }
+  render() {
+    return (
+      <div>
+        <Fruits />
+        <Vegetables />
+      </div>
+    );
+  }
+};
+``` 
 
 ### روابط ذات صلة:
 
diff --git a/guide/arabic/certifications/front-end-libraries/react/create-a-component-with-composition/index.md b/guide/arabic/certifications/front-end-libraries/react/create-a-component-with-composition/index.md
index f896c5c24d..1b82a7e268 100644
--- a/guide/arabic/certifications/front-end-libraries/react/create-a-component-with-composition/index.md
+++ b/guide/arabic/certifications/front-end-libraries/react/create-a-component-with-composition/index.md
@@ -20,17 +20,18 @@ localeTitle: إنشاء مكون مع التركيب
 
 سوف يقدم التالية في ChildComponent في ParentComponent ، كما هو مطلوب:
 
- `class ParentComponent extends React.Component { 
-  constructor(props) { 
-    super(props); 
-  } 
-  render() { 
-    return ( 
-      <div> 
-        <h1>I am the parent</h1> 
-        <ChildComponent /> 
-      </div> 
-    ); 
-  } 
- }; 
-`
\ No newline at end of file
+```javascript
+class ParentComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h1>I am the parent</h1>
+        <ChildComponent />
+      </div>
+    );
+  }
+};
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/react/create-a-controlled-form/index.md b/guide/arabic/certifications/front-end-libraries/react/create-a-controlled-form/index.md
index 794898901d..72694bb83f 100644
--- a/guide/arabic/certifications/front-end-libraries/react/create-a-controlled-form/index.md
+++ b/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> 
-`
\ No newline at end of file
+```jsx
+<h1>{this.state.submit}</h1>
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/react/create-a-controlled-input/index.md b/guide/arabic/certifications/front-end-libraries/react/create-a-controlled-input/index.md
index ca57a21b0d..df59f1e4fb 100644
--- a/guide/arabic/certifications/front-end-libraries/react/create-a-controlled-input/index.md
+++ b/guide/arabic/certifications/front-end-libraries/react/create-a-controlled-input/index.md
@@ -10,26 +10,30 @@ localeTitle: إنشاء مدخلات متحكم بها
 
 لذلك أنت الخطوة الأولى سوف يجعل وظيفة يقوم بتغيير المتغير الدولة `input` .
 
- `handleChange(event) { 
-    this.setState({ 
-      input: event.target.value 
-    }); 
- } 
-` 
+```
+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()` ومن ثم ستظل السلسلة داخل مربع الإدخال كما هي ، أي سلسلة فارغة.
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/react/create-a-react-component/index.md b/guide/arabic/certifications/front-end-libraries/react/create-a-react-component/index.md
index 6ab4014401..bc682b78af 100644
--- a/guide/arabic/certifications/front-end-libraries/react/create-a-react-component/index.md
+++ b/guide/arabic/certifications/front-end-libraries/react/create-a-react-component/index.md
@@ -12,20 +12,21 @@ localeTitle: إنشاء مكون React
 
 ## حل
 
- `class MyComponent extends React.Component { 
-  constructor(props) { 
-    super(props); 
-  } 
-  render() { 
-    // change code below this line 
-    return ( 
-      <div> 
-       <h1>Hello React!</h1> 
-      </div> 
-    ); 
-    // change code above this line 
-  } 
- }; 
-` 
+```javascript
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    // change code below this line
+    return (
+      <div>
+       <h1>Hello React!</h1>
+      </div>
+    );
+    // change code above this line
+  }
+};
+``` 
 
 لاحظ أنك لا تحتاج إلى وضع علامات اقتباس حول النص ، لأنه عندما تعمل مع JSX يتم التعامل معه على أنه HTML. تحقق أيضًا من صحة التهجئة والحالة وعلامات الترقيم! إذا كان كل هذا التعليمة البرمجية يبدو غريبا ، اذهب إلى الاطلاع على بعض المواد الرائعة الموجودة على Javascript ES6 هنا على freeCodeCamp.
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/react/create-a-stateful-component/index.md b/guide/arabic/certifications/front-end-libraries/react/create-a-stateful-component/index.md
index 8e42a64b27..921dff8d2c 100644
--- a/guide/arabic/certifications/front-end-libraries/react/create-a-stateful-component/index.md
+++ b/guide/arabic/certifications/front-end-libraries/react/create-a-stateful-component/index.md
@@ -6,22 +6,23 @@ localeTitle: إنشاء مكون Stateful
 
 #### تلميح 1:
 
- `class StatefulComponent extends React.Component { 
-  constructor(props) { 
-    super(props); 
-    // initialize state here 
-        // "This" area may be a good place to use "dot" notation. 
-        // dont forget to describe "name" property inside the state and assign your name to a property of "name". 
-  } 
-  render() { 
-    return ( 
-      <div> 
-        <h1>{this.state.name}</h1> 
-      </div> 
-    ); 
-  } 
- }; 
-` 
+```JSX
+class StatefulComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    // initialize state here
+        // "This" area may be a good place to use "dot" notation.
+        // dont forget to describe "name" property inside the state and assign your name to a property of "name".
+  }
+  render() {
+    return (
+      <div>
+        <h1>{this.state.name}</h1>
+      </div>
+    );
+  }
+};
+``` 
 
 ## حل
 
diff --git a/guide/arabic/certifications/front-end-libraries/react/create-a-stateless-functional-component/index.md b/guide/arabic/certifications/front-end-libraries/react/create-a-stateless-functional-component/index.md
index 761b7deda6..94fe8e6a26 100644
--- a/guide/arabic/certifications/front-end-libraries/react/create-a-stateless-functional-component/index.md
+++ b/guide/arabic/certifications/front-end-libraries/react/create-a-stateless-functional-component/index.md
@@ -14,10 +14,11 @@ localeTitle: إنشاء مكون وظيفي عديم الحالة
 
 تتم إضافة وظيفة إرجاع مثل هذا
 
- `return( 
-    <return elements> 
- ); 
-` 
+```jsx
+return(
+    <return elements>
+);
+``` 
 
 ### حل
 
diff --git a/guide/arabic/certifications/front-end-libraries/react/define-an-html-class-in-jsx/index.md b/guide/arabic/certifications/front-end-libraries/react/define-an-html-class-in-jsx/index.md
index d930023fa3..9c90a86f4c 100644
--- a/guide/arabic/certifications/front-end-libraries/react/define-an-html-class-in-jsx/index.md
+++ b/guide/arabic/certifications/front-end-libraries/react/define-an-html-class-in-jsx/index.md
@@ -15,9 +15,10 @@ localeTitle: تحديد فئة HTML في JSX
 
 ## حل
 
- `const JSX = ( 
-  <div className = "myDiv"> 
-    <h1>Add a class to this div</h1> 
-  </div> 
- ); 
-`
\ No newline at end of file
+```javascript
+const JSX = (
+  <div className = "myDiv">
+    <h1>Add a class to this div</h1>
+  </div>
+);
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/react/learn-about-self-closing-jsx-tags/index.md b/guide/arabic/certifications/front-end-libraries/react/learn-about-self-closing-jsx-tags/index.md
index 9358e7916e..7f1709749a 100644
--- a/guide/arabic/certifications/front-end-libraries/react/learn-about-self-closing-jsx-tags/index.md
+++ b/guide/arabic/certifications/front-end-libraries/react/learn-about-self-closing-jsx-tags/index.md
@@ -6,16 +6,17 @@ localeTitle: تعرف على علامات JSX ذاتية الإغلاق
 
 ## تلميح 1:
 
- `const JSX = ( 
-  <div> 
-    {/* remove comment and change code below this line // Remember that comments in JSX have parentheses. 
-    <h2>Welcome to React!</h2> <br > // ? 
-    <p>Be sure to close all tags!</p> 
-    <hr >  // ? 
-    remove comment and change code above this line */} // Remember that comments in JSX have parentheses. 
-  </div> 
- ); 
-` 
+```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 > // ?
+    <p>Be sure to close all tags!</p>
+    <hr >  // ?
+    remove comment and change code above this line */} // Remember that comments in JSX have parentheses.
+  </div>
+);
+``` 
 
 ## حل
 
diff --git a/guide/arabic/certifications/front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate/index.md b/guide/arabic/certifications/front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate/index.md
index fd5f94ac92..723f6d2ce3 100644
--- a/guide/arabic/certifications/front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate/index.md
+++ b/guide/arabic/certifications/front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate/index.md
@@ -12,50 +12,51 @@ localeTitle: تحسين Re-Renders مع shouldComponentUpdate
 
 بالنسبة لهذا الحل ، ستستخدم عبارة `if/then` للتحقق مما إذا كانت قيمة `nextProps` متساوية. تختلف `nextProps` عن `props` في أنها قيمة لم يتم تقديمها في واجهة المستخدم بعد ، لذا في أسلوب `shouldComponentUpdate()` ، فأنت تطلب بشكل أساسي إذنًا لتحديث واجهة المستخدم بقيمة `nextProps` .
 
- `class OnlyEvens extends React.Component { 
-  constructor(props) { 
-    super(props); 
-  } 
-  shouldComponentUpdate(nextProps, nextState) { 
-    console.log('Should I update?'); 
-     // change code below this line 
-      if (nextProps.value % 2 == 0) { 
-        return true; 
-      } 
-      return false; 
-     // change code above this line 
-  } 
-  componentWillReceiveProps(nextProps) { 
-    console.log('Receiving new props...'); 
-  } 
-  componentDidUpdate() { 
-    console.log('Component re-rendered.'); 
-  } 
-  render() { 
-    return <h1>{this.props.value}</h1> 
-  } 
- }; 
- 
- class Controller extends React.Component { 
-  constructor(props) { 
-    super(props); 
-    this.state = { 
-      value: 0 
-    }; 
-    this.addValue = this.addValue.bind(this); 
-  } 
-  addValue() { 
-    this.setState({ 
-      value: this.state.value + 1 
-    }); 
-  } 
-  render() { 
-    return ( 
-      <div> 
-        <button onClick={this.addValue}>Add</button> 
-        <OnlyEvens value={this.state.value}/> 
-      </div> 
-    ); 
-  } 
- }; 
-`
\ No newline at end of file
+```jsx
+class OnlyEvens extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    console.log('Should I update?');
+     // change code below this line
+      if (nextProps.value % 2 == 0) {
+        return true;
+      }
+      return false;
+     // change code above this line
+  }
+  componentWillReceiveProps(nextProps) {
+    console.log('Receiving new props...');
+  }
+  componentDidUpdate() {
+    console.log('Component re-rendered.');
+  }
+  render() {
+    return <h1>{this.props.value}</h1>
+  }
+};
+
+class Controller extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: 0
+    };
+    this.addValue = this.addValue.bind(this);
+  }
+  addValue() {
+    this.setState({
+      value: this.state.value + 1
+    });
+  }
+  render() {
+    return (
+      <div>
+        <button onClick={this.addValue}>Add</button>
+        <OnlyEvens value={this.state.value}/>
+      </div>
+    );
+  }
+};
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/react/pass-a-callback-as-props/index.md b/guide/arabic/certifications/front-end-libraries/react/pass-a-callback-as-props/index.md
index 75c1ae202a..d8183761c0 100644
--- a/guide/arabic/certifications/front-end-libraries/react/pass-a-callback-as-props/index.md
+++ b/guide/arabic/certifications/front-end-libraries/react/pass-a-callback-as-props/index.md
@@ -16,30 +16,31 @@ localeTitle: تمرير رد الاتصال على النحو الدعائم
 
 ### حل
 
- `class MyApp extends React.Component { 
-  constructor(props) { 
-    super(props); 
-    this.state = { 
-      inputValue: '' 
-    } 
-    this.handleChange = this.handleChange.bind(this); 
-  } 
-  handleChange(event) { 
-    this.setState({ 
-      inputValue: event.target.value 
-    }); 
-  } 
-  render() { 
-    return ( 
-       <div> 
-        { /* change code below this line */ 
-        <GetInput input={this.state.inputValue} handleChange={this.handleChange}/> 
-        } 
-        { /* change code above this line */ 
-        <RenderInput input={this.state.inputValue}/> 
-        } 
-       </div> 
-    ); 
-  } 
- }; 
-`
\ No newline at end of file
+```javascript
+class MyApp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      inputValue: ''
+    }
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleChange(event) {
+    this.setState({
+      inputValue: event.target.value
+    });
+  }
+  render() {
+    return (
+       <div>
+        { /* change code below this line */
+        <GetInput input={this.state.inputValue} handleChange={this.handleChange}/>
+        }
+        { /* change code above this line */
+        <RenderInput input={this.state.inputValue}/>
+        }
+       </div>
+    );
+  }
+};
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/react/pass-an-array-as-props/index.md b/guide/arabic/certifications/front-end-libraries/react/pass-an-array-as-props/index.md
index df78dae985..f6f8078d1e 100644
--- a/guide/arabic/certifications/front-end-libraries/react/pass-an-array-as-props/index.md
+++ b/guide/arabic/certifications/front-end-libraries/react/pass-an-array-as-props/index.md
@@ -6,36 +6,38 @@ localeTitle: تمرير صفيف كما الدعائم
 
 لتمرير مصفوفة كبروب ، يجب أن يتم الإعلان أولاً عن صفيف على أنه دعم "المهام" على كل مكون من المكونات التي سيتم تقديمها:
 
- `const List= (props) => { 
-  return <p></p> 
- }; 
- 
- class ToDo extends React.Component { 
-  constructor(props) { 
-    super(props); 
-  } 
-  render() { 
-    return ( 
-      <div> 
-        <h1>To Do Lists</h1> 
-        <h2>Today</h2> 
-        <List tasks={["Walk", "Cook", "Bake"]} /> 
-        <h2>Tomorrow</h2> 
-        <List tasks={["Study", "Code", "Eat"]}/> 
-      </div> 
-    ); 
-  } 
- }; 
-` 
+```javascript
+const List= (props) => {
+  return <p></p>
+};
+
+class ToDo extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h1>To Do Lists</h1>
+        <h2>Today</h2>
+        <List tasks={["Walk", "Cook", "Bake"]} />
+        <h2>Tomorrow</h2>
+        <List tasks={["Study", "Code", "Eat"]}/>
+      </div>
+    );
+  }
+};
+``` 
 
 ثم ، يجب التعامل مع الدعائم داخل مكون "قائمة":
 
- `const List= (props) => { 
-  return <p>{props.tasks.join(", ")}</p> 
- }; 
- 
- // ... same as above 
-` 
+```javascript
+const List= (props) => {
+  return <p>{props.tasks.join(", ")}</p>
+};
+
+// ... same as above
+``` 
 
 يتم استخدام طريقة `.join(", ")` لأخذ كل عنصر من داخل الصفيف ثم `.join(", ")` إلى سلسلة ليتم عرضها.
 
diff --git a/guide/arabic/certifications/front-end-libraries/react/pass-props-to-a-stateless-functional-component/index.md b/guide/arabic/certifications/front-end-libraries/react/pass-props-to-a-stateless-functional-component/index.md
index 58136fd033..50cb15c9be 100644
--- a/guide/arabic/certifications/front-end-libraries/react/pass-props-to-a-stateless-functional-component/index.md
+++ b/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,25 +22,26 @@ localeTitle: تمرير الدعائم إلى مكون وظيفي عديم ال
 
 قم بتعيين تاريخ مسمى للدعم في مكون التقويم كما يلي وقم بعرضه في مكون التقويم ، مثل:
 
- `const CurrentDate = (props) => { 
-  return ( 
-    <div> 
-      <p>The current date is: {props.date}</p> 
-    </div> 
-  ); 
- }; 
- 
- class Calendar extends React.Component { 
-  constructor(props) { 
-    super(props); 
-  } 
-  render() { 
-    return ( 
-      <div> 
-        <h3>What date is it?</h3> 
-        <CurrentDate date={Date()} /> 
-      </div> 
-    ); 
-  } 
- }; 
-`
\ No newline at end of file
+```jsx
+const CurrentDate = (props) => {
+  return (
+    <div>
+      <p>The current date is: {props.date}</p>
+    </div>
+  );
+};
+
+class Calendar extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h3>What date is it?</h3>
+        <CurrentDate date={Date()} />
+      </div>
+    );
+  }
+};
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/react/pass-state-as-props-to-child-components/index.md b/guide/arabic/certifications/front-end-libraries/react/pass-state-as-props-to-child-components/index.md
index f8d258bcc8..36b883d099 100644
--- a/guide/arabic/certifications/front-end-libraries/react/pass-state-as-props-to-child-components/index.md
+++ b/guide/arabic/certifications/front-end-libraries/react/pass-state-as-props-to-child-components/index.md
@@ -6,36 +6,37 @@ localeTitle: تمرير حالة الدعائم إلى مكونات الأطفا
 
 في هذا التحدي ، سنمرر الدولة ، ولكن بما أن الحالة محلية لمكونها الأم ، يجب أن نستخدم **الدعائم** لتمريرها إلى المكون الفرعي. سيسمح لنا استخدام الدعائم في المكونات الفرعية بالاحتفاظ بكل بيانات الحالة في المكون الرئيسي ويمكننا تمرير البيانات في اتجاه واحد إلى مكونات الأطفال.
 
- `class MyApp extends React.Component { 
-  constructor(props) { 
-    super(props); 
-    this.state = { 
-      name: 'CamperBot' 
-    } 
-  } 
-  render() { 
-    return ( 
-       <div> 
-         // Here we will call this.state.name in order to pass the value of CamperBot 
-         // to the NavBar component 
-         <Navbar name={this.state.name} /> 
-       </div> 
-    ); 
-  } 
- }; 
- 
- class Navbar extends React.Component { 
-  constructor(props) { 
-    super(props); 
-  } 
-  render() { 
-    return ( 
-    <div> 
-      // Since we passed in the CamperBot state value into the the NavBar component above 
-      // the h1 element below will render the value passed from state 
-      <h1>Hello, my name is: {this.props.name}</h1> 
-    </div> 
-    ); 
-  } 
- }; 
-`
\ No newline at end of file
+```javascript
+class MyApp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: 'CamperBot'
+    }
+  }
+  render() {
+    return (
+       <div>
+         // Here we will call this.state.name in order to pass the value of CamperBot
+         // to the NavBar component
+         <Navbar name={this.state.name} />
+       </div>
+    );
+  }
+};
+
+class Navbar extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+    <div>
+      // Since we passed in the CamperBot state value into the the NavBar component above
+      // the h1 element below will render the value passed from state
+      <h1>Hello, my name is: {this.props.name}</h1>
+    </div>
+    );
+  }
+};
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/react/render-a-class-component-to-the-dom/index.md b/guide/arabic/certifications/front-end-libraries/react/render-a-class-component-to-the-dom/index.md
index bad94d4bd7..d558f38bb8 100644
--- a/guide/arabic/certifications/front-end-libraries/react/render-a-class-component-to-the-dom/index.md
+++ b/guide/arabic/certifications/front-end-libraries/react/render-a-class-component-to-the-dom/index.md
@@ -6,22 +6,23 @@ localeTitle: تقديم مكون فئة إلى DOM
 
 من المفترض أن ينتهي رمزك بالظهور على النحو التالي:
 
- `class TypesOfVehicles extends React.Component { 
-    constructor(props) { 
-        super(props); 
-    } 
-    render() { 
-        return ( 
-          <div> 
-          <h1>Types of Vehicles:</h1> 
-          <Car /> 
-          <Motorcycle /> 
-          </div> 
-        ); 
-    } 
- } 
- ReactDOM.render(<TypesOfVehicles />,'node-id') 
-` 
+```javascript
+class TypesOfVehicles extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (
+          <div>
+          <h1>Types of Vehicles:</h1>
+          <Car />
+          <Motorcycle />
+          </div>
+        );
+    }
+}
+ReactDOM.render(<TypesOfVehicles />,'node-id')
+``` 
 
 قد يكون بناء جملة ReactDOM.render خادعاً قليلاً ، تحتاج إلى استخدام أقواس المثلث عند المرور في مكون Class. كما يتم الإعلان عن المكونين الفرعيين خلف الكواليس ، مما قد يكون مربكًا إذا كنت معتادًا على جميع المتغيرات التي يتم تحديدها في محرر الشفرة ومرئية أمامك.
 
diff --git a/guide/arabic/certifications/front-end-libraries/react/render-html-elements-to-the-dom/index.md b/guide/arabic/certifications/front-end-libraries/react/render-html-elements-to-the-dom/index.md
index 93f1064a3e..16a8251524 100644
--- a/guide/arabic/certifications/front-end-libraries/react/render-html-elements-to-the-dom/index.md
+++ b/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')); 
-`
\ No newline at end of file
+```javascript
+ReactDOM.render(JSX,document.getElementById('challenge-node'));
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/react/render-react-on-the-server-with-rendertostring/index.md b/guide/arabic/certifications/front-end-libraries/react/render-react-on-the-server-with-rendertostring/index.md
index 7507fb9f7a..b6b33754c1 100644
--- a/guide/arabic/certifications/front-end-libraries/react/render-react-on-the-server-with-rendertostring/index.md
+++ b/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 { 
-  constructor(props) { 
-    super(props); 
-  } 
-  render() { 
-    return <div/> 
-  } 
- }; 
- 
- // change code below this line 
- ReactDOMServer.renderToString(<App />); 
-`
\ No newline at end of file
+```jsx
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return <div/>
+  }
+};
+
+// change code below this line
+ReactDOMServer.renderToString(<App />);
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/react/render-state-in-the-user-interface-another-way/index.md b/guide/arabic/certifications/front-end-libraries/react/render-state-in-the-user-interface-another-way/index.md
index 315cf75245..092c4b691b 100644
--- a/guide/arabic/certifications/front-end-libraries/react/render-state-in-the-user-interface-another-way/index.md
+++ b/guide/arabic/certifications/front-end-libraries/react/render-state-in-the-user-interface-another-way/index.md
@@ -6,49 +6,51 @@ localeTitle: تقديم الدولة في واجهة المستخدم بطريق
 
 #### تلميح 1:
 
- `class MyComponent extends React.Component { 
-  constructor(props) { 
-    super(props); 
-    this.state = { 
-      name: 'freeCodeCamp' 
-    } 
-  } 
-  render() { 
-    // change code below this line 
-            // Remember that how you can access the property of a state. 
-    // change code above this line 
-    return ( 
-      <div> 
-        { /* change code below this line */ } 
-            // Just use the const "name" inside the h1 tag. 
-            // Dont forget to use JSX syntax "{ curly braces for JavaScript }". 
-        { /* change code above this line */ } 
-      </div> 
-    ); 
-  } 
- }; 
-` 
+```JSX
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: 'freeCodeCamp'
+    }
+  }
+  render() {
+    // change code below this line
+            // Remember that how you can access the property of a state.
+    // change code above this line
+    return (
+      <div>
+        { /* change code below this line */ }
+            // Just use the const "name" inside the h1 tag.
+            // Dont forget to use JSX syntax "{ curly braces for JavaScript }".
+        { /* change code above this line */ }
+      </div>
+    );
+  }
+};
+``` 
 
 ## حل
 
- `class MyComponent extends React.Component { 
-  constructor(props) { 
-    super(props); 
-    this.state = { 
-      name: 'freeCodeCamp' 
-    } 
-  } 
-  render() { 
-    // change code below this line 
-    const name = this.state.name; 
-    // change code above this line 
-    return ( 
-      <div> 
-        { /* change code below this line */ } 
-          <h1>{name}</h1> 
-        { /* change code above this line */ } 
-      </div> 
-    ); 
-  } 
- }; 
-`
\ No newline at end of file
+```JSX
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: 'freeCodeCamp'
+    }
+  }
+  render() {
+    // change code below this line
+    const name = this.state.name;
+    // change code above this line
+    return (
+      <div>
+        { /* change code below this line */ }
+          <h1>{name}</h1>
+        { /* change code above this line */ }
+      </div>
+    );
+  }
+};
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/react/review-using-props-with-stateless-functional-components/index.md b/guide/arabic/certifications/front-end-libraries/react/review-using-props-with-stateless-functional-components/index.md
index 9882a9e278..439f2ec8d9 100644
--- a/guide/arabic/certifications/front-end-libraries/react/review-using-props-with-stateless-functional-components/index.md
+++ b/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>); 
- 
- Camper.defaultProps = { 
-  name: 'CamperBot' 
- }; 
- 
- Camper.propTypes = { 
-  name: PropTypes.string.isRequired 
- }; 
-` 
+```javascript
+const Camper = props => (<p>{props.name}</p>);
+
+Camper.defaultProps = {
+  name: 'CamperBot'
+};
+
+Camper.propTypes = {
+  name: PropTypes.string.isRequired
+};
+``` 
 
 ### رابط ذو صلة
 
diff --git a/guide/arabic/certifications/front-end-libraries/react/use--for-a-more-concise-conditional/index.md b/guide/arabic/certifications/front-end-libraries/react/use--for-a-more-concise-conditional/index.md
index fa34c4f445..26ef5c8a0f 100644
--- a/guide/arabic/certifications/front-end-libraries/react/use--for-a-more-concise-conditional/index.md
+++ b/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. إذا كان الأمر المنطقي صحيحًا ، فسيتم عرض الترميز المضمن في {} مع الشرط ، وإلا فلن يتم عرضه
 
diff --git a/guide/arabic/certifications/front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering/index.md b/guide/arabic/certifications/front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering/index.md
index 051d66fb1b..3e59bafc4e 100644
--- a/guide/arabic/certifications/front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering/index.md
+++ b/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
+``` 
 
 ## حل
 
diff --git a/guide/arabic/certifications/front-end-libraries/react/use-advanced-javascript-in-react-render-method/index.md b/guide/arabic/certifications/front-end-libraries/react/use-advanced-javascript-in-react-render-method/index.md
index 1859b9ea2f..857c9c45fe 100644
--- a/guide/arabic/certifications/front-end-libraries/react/use-advanced-javascript-in-react-render-method/index.md
+++ b/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. تأكد من لفها بأقواس معقوفة `{ }` .
 
diff --git a/guide/arabic/certifications/front-end-libraries/react/use-default-props/index.md b/guide/arabic/certifications/front-end-libraries/react/use-default-props/index.md
index 9d73b09acb..c1f95e695e 100644
--- a/guide/arabic/certifications/front-end-libraries/react/use-default-props/index.md
+++ b/guide/arabic/certifications/front-end-libraries/react/use-default-props/index.md
@@ -6,28 +6,31 @@ localeTitle: استخدام الدعائم الافتراضية
 
 هذا التحدي قد قمت بتعريف دعم افتراضي لمكون ShoppingCart
 
- `const ShoppingCart = (props) => { 
-  return ( 
-    <div> 
-      <h1>Shopping Cart Component</h1> 
-    </div> 
-  ) 
- }; 
-` 
+```javascript
+const ShoppingCart = (props) => {
+  return (
+    <div>
+      <h1>Shopping Cart Component</h1>
+    </div>
+  )
+};
+``` 
 
 لإعلان دعامة افتراضية ، فإن الصيغة التي يجب اتباعها هي
 
- `itemName.defaultProps = { 
-  prop-x: value, 
-  prop-y: value 
- } 
-` 
+```javascript
+itemName.defaultProps = {
+  prop-x: value,
+  prop-y: value
+}
+``` 
 
 باتباع "بناء الجملة" ، يجب أن يتم تعريف التعليمة البرمجية التالية أدناه التعليمات البرمجية المحددة
 
- `ShoppingCart.defaultProps = { 
-  items: 0 
- } 
-` 
+```javascript
+ShoppingCart.defaultProps = {
+  items: 0
+}
+``` 
 
 هذا يعلن دعامة تسمى "العناصر" بقيمة "0".
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/react/use-react-to-render-nested-components/index.md b/guide/arabic/certifications/front-end-libraries/react/use-react-to-render-nested-components/index.md
index 07edbe8e72..661ba0fa6a 100644
--- a/guide/arabic/certifications/front-end-libraries/react/use-react-to-render-nested-components/index.md
+++ b/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 ( 
-  <Dog /> 
- ) 
-` 
+```javascript
+return (
+  <Dog />
+)
+``` 
 
 جرب هذا مع مكونات TypesOfFruit و Fruits.
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/react/use-state-to-toggle-an-element/index.md b/guide/arabic/certifications/front-end-libraries/react/use-state-to-toggle-an-element/index.md
index 5131133908..045eff4a8a 100644
--- a/guide/arabic/certifications/front-end-libraries/react/use-state-to-toggle-an-element/index.md
+++ b/guide/arabic/certifications/front-end-libraries/react/use-state-to-toggle-an-element/index.md
@@ -19,43 +19,44 @@ localeTitle: استخدم الدولة لتبديل عنصر
 
 ## حل:
 
- `class MyComponent extends React.Component { 
-  constructor(props) { 
-    super(props); 
-    this.state = { 
-      visibility: false 
-    }; 
-    // change code below this line 
-    this.toggleVisibility = this.toggleVisibility.bind(this); 
-    // change code above this line 
-  } 
-  // change code below this line 
-  toggleVisibility() { 
-    if (this.state.visibility == true) { 
-    this.setState({ 
-      visibility: false 
-    });} else { 
-      this.setState({ 
-        visibility: true 
-      }) 
-    } 
-  } 
-  // change code above this line 
-  render() { 
-    if (this.state.visibility) { 
-      return ( 
-        <div> 
-          <button onClick={this.toggleVisibility}>Click Me</button> 
-          <h1>Now you see me!</h1> 
-        </div> 
-      ); 
-    } else { 
-      return ( 
-        <div> 
-          <button onClick={this.toggleVisibility}>Click Me</button> 
-        </div> 
-      ); 
-    } 
-  } 
- }; 
-`
\ No newline at end of file
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visibility: false
+    };
+    // change code below this line
+    this.toggleVisibility = this.toggleVisibility.bind(this);
+    // change code above this line
+  }
+  // change code below this line
+  toggleVisibility() {
+    if (this.state.visibility == true) {
+    this.setState({
+      visibility: false
+    });} else {
+      this.setState({
+        visibility: true
+      })
+    }
+  }
+  // change code above this line
+  render() {
+    if (this.state.visibility) {
+      return (
+        <div>
+          <button onClick={this.toggleVisibility}>Click Me</button>
+          <h1>Now you see me!</h1>
+        </div>
+      );
+    } else {
+      return (
+        <div>
+          <button onClick={this.toggleVisibility}>Click Me</button>
+        </div>
+      );
+    }
+  }
+};
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/react/write-a-react-component-from-scratch/index.md b/guide/arabic/certifications/front-end-libraries/react/write-a-react-component-from-scratch/index.md
index cdf6fcafea..fcc69ca5f4 100644
--- a/guide/arabic/certifications/front-end-libraries/react/write-a-react-component-from-scratch/index.md
+++ b/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,16 +24,17 @@ localeTitle: اكتب مكون React من سكراتش
 
 الآن كل ما تبقى القيام به هو تحديد ما `render` ! نقوم بذلك عن طريق استدعاء طريقة `render` المكون ، وإرجاع رمز JSX الخاص بنا:
 
- `class FirstComponent extends React.Component { 
-  constructor(props) { 
-    super(props); 
-  } 
-  render() { 
-    return ( 
-      // The JSX code you put here is what your component will render 
-    ); 
-  } 
- }; 
-` 
+```javascript
+class FirstComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      // 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) .
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/react/write-a-simple-counter/index.md b/guide/arabic/certifications/front-end-libraries/react/write-a-simple-counter/index.md
index aa437da44f..ede7f42932 100644
--- a/guide/arabic/certifications/front-end-libraries/react/write-a-simple-counter/index.md
+++ b/guide/arabic/certifications/front-end-libraries/react/write-a-simple-counter/index.md
@@ -36,32 +36,33 @@ localeTitle: اكتب عداد بسيط
 
 ## حل:
 
- `class Counter extends React.Component { 
-  constructor(props) { 
-    super(props); 
-    this.state = { 
-      count: 0 
-    }; 
-    // change code below this line 
-      this.increment = this.increment.bind(this); 
-      this.decrement = this.decrement.bind(this); 
-      this.reset = this.reset.bind(this); 
-    // change code above this line 
-  } 
-  // change code below this line 
-    increment(){this.setState({count: this.state.count + 1})} 
-    decrement(){this.setState({count: this.state.count - 1})} 
-    reset(){this.setState({count: 0})} 
-  // change code above this line 
-  render() { 
-    return ( 
-      <div> 
-        <button className='inc' onClick={this.increment}>Increment!</button> 
-        <button className='dec' onClick={this.decrement}>Decrement!</button> 
-        <button className='reset' onClick={this.reset}>Reset</button> 
-        <h1>Current Count: {this.state.count}</h1> 
-      </div> 
-    ); 
-  } 
- }; 
-`
\ No newline at end of file
+```JSX
+class Counter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      count: 0
+    };
+    // change code below this line
+      this.increment = this.increment.bind(this);
+      this.decrement = this.decrement.bind(this);
+      this.reset = this.reset.bind(this);
+    // change code above this line
+  }
+  // change code below this line
+    increment(){this.setState({count: this.state.count + 1})}
+    decrement(){this.setState({count: this.state.count - 1})}
+    reset(){this.setState({count: 0})}
+  // change code above this line
+  render() {
+    return (
+      <div>
+        <button className='inc' onClick={this.increment}>Increment!</button>
+        <button className='dec' onClick={this.decrement}>Decrement!</button>
+        <button className='reset' onClick={this.reset}>Reset</button>
+        <h1>Current Count: {this.state.count}</h1>
+      </div>
+    );
+  }
+};
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/redux/create-a-redux-store/index.md b/guide/arabic/certifications/front-end-libraries/redux/create-a-redux-store/index.md
index cc6769eba5..7507aaf394 100644
--- a/guide/arabic/certifications/front-end-libraries/redux/create-a-redux-store/index.md
+++ b/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);
+``` 
 
 حظا طيبا وفقك الله!
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/redux/define-an-action-creator/index.md b/guide/arabic/certifications/front-end-libraries/redux/define-an-action-creator/index.md
index b3b19f07b1..0158a65518 100644
--- a/guide/arabic/certifications/front-end-libraries/redux/define-an-action-creator/index.md
+++ b/guide/arabic/certifications/front-end-libraries/redux/define-an-action-creator/index.md
@@ -8,10 +8,11 @@ localeTitle: قم بتعريف عمل الخالق
 
 يتم تعريف الدالة باستخدام بناء الجملة التالي:
 
- `functionName(){ 
-  console.log("Do something"); 
- } 
-` 
+```javascript
+functionName(){
+  console.log("Do something");
+}
+``` 
 
 حيث يمكن تغيير console.log حسب الحاجة.
 
@@ -21,7 +22,8 @@ localeTitle: قم بتعريف عمل الخالق
 
 ### حل
 
- `function actionCreator(){ 
-    return action; 
- } 
-`
\ No newline at end of file
+```javascript
+function actionCreator(){
+    return action;
+}
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/redux/handle-an-action-in-the-store/index.md b/guide/arabic/certifications/front-end-libraries/redux/handle-an-action-in-the-store/index.md
index 9866bba6e6..4071cbf36d 100644
--- a/guide/arabic/certifications/front-end-libraries/redux/handle-an-action-in-the-store/index.md
+++ b/guide/arabic/certifications/front-end-libraries/redux/handle-an-action-in-the-store/index.md
@@ -6,27 +6,28 @@ localeTitle: التعامل مع العمل في المتجر
 
 ### حل
 
- `const defaultState = { 
-  login: false 
- }; 
- 
- const reducer = (state = defaultState, action) => { 
-  // change code below this line 
-  if (action.type === 'LOGIN') { 
-    return  { 
-    login: true 
-    } 
-    } else { 
-      return defaultState 
-  }; 
-  // change code above this line 
- }; 
- 
- const store = Redux.createStore(reducer); 
- 
- const loginAction = () => { 
-  return { 
-    type: 'LOGIN' 
-  } 
- }; 
-`
\ No newline at end of file
+```javascript
+const defaultState = {
+  login: false
+};
+
+const reducer = (state = defaultState, action) => {
+  // change code below this line
+  if (action.type === 'LOGIN') {
+    return  {
+    login: true
+    }
+    } else {
+      return defaultState
+  };
+  // change code above this line
+};
+
+const store = Redux.createStore(reducer);
+
+const loginAction = () => {
+  return {
+    type: 'LOGIN'
+  }
+};
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/redux/register-a-store-listener/index.md b/guide/arabic/certifications/front-end-libraries/redux/register-a-store-listener/index.md
index 8becfc529a..7505829610 100644
--- a/guide/arabic/certifications/front-end-libraries/redux/register-a-store-listener/index.md
+++ b/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. 
- let carIsBroken = true; 
- 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); 
-` 
+```javascript
+// You drop your car off at the mechanic and you want the shop to 'call you back' when your car is fixed.
+let carIsBroken = true;
+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);
+``` 
 
 ### كيف تزيد من عدد المتغيرات؟
 
 يمكننا القيام بذلك عن طريق استخدام عامل التشغيل "+ =".
 
- `let count = 1; 
- const addOne = () => count +=1; 
-` 
+```javascript
+let count = 1;
+const addOne = () => count +=1;
+``` 
 
 ### كيف يمكنك تمرير وظيفة إلى طريقة؟
 
 يمكننا تمرير وظيفة إلى طريقة بالطريقة نفسها التي قد نمرر بها متغيرًا إلى طريقة ما. فقط قم بتمريرها كحجة!
 
- `function sayHi() { 
-  console.log('Hi!'); 
- } 
- store.subscribe(sayHi); 
-` 
+```javascript
+function sayHi() {
+  console.log('Hi!');
+}
+store.subscribe(sayHi);
+``` 
 
 تريد تحديث هذا؟ [تحرير هذا كعب الرهان على جيثب.](https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/redux/register-a-store-listener/index.md)
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/redux/use-const-for-action-types/index.md b/guide/arabic/certifications/front-end-libraries/redux/use-const-for-action-types/index.md
index 19ebb6a5da..3e448afe1d 100644
--- a/guide/arabic/certifications/front-end-libraries/redux/use-const-for-action-types/index.md
+++ b/guide/arabic/certifications/front-end-libraries/redux/use-const-for-action-types/index.md
@@ -10,71 +10,73 @@ localeTitle: استخدم const for Action Types
 
 يمكنك `type: 'LOGIN'` الهجاء `type: 'LOGIN'` بشكل صحيح في منشئ الفعل الخاص بك ولكن `type: 'LOGN'` الخطأ `type: 'LOGN'` في المخفض كما هو موضح أدناه.
 
- `const loginUser = () => { 
-  return { 
-    type: 'LOGIN' 
-  } 
- }; 
- 
- const authReducer = (state = defaultState, action) => { 
- 
-  switch (action.type) { 
- 
-    case 'LOGN': 
-      return { 
-        authenticated: true 
-      } 
- 
-    case 'LOGOUT': 
-      return { 
-        authenticated: false 
-      } 
- 
-    default: 
-      return state; 
- 
-  } 
- 
- }; 
-` 
+```
+const loginUser = () => {
+  return {
+    type: 'LOGIN'
+  }
+};
+
+const authReducer = (state = defaultState, action) => {
+
+  switch (action.type) {
+
+    case 'LOGN':
+      return {
+        authenticated: true
+      }
+
+    case 'LOGOUT':
+      return {
+        authenticated: false
+      }
+
+    default:
+      return state;
+
+  }
+
+};
+``` 
 
 باستخدام const لنوع الإجراء ، لن يهم ما إذا كانت السلسلة تحتوي على أخطاء إملائية لأن كل من رمز تبديل المُخفض ونوع الإجراء `const` نفس `const` . باستخدام `const` قد يؤدي أيضا محرر التعليمات البرمجية ليشير إلى `const` كما كنت تكتب عليه، وبالتالي تقليل فرصة mispelling و `const` .
 
 سيظهر الرمز الموضح أدناه.
 
- `const LOGIN = 'blahblahblah'; 
- const LOGOUT = 'wahwahwahwah'; 
- 
- const loginUser = () => { 
-  return { 
-    type: LOGIN 
-  } 
- }; 
- 
- const logoutUser = () => { 
-  return { 
-    type: LOGOUT 
-  } 
- }; 
- 
- const authReducer = (state = defaultState, action) => { 
- 
-  switch (action.type) { 
- 
-    case LOGIN: 
-      return { 
-        authenticated: true 
-      } 
- 
-    case LOGOUT: 
-      return { 
-        authenticated: false 
-      } 
- 
-    default: 
-      return state; 
- 
-  } 
- 
- }; 
-`
\ No newline at end of file
+```
+const LOGIN = 'blahblahblah';
+const LOGOUT = 'wahwahwahwah';
+
+const loginUser = () => {
+  return {
+    type: LOGIN
+  }
+};
+
+const logoutUser = () => {
+  return {
+    type: LOGOUT
+  }
+};
+
+const authReducer = (state = defaultState, action) => {
+
+  switch (action.type) {
+
+    case LOGIN:
+      return {
+        authenticated: true
+      }
+
+    case LOGOUT:
+      return {
+        authenticated: false
+      }
+
+    default:
+      return state;
+
+  }
+
+};
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/sass/create-reusable-css-with-mixins/index.md b/guide/arabic/certifications/front-end-libraries/sass/create-reusable-css-with-mixins/index.md
index 5e75386163..3f11c7b55c 100644
--- a/guide/arabic/certifications/front-end-libraries/sass/create-reusable-css-with-mixins/index.md
+++ b/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, ....) { 
-    // CSS Properties Here... 
- } 
-` 
+```scss
+@mixin custom-mixin-name($param1, $param2, ....) {
+    // CSS Properties Here...
+}
+``` 
 
 ولاستخدامه في العنصر (العناصر) ، يجب عليك استخدام `@include` يليه اسم `Mixin` الخاص بك ، على النحو التالي:
 
- `element { 
-    @include custom-mixin-name(value1, value2, ....); 
- } 
-` 
+```scss
+element {
+    @include custom-mixin-name(value1, value2, ....);
+}
+``` 
 
 * * *
 
@@ -28,19 +30,20 @@ localeTitle: إنشاء CSS القابل لإعادة الاستخدام مع Mi
 
 #### HTML
 
- `
-<h4>This text needs a Shadow!</h4> 
-` 
+```html
+<h4>This text needs a Shadow!</h4>
+``` 
 
 #### SASS _(مكتوبة في بناء جملة 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 { 
-    @include custom-text-shadow(1px, 3px, 5px, #999999) 
- } 
-`
\ No newline at end of file
+```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 {
+    @include custom-text-shadow(1px, 3px, 5px, #999999)
+}
+```
\ No newline at end of file
diff --git a/guide/arabic/certifications/front-end-libraries/sass/nest-css-with-sass/index.md b/guide/arabic/certifications/front-end-libraries/sass/nest-css-with-sass/index.md
index 14524d10a7..2a5afed01f 100644
--- a/guide/arabic/certifications/front-end-libraries/sass/nest-css-with-sass/index.md
+++ b/guide/arabic/certifications/front-end-libraries/sass/nest-css-with-sass/index.md
@@ -9,17 +9,18 @@ localeTitle: عش المغلق مع ساس
 
 ## مثال
 
- `.title{ 
-  strong{} 
-  em{} 
- } 
- 
- // This will be compiled into: 
- 
- .title{} 
- .title strong{} 
- .title em{} 
-` 
+```sass
+.title{
+  strong{}
+  em{}
+}
+
+// This will be compiled into:
+
+.title{}
+.title strong{}
+.title em{}
+``` 
 
 ## تلميح 1:
 
diff --git a/guide/arabic/certifications/front-end-libraries/sass/use-for-to-create-a-sass-loop/index.md b/guide/arabic/certifications/front-end-libraries/sass/use-for-to-create-a-sass-loop/index.md
index 2bd18b2ee7..440e60fe19 100644
--- a/guide/arabic/certifications/front-end-libraries/sass/use-for-to-create-a-sass-loop/index.md
+++ b/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> { 
-  // some CSS 
- } 
-` 
+```sass
+@for $i from <start number> through <end number> {
+  // some CSS
+}
+``` 
 
 *   ل- للحلقة:
 
- `@for $i from <start number> to <end number> { 
-  // some CSS 
- } 
-` 
+```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 { 
-  // some CSS 
- } 
- 
- // 1 2 
-` 
+```sass
+@for $i from 1 through 3 {
+  // some CSS
+}
+
+// 1 2
+``` 
 
 *   ل- للحلقة:
 
- `@for $i from 1 to 3 { 
-  // some CSS 
- } 
- 
- // 1 2 3 
-` 
+```sass
+@for $i from 1 to 3 {
+  // some CSS
+}
+
+// 1 2 3
+``` 
 
 3.  المبدأ التوجيهي من [المبادئ التوجيهية SASS](https://sass-guidelin.es/#loops)
 
 قد تكون حلقة `@for` مفيدة عند دمجها مع CSS `:nth-*` pseudo-classes. باستثناء هذه السيناريوهات ، تفضل حلقة `@each` إذا كان عليك التكرار أكثر من شيء ما.
 
- `@for $i from 1 through 10 { 
-  .foo:nth-of-type(#{$i}) { 
-    border-color: hsl($i * 36, 50%, 50%); 
-  } 
- } 
-` 
+```sass
+@for $i from 1 through 10 {
+  .foo:nth-of-type(#{$i}) {
+    border-color: hsl($i * 36, 50%, 50%);
+  }
+}
+``` 
 
 استخدم دائمًا `$i` كاسم متغير للالتزام بالاتفاقية المعتادة وما لم يكن لديك سبب جيد بالفعل ، لا تستخدم الكلمة المفتاحية أبدًا: استخدمها دائمًا. العديد من المطورين لا يعرفون حتى Sass يقدم هذا الاختلاف. قد يؤدي استخدامها إلى الارتباك.
 
diff --git a/guide/arabic/certifications/information-security-and-quality-assurance/advanced-node-and-express/registration-of-new-users/index.md b/guide/arabic/certifications/information-security-and-quality-assurance/advanced-node-and-express/registration-of-new-users/index.md
index 1b5d602828..186385028c 100644
--- a/guide/arabic/certifications/information-security-and-quality-assurance/advanced-node-and-express/registration-of-new-users/index.md
+++ b/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
+``` 
 
 وإلا لن تمر الاختبارات