From dfba8618f2a5785c42b44d6d6195d6413224df0f Mon Sep 17 00:00:00 2001
From: "Queen Vinyl Da.i'gyu-Kazotetsu" <vinyldarkscratch@gmail.com>
Date: Fri, 28 Jul 2023 04:55:21 -0700
Subject: [PATCH] zh-cn: Format /web/api using Prettier (part 2) (#14675)

Co-authored-by: allo <yin199909@aliyun.com>
---
 .../api/canvasgradient/addcolorstop/index.md  |  19 +--
 .../api/canvaspattern/settransform/index.md   |  20 +--
 .../api/canvasrenderingcontext2d/arc/index.md |  28 ++--
 .../canvasrenderingcontext2d/arcto/index.md   |  23 +--
 .../beginpath/index.md                        |   8 +-
 .../beziercurveto/index.md                    |  15 +-
 .../canvasrenderingcontext2d/canvas/index.md  |   2 +-
 .../clearrect/index.md                        |   8 +-
 .../canvasrenderingcontext2d/clip/index.md    |   8 +-
 .../closepath/index.md                        |  12 +-
 .../createpattern/index.md                    |   3 +-
 .../direction/index.md                        |  24 ++--
 .../drawfocusifneeded/index.md                |  26 ++--
 .../drawimage/index.md                        |  24 ++--
 .../canvasrenderingcontext2d/ellipse/index.md |   4 +-
 .../fillrect/index.md                         |  10 +-
 .../fillstyle/index.md                        |  16 ++-
 .../filltext/index.md                         |   2 +-
 .../canvasrenderingcontext2d/filter/index.md  |  10 +-
 .../gettransform/index.md                     |  11 +-
 .../globalalpha/index.md                      |  22 +--
 .../imagesmoothingenabled/index.md            |  19 +--
 .../ispointinpath/index.md                    |   6 +-
 .../ispointinstroke/index.md                  |   6 +-
 .../canvasrenderingcontext2d/linecap/index.md |  16 +--
 .../linedashoffset/index.md                   |  10 +-
 .../linewidth/index.md                        |   4 +-
 .../miterlimit/index.md                       |   3 +-
 .../putimagedata/index.md                     |  27 ++--
 .../quadraticcurveto/index.md                 |  16 +--
 .../resettransform/index.md                   |   6 +-
 .../canvasrenderingcontext2d/rotate/index.md  |  12 +-
 .../canvasrenderingcontext2d/scale/index.md   |  16 +--
 .../setlinedash/index.md                      |  19 +--
 .../shadowcolor/index.md                      |   6 +-
 .../canvasrenderingcontext2d/stroke/index.md  |   4 +-
 .../strokerect/index.md                       |  16 +--
 .../textalign/index.md                        |  18 +--
 .../textbaseline/index.md                     |  19 ++-
 .../translate/index.md                        |   8 +-
 .../using_channel_messaging/index.md          |  22 +--
 .../channelmergernode/index.md                |   4 +-
 files/zh-cn/web/api/cleartimeout/index.md     |  22 ++-
 .../zh-cn/web/api/client/postmessage/index.md |  41 +++---
 files/zh-cn/web/api/clients/claim/index.md    |   2 +-
 files/zh-cn/web/api/clients/get/index.md      |   4 +-
 files/zh-cn/web/api/clients/index.md          |  54 +++----
 files/zh-cn/web/api/clients/matchall/index.md |   8 +-
 .../zh-cn/web/api/clients/openwindow/index.md |   8 +-
 files/zh-cn/web/api/clipboard/index.md        |   2 +-
 files/zh-cn/web/api/clipboard/read/index.md   |   6 +-
 .../zh-cn/web/api/clipboard/readtext/index.md |   5 +-
 files/zh-cn/web/api/clipboard/write/index.md  |  13 +-
 .../web/api/clipboard/writetext/index.md      |  13 +-
 files/zh-cn/web/api/clipboard_api/index.md    |   7 +-
 files/zh-cn/web/api/clipboarditem/index.md    |  13 +-
 .../web/api/compression_streams_api/index.md  |   2 +-
 .../compressionstream/index.md                |   2 +-
 .../zh-cn/web/api/compressionstream/index.md  |   2 +-
 files/zh-cn/web/api/console/assert/index.md   |  14 +-
 files/zh-cn/web/api/console/index.md          |   7 +-
 files/zh-cn/web/api/console/log/index.md      |   2 +-
 files/zh-cn/web/api/console/table/index.md    |   6 +-
 files/zh-cn/web/api/console_api/index.md      |   4 +-
 .../index.md                                  |   6 +-
 .../countqueuingstrategy/index.md             |  27 ++--
 .../highwatermark/index.md                    |   2 +-
 .../web/api/countqueuingstrategy/index.md     |  25 ++--
 .../api/countqueuingstrategy/size/index.md    |  27 ++--
 .../zh-cn/web/api/createimagebitmap/index.md  |  16 +--
 .../web/api/crossoriginisolated/index.md      |   2 +-
 .../web/api/crypto/getrandomvalues/index.md   |   2 +-
 files/zh-cn/web/api/crypto_property/index.md  |   4 +-
 files/zh-cn/web/api/cryptokey/index.md        |   4 +
 .../zh-cn/web/api/css/escape_static/index.md  |  12 +-
 .../api/css/factory_functions_static/index.md |  10 +-
 .../web/api/css/supports_static/index.md      |  10 +-
 .../web/api/css_custom_highlight_api/index.md |  28 ++--
 .../web/api/css_font_loading_api/index.md     |   8 +-
 .../index.md                                  | 136 +++++++++---------
 files/zh-cn/web/api/cssrule/csstext/index.md  |   4 +-
 .../getpropertycssvalue/index.md              |   2 +-
 .../getpropertypriority/index.md              |   2 +-
 .../getpropertyvalue/index.md                 |   2 +-
 .../web/api/cssstyledeclaration/index.md      |   2 +-
 .../web/api/cssstyledeclaration/item/index.md |   2 +-
 .../api/cssstyledeclaration/length/index.md   |   4 +-
 .../removeproperty/index.md                   |   2 +-
 .../cssstyledeclaration/setproperty/index.md  |   2 +-
 files/zh-cn/web/api/cssstylesheet/index.md    |  17 +--
 .../web/api/cssstylesheet/insertrule/index.md |  51 ++++---
 files/zh-cn/web/api/cssvalue/index.md         |  10 +-
 .../api/customelementregistry/define/index.md | 110 +++++++-------
 .../api/customelementregistry/get/index.md    |  17 ++-
 .../web/api/customelementregistry/index.md    |  20 ++-
 .../customelementregistry/upgrade/index.md    |   2 +-
 .../whendefined/index.md                      |  12 +-
 .../web/api/customevent/customevent/index.md  |  57 +++++---
 .../zh-cn/web/api/customevent/detail/index.md |   8 +-
 .../web/api/datatransfer/cleardata/index.md   |  70 ++++-----
 100 files changed, 794 insertions(+), 710 deletions(-)

diff --git a/files/zh-cn/web/api/canvasgradient/addcolorstop/index.md b/files/zh-cn/web/api/canvasgradient/addcolorstop/index.md
index 70a6b4c0757380..1d957d70e2da0b 100644
--- a/files/zh-cn/web/api/canvasgradient/addcolorstop/index.md
+++ b/files/zh-cn/web/api/canvasgradient/addcolorstop/index.md
@@ -29,7 +29,7 @@ void gradient.addColorStop(offset, color);
 #### HTML
 
 ```html
- <canvas id="canvas"></canvas>
+<canvas id="canvas"></canvas>
 ```
 
 #### JavaScript
@@ -38,11 +38,11 @@ void gradient.addColorStop(offset, color);
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
-var gradient = ctx.createLinearGradient(0,0,200,0);
-gradient.addColorStop(0,"green");
-gradient.addColorStop(1,"white");
+var gradient = ctx.createLinearGradient(0, 0, 200, 0);
+gradient.addColorStop(0, "green");
+gradient.addColorStop(1, "white");
 ctx.fillStyle = gradient;
-ctx.fillRect(10,10,200,100);
+ctx.fillRect(10, 10, 200, 100);
 ```
 
 编辑以下代码可看到画布变化：
@@ -58,7 +58,8 @@ var gradient = ctx.createLinearGradient(0,0,200,0);
 gradient.addColorStop(0,"green");
 gradient.addColorStop(1,"white");
 ctx.fillStyle = gradient;
-ctx.fillRect(10,10,200,100);</textarea>
+ctx.fillRect(10,10,200,100);</textarea
+>
 ```
 
 ```js hidden
@@ -74,14 +75,14 @@ function drawCanvas() {
   eval(textarea.value);
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   drawCanvas();
 });
 
-edit.addEventListener("click", function() {
+edit.addEventListener("click", function () {
   textarea.focus();
-})
+});
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
diff --git a/files/zh-cn/web/api/canvaspattern/settransform/index.md b/files/zh-cn/web/api/canvaspattern/settransform/index.md
index 01f07ed271ef05..bd8e8d3be192eb 100644
--- a/files/zh-cn/web/api/canvaspattern/settransform/index.md
+++ b/files/zh-cn/web/api/canvaspattern/settransform/index.md
@@ -27,8 +27,7 @@ setTransform(matrix)
 #### HTML
 
 ```html
-<canvas id="canvas"></canvas>
-<svg id="svg1"></svg>
+<canvas id="canvas"></canvas> <svg id="svg1"></svg>
 ```
 
 #### JavaScript
@@ -41,13 +40,13 @@ var svg1 = document.getElementById("svg1");
 var matrix = svg1.createSVGMatrix();
 
 var img = new Image();
-img.src = 'canvas_createpattern.png';
+img.src = "canvas_createpattern.png";
 
-img.onload = function() {
-  var pattern = ctx.createPattern(img, 'repeat');
+img.onload = function () {
+  var pattern = ctx.createPattern(img, "repeat");
   pattern.setTransform(matrix.rotate(-45).scale(1.5));
   ctx.fillStyle = pattern;
-  ctx.fillRect(0,0,400,400);
+  ctx.fillRect(0, 0, 400, 400);
 };
 ```
 
@@ -68,7 +67,8 @@ img.onload = function() {
   pattern.setTransform(matrix.rotate(-45).scale(1.5));
   ctx.fillStyle = pattern;
   ctx.fillRect(0,0,400,400);
-};</textarea>
+};</textarea
+>
 ```
 
 ```js hidden
@@ -87,14 +87,14 @@ function drawCanvas() {
   eval(textarea.value);
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   drawCanvas();
 });
 
-edit.addEventListener("click", function() {
+edit.addEventListener("click", function () {
   textarea.focus();
-})
+});
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.md
index 5adea27eb3c9c3..7ddd2789876071 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.md
@@ -43,8 +43,8 @@ void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
 #### JavaScript
 
 ```js
-const canvas = document.querySelector('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.querySelector("canvas");
+const ctx = canvas.getContext("2d");
 
 ctx.beginPath();
 ctx.arc(100, 75, 50, 0, 2 * Math.PI);
@@ -64,23 +64,23 @@ ctx.stroke();
 ```
 
 ```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
 
 // Draw shapes
-for (i=0;i<4;i++){
-  for(j=0;j<3;j++){
+for (i = 0; i < 4; i++) {
+  for (j = 0; j < 3; j++) {
     ctx.beginPath();
-    var x          = 25+j*50;               // x coordinate
-    var y          = 25+i*50;               // y coordinate
-    var radius     = 20;                    // Arc radius
-    var startAngle = 0;                     // Starting point on circle
-    var endAngle   = Math.PI+(Math.PI*j)/2; // End point on circle
-    var clockwise  = i%2==0 ? false : true; // clockwise or anticlockwise
+    var x = 25 + j * 50; // x coordinate
+    var y = 25 + i * 50; // y coordinate
+    var radius = 20; // Arc radius
+    var startAngle = 0; // Starting point on circle
+    var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
+    var clockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise
 
-    ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
+    ctx.arc(x, y, radius, startAngle, endAngle, clockwise);
 
-    if (i>1){
+    if (i > 1) {
       ctx.fill();
     } else {
       ctx.stroke();
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.md
index 405b539be3f55d..c37cb920236636 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.md
@@ -44,29 +44,29 @@ void ctx.arcTo(x1, y1, x2, y2, radius);
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
-ctx.setLineDash([])
+ctx.setLineDash([]);
 ctx.beginPath();
 ctx.moveTo(150, 20);
-ctx.arcTo(150,100,50,20,30);
+ctx.arcTo(150, 100, 50, 20, 30);
 ctx.stroke();
 
-ctx.fillStyle = 'blue';
+ctx.fillStyle = "blue";
 // base point
 ctx.fillRect(150, 20, 10, 10);
 
-ctx.fillStyle = 'red';
+ctx.fillStyle = "red";
 // control point one
 ctx.fillRect(150, 100, 10, 10);
 // control point two
 ctx.fillRect(50, 20, 10, 10);
 //
-ctx.setLineDash([5,5])
+ctx.setLineDash([5, 5]);
 ctx.moveTo(150, 20);
-ctx.lineTo(150,100);
+ctx.lineTo(150, 100);
 ctx.lineTo(50, 20);
 ctx.stroke();
 ctx.beginPath();
-ctx.arc(120,38,30,0,2*Math.PI);
+ctx.arc(120, 38, 30, 0, 2 * Math.PI);
 ctx.stroke();
 ```
 
@@ -106,7 +106,8 @@ ctx.lineTo(50, 20);
 ctx.stroke();
 ctx.beginPath();
 ctx.arc(120,38,30,0,2*Math.PI);
-ctx.stroke();</textarea>
+ctx.stroke();</textarea
+>
 ```
 
 ```js hidden
@@ -122,14 +123,14 @@ function drawCanvas() {
   eval(textarea.value);
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   drawCanvas();
 });
 
-edit.addEventListener("click", function() {
+edit.addEventListener("click", function () {
   textarea.focus();
-})
+});
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/beginpath/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/beginpath/index.md
index 35f3b9f26c277f..e9102db6f6c1d0 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/beginpath/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/beginpath/index.md
@@ -28,19 +28,19 @@ void ctx.beginPath();
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 // First path
 ctx.beginPath();
-ctx.strokeStyle = 'blue';
+ctx.strokeStyle = "blue";
 ctx.moveTo(20, 20);
 ctx.lineTo(200, 20);
 ctx.stroke();
 
 // Second path
 ctx.beginPath();
-ctx.strokeStyle = 'green';
+ctx.strokeStyle = "green";
 ctx.moveTo(20, 20);
 ctx.lineTo(120, 120);
 ctx.stroke();
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/beziercurveto/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/beziercurveto/index.md
index 72c41a602fc8df..03c0cb03745a9d 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/beziercurveto/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/beziercurveto/index.md
@@ -47,17 +47,17 @@ var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.beginPath();
-ctx.moveTo(50,20);
+ctx.moveTo(50, 20);
 ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
 ctx.stroke();
 
-ctx.fillStyle = 'blue';
+ctx.fillStyle = "blue";
 // start point
 ctx.fillRect(50, 20, 10, 10);
 // end point
 ctx.fillRect(50, 100, 10, 10);
 
-ctx.fillStyle = 'red';
+ctx.fillStyle = "red";
 // control point one
 ctx.fillRect(230, 30, 10, 10);
 // control point two
@@ -79,7 +79,8 @@ ctx.fillRect(150, 70, 10, 10);
 <textarea id="code" class="playable-code">
 ctx.beginPath();
 ctx.bezierCurveTo(50, 100, 180, 10, 20, 10);
-ctx.stroke();</textarea>
+ctx.stroke();</textarea
+>
 ```
 
 ```js hidden
@@ -95,14 +96,14 @@ function drawCanvas() {
   eval(textarea.value);
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   drawCanvas();
 });
 
-edit.addEventListener("click", function() {
+edit.addEventListener("click", function () {
   textarea.focus();
-})
+});
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/canvas/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/canvas/index.md
index 91eab1a8b353ab..0864cbaa109a5d 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/canvas/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/canvas/index.md
@@ -26,7 +26,7 @@ ctx.canvas;
 ```js
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
-ctx.canvas // HTMLCanvasElement
+ctx.canvas; // HTMLCanvasElement
 ```
 
 ## 规范描述
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/clearrect/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/clearrect/index.md
index 1e258b0f09f2d5..4112c73825e960 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/clearrect/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/clearrect/index.md
@@ -35,8 +35,8 @@ void ctx.clearRect(x, y, width, height);
 这段代码清除整个画布。这段代码通常在动画的每一帧开始被执行。清除的范围涵覆盖了整个 {{HtmlElement("canvas")}} 元素。
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 ```
 
@@ -60,12 +60,12 @@ var ctx = canvas.getContext("2d");
 
 // 绘制黄色背景
 ctx.beginPath();
-ctx.fillStyle = '#ff6';
+ctx.fillStyle = "#ff6";
 ctx.fillRect(0, 0, canvas.width, canvas.height);
 
 // 绘制蓝色三角形
 ctx.beginPath();
-ctx.fillStyle = 'blue';
+ctx.fillStyle = "blue";
 ctx.moveTo(20, 20);
 ctx.lineTo(180, 20);
 ctx.lineTo(130, 130);
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.md
index c1725512c08932..87f679de6be9ac 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.md
@@ -47,8 +47,8 @@ void ctx.clip(path, fillRule);
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 // Create circular clipping region
 ctx.beginPath();
@@ -56,9 +56,9 @@ ctx.arc(100, 75, 50, 0, Math.PI * 2);
 ctx.clip();
 
 // Draw stuff that gets clipped
-ctx.fillStyle = 'blue';
+ctx.fillStyle = "blue";
 ctx.fillRect(0, 0, canvas.width, canvas.height);
-ctx.fillStyle = 'orange';
+ctx.fillStyle = "orange";
 ctx.fillRect(0, 0, 100, 100);
 ```
 
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/closepath/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/closepath/index.md
index 5bbda5f9a4e120..3de7c56c46bb41 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/closepath/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/closepath/index.md
@@ -28,14 +28,14 @@ void ctx.closePath();
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 ctx.beginPath();
-ctx.moveTo(20, 140);   // Move pen to bottom-left corner
-ctx.lineTo(120, 10);   // Line to top corner
-ctx.lineTo(220, 140);  // Line to bottom-right corner
-ctx.closePath();       // Line to bottom-left corner
+ctx.moveTo(20, 140); // Move pen to bottom-left corner
+ctx.lineTo(120, 10); // Line to top corner
+ctx.lineTo(220, 140); // Line to bottom-right corner
+ctx.closePath(); // Line to bottom-left corner
 ctx.stroke();
 ```
 
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/createpattern/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/createpattern/index.md
index c1092ea332d5c1..55847c2918df8f 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/createpattern/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/createpattern/index.md
@@ -63,7 +63,8 @@ const ctx = canvas.getContext("2d");
 
 const img = new Image();
 img.src = "canvas_createpattern.png";
-img.onload = () => { // Only use the image after it's loaded
+img.onload = () => {
+  // Only use the image after it's loaded
   const pattern = ctx.createPattern(img, "repeat");
   ctx.fillStyle = pattern;
   ctx.fillRect(0, 0, 300, 300);
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/direction/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/direction/index.md
index 4130fb613c498a..8bb374ae15523e 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/direction/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/direction/index.md
@@ -41,13 +41,13 @@ ctx.direction = "ltr" || "rtl" || "inherit";
 #### JavaScript
 
 ```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
 
-ctx.font = '48px serif';
-ctx.fillText('Hi!', 150, 50);
-ctx.direction = 'rtl';
-ctx.fillText('Hi!', 150, 130);
+ctx.font = "48px serif";
+ctx.fillText("Hi!", 150, 50);
+ctx.direction = "rtl";
+ctx.fillText("Hi!", 150, 130);
 ```
 
 ```html hidden
@@ -55,13 +55,13 @@ ctx.fillText('Hi!', 150, 130);
 ```
 
 ```js hidden
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
 
-ctx.font = '48px serif';
-ctx.fillText('Hi!', 150, 50);
-ctx.direction = 'rtl';
-ctx.fillText('Hi!', 150, 130);
+ctx.font = "48px serif";
+ctx.fillText("Hi!", 150, 50);
+ctx.direction = "rtl";
+ctx.fillText("Hi!", 150, 130);
 ```
 
 #### 结果
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.md
index 1eaa0f924aa620..0cdee1b82ec2d8 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.md
@@ -39,14 +39,14 @@ void ctx.drawFocusIfNeeded(path, element);
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-const button1 = document.getElementById('button1');
-const button2 = document.getElementById('button2');
-
-document.addEventListener('focus', redraw, true);
-document.addEventListener('blur', redraw, true);
-canvas.addEventListener('click', handleClick, false);
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+const button1 = document.getElementById("button1");
+const button2 = document.getElementById("button2");
+
+document.addEventListener("focus", redraw, true);
+document.addEventListener("blur", redraw, true);
+canvas.addEventListener("click", handleClick, false);
 redraw();
 
 function redraw() {
@@ -79,14 +79,14 @@ function drawButton(el, x, y) {
   const height = 40;
 
   // Button background
-  ctx.fillStyle = active ? 'pink' : 'lightgray';
+  ctx.fillStyle = active ? "pink" : "lightgray";
   ctx.fillRect(x, y, width, height);
 
   // Button text
-  ctx.font = '15px sans-serif';
-  ctx.textAlign = 'center';
-  ctx.textBaseline = 'middle';
-  ctx.fillStyle = active ? 'blue' : 'black';
+  ctx.font = "15px sans-serif";
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.fillStyle = active ? "blue" : "black";
   ctx.fillText(el.textContent, x + width / 2, y + height / 2);
 
   // Define clickable area
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.md
index 4e043226641cca..4116a4a1bd5fe8 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.md
@@ -10,9 +10,9 @@ Canvas 2D API 中的 **`CanvasRenderingContext2D.drawImage()`** 方法提供了
 ## 语法
 
 ```js
-drawImage(image, dx, dy)
-drawImage(image, dx, dy, dWidth, dHeight)
-drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
+drawImage(image, dx, dy);
+drawImage(image, dx, dy, dWidth, dHeight);
+drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
 ```
 
 ![drawImage](canvas_drawimage.jpg)
@@ -61,9 +61,7 @@ drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
 ```html
 <canvas id="canvas"></canvas>
 <div style="display:none;">
-  <img id="source"
-       src="rhino.jpg"
-       width="300" height="227">
+  <img id="source" src="rhino.jpg" width="300" height="227" />
 </div>
 ```
 
@@ -72,11 +70,11 @@ drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
 原图像从坐标 (33,71) 处截取一个宽度为 104 高度为 124 的图像。并将其绘制到画布的 (21, 20) 坐标处，并将其缩放为宽 87、高 104 的图像。
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-const image = document.getElementById('source');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+const image = document.getElementById("source");
 
-image.addEventListener('load', (e) => {
+image.addEventListener("load", (e) => {
   ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
 });
 ```
@@ -100,14 +98,14 @@ image.addEventListener('load', (e) => {
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 const image = new Image(60, 45); // Using optional size for image
 image.onload = drawImageActualSize; // Draw when image has loaded
 
 // Load an image of intrinsic size 300x227 in CSS pixels
-image.src = 'rhino.jpg';
+image.src = "rhino.jpg";
 
 function drawImageActualSize() {
   // Use the intrinsic size of image in CSS pixels for the canvas element
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.md
index e98f26b9ed4111..35fe92d5a19605 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.md
@@ -47,8 +47,8 @@ void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlo
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 // Draw the ellipse
 ctx.beginPath();
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/fillrect/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/fillrect/index.md
index 77f4b8b43b2e07..f2eda6154ffe41 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/fillrect/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/fillrect/index.md
@@ -45,9 +45,9 @@ void ctx.fillRect(x, y, width, height);
 下面绘制的矩形左上顶点在 (20, 10)，宽高分别是 150 和 100 像素。
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-ctx.fillStyle = 'green';
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+ctx.fillStyle = "green";
 ctx.fillRect(20, 10, 150, 100);
 ```
 
@@ -60,8 +60,8 @@ ctx.fillRect(20, 10, 150, 100);
 下面这个代码片段使用本方法填充了整个画布。这样做通常的目的是在开始绘制其他内容前设置一个背景。为了达到这样的效果，需要让填充的范围和画布的范围相同，需要访问{{HtmlElement("canvas")}}元素的`width` 和 `height` 属性。
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 ctx.fillRect(0, 0, canvas.width, canvas.height);
 ```
 
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.md
index 557c9fa09af897..dfd6e3fae2be8d 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.md
@@ -61,12 +61,16 @@ ctx.fillRect(10, 10, 100, 100);
 ```
 
 ```js
-var ctx = document.getElementById('canvas').getContext('2d');
-for (var i=0;i<6;i++){
-  for (var j=0;j<6;j++){
-    ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
-                     Math.floor(255-42.5*j) + ',0)';
-    ctx.fillRect(j*25,i*25,25,25);
+var ctx = document.getElementById("canvas").getContext("2d");
+for (var i = 0; i < 6; i++) {
+  for (var j = 0; j < 6; j++) {
+    ctx.fillStyle =
+      "rgb(" +
+      Math.floor(255 - 42.5 * i) +
+      "," +
+      Math.floor(255 - 42.5 * j) +
+      ",0)";
+    ctx.fillRect(j * 25, i * 25, 25, 25);
   }
 }
 ```
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/filltext/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/filltext/index.md
index a4478ec416141f..07bb2b04433485 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/filltext/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/filltext/index.md
@@ -5,7 +5,7 @@ slug: Web/API/CanvasRenderingContext2D/fillText
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.fillText()`** 是 Canvas 2D API 在 *(x, y)* 位置填充文本的方法。如果选项的第四个参数提供了最大宽度，文本会进行缩放以适应最大宽度。
+**`CanvasRenderingContext2D.fillText()`** 是 Canvas 2D API 在 _(x, y)_ 位置填充文本的方法。如果选项的第四个参数提供了最大宽度，文本会进行缩放以适应最大宽度。
 
 参见 {{domxref("CanvasRenderingContext2D.strokeText()")}} 方法对文本进行描边。
 
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/filter/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/filter/index.md
index f349813dbcbdc8..7cdf8784c2ebe6 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/filter/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/filter/index.md
@@ -66,12 +66,12 @@ filter 属性接受{{domxref("DOMString")}}字符串，可以包含一个或多
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
-ctx.filter = 'blur(4px)';
-ctx.font = '48px serif';
-ctx.fillText('Hello world', 50, 100);
+ctx.filter = "blur(4px)";
+ctx.font = "48px serif";
+ctx.fillText("Hello world", 50, 100);
 ```
 
 #### 结果
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/gettransform/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/gettransform/index.md
index d07c745785dcaf..53a29dd8dc9454 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/gettransform/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/gettransform/index.md
@@ -34,8 +34,7 @@ let storedTransform = ctx.getTransform();
 #### HTML
 
 ```html
-<canvas width="240"></canvas>
-<canvas width="240"></canvas>
+<canvas width="240"></canvas> <canvas width="240"></canvas>
 ```
 
 #### CSS
@@ -49,11 +48,11 @@ canvas {
 #### JavaScript
 
 ```js
-const canvases = document.querySelectorAll('canvas');
-const ctx1 = canvases[0].getContext('2d');
-const ctx2 = canvases[1].getContext('2d');
+const canvases = document.querySelectorAll("canvas");
+const ctx1 = canvases[0].getContext("2d");
+const ctx2 = canvases[1].getContext("2d");
 
-ctx1.setTransform(1, .2, .8, 1, 0, 0);
+ctx1.setTransform(1, 0.2, 0.8, 1, 0, 0);
 ctx1.fillRect(25, 25, 50, 50);
 
 let storedTransform = ctx1.getTransform();
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.md
index c5499b6fb4571a..03a018323f13de 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.md
@@ -33,15 +33,15 @@ ctx.globalAlpha = value;
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 ctx.globalAlpha = 0.5;
 
-ctx.fillStyle = 'blue';
+ctx.fillStyle = "blue";
 ctx.fillRect(10, 10, 100, 100);
 
-ctx.fillStyle = 'red';
+ctx.fillStyle = "red";
 ctx.fillRect(50, 50, 100, 100);
 ```
 
@@ -58,19 +58,19 @@ ctx.fillRect(50, 50, 100, 100);
 ```
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 // Draw background
-ctx.fillStyle = '#FD0';
+ctx.fillStyle = "#FD0";
 ctx.fillRect(0, 0, 75, 75);
-ctx.fillStyle = '#6C0';
+ctx.fillStyle = "#6C0";
 ctx.fillRect(75, 0, 75, 75);
-ctx.fillStyle = '#09F';
+ctx.fillStyle = "#09F";
 ctx.fillRect(0, 75, 75, 75);
-ctx.fillStyle = '#F30';
+ctx.fillStyle = "#F30";
 ctx.fillRect(75, 75, 75, 75);
-ctx.fillStyle = '#FFF';
+ctx.fillStyle = "#FFF";
 
 // Set transparency value
 ctx.globalAlpha = 0.2;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md
index d2de0b95b814e8..40a9ecd5e669d2 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md
@@ -37,26 +37,27 @@ ctx.imageSmoothingEnabled = value;
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
+const canvas = document.getElementById("canvas");
 
-const ctx = canvas.getContext('2d');
-ctx.font = '16px sans-serif';
-ctx.textAlign = 'center';
+const ctx = canvas.getContext("2d");
+ctx.font = "16px sans-serif";
+ctx.textAlign = "center";
 
 const img = new Image();
-img.src = 'https://interactive-examples.mdn.mozilla.net/media/examples/star.png';
+img.src =
+  "https://interactive-examples.mdn.mozilla.net/media/examples/star.png";
 img.onload = () => {
   const w = img.width,
-        h = img.height;
+    h = img.height;
 
-  ctx.fillText('Source', w * .5, 20);
+  ctx.fillText("Source", w * 0.5, 20);
   ctx.drawImage(img, 0, 24, w, h);
 
-  ctx.fillText('Smoothing = TRUE', w * 2.5, 20);
+  ctx.fillText("Smoothing = TRUE", w * 2.5, 20);
   ctx.imageSmoothingEnabled = true;
   ctx.drawImage(img, w, 24, w * 3, h * 3);
 
-  ctx.fillText('Smoothing = FALSE', w * 5.5, 20);
+  ctx.fillText("Smoothing = FALSE", w * 5.5, 20);
   ctx.imageSmoothingEnabled = false;
   ctx.drawImage(img, w * 4, 24, w * 3, h * 3);
 };
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinpath/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinpath/index.md
index 4b77bd66290091..dbc68370f999ac 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinpath/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinpath/index.md
@@ -56,9 +56,9 @@ isPointInPath(path, x, y, fillRule)
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-const result = document.getElementById('result');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+const result = document.getElementById("result");
 
 ctx.rect(10, 10, 100, 100);
 ctx.fill();
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinstroke/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinstroke/index.md
index 0bf955f38a6f8d..67429c4eca731c 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinstroke/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinstroke/index.md
@@ -44,9 +44,9 @@ boolean ctx.isPointInStroke(path, x, y);
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-const result = document.getElementById('result');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+const result = document.getElementById("result");
 
 ctx.rect(10, 10, 100, 100);
 ctx.stroke();
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/linecap/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/linecap/index.md
index 0042c5bf7e2405..e1451fad60b252 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/linecap/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/linecap/index.md
@@ -41,13 +41,13 @@ ctx.lineCap = "square";
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 ctx.beginPath();
 ctx.moveTo(20, 20);
 ctx.lineWidth = 15;
-ctx.lineCap = 'round';
+ctx.lineCap = "round";
 ctx.lineTo(100, 100);
 ctx.stroke();
 ```
@@ -67,11 +67,11 @@ ctx.stroke();
 ```
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 // Draw guides
-ctx.strokeStyle = '#09f';
+ctx.strokeStyle = "#09f";
 ctx.beginPath();
 ctx.moveTo(10, 10);
 ctx.lineTo(140, 10);
@@ -80,8 +80,8 @@ ctx.lineTo(140, 140);
 ctx.stroke();
 
 // Draw lines
-ctx.strokeStyle = 'black';
-['butt', 'round', 'square'].forEach((lineCap, i) => {
+ctx.strokeStyle = "black";
+["butt", "round", "square"].forEach((lineCap, i) => {
   ctx.lineWidth = 15;
   ctx.lineCap = lineCap;
   ctx.beginPath();
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.md
index e989c979e7f946..3fa4d331c613a2 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.md
@@ -31,8 +31,8 @@ ctx.lineDashOffset = value;
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 ctx.setLineDash([4, 16]);
 
@@ -44,7 +44,7 @@ ctx.stroke();
 
 // Dashed line with offset of 4
 ctx.beginPath();
-ctx.strokeStyle = 'red';
+ctx.strokeStyle = "red";
 ctx.lineDashOffset = 4;
 ctx.moveTo(0, 100);
 ctx.lineTo(300, 100);
@@ -71,10 +71,10 @@ var ctx = canvas.getContext("2d");
 var offset = 0;
 
 function draw() {
-  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
   ctx.setLineDash([4, 2]);
   ctx.lineDashOffset = -offset;
-  ctx.strokeRect(10,10, 100, 100);
+  ctx.strokeRect(10, 10, 100, 100);
 }
 
 function march() {
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/linewidth/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/linewidth/index.md
index 33e0760096620a..61b4a3069e0310 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/linewidth/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/linewidth/index.md
@@ -35,8 +35,8 @@ ctx.lineWidth = value;
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 ctx.lineWidth = 15;
 
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/miterlimit/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/miterlimit/index.md
index 205da75349f1ca..7178c2aae04d08 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/miterlimit/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/miterlimit/index.md
@@ -45,7 +45,8 @@ ctx.beginPath();
 ctx.moveTo(0,0);
 ctx.lineWidth = 15;
 ctx.lineTo(100, 100);
-ctx.stroke();</textarea>
+ctx.stroke();</textarea
+>
 ```
 
 ```js hidden
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/putimagedata/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/putimagedata/index.md
index c8f45a17d48efd..b4c8a4693930c5 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/putimagedata/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/putimagedata/index.md
@@ -55,25 +55,34 @@ void ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-
-function putImageData(ctx, imageData, dx, dy,
-    dirtyX, dirtyY, dirtyWidth, dirtyHeight) {
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+
+function putImageData(
+  ctx,
+  imageData,
+  dx,
+  dy,
+  dirtyX,
+  dirtyY,
+  dirtyWidth,
+  dirtyHeight,
+) {
   const data = imageData.data;
   const height = imageData.height;
   const width = imageData.width;
   dirtyX = dirtyX || 0;
   dirtyY = dirtyY || 0;
-  dirtyWidth = dirtyWidth !== undefined? dirtyWidth: width;
-  dirtyHeight = dirtyHeight !== undefined? dirtyHeight: height;
+  dirtyWidth = dirtyWidth !== undefined ? dirtyWidth : width;
+  dirtyHeight = dirtyHeight !== undefined ? dirtyHeight : height;
   const limitBottom = dirtyY + dirtyHeight;
   const limitRight = dirtyX + dirtyWidth;
   for (let y = dirtyY; y < limitBottom; y++) {
     for (let x = dirtyX; x < limitRight; x++) {
       const pos = y * width + x;
-      ctx.fillStyle =
-        `rgba(${data[pos*4+0]}, ${data[pos*4+1]}, ${data[pos*4+2]}, ${data[pos*4+3]/255})`;
+      ctx.fillStyle = `rgba(${data[pos * 4 + 0]}, ${data[pos * 4 + 1]}, ${
+        data[pos * 4 + 2]
+      }, ${data[pos * 4 + 3] / 255})`;
       ctx.fillRect(x + dx, y + dy, 1, 1);
     }
   }
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md
index a5651fcba98dc1..4281e62440f0d5 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md
@@ -39,8 +39,8 @@ void ctx.quadraticCurveTo(cpx, cpy, x, y);
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 // Quadratic Bézier curve
 ctx.beginPath();
@@ -49,14 +49,14 @@ ctx.quadraticCurveTo(230, 30, 50, 100);
 ctx.stroke();
 
 // Start and end points
-ctx.fillStyle = 'blue';
+ctx.fillStyle = "blue";
 ctx.beginPath();
-ctx.arc(50, 20, 5, 0, 2 * Math.PI);   // Start point
-ctx.arc(50, 100, 5, 0, 2 * Math.PI);  // End point
+ctx.arc(50, 20, 5, 0, 2 * Math.PI); // Start point
+ctx.arc(50, 100, 5, 0, 2 * Math.PI); // End point
 ctx.fill();
 
 // Control point
-ctx.fillStyle = 'red';
+ctx.fillStyle = "red";
 ctx.beginPath();
 ctx.arc(230, 30, 5, 0, 2 * Math.PI);
 ctx.fill();
@@ -81,8 +81,8 @@ ctx.fill();
 曲线从`moveTo()`指定的点开始：(20, 110)。控制点位于 (230, 150)。曲线在 (250, 20) 处结束。
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 ctx.beginPath();
 ctx.moveTo(20, 110);
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/resettransform/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/resettransform/index.md
index 97191f300c033a..a1b9622fa94dcf 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/resettransform/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/resettransform/index.md
@@ -28,11 +28,11 @@ void ctx.resetTransform();
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 // Draw a rotated rectangle
-ctx.rotate(45 * Math.PI / 180);
+ctx.rotate((45 * Math.PI) / 180);
 ctx.fillRect(60, 0, 100, 30);
 
 // Reset transformation matrix to the identity matrix
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/rotate/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/rotate/index.md
index 6f4e8b5b75b1fe..d05a17d997b60d 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/rotate/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/rotate/index.md
@@ -37,21 +37,21 @@ void ctx.rotate(angle);
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 // Point of transform origin
 ctx.arc(0, 0, 5, 0, 2 * Math.PI);
-ctx.fillStyle = 'blue';
+ctx.fillStyle = "blue";
 ctx.fill();
 
 // Non-rotated rectangle
-ctx.fillStyle = 'gray';
+ctx.fillStyle = "gray";
 ctx.fillRect(100, 0, 80, 20);
 
 // Rotated rectangle
-ctx.rotate(45 * Math.PI / 180);
-ctx.fillStyle = 'red';
+ctx.rotate((45 * Math.PI) / 180);
+ctx.fillStyle = "red";
 ctx.fillRect(100, 0, 80, 20);
 
 // Reset transformation matrix to the identity matrix
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/scale/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/scale/index.md
index a94aeafa31fea2..ecf542d9fced52 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/scale/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/scale/index.md
@@ -41,19 +41,19 @@ The rectangle has a specified width of 8 and a height of 20. The transformation
 Notice that its position on the canvas also changes. Since its specified corner is (10, 10), its rendered corner becomes (90, 30).
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 // Scaled rectangle
 ctx.scale(9, 3);
-ctx.fillStyle = 'red';
+ctx.fillStyle = "red";
 ctx.fillRect(10, 10, 8, 20);
 
 // Reset current transformation matrix to the identity matrix
 ctx.setTransform(1, 0, 0, 1, 0, 0);
 
 // Non-scaled rectangle
-ctx.fillStyle = 'gray';
+ctx.fillStyle = "gray";
 ctx.fillRect(10, 10, 8, 20);
 ```
 
@@ -78,12 +78,12 @@ Note that the call to {{domxref("CanvasRenderingContext2D.fillText()", "fillText
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 ctx.scale(-1, 1);
-ctx.font = '48px serif';
-ctx.fillText('Hello world!', -280, 90);
+ctx.font = "48px serif";
+ctx.fillText("Hello world!", -280, 90);
 ctx.setTransform(1, 0, 0, 1, 0, 0);
 ```
 
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.md
index bb629eab204a96..72cdbf50da9c79 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.md
@@ -39,8 +39,8 @@ setLineDash(segments);
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 // Dashed line
 ctx.beginPath();
@@ -70,7 +70,8 @@ ctx.setLineDash([5, 15]);
 ctx.beginPath();
 ctx.moveTo(0,100);
 ctx.lineTo(400, 100);
-ctx.stroke();</textarea>
+ctx.stroke();</textarea
+>
 ```
 
 ```js hidden
@@ -86,14 +87,14 @@ function drawCanvas() {
   eval(textarea.value);
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   drawCanvas();
 });
 
-edit.addEventListener("click", function() {
+edit.addEventListener("click", function () {
   textarea.focus();
-})
+});
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
@@ -125,8 +126,8 @@ function drawDashedLine(pattern) {
   y += 20;
 }
 
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 let y = 15;
 
 drawDashedLine([]);
@@ -135,7 +136,7 @@ drawDashedLine([10, 10]);
 drawDashedLine([20, 5]);
 drawDashedLine([15, 3, 3, 3]);
 drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3]);
-drawDashedLine([12, 3, 3]);  // Equals [12, 3, 3, 12, 3, 3]
+drawDashedLine([12, 3, 3]); // Equals [12, 3, 3, 12, 3, 3]
 ```
 
 #### Result
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowcolor/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowcolor/index.md
index 46c58c30b2a2d2..b984ebb1eeffe4 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowcolor/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowcolor/index.md
@@ -31,11 +31,11 @@ ctx.shadowColor = color;
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 // Shadow
-ctx.shadowColor = 'red';
+ctx.shadowColor = "red";
 ctx.shadowOffsetX = 10;
 ctx.shadowOffsetY = 10;
 
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/stroke/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/stroke/index.md
index 86063df603c7fc..f62a3ef5d77293 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/stroke/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/stroke/index.md
@@ -34,8 +34,8 @@ void ctx.stroke(path);
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 ctx.rect(10, 10, 150, 100);
 ctx.stroke();
 ```
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/strokerect/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/strokerect/index.md
index 58e0c6c081c9d8..dc530da8009377 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/strokerect/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/strokerect/index.md
@@ -45,9 +45,9 @@ void ctx.strokeRect(x, y, width, height);
 矩形的左上角是（20,10）。它的宽度为 160，高度为 100。
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-ctx.strokeStyle = 'green';
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+ctx.strokeStyle = "green";
 ctx.strokeRect(20, 10, 160, 100);
 ```
 
@@ -68,13 +68,13 @@ ctx.strokeRect(20, 10, 160, 100);
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-ctx.shadowColor = '#d53';
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+ctx.shadowColor = "#d53";
 ctx.shadowBlur = 20;
-ctx.lineJoin = 'bevel';
+ctx.lineJoin = "bevel";
 ctx.lineWidth = 15;
-ctx.strokeStyle = '#38f';
+ctx.strokeStyle = "#38f";
 ctx.strokeRect(30, 30, 160, 90);
 ```
 
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/textalign/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/textalign/index.md
index fa5346589b22d3..93ae9f990d2f44 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/textalign/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/textalign/index.md
@@ -49,9 +49,9 @@ ctx.textAlign = "left" || "right" || "center" || "start" || "end";
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
+const canvas = document.getElementById("canvas");
 canvas.width = 350;
-const ctx = canvas.getContext('2d');
+const ctx = canvas.getContext("2d");
 const x = canvas.width / 2;
 
 ctx.beginPath();
@@ -59,16 +59,16 @@ ctx.moveTo(x, 0);
 ctx.lineTo(x, canvas.height);
 ctx.stroke();
 
-ctx.font = '30px serif';
+ctx.font = "30px serif";
 
-ctx.textAlign = 'left';
-ctx.fillText('left-aligned', x, 40);
+ctx.textAlign = "left";
+ctx.fillText("left-aligned", x, 40);
 
-ctx.textAlign = 'center';
-ctx.fillText('center-aligned', x, 85);
+ctx.textAlign = "center";
+ctx.fillText("center-aligned", x, 85);
 
-ctx.textAlign = 'right';
-ctx.fillText('right-aligned', x, 130);
+ctx.textAlign = "right";
+ctx.fillText("right-aligned", x, 130);
 ```
 
 #### 结果
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/textbaseline/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/textbaseline/index.md
index cc7ba60c81bd26..cdec2659e46dad 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/textbaseline/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/textbaseline/index.md
@@ -49,12 +49,19 @@ ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographi
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-
-const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
-ctx.font = '36px serif';
-ctx.strokeStyle = 'red';
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+
+const baselines = [
+  "top",
+  "hanging",
+  "middle",
+  "alphabetic",
+  "ideographic",
+  "bottom",
+];
+ctx.font = "36px serif";
+ctx.strokeStyle = "red";
 
 baselines.forEach((baseline, index) => {
   ctx.textBaseline = baseline;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/translate/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/translate/index.md
index 420549562a6bb9..2983eec4a7807a 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/translate/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/translate/index.md
@@ -39,19 +39,19 @@ void ctx.translate(x, y);
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 // Moved square
 ctx.translate(110, 30);
-ctx.fillStyle = 'red';
+ctx.fillStyle = "red";
 ctx.fillRect(0, 0, 80, 80);
 
 // Reset current transformation matrix to the identity matrix
 ctx.setTransform(1, 0, 0, 1, 0, 0);
 
 // Unmoved square
-ctx.fillStyle = 'gray';
+ctx.fillStyle = "gray";
 ctx.fillRect(0, 0, 80, 80);
 ```
 
diff --git a/files/zh-cn/web/api/channel_messaging_api/using_channel_messaging/index.md b/files/zh-cn/web/api/channel_messaging_api/using_channel_messaging/index.md
index 92baa8a9c231d4..5cac2ad10f634d 100644
--- a/files/zh-cn/web/api/channel_messaging_api/using_channel_messaging/index.md
+++ b/files/zh-cn/web/api/channel_messaging_api/using_channel_messaging/index.md
@@ -34,10 +34,10 @@ Channel messaging 在这样的场景中特别有用：假如你有一个社交
 在例子的主页面，我们有一个简单的表单，内含一个文本输入框，用来输入要发送到 {{htmlelement("iframe")}} 的消息。我们还有一个段落，我们在稍后将会用它来显示 {{htmlelement("iframe")}} 回传回来的确认消息。
 
 ```js
-var input = document.getElementById('message-input');
-var output = document.getElementById('message-output');
-var button = document.querySelector('button');
-var iframe = document.querySelector('iframe');
+var input = document.getElementById("message-input");
+var output = document.getElementById("message-output");
+var button = document.querySelector("button");
+var iframe = document.querySelector("iframe");
 
 var channel = new MessageChannel();
 var port1 = channel.port1;
@@ -47,13 +47,13 @@ iframe.addEventListener("load", onLoad);
 
 function onLoad() {
   // 监听按钮点击
-  button.addEventListener('click', onClick);
+  button.addEventListener("click", onClick);
 
   // 在 port1 监听消息
   port1.onmessage = onMessage;
 
   // 把 port2 传给 iframe
-  iframe.contentWindow.postMessage('init', '*', [channel.port2]);
+  iframe.contentWindow.postMessage("init", "*", [channel.port2]);
 }
 
 // 当按钮点击时，在 port1 上发送一个消息
@@ -65,7 +65,7 @@ function onClick(e) {
 // 处理 port1 收到的消息
 function onMessage(e) {
   output.innerHTML = e.data;
-  input.value = '';
+  input.value = "";
 }
 ```
 
@@ -86,11 +86,11 @@ function onMessage(e) {
 在 IFrame 里，我们有下面的 JavaScript:
 
 ```js
-var list = document.querySelector('ul');
+var list = document.querySelector("ul");
 var port2;
 
 // 监听初始的 port 传递消息
-window.addEventListener('message', initPort);
+window.addEventListener("message", initPort);
 
 // 设置传过来的 port
 function initPort(e) {
@@ -100,7 +100,7 @@ function initPort(e) {
 
 // 处理 port2 收到的消息
 function onMessage(e) {
-  var listItem = document.createElement('li');
+  var listItem = document.createElement("li");
   listItem.textContent = e.data;
   list.appendChild(listItem);
   port2.postMessage('Message received by IFrame: "' + e.data + '"');
@@ -121,7 +121,7 @@ function onMessage(e) {
 // 处理 port1 上收到的消息
 function onMessage(e) {
   output.innerHTML = e.data;
-  input.value = '';
+  input.value = "";
 }
 ```
 
diff --git a/files/zh-cn/web/api/channelmergernode/channelmergernode/index.md b/files/zh-cn/web/api/channelmergernode/channelmergernode/index.md
index c74eebe5ed97f4..40225385dcc793 100644
--- a/files/zh-cn/web/api/channelmergernode/channelmergernode/index.md
+++ b/files/zh-cn/web/api/channelmergernode/channelmergernode/index.md
@@ -35,8 +35,8 @@ _从字典_ _{{domxref("AudioNodeOptions")}} 继承。_
 var ac = new AudioContext();
 
 var options = {
-  numberOfInputs : 2
-}
+  numberOfInputs: 2,
+};
 
 var myMerger = new ChannelMergerNode(ac, options);
 ```
diff --git a/files/zh-cn/web/api/cleartimeout/index.md b/files/zh-cn/web/api/cleartimeout/index.md
index 3b11e3a57d8277..d76f69286f4620 100644
--- a/files/zh-cn/web/api/cleartimeout/index.md
+++ b/files/zh-cn/web/api/cleartimeout/index.md
@@ -26,25 +26,33 @@ scope.clearTimeout(timeoutID)
 
 ```js
 var alarm = {
-  remind: function(aMessage) {
+  remind: function (aMessage) {
     alert(aMessage);
     delete this.timeoutID;
   },
 
-  setup: function() {
+  setup: function () {
     this.cancel();
     var self = this;
-    this.timeoutID = window.setTimeout(function(msg) {self.remind(msg);}, 1000, "Wake up!");
+    this.timeoutID = window.setTimeout(
+      function (msg) {
+        self.remind(msg);
+      },
+      1000,
+      "Wake up!",
+    );
   },
 
-  cancel: function() {
-    if(typeof this.timeoutID == "number") {
+  cancel: function () {
+    if (typeof this.timeoutID == "number") {
       window.clearTimeout(this.timeoutID);
       delete this.timeoutID;
     }
-  }
+  },
+};
+window.onclick = function () {
+  alarm.setup();
 };
-window.onclick = function() { alarm.setup() };
 ```
 
 ## 注意
diff --git a/files/zh-cn/web/api/client/postmessage/index.md b/files/zh-cn/web/api/client/postmessage/index.md
index 8c0b260c76ee67..977a228525f21b 100644
--- a/files/zh-cn/web/api/client/postmessage/index.md
+++ b/files/zh-cn/web/api/client/postmessage/index.md
@@ -29,32 +29,33 @@ Void.
 从 service worker 向 client 发送消息：
 
 ```js
-addEventListener('fetch', event => {
-  event.waitUntil(async function() {
-    // Exit early if we don't have access to the client.
-    // Eg, if it's cross-origin.
-    if (!event.clientId) return;
-
-    // Get the client.
-    const client = await clients.get(event.clientId);
-    // Exit early if we don't get the client.
-    // Eg, if it closed.
-    if (!client) return;
-
-    // Send a message to the client.
-    client.postMessage({
-      msg: "Hey I just got a fetch from you!",
-      url: event.request.url
-    });
-
-  }());
+addEventListener("fetch", (event) => {
+  event.waitUntil(
+    (async function () {
+      // Exit early if we don't have access to the client.
+      // Eg, if it's cross-origin.
+      if (!event.clientId) return;
+
+      // Get the client.
+      const client = await clients.get(event.clientId);
+      // Exit early if we don't get the client.
+      // Eg, if it closed.
+      if (!client) return;
+
+      // Send a message to the client.
+      client.postMessage({
+        msg: "Hey I just got a fetch from you!",
+        url: event.request.url,
+      });
+    })(),
+  );
 });
 ```
 
 接收 message:
 
 ```js
-navigator.serviceWorker.addEventListener('message', event => {
+navigator.serviceWorker.addEventListener("message", (event) => {
   console.log(event.data.msg, event.data.url);
 });
 ```
diff --git a/files/zh-cn/web/api/clients/claim/index.md b/files/zh-cn/web/api/clients/claim/index.md
index 7f6f48fe19a3f9..2340bbc9e12650 100644
--- a/files/zh-cn/web/api/clients/claim/index.md
+++ b/files/zh-cn/web/api/clients/claim/index.md
@@ -28,7 +28,7 @@ A {{jsxref("Promise")}} for `void`.
 The following example uses `claim()` inside service worker's "`activate`" event listener so that clients loaded in the same scope do not need to be reloaded before their fetches will go through this service worker.
 
 ```js
-self.addEventListener('activate', event => {
+self.addEventListener("activate", (event) => {
   event.waitUntil(clients.claim());
 });
 ```
diff --git a/files/zh-cn/web/api/clients/get/index.md b/files/zh-cn/web/api/clients/get/index.md
index 19135090ddc946..66913eb6fb5072 100644
--- a/files/zh-cn/web/api/clients/get/index.md
+++ b/files/zh-cn/web/api/clients/get/index.md
@@ -10,7 +10,7 @@ slug: Web/API/Clients/get
 ## 语法
 
 ```js
-self.clients.get(id).then(function(client) {
+self.clients.get(id).then(function (client) {
   // do something with your returned client
 });
 ```
@@ -27,7 +27,7 @@ self.clients.get(id).then(function(client) {
 ## 示例
 
 ```js
-self.clients.get(options).then(function(client) {
+self.clients.get(options).then(function (client) {
   self.clients.openWindow(client.url);
 });
 ```
diff --git a/files/zh-cn/web/api/clients/index.md b/files/zh-cn/web/api/clients/index.md
index aaba90ab4312ca..5d202e24f3f2a2 100644
--- a/files/zh-cn/web/api/clients/index.md
+++ b/files/zh-cn/web/api/clients/index.md
@@ -23,35 +23,37 @@ slug: Web/API/Clients
 下面示例显示一个已有的聊天窗口，或者当用户点击通知时创建新的窗口。
 
 ```js
-addEventListener('notificationclick', event => {
-  event.waitUntil(async function() {
-    const allClients = await clients.matchAll({
-      includeUncontrolled: true
-    });
-
-    let chatClient;
-
-    // Let's see if we already have a chat window open:
-    for (const client of allClients) {
-      const url = new URL(client.url);
-
-      if (url.pathname == '/chat/') {
-        // Excellent, let's use it!
-        client.focus();
-        chatClient = client;
-        break;
+addEventListener("notificationclick", (event) => {
+  event.waitUntil(
+    (async function () {
+      const allClients = await clients.matchAll({
+        includeUncontrolled: true,
+      });
+
+      let chatClient;
+
+      // Let's see if we already have a chat window open:
+      for (const client of allClients) {
+        const url = new URL(client.url);
+
+        if (url.pathname == "/chat/") {
+          // Excellent, let's use it!
+          client.focus();
+          chatClient = client;
+          break;
+        }
       }
-    }
 
-    // If we didn't find an existing chat window,
-    // open a new one:
-    if (!chatClient) {
-      chatClient = await clients.openWindow('/chat/');
-    }
+      // If we didn't find an existing chat window,
+      // open a new one:
+      if (!chatClient) {
+        chatClient = await clients.openWindow("/chat/");
+      }
 
-    // Message the client:
-    chatClient.postMessage("New chat messages!");
-  }());
+      // Message the client:
+      chatClient.postMessage("New chat messages!");
+    })(),
+  );
 });
 ```
 
diff --git a/files/zh-cn/web/api/clients/matchall/index.md b/files/zh-cn/web/api/clients/matchall/index.md
index df0f5f56a2e062..6b89827593154a 100644
--- a/files/zh-cn/web/api/clients/matchall/index.md
+++ b/files/zh-cn/web/api/clients/matchall/index.md
@@ -10,7 +10,7 @@ slug: Web/API/Clients/matchAll
 ## 语法
 
 ```js
-ServiceWorkerClients.matchAll(options).then(function(clients) {
+ServiceWorkerClients.matchAll(options).then(function (clients) {
   // do something with your clients list
 });
 ```
@@ -31,9 +31,9 @@ resolve 为一个 {{domxref("Client")}} 对象数组的 [`Promise`](/zh-CN/docs/
 ## 示例
 
 ```js
-clients.matchAll(options).then(function(clientList) {
-  for (var i = 0 ; i < clients.length ; i++) {
-    if (clientList[i].url === 'index.html') {
+clients.matchAll(options).then(function (clientList) {
+  for (var i = 0; i < clients.length; i++) {
+    if (clientList[i].url === "index.html") {
       clients.openWindow(clientList[i]);
       // or do something else involving the matching client
     }
diff --git a/files/zh-cn/web/api/clients/openwindow/index.md b/files/zh-cn/web/api/clients/openwindow/index.md
index 92064e56ec04b9..ae694b2f214e2f 100644
--- a/files/zh-cn/web/api/clients/openwindow/index.md
+++ b/files/zh-cn/web/api/clients/openwindow/index.md
@@ -14,7 +14,7 @@ slug: Web/API/Clients/openWindow
 ## 语法
 
 ```js
-ServiceWorkerClients.openWindow(url).then(function(WindowClient) {
+ServiceWorkerClients.openWindow(url).then(function (WindowClient) {
   // do something with your WindowClient
 });
 ```
@@ -33,9 +33,9 @@ ServiceWorkerClients.openWindow(url).then(function(WindowClient) {
 ```js
 // When the user clicks a notification focus the window if it exists or open
 // a new one otherwise.
-onotificationclick = function(event) {
+onotificationclick = function (event) {
   var found = false;
-  clients.matchAll().then(function(clientsArr) {
+  clients.matchAll().then(function (clientsArr) {
     for (i = 0; i < clientsArr.length; i++) {
       if (clientsArr[i].url === event.data.url) {
         // We already have a window to use, focus it.
@@ -46,7 +46,7 @@ onotificationclick = function(event) {
     }
     if (!found) {
       // Create a new window.
-      clients.openWindow(event.data.url).then(function(windowClient) {
+      clients.openWindow(event.data.url).then(function (windowClient) {
         // do something with the windowClient.
       });
     }
diff --git a/files/zh-cn/web/api/clipboard/index.md b/files/zh-cn/web/api/clipboard/index.md
index 33277883036746..a7ab2b349ccd2c 100644
--- a/files/zh-cn/web/api/clipboard/index.md
+++ b/files/zh-cn/web/api/clipboard/index.md
@@ -23,7 +23,7 @@ slug: Web/API/Clipboard
 
 ## 方法
 
-*`Clipboard` 继承自 {{domxref("EventTarget")}} 接口，因此拥有它的方法。*
+_`Clipboard` 继承自 {{domxref("EventTarget")}} 接口，因此拥有它的方法。_
 
 - {{domxref("Clipboard.read()","read()")}}
   - : 从剪贴板读取数据（比如图片），返回一个 {{jsxref("Promise")}} 对象。在检索到数据后，promise 将兑现一个 {{domxref("ClipboardItem")}} 对象的数组来提供剪切板数据。
diff --git a/files/zh-cn/web/api/clipboard/read/index.md b/files/zh-cn/web/api/clipboard/read/index.md
index 9bc7bc42b97f1f..9e33ef113b98e7 100644
--- a/files/zh-cn/web/api/clipboard/read/index.md
+++ b/files/zh-cn/web/api/clipboard/read/index.md
@@ -33,13 +33,13 @@ After using {{domxref("Permissions.query", "navigator.permissions.query()")}} to
 // First, ask the Permissions API if we have some kind of access to
 // the "clipboard-read" feature.
 
-navigator.permissions.query({name: "clipboard-read"}).then(result => {
+navigator.permissions.query({ name: "clipboard-read" }).then((result) => {
   // If permission to read the clipboard is granted or if the user will
   // be prompted to allow it, we proceed.
 
   if (result.state == "granted" || result.state == "prompt") {
-    navigator.clipboard.read().then(data => {
-      for (let i=0; i<data.items.length; i++) {
+    navigator.clipboard.read().then((data) => {
+      for (let i = 0; i < data.items.length; i++) {
         if (data.items[i].type != "text/plain") {
           alert("Clipboard contains non-text data. Unable to access it.");
         } else {
diff --git a/files/zh-cn/web/api/clipboard/readtext/index.md b/files/zh-cn/web/api/clipboard/readtext/index.md
index 701c672f224ca2..dda2be6e248057 100644
--- a/files/zh-cn/web/api/clipboard/readtext/index.md
+++ b/files/zh-cn/web/api/clipboard/readtext/index.md
@@ -28,8 +28,9 @@ A {{jsxref("Promise")}} that resolves with a {{domxref("DOMString")}} containing
 此示例检索剪贴板的文本内容，并将返回的文本插入元素的内容中。
 
 ```js
-navigator.clipboard.readText().then(
-  clipText => document.getElementById("outbox").innerText = clipText);
+navigator.clipboard
+  .readText()
+  .then((clipText) => (document.getElementById("outbox").innerText = clipText));
 ```
 
 ## 规范
diff --git a/files/zh-cn/web/api/clipboard/write/index.md b/files/zh-cn/web/api/clipboard/write/index.md
index 78ca3a5f4ea81a..3bc68cddb43f93 100644
--- a/files/zh-cn/web/api/clipboard/write/index.md
+++ b/files/zh-cn/web/api/clipboard/write/index.md
@@ -35,11 +35,14 @@ function setClipboard(text) {
   let data = new DataTransfer();
 
   data.items.add("text/plain", text);
-  navigator.clipboard.write(data).then(function() {
-    /* success */
-  }, function() {
-    /* failure */
-  });
+  navigator.clipboard.write(data).then(
+    function () {
+      /* success */
+    },
+    function () {
+      /* failure */
+    },
+  );
 }
 ```
 
diff --git a/files/zh-cn/web/api/clipboard/writetext/index.md b/files/zh-cn/web/api/clipboard/writetext/index.md
index b93ce9cb058ad2..95b9b9bf9a9eb3 100644
--- a/files/zh-cn/web/api/clipboard/writetext/index.md
+++ b/files/zh-cn/web/api/clipboard/writetext/index.md
@@ -29,11 +29,14 @@ var promise = navigator.clipboard.writeText(newClipText)
 此示例将剪贴板的内容设置为字符串“\<empty clipboard>”。
 
 ```js
-navigator.clipboard.writeText("<empty clipboard>").then(function() {
-  /* clipboard successfully set */
-}, function() {
-  /* clipboard write failed */
-});
+navigator.clipboard.writeText("<empty clipboard>").then(
+  function () {
+    /* clipboard successfully set */
+  },
+  function () {
+    /* clipboard write failed */
+  },
+);
 ```
 
 ## 规范
diff --git a/files/zh-cn/web/api/clipboard_api/index.md b/files/zh-cn/web/api/clipboard_api/index.md
index 3eb6ce0fdd2347..be729c2e97d6b8 100644
--- a/files/zh-cn/web/api/clipboard_api/index.md
+++ b/files/zh-cn/web/api/clipboard_api/index.md
@@ -14,8 +14,11 @@ slug: Web/API/Clipboard_API
 除了在实例化中创建一个 `Clipboard` 对象，你还可以使用全局的 {{domxref("Navigator.clipboard")}} 来访问系统剪贴板。
 
 ```js
-navigator.clipboard.readText().then(
-  clipText => document.querySelector(".editor").innerText += clipText);
+navigator.clipboard
+  .readText()
+  .then(
+    (clipText) => (document.querySelector(".editor").innerText += clipText),
+  );
 ```
 
 上述代码提取了剪贴板的文本并将其附在 class 为 `editor` 的第一个元素后面。因为当剪贴板中不是文本时， {{domxref("Clipboard.readText", "readText()")}} (and {{domxref("Clipboard.read", "read()")}}, for that matter) 会返回一个空字符串，所以这段代码是安全的。
diff --git a/files/zh-cn/web/api/clipboarditem/index.md b/files/zh-cn/web/api/clipboarditem/index.md
index 230ba714d86139..ee13098c4d47a3 100644
--- a/files/zh-cn/web/api/clipboarditem/index.md
+++ b/files/zh-cn/web/api/clipboarditem/index.md
@@ -43,17 +43,17 @@ Here we're writing a new {{domxref("ClipboardItem.ClipboardItem()")}} to the {{d
 ```js
 async function writeClipImg() {
   try {
-    const imgURL = '/myimage.png';
+    const imgURL = "/myimage.png";
     const data = await fetch(imgURL);
     const blob = await data.blob();
 
     await navigator.clipboard.write([
       new ClipboardItem({
-        [blob.type]: blob
-      })
+        [blob.type]: blob,
+      }),
     ]);
-    console.log('Fetched image copied.');
-  } catch(err) {
+    console.log("Fetched image copied.");
+  } catch (err) {
     console.error(err.name, err.message);
   }
 }
@@ -69,14 +69,11 @@ async function getClipboardContents() {
     const clipboardItems = await navigator.clipboard.read();
 
     for (const clipboardItem of clipboardItems) {
-
       for (const type of clipboardItem.types) {
         const blob = await clipboardItem.getType(type);
         // we can now use blob here
       }
-
     }
-
   } catch (err) {
     console.error(err.name, err.message);
   }
diff --git a/files/zh-cn/web/api/compression_streams_api/index.md b/files/zh-cn/web/api/compression_streams_api/index.md
index 3b55b1fa62cac8..5657ee261a2fd5 100644
--- a/files/zh-cn/web/api/compression_streams_api/index.md
+++ b/files/zh-cn/web/api/compression_streams_api/index.md
@@ -22,7 +22,7 @@ slug: Web/API/Compression_Streams_API
 
 ```js
 const compressedReadableStream = inputReadableStream.pipeThrough(
-  new CompressionStream("gzip")
+  new CompressionStream("gzip"),
 );
 ```
 
diff --git a/files/zh-cn/web/api/compressionstream/compressionstream/index.md b/files/zh-cn/web/api/compressionstream/compressionstream/index.md
index c295169fde6134..2ec1a5a0abdb1b 100644
--- a/files/zh-cn/web/api/compressionstream/compressionstream/index.md
+++ b/files/zh-cn/web/api/compressionstream/compressionstream/index.md
@@ -34,7 +34,7 @@ new CompressionStream(format)
 
 ```js
 const compressedReadableStream = inputReadableStream.pipeThrough(
-  new CompressionStream("gzip")
+  new CompressionStream("gzip"),
 );
 ```
 
diff --git a/files/zh-cn/web/api/compressionstream/index.md b/files/zh-cn/web/api/compressionstream/index.md
index 2f0f0521aa02f1..0e135ef1f17ea1 100644
--- a/files/zh-cn/web/api/compressionstream/index.md
+++ b/files/zh-cn/web/api/compressionstream/index.md
@@ -25,7 +25,7 @@ slug: Web/API/CompressionStream
 
 ```js
 const compressedReadableStream = inputReadableStream.pipeThrough(
-  new CompressionStream("gzip")
+  new CompressionStream("gzip"),
 );
 ```
 
diff --git a/files/zh-cn/web/api/console/assert/index.md b/files/zh-cn/web/api/console/assert/index.md
index 2074a22463f07b..aef5c0a50227e8 100644
--- a/files/zh-cn/web/api/console/assert/index.md
+++ b/files/zh-cn/web/api/console/assert/index.md
@@ -34,12 +34,12 @@ console.assert(assertion, msg [, subst1, ..., substN]); // c-like message format
 下面的代码示例演示了 JavaScript 对象的使用：
 
 ```js
-const errorMsg = 'the # is not even';
+const errorMsg = "the # is not even";
 for (let number = 2; number <= 5; number += 1) {
-    console.log('the # is ' + number);
-    console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg});
-    // 或者使用 ES2015 对象简写：
-    // console.assert(number % 2 === 0, {number, errorMsg});
+  console.log("the # is " + number);
+  console.assert(number % 2 === 0, { number: number, errorMsg: errorMsg });
+  // 或者使用 ES2015 对象简写：
+  // console.assert(number % 2 === 0, {number, errorMsg});
 }
 // 输出：
 // the # is 2
@@ -53,14 +53,14 @@ for (let number = 2; number <= 5; number += 1) {
 请注意，你可以在大多数浏览器中使用 console.log 进行格式化输出
 
 ```js
-console.log('the word is %s try number %d', 'foo', 123);
+console.log("the word is %s try number %d", "foo", 123);
 // 输出：the word is foo try number 123
 ```
 
 `但是 console.assert` 在不同浏览器中可能获得不同的效果：
 
 ```js
-console.assert(false, 'the word is %s', 'foo');
+console.assert(false, "the word is %s", "foo");
 // correct output in Node (e.g. v8.10.0) and some browsers
 //     (e.g. Firefox v60.0.2):
 // Assertion failed: the word is foo
diff --git a/files/zh-cn/web/api/console/index.md b/files/zh-cn/web/api/console/index.md
index b048aa6558f69f..a1d761035e7278 100644
--- a/files/zh-cn/web/api/console/index.md
+++ b/files/zh-cn/web/api/console/index.md
@@ -10,7 +10,7 @@ slug: Web/API/console
 `Console` 对象可以从任何全局对象中访问到，如 浏览器作用域上的 {{domxref("Window")}}，以及通过属性控制台作为 workers 中的特定变体的 {{domxref("WorkerGlobalScope")}}。可以通过 {{domxref("Window.console")}} 引用，也可以简单的通过 `console` 引用。例：
 
 ```js
-console.log("Failed to open the specified link")
+console.log("Failed to open the specified link");
 ```
 
 本页面记录了 `Console` 对象上的[方法](#方法)并给出了几个 [Usage](#usage) （用例）。
@@ -143,7 +143,10 @@ for (var i=0; i<5; i++) {
 可以使用 `%c` 为打印内容定义样式：
 
 ```js
-console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");
+console.log(
+  "This is %cMy stylish message",
+  "color: yellow; font-style: italic; background-color: blue;padding: 2px",
+);
 ```
 
 指令前的文本不会受到影响，但指令后的文本将会使用参数中声明的 CSS 样式。![](css-styling.png)
diff --git a/files/zh-cn/web/api/console/log/index.md b/files/zh-cn/web/api/console/log/index.md
index 769e696482dc77..b14dd46ac23657 100644
--- a/files/zh-cn/web/api/console/log/index.md
+++ b/files/zh-cn/web/api/console/log/index.md
@@ -5,7 +5,7 @@ slug: Web/API/console/log
 
 {{APIRef("Console API")}}
 
- **`console.log()`** 方法向 Web 控制台输出一条信息。这条信息可能是单个字符串（包括可选的替代字符串），也可能是一个或多个对象。
+**`console.log()`** 方法向 Web 控制台输出一条信息。这条信息可能是单个字符串（包括可选的替代字符串），也可能是一个或多个对象。
 
 {{AvailableInWorkers}}
 
diff --git a/files/zh-cn/web/api/console/table/index.md b/files/zh-cn/web/api/console/table/index.md
index 7ce0c825826b70..cef454ea915019 100644
--- a/files/zh-cn/web/api/console/table/index.md
+++ b/files/zh-cn/web/api/console/table/index.md
@@ -49,7 +49,11 @@ console.table(me);
 ```js
 // 二元数组的打印
 
-var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
+var people = [
+  ["John", "Smith"],
+  ["Jane", "Doe"],
+  ["Emily", "Jones"],
+];
 console.table(people);
 ```
 
diff --git a/files/zh-cn/web/api/console_api/index.md b/files/zh-cn/web/api/console_api/index.md
index 3956c782c0ccf4..6a58bf346e3482 100644
--- a/files/zh-cn/web/api/console_api/index.md
+++ b/files/zh-cn/web/api/console_api/index.md
@@ -26,10 +26,10 @@ Console API 最初是一个专有的 API，不同的浏览器以自己的实现
 ## 示例
 
 ```js
-let myString = 'Hello world';
+let myString = "Hello world";
 
 // Output "Hello world" to the console
-console.log(myString)
+console.log(myString);
 ```
 
 到[Console reference page](/zh-CN/docs/Web/API/Console#Usage)查看更多示例
diff --git a/files/zh-cn/web/api/contentvisibilityautostatechangeevent/index.md b/files/zh-cn/web/api/contentvisibilityautostatechangeevent/index.md
index 5299eb03fb0fa0..7a0cecc590ef24 100644
--- a/files/zh-cn/web/api/contentvisibilityautostatechangeevent/index.md
+++ b/files/zh-cn/web/api/contentvisibilityautostatechangeevent/index.md
@@ -20,7 +20,7 @@ slug: Web/API/ContentVisibilityAutoStateChangeEvent
 
 ## 实例属性
 
-*从其父接口 {{DOMxRef("Event")}} 继承属性。*
+_从其父接口 {{DOMxRef("Event")}} 继承属性。_
 
 - {{domxref("ContentVisibilityAutoStateChangeEvent.skipped", "skipped")}} {{ReadOnlyInline}}
   - : 如果用户代理正在跳过元素的渲染则返回 `true`，否则返回 `false`。
@@ -28,9 +28,9 @@ slug: Web/API/ContentVisibilityAutoStateChangeEvent
 ## 示例
 
 ```js
-const canvasElem = document.querySelector('canvas');
+const canvasElem = document.querySelector("canvas");
 
-canvasElem.addEventListener('contentvisibilityautostatechange', stateChanged);
+canvasElem.addEventListener("contentvisibilityautostatechange", stateChanged);
 canvasElem.style.contentVisibility = "auto";
 
 function stateChanged(event) {
diff --git a/files/zh-cn/web/api/countqueuingstrategy/countqueuingstrategy/index.md b/files/zh-cn/web/api/countqueuingstrategy/countqueuingstrategy/index.md
index 8322374d5df7c6..5c53adec806e1e 100644
--- a/files/zh-cn/web/api/countqueuingstrategy/countqueuingstrategy/index.md
+++ b/files/zh-cn/web/api/countqueuingstrategy/countqueuingstrategy/index.md
@@ -9,7 +9,7 @@ slug: Web/API/CountQueuingStrategy/CountQueuingStrategy
 
 ## 语法
 
-```js
+```js-nolint
 new CountQueuingStrategy(highWaterMark)
 ```
 
@@ -31,18 +31,21 @@ new CountQueuingStrategy(highWaterMark)
 ```js
 const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
 
-const writableStream = new WritableStream({
-  // Implement the sink
-  write(chunk) {
-    // …
-  },
-  close() {
-    // …
+const writableStream = new WritableStream(
+  {
+    // Implement the sink
+    write(chunk) {
+      // …
+    },
+    close() {
+      // …
+    },
+    abort(err) {
+      console.log("Sink error:", err);
+    },
   },
-  abort(err) {
-    console.log("Sink error:", err);
-  }
-}, queuingStrategy);
+  queuingStrategy,
+);
 
 const size = queuingStrategy.size();
 ```
diff --git a/files/zh-cn/web/api/countqueuingstrategy/highwatermark/index.md b/files/zh-cn/web/api/countqueuingstrategy/highwatermark/index.md
index e19047864ca2fe..12b764a631adfa 100644
--- a/files/zh-cn/web/api/countqueuingstrategy/highwatermark/index.md
+++ b/files/zh-cn/web/api/countqueuingstrategy/highwatermark/index.md
@@ -28,7 +28,7 @@ const readableStream = new ReadableStream(
       console.log("stream error:", err);
     },
   },
-  queuingStrategy
+  queuingStrategy,
 );
 
 const size = queuingStrategy.size(chunk);
diff --git a/files/zh-cn/web/api/countqueuingstrategy/index.md b/files/zh-cn/web/api/countqueuingstrategy/index.md
index 6fdd2339c4d086..4e8d51bca011d1 100644
--- a/files/zh-cn/web/api/countqueuingstrategy/index.md
+++ b/files/zh-cn/web/api/countqueuingstrategy/index.md
@@ -27,18 +27,21 @@ slug: Web/API/CountQueuingStrategy
 ```js
 const queueingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
 
-const writableStream = new WritableStream({
-  // Implement the sink
-  write(chunk) {
-    // …
+const writableStream = new WritableStream(
+  {
+    // Implement the sink
+    write(chunk) {
+      // …
+    },
+    close() {
+      // …
+    },
+    abort(err) {
+      console.log("Sink error:", err);
+    },
   },
-  close() {
-    // …
-  },
-  abort(err) {
-    console.log("Sink error:", err);
-  }
-}, queueingStrategy);
+  queueingStrategy,
+);
 
 const size = queueingStrategy.size();
 ```
diff --git a/files/zh-cn/web/api/countqueuingstrategy/size/index.md b/files/zh-cn/web/api/countqueuingstrategy/size/index.md
index 818f98ff56e885..61a9086a8336aa 100644
--- a/files/zh-cn/web/api/countqueuingstrategy/size/index.md
+++ b/files/zh-cn/web/api/countqueuingstrategy/size/index.md
@@ -9,7 +9,7 @@ slug: Web/API/CountQueuingStrategy/size
 
 ## 语法
 
-```js
+```js-nolint
 size()
 ```
 
@@ -26,18 +26,21 @@ size()
 ```js
 const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
 
-const writableStream = new WritableStream({
-  // Implement the sink
-  write(chunk) {
-    // …
-  },
-  close() {
-    // …
+const writableStream = new WritableStream(
+  {
+    // Implement the sink
+    write(chunk) {
+      // …
+    },
+    close() {
+      // …
+    },
+    abort(err) {
+      console.log("Sink error:", err);
+    },
   },
-  abort(err) {
-    console.log("Sink error:", err);
-  }
-}, queuingStrategy);
+  queuingStrategy,
+);
 
 const size = queuingStrategy.size();
 ```
diff --git a/files/zh-cn/web/api/createimagebitmap/index.md b/files/zh-cn/web/api/createimagebitmap/index.md
index f1f8f455cc781c..397b7ed02c46f3 100644
--- a/files/zh-cn/web/api/createimagebitmap/index.md
+++ b/files/zh-cn/web/api/createimagebitmap/index.md
@@ -44,21 +44,21 @@ createImageBitmap(image, sx, sy, sw, sh[, options]).then(function(response) { ..
 ## Example
 
 ```js
-var canvas = document.getElementById('myCanvas'),
-ctx = canvas.getContext('2d'),
-image = new Image();
+var canvas = document.getElementById("myCanvas"),
+  ctx = canvas.getContext("2d"),
+  image = new Image();
 
-image.onload = function() {
+image.onload = function () {
   Promise.all([
     createImageBitmap(this, 0, 0, 32, 32),
-    createImageBitmap(this, 32, 0, 32, 32)
-  ]).then(function(sprites) {
+    createImageBitmap(this, 32, 0, 32, 32),
+  ]).then(function (sprites) {
     ctx.drawImage(sprites[0], 0, 0);
     ctx.drawImage(sprites[1], 32, 32);
   });
-}
+};
 
-image.src = 'sprites.png';
+image.src = "sprites.png";
 ```
 
 ## Specifications
diff --git a/files/zh-cn/web/api/crossoriginisolated/index.md b/files/zh-cn/web/api/crossoriginisolated/index.md
index a707f61b18b505..4d33121291f379 100644
--- a/files/zh-cn/web/api/crossoriginisolated/index.md
+++ b/files/zh-cn/web/api/crossoriginisolated/index.md
@@ -22,7 +22,7 @@ var myCrossOriginIsolated = self.crossOriginIsolated; // 或直接 crossOriginIs
 ## 示例
 
 ```js
-if(crossOriginIsolated) {
+if (crossOriginIsolated) {
   // post SharedArrayBuffer
 } else {
   // Do something else
diff --git a/files/zh-cn/web/api/crypto/getrandomvalues/index.md b/files/zh-cn/web/api/crypto/getrandomvalues/index.md
index a057cf8b5a69f8..60b09aea8fb252 100644
--- a/files/zh-cn/web/api/crypto/getrandomvalues/index.md
+++ b/files/zh-cn/web/api/crypto/getrandomvalues/index.md
@@ -35,7 +35,7 @@ window.crypto.getRandomValues(array);
 
 console.log("Your lucky numbers:");
 for (var i = 0; i < array.length; i++) {
-    console.log(array[i]);
+  console.log(array[i]);
 }
 ```
 
diff --git a/files/zh-cn/web/api/crypto_property/index.md b/files/zh-cn/web/api/crypto_property/index.md
index daeb0683590c89..6961a8db1b778a 100644
--- a/files/zh-cn/web/api/crypto_property/index.md
+++ b/files/zh-cn/web/api/crypto_property/index.md
@@ -35,9 +35,7 @@ globalThis.genRandomNumbers = () => {
 
 ```html
 <p id="myRandText">随机数为：</p>
-<button type="button" onClick="genRandomNumbers()">
-  生成 10 个随机数
-</button>
+<button type="button" onClick="genRandomNumbers()">生成 10 个随机数</button>
 ```
 
 ### 结果
diff --git a/files/zh-cn/web/api/cryptokey/index.md b/files/zh-cn/web/api/cryptokey/index.md
index c8893273a49078..c77a8dce12e1c1 100644
--- a/files/zh-cn/web/api/cryptokey/index.md
+++ b/files/zh-cn/web/api/cryptokey/index.md
@@ -12,6 +12,7 @@ slug: Web/API/CryptoKey
 ## 实例属性
 
 - `CryptoKey.type`
+
   - : 返回一个表示密钥类型的字符串，可使用以下值：
 
     - `"secret"`：为密钥（secret key），用于{{Glossary("Symmetric-key cryptography", "对称加密算法")}}。
@@ -19,12 +20,14 @@ slug: Web/API/CryptoKey
     - `"public"`：为{{Glossary("Public-key cryptography", "非对称加密算法")}}的 [`CryptoKeyPair`](/zh-CN/docs/Web/API/CryptoKeyPair) 的公钥（public key）部分。
 
 - `CryptoKey.extractable`
+
   - : 一个布尔值，表示原始信息是否能使用 [`SubtleCrypto.exportKey()`](/zh-CN/docs/Web/API/SubtleCrypto/exportKey) 或 [`SubtleCrypto.wrapKey()`](/zh-CN/docs/Web/API/SubtleCrypto/wrapKey) 导出。
 
     - `true`：密钥可以导出。
     - `false`：密钥不能导出。使用 [`exportKey()`](/zh-CN/docs/Web/API/SubtleCrypto/exportKey) 或 [`wrapKey()`](/zh-CN/docs/Web/API/SubtleCrypto/wrapKey) 方法来导出此密钥将会抛出异常。
 
 - `CryptoKey.algorithm`
+
   - : 一个描述可使用此密钥的算法及任何关联的额外参数的对象。
 
     - [`AesKeyGenParams`](/zh-CN/docs/Web/API/AesKeyGenParams) 如果算法是任意高级加密标准（AES）的变体。
@@ -33,6 +36,7 @@ slug: Web/API/CryptoKey
     - [`HmacKeyGenParams`](/zh-CN/docs/Web/API/HmacKeyGenParams) 如果算法是任意密钥散列消息认证码（HMAC）的变体。
 
 - `CryptoKey.usages`
+
   - : 一个字符串的{{jsxref("Array", "数组", "", 1)}}，指明密钥的用途。数组元素可能的值有：
 
     - `"encrypt"`：密钥可用于{{domxref("SubtleCrypto.encrypt()", "加密", "", 1)}}消息。
diff --git a/files/zh-cn/web/api/css/escape_static/index.md b/files/zh-cn/web/api/css/escape_static/index.md
index 3ee66eb42db2d9..c600bfe15173bc 100644
--- a/files/zh-cn/web/api/css/escape_static/index.md
+++ b/files/zh-cn/web/api/css/escape_static/index.md
@@ -24,11 +24,11 @@ escapedStr = CSS.escape(str);
 ### 基本结果
 
 ```js
-CSS.escape(".foo#bar")        // "\.foo\#bar"
-CSS.escape("()[]{}")          // "\(\)\[\]\\{\\}"
-CSS.escape('--a')             // "--a"
-CSS.escape(0)                 // "\30 ",  Unicode 代码点“0”是 30
-CSS.escape('\0')              // "\ufffd",  Unicode 替换字符
+CSS.escape(".foo#bar"); // "\.foo\#bar"
+CSS.escape("()[]{}"); // "\(\)\[\]\\{\\}"
+CSS.escape("--a"); // "--a"
+CSS.escape(0); // "\30 ",  Unicode 代码点“0”是 30
+CSS.escape("\0"); // "\ufffd",  Unicode 替换字符
 ```
 
 ### 在上下文使用
@@ -36,7 +36,7 @@ CSS.escape('\0')              // "\ufffd",  Unicode 替换字符
 要转义一个字符串作为选择器使用， `escape()`方法可以用于：
 
 ```js
-var element = document.querySelector('#' + CSS.escape(id) + ' > img');
+var element = document.querySelector("#" + CSS.escape(id) + " > img");
 ```
 
 `escape()`方法也可以用于转义字符串，它也转义了不严格需要转义的字符：
diff --git a/files/zh-cn/web/api/css/factory_functions_static/index.md b/files/zh-cn/web/api/css/factory_functions_static/index.md
index 71cfd02a300370..968c628c38c9af 100644
--- a/files/zh-cn/web/api/css/factory_functions_static/index.md
+++ b/files/zh-cn/web/api/css/factory_functions_static/index.md
@@ -64,16 +64,16 @@ CSS.fr(number);
 ```js
 let height = CSS.vmax(50);
 
-console.log( height );       // CSSUnitValue {value: 50, unit: "vmax"}
-console.log( height.value )  // 50
-console.log( height.unit )   // vmax
+console.log(height); // CSSUnitValue {value: 50, unit: "vmax"}
+console.log(height.value); // 50
+console.log(height.unit); // vmax
 ```
 
 在这个例子中，我们给元素设定 margin 属性值，使用 `CSS.px()` 函数：
 
 ```js
-myElement.attributeStyleMap.set('margin', CSS.px(40));
-let currentMargin = myElement.attributeStyleMap.get('margin');
+myElement.attributeStyleMap.set("margin", CSS.px(40));
+let currentMargin = myElement.attributeStyleMap.get("margin");
 console.log(currentMargin.value, currentMargin.unit); // 40, 'px'
 ```
 
diff --git a/files/zh-cn/web/api/css/supports_static/index.md b/files/zh-cn/web/api/css/supports_static/index.md
index 335f05c2815d0b..1fbda172fffcb3 100644
--- a/files/zh-cn/web/api/css/supports_static/index.md
+++ b/files/zh-cn/web/api/css/supports_static/index.md
@@ -34,11 +34,13 @@ boolValue = CSS.supports(supportCondition);
 ```js
 result = CSS.supports("text-decoration-style", "blink");
 result = CSS.supports("display", "flex");
-result = CSS.supports('--foo', 'red');
-result = CSS.supports('(--foo: red)');
+result = CSS.supports("--foo", "red");
+result = CSS.supports("(--foo: red)");
 result = CSS.supports("( transform-origin: 5% 5% )");
-result = CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or " +
-                      "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )" );
+result = CSS.supports(
+  "( transform-style: preserve ) or ( -moz-transform-style: preserve ) or " +
+    "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )",
+);
 //result is true or false
 ```
 
diff --git a/files/zh-cn/web/api/css_custom_highlight_api/index.md b/files/zh-cn/web/api/css_custom_highlight_api/index.md
index 3ca8c9fb92a5e5..7288189969c6b1 100644
--- a/files/zh-cn/web/api/css_custom_highlight_api/index.md
+++ b/files/zh-cn/web/api/css_custom_highlight_api/index.md
@@ -109,25 +109,25 @@ CSS.highlights.clear();
 下面的 HTML 代码片段定义了一个搜索框和有几段文字的文章：
 
 ```html
-<label>Search within text <input id="query" type="text"></label>
+<label>Search within text <input id="query" type="text" /></label>
 <article>
   <p>
     Maxime debitis hic, delectus perspiciatis laborum molestiae labore,
-    deleniti, quam consequatur iure veniam alias voluptas nisi quo.
-    Dolorem eaque alias, quo vel quas repudiandae architecto deserunt
-    quidem, sapiente laudantium nulla.
+    deleniti, quam consequatur iure veniam alias voluptas nisi quo. Dolorem
+    eaque alias, quo vel quas repudiandae architecto deserunt quidem, sapiente
+    laudantium nulla.
   </p>
   <p>
-    Maiores odit molestias, necessitatibus doloremque dolor illum
-    reprehenderit provident nostrum laboriosam iste, tempore perferendis!
-    Ab porro neque esse voluptas libero necessitatibus fugiat, ex, minus
-    atque deserunt veniam molestiae tempora? Vitae.
+    Maiores odit molestias, necessitatibus doloremque dolor illum reprehenderit
+    provident nostrum laboriosam iste, tempore perferendis! Ab porro neque esse
+    voluptas libero necessitatibus fugiat, ex, minus atque deserunt veniam
+    molestiae tempora? Vitae.
   </p>
   <p>
-    Dolorum facilis voluptate eaque eius similique ducimus dignissimos
-    assumenda quos architecto. Doloremque deleniti non exercitationem
-    rerum quam alias harum, nisi obcaecati corporis temporibus vero sapiente
-    voluptatum est quibusdam id ipsa.
+    Dolorum facilis voluptate eaque eius similique ducimus dignissimos assumenda
+    quos architecto. Doloremque deleniti non exercitationem rerum quam alias
+    harum, nisi obcaecati corporis temporibus vero sapiente voluptatum est
+    quibusdam id ipsa.
   </p>
 </article>
 ```
@@ -159,7 +159,7 @@ query.addEventListener("input", () => {
     return;
   }
 
-  // Clear the HighlightRegistry to remove the 
+  // Clear the HighlightRegistry to remove the
   // previous search results.
   CSS.highlights.clear();
 
@@ -185,7 +185,7 @@ query.addEventListener("input", () => {
         startPos = index + str.length;
       }
 
-      // Create a range object for each instance of 
+      // Create a range object for each instance of
       // str we found in the text node.
       return indices.map((index) => {
         const range = new Range();
diff --git a/files/zh-cn/web/api/css_font_loading_api/index.md b/files/zh-cn/web/api/css_font_loading_api/index.md
index 3b570877da3c51..6f8ffd5ffe8e9b 100644
--- a/files/zh-cn/web/api/css_font_loading_api/index.md
+++ b/files/zh-cn/web/api/css_font_loading_api/index.md
@@ -120,7 +120,7 @@ canvas.height = 75;
 ```js
 const bitterFontFace = new FontFace(
   "FontFamily Bitter",
-  "url(https://fonts.gstatic.com/s/bitter/v7/HEpP8tJXlWaYHimsnXgfCOvvDin1pK8aKteLpeZ5c0A.woff2)"
+  "url(https://fonts.gstatic.com/s/bitter/v7/HEpP8tJXlWaYHimsnXgfCOvvDin1pK8aKteLpeZ5c0A.woff2)",
 );
 document.fonts.add(bitterFontFace);
 log.textContent += `Bitter font: ${bitterFontFace.status}\n`; // > Bitter font: unloaded
@@ -139,7 +139,7 @@ bitterFontFace.load().then(
   },
   (err) => {
     console.error(err);
-  }
+  },
 );
 ```
 
@@ -176,7 +176,7 @@ const ctx = canvas.getContext("2d");
 
 const oxygenFontFace = new FontFace(
   "FontFamily Oxygen",
-  "url(https://fonts.gstatic.com/s/oxygen/v5/qBSyz106i5ud7wkBU-FrPevvDin1pK8aKteLpeZ5c0A.woff2)"
+  "url(https://fonts.gstatic.com/s/oxygen/v5/qBSyz106i5ud7wkBU-FrPevvDin1pK8aKteLpeZ5c0A.woff2)",
 );
 document.fonts.add(oxygenFontFace);
 log.textContent += `Oxygen status: ${oxygenFontFace.status}\n`;
@@ -194,7 +194,7 @@ document.fonts.load("36px FontFamily Oxygen").then(
   },
   (err) => {
     console.error(err);
-  }
+  },
 );
 ```
 
diff --git a/files/zh-cn/web/api/css_object_model/using_dynamic_styling_information/index.md b/files/zh-cn/web/api/css_object_model/using_dynamic_styling_information/index.md
index 2fea78af708464..adc45e24fddd7f 100644
--- a/files/zh-cn/web/api/css_object_model/using_dynamic_styling_information/index.md
+++ b/files/zh-cn/web/api/css_object_model/using_dynamic_styling_information/index.md
@@ -17,21 +17,22 @@ CSS 对象模型（CSSOM），是 DOM 的一部分，通过暴露一些接口，
 
 ```html
 <html>
-<head>
-<title>Modifying a stylesheet rule with CSSOM</title>
-<style type="text/css">
-body {
- background-color: red;
-}
-</style>
-<script type="text/javascript">
-var stylesheet = document.styleSheets[1];
-stylesheet.cssRules[0].style.backgroundColor="blue";
-</script>
-</head>
-<body>
-The stylesheet declaration for the body's background color is modified via JavaScript.
-</body>
+  <head>
+    <title>Modifying a stylesheet rule with CSSOM</title>
+    <style type="text/css">
+      body {
+        background-color: red;
+      }
+    </style>
+    <script type="text/javascript">
+      var stylesheet = document.styleSheets[1];
+      stylesheet.cssRules[0].style.backgroundColor = "blue";
+    </script>
+  </head>
+  <body>
+    The stylesheet declaration for the body's background color is modified via
+    JavaScript.
+  </body>
 </html>
 ```
 
@@ -51,39 +52,36 @@ The stylesheet declaration for the body's background color is modified via JavaS
 
 ```html
 <html>
-<head>
-<title>simple style example</title>
-
-<script type="text/javascript">
-
-function alterStyle(elem) {
-  elem.style.background = 'green';
-}
-
-function resetStyle(elemId) {
-  elem = document.getElementById(elemId);
-  elem.style.background = 'white';
-}
-</script>
-
-<style type="text/css">
-#p1 {
-  border: solid blue 2px;
-}
-</style>
-</head>
-
-<body>
-
-<!-- passes a reference to the element's object as parameter 'this'. -->
-<p id="p1" onclick="alterStyle(this);">
- Click here to change background color.
-</p>
-
-<!-- passes the 'p1' id of another element's style to modify. -->
-<button onclick="resetStyle('p1');">Reset background color</button>
-
-</body>
+  <head>
+    <title>simple style example</title>
+
+    <script type="text/javascript">
+      function alterStyle(elem) {
+        elem.style.background = "green";
+      }
+
+      function resetStyle(elemId) {
+        elem = document.getElementById(elemId);
+        elem.style.background = "white";
+      }
+    </script>
+
+    <style type="text/css">
+      #p1 {
+        border: solid blue 2px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <!-- passes a reference to the element's object as parameter 'this'. -->
+    <p id="p1" onclick="alterStyle(this);">
+      Click here to change background color.
+    </p>
+
+    <!-- passes the 'p1' id of another element's style to modify. -->
+    <button onclick="resetStyle('p1');">Reset background color</button>
+  </body>
 </html>
 ```
 
@@ -98,26 +96,26 @@ function resetStyle(elemId) {
 比这两个属性更重要的是使用 `style` 对象来给某个元素设置单独的样式属性。
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
- <head>
-  <title>style Property Example</title>
-  <link rel="StyleSheet" href="example.css" type="text/css">
-  <script type="text/javascript">
-    function stilo() {
-      document.getElementById('d').style.color = 'orange';
-    }
-    function resetStyle() {
-      document.getElementById('d').style.color = 'black';
-    }
-  </script>
- </head>
-
- <body>
-  <div id="d" class="thunder">Thunder</div>
-  <button onclick="stilo()">Click here to change text color</button>
-  <button onclick="resetStyle()">Reset text color</button>
- </body>
+  <head>
+    <title>style Property Example</title>
+    <link rel="StyleSheet" href="example.css" type="text/css" />
+    <script type="text/javascript">
+      function stilo() {
+        document.getElementById("d").style.color = "orange";
+      }
+      function resetStyle() {
+        document.getElementById("d").style.color = "black";
+      }
+    </script>
+  </head>
+
+  <body>
+    <div id="d" class="thunder">Thunder</div>
+    <button onclick="stilo()">Click here to change text color</button>
+    <button onclick="resetStyle()">Reset text color</button>
+  </body>
 </html>
 ```
 
@@ -130,8 +128,8 @@ style 的 media 和 type 给不给出都可以。
 注意，你也可以通过获得元素的引用，然后使用它的 [`setAttribute`](/zh-CN/DOM/element.setAttribute) 方法，指定 CSS 属性和值，来改变该元素的样式。
 
 ```js
-var el = document.getElementById('some-element');
-el.setAttribute('style', 'background-color:darkblue;');
+var el = document.getElementById("some-element");
+el.setAttribute("style", "background-color:darkblue;");
 ```
 
 但请注意，`setAttribute` 会移除该元素样式对象中已经定义的其他样式属性。如果上面的 `some-element` 有一个行内样式属性：`style="font-size: 18px"`，其值将会因为使用了 `setAttribute` 方法而被移除。
diff --git a/files/zh-cn/web/api/cssrule/csstext/index.md b/files/zh-cn/web/api/cssrule/csstext/index.md
index a5a3cbc516a27c..1e2d20f41842f5 100644
--- a/files/zh-cn/web/api/cssrule/csstext/index.md
+++ b/files/zh-cn/web/api/cssrule/csstext/index.md
@@ -17,7 +17,9 @@ string = cssRule.cssText
 
 ```html
 <style>
-body { background-color: darkblue; }
+  body {
+    background-color: darkblue;
+  }
 </style>
 <script>
   var stylesheet = document.styleSheets[0];
diff --git a/files/zh-cn/web/api/cssstyledeclaration/getpropertycssvalue/index.md b/files/zh-cn/web/api/cssstyledeclaration/getpropertycssvalue/index.md
index 009e961e3ddf77..e1441a1c328b1f 100644
--- a/files/zh-cn/web/api/cssstyledeclaration/getpropertycssvalue/index.md
+++ b/files/zh-cn/web/api/cssstyledeclaration/getpropertycssvalue/index.md
@@ -29,7 +29,7 @@ The following JavaScript code gets an object containing the computed RGB values
 
 ```js
 var style = window.getComputedStyle(elem, null);
-var rgbObj = style.getPropertyCSSValue('color').getRGBColorValue();
+var rgbObj = style.getPropertyCSSValue("color").getRGBColorValue();
 ```
 
 ## 规范
diff --git a/files/zh-cn/web/api/cssstyledeclaration/getpropertypriority/index.md b/files/zh-cn/web/api/cssstyledeclaration/getpropertypriority/index.md
index 6102fea9a477aa..51f4bf0340b154 100644
--- a/files/zh-cn/web/api/cssstyledeclaration/getpropertypriority/index.md
+++ b/files/zh-cn/web/api/cssstyledeclaration/getpropertypriority/index.md
@@ -27,7 +27,7 @@ var priority = style.getPropertyPriority(property);
 
 ```js
 var declaration = document.styleSheets[0].cssRules[0].style;
-var isImportant = declaration.getPropertyPriority('margin') === 'important';
+var isImportant = declaration.getPropertyPriority("margin") === "important";
 ```
 
 ## 规范
diff --git a/files/zh-cn/web/api/cssstyledeclaration/getpropertyvalue/index.md b/files/zh-cn/web/api/cssstyledeclaration/getpropertyvalue/index.md
index 38eaf51ba18d02..1d8d63fcd293c5 100644
--- a/files/zh-cn/web/api/cssstyledeclaration/getpropertyvalue/index.md
+++ b/files/zh-cn/web/api/cssstyledeclaration/getpropertyvalue/index.md
@@ -27,7 +27,7 @@ var value = style.getPropertyValue(property);
 
 ```js
 var declaration = document.styleSheets[0].cssRules[0].style;
-var value = declaration.getPropertyValue('margin'); // "1px 2px"
+var value = declaration.getPropertyValue("margin"); // "1px 2px"
 ```
 
 ## 规范
diff --git a/files/zh-cn/web/api/cssstyledeclaration/index.md b/files/zh-cn/web/api/cssstyledeclaration/index.md
index 6074470517d67a..3abb3250ddab96 100644
--- a/files/zh-cn/web/api/cssstyledeclaration/index.md
+++ b/files/zh-cn/web/api/cssstyledeclaration/index.md
@@ -44,7 +44,7 @@ slug: Web/API/CSSStyleDeclaration
 var styleObj = document.styleSheets[0].cssRules[0].style;
 console.log(styleObj.cssText);
 
-for (var i = styleObj.length; i--;) {
+for (var i = styleObj.length; i--; ) {
   var nameString = styleObj[i];
   styleObj.removeProperty(nameString);
 }
diff --git a/files/zh-cn/web/api/cssstyledeclaration/item/index.md b/files/zh-cn/web/api/cssstyledeclaration/item/index.md
index a93fbd54064097..94184fd849660e 100644
--- a/files/zh-cn/web/api/cssstyledeclaration/item/index.md
+++ b/files/zh-cn/web/api/cssstyledeclaration/item/index.md
@@ -30,7 +30,7 @@ var propertyName = style[index];
 ## 范例
 
 ```js
-var style = document.getElementById('div1').style;
+var style = document.getElementById("div1").style;
 var propertyName = style.item(1); // or simply style[1] - returns the second style listed
 ```
 
diff --git a/files/zh-cn/web/api/cssstyledeclaration/length/index.md b/files/zh-cn/web/api/cssstyledeclaration/length/index.md
index 4867a390b03593..560342376de00e 100644
--- a/files/zh-cn/web/api/cssstyledeclaration/length/index.md
+++ b/files/zh-cn/web/api/cssstyledeclaration/length/index.md
@@ -22,7 +22,9 @@ var num = styles.length;
 获取下面 HTML 元素明确设置过的属性个数：
 
 ```html
-<div id="div1" style="margin: 0 10px; background-color: #CA1; font-family: monospace"></div>
+<div
+  id="div1"
+  style="margin: 0 10px; background-color: #CA1; font-family: monospace"></div>
 ```
 
 JavaScript 代码：
diff --git a/files/zh-cn/web/api/cssstyledeclaration/removeproperty/index.md b/files/zh-cn/web/api/cssstyledeclaration/removeproperty/index.md
index 49ab3b0f37656e..2abe4749500293 100644
--- a/files/zh-cn/web/api/cssstyledeclaration/removeproperty/index.md
+++ b/files/zh-cn/web/api/cssstyledeclaration/removeproperty/index.md
@@ -31,7 +31,7 @@ var oldValue = style.removeProperty(property);
 
 ```js
 var declaration = document.styleSheets[0].rules[0].style;
-var oldValue = declaration.removeProperty('margin');
+var oldValue = declaration.removeProperty("margin");
 ```
 
 ## Specifications
diff --git a/files/zh-cn/web/api/cssstyledeclaration/setproperty/index.md b/files/zh-cn/web/api/cssstyledeclaration/setproperty/index.md
index ffe3bd29999539..74d4f4d4c436fb 100644
--- a/files/zh-cn/web/api/cssstyledeclaration/setproperty/index.md
+++ b/files/zh-cn/web/api/cssstyledeclaration/setproperty/index.md
@@ -42,7 +42,7 @@ style.cssPropertyName = 'value';
 
 ```js
 var declaration = document.styleSheets[0].rules[0].style;
-declaration.setProperty('margin', '1px 2px');
+declaration.setProperty("margin", "1px 2px");
 // Equivalent to:
 // declaration.margin = '1px 2px';
 ```
diff --git a/files/zh-cn/web/api/cssstylesheet/index.md b/files/zh-cn/web/api/cssstylesheet/index.md
index 3d6e893a06ca68..bb5bc5dee0dec4 100644
--- a/files/zh-cn/web/api/cssstylesheet/index.md
+++ b/files/zh-cn/web/api/cssstylesheet/index.md
@@ -12,7 +12,8 @@ slug: Web/API/CSSStyleSheet
 例如，{{domxref("CSSStyleRule")}} 对象中的一条规则可能包含这样的样式：
 
 ```css
-h1, h2 {
+h1,
+h2 {
   font-size: 16pt;
 }
 ```
@@ -79,13 +80,13 @@ _这些遗留方法是很久以前由微软提出的，应尽量避免使用，
 
 以下是将样式表链接到文档的一些方式（可能不完整）：
 
-| 样式表与文档链接的原因                                                           | 是否出现在`document. styleSheets` 列表中 | 获取样式表对象所在的元素/规则                                        | 所在对象的接口                                                                                                                  | 从所在对象获取 CSSStyleSheet 对象                                        |
-| -------------------------------------------------------------------------------- | ---------------------------------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
-| 文档中的{{HTMLElement("style")}} 和{{HTMLElement("link")}} 元素 | 是                                       | {{domxref("StyleSheet.ownerNode", ".ownerNode")}}     | {{domxref("HTMLLinkElement")}}, {{domxref("HTMLStyleElement")}}, 或 {{domxref("SVGStyleElement")}} | {{domxref("LinkStyle.sheet", ".sheet")}}                     |
-| 使用 CSS {{cssxref("@import")}} 从其他样式表导入并应用到文档的规则         | 是                                       | {{domxref("CSSStyleSheet.ownerRule", ".ownerRule")}} | {{domxref("CSSImportRule")}}                                                                                            | {{domxref("CSSImportRule.styleSheet", ".styleSheet")}} |
-| `<?xml-stylesheet ?>` processing instruction in the (non-HTML) document          | 是                                       | {{domxref("StyleSheet.ownerNode", ".ownerNode")}}     | {{domxref("ProcessingInstruction")}}                                                                                | {{domxref("LinkStyle.sheet", ".sheet")}}                     |
-| HTTP 链接头部                                                                    | 是                                       | _N/A_                                                                | N/A                                                                                                                             | N/A                                                                      |
-| 用户代理（默认）样式表                                                           | 否                                       | N/A                                                                  | N/A                                                                                                                             | N/A                                                                      |
+| 样式表与文档链接的原因                                                  | 是否出现在`document. styleSheets` 列表中 | 获取样式表对象所在的元素/规则                        | 所在对象的接口                                                                                     | 从所在对象获取 CSSStyleSheet 对象                      |
+| ----------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
+| 文档中的{{HTMLElement("style")}} 和{{HTMLElement("link")}} 元素         | 是                                       | {{domxref("StyleSheet.ownerNode", ".ownerNode")}}    | {{domxref("HTMLLinkElement")}}, {{domxref("HTMLStyleElement")}}, 或 {{domxref("SVGStyleElement")}} | {{domxref("LinkStyle.sheet", ".sheet")}}               |
+| 使用 CSS {{cssxref("@import")}} 从其他样式表导入并应用到文档的规则      | 是                                       | {{domxref("CSSStyleSheet.ownerRule", ".ownerRule")}} | {{domxref("CSSImportRule")}}                                                                       | {{domxref("CSSImportRule.styleSheet", ".styleSheet")}} |
+| `<?xml-stylesheet ?>` processing instruction in the (non-HTML) document | 是                                       | {{domxref("StyleSheet.ownerNode", ".ownerNode")}}    | {{domxref("ProcessingInstruction")}}                                                               | {{domxref("LinkStyle.sheet", ".sheet")}}               |
+| HTTP 链接头部                                                           | 是                                       | _N/A_                                                | N/A                                                                                                | N/A                                                    |
+| 用户代理（默认）样式表                                                  | 否                                       | N/A                                                  | N/A                                                                                                | N/A                                                    |
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/cssstylesheet/insertrule/index.md b/files/zh-cn/web/api/cssstylesheet/insertrule/index.md
index f718d7a4868113..0fa1cfb9b1481f 100644
--- a/files/zh-cn/web/api/cssstylesheet/insertrule/index.md
+++ b/files/zh-cn/web/api/cssstylesheet/insertrule/index.md
@@ -48,7 +48,7 @@ CSS 中存在一些直观和不是太直观能感受到的限制规则影响着
 下面的代码片段将在样式表 `myStyle` 的顶部插入一条新规则：
 
 ```js
- myStyle.insertRule("#blanc { color: white }", 0);
+myStyle.insertRule("#blanc { color: white }", 0);
 ```
 
 ### 实现一个添加样式表规则的函数
@@ -71,31 +71,36 @@ addStylesheetRules([
   ]
 ]);
  */
-function addStylesheetRules (decls) {
-    var style = document.createElement('style');
-    document.getElementsByTagName('head')[0].appendChild(style);
-    if (!window.createPopup) { /* For Safari */
-       style.appendChild(document.createTextNode(''));
+function addStylesheetRules(decls) {
+  var style = document.createElement("style");
+  document.getElementsByTagName("head")[0].appendChild(style);
+  if (!window.createPopup) {
+    /* For Safari */
+    style.appendChild(document.createTextNode(""));
+  }
+  var s = document.styleSheets[document.styleSheets.length - 1];
+  for (var i = 0, dl = decls.length; i < dl; i++) {
+    var j = 1,
+      decl = decls[i],
+      selector = decl[0],
+      rulesStr = "";
+    if (Object.prototype.toString.call(decl[1][0]) === "[object Array]") {
+      decl = decl[1];
+      j = 0;
+    }
+    for (var rl = decl.length; j < rl; j++) {
+      var rule = decl[j];
+      rulesStr +=
+        rule[0] + ":" + rule[1] + (rule[2] ? " !important" : "") + ";\n";
     }
-    var s = document.styleSheets[document.styleSheets.length - 1];
-    for (var i=0, dl = decls.length; i < dl; i++) {
-        var j = 1, decl = decls[i], selector = decl[0], rulesStr = '';
-        if (Object.prototype.toString.call(decl[1][0]) === '[object Array]') {
-            decl = decl[1];
-            j = 0;
-        }
-        for (var rl=decl.length; j < rl; j++) {
-            var rule = decl[j];
-            rulesStr += rule[0] + ':' + rule[1] + (rule[2] ? ' !important' : '') + ';\n';
-        }
 
-        if (s.insertRule) {
-            s.insertRule(selector + '{' + rulesStr + '}', s.cssRules.length);
-        }
-        else { /* IE */
-            s.addRule(selector, rulesStr, -1);
-        }
+    if (s.insertRule) {
+      s.insertRule(selector + "{" + rulesStr + "}", s.cssRules.length);
+    } else {
+      /* IE */
+      s.addRule(selector, rulesStr, -1);
     }
+  }
 }
 ```
 
diff --git a/files/zh-cn/web/api/cssvalue/index.md b/files/zh-cn/web/api/cssvalue/index.md
index 826dec511ece36..377504aa71733e 100644
--- a/files/zh-cn/web/api/cssvalue/index.md
+++ b/files/zh-cn/web/api/cssvalue/index.md
@@ -13,12 +13,12 @@ slug: Web/API/CSSValue
 
   - : 一个 `unsigned short` 类型的数据用来定义了值的类型。可取值为：
 
-    | 值                    | 说明                                                                                                                                                   |
-    | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-    | `CSS_CUSTOM`          | 该值是一个自定义值。                                                                                                                                   |
-    | `CSS_INHERIT`         | 该值是继承来的值，并且它的 `cssText` 属性值中包含`"inherit"`。                                                                                         |
+    | 值                    | 说明                                                                                                                                       |
+    | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+    | `CSS_CUSTOM`          | 该值是一个自定义值。                                                                                                                       |
+    | `CSS_INHERIT`         | 该值是继承来的值，并且它的 `cssText` 属性值中包含`"inherit"`。                                                                             |
     | `CSS_PRIMITIVE_VALUE` | 该值是一个原始值，并且是 {{domxref("CSSPrimitiveValue")}} 接口的一个实例，可以通过绑定特殊的构造方法在这个 CSSValue 接口的这个实例来获得。 |
-    | `CSS_VALUE_LIST`      | 该值是一个 `CSSValue` 列表，是{{domxref("CSSValueList")}} 接口的一个实例，可以通过绑定特殊的构造方法在这个 CSSValue 接口的这个实例来获得。    |
+    | `CSS_VALUE_LIST`      | 该值是一个 `CSSValue` 列表，是{{domxref("CSSValueList")}} 接口的一个实例，可以通过绑定特殊的构造方法在这个 CSSValue 接口的这个实例来获得。 |
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/customelementregistry/define/index.md b/files/zh-cn/web/api/customelementregistry/define/index.md
index f6feaa97914ad3..4cc113b11f8528 100644
--- a/files/zh-cn/web/api/customelementregistry/define/index.md
+++ b/files/zh-cn/web/api/customelementregistry/define/index.md
@@ -48,62 +48,60 @@ class PopUpInfo extends HTMLElement {
     super();
 
     // Create a shadow root
-    var shadow = this.attachShadow({mode: 'open'});
+    var shadow = this.attachShadow({ mode: "open" });
 
     // Create spans
-    var wrapper = document.createElement('span');
-    wrapper.setAttribute('class','wrapper');
-    var icon = document.createElement('span');
-    icon.setAttribute('class','icon');
-    icon.setAttribute('tabindex', 0);
-    var info = document.createElement('span');
-    info.setAttribute('class','info');
+    var wrapper = document.createElement("span");
+    wrapper.setAttribute("class", "wrapper");
+    var icon = document.createElement("span");
+    icon.setAttribute("class", "icon");
+    icon.setAttribute("tabindex", 0);
+    var info = document.createElement("span");
+    info.setAttribute("class", "info");
 
     // Take attribute content and put it inside the info span
-    var text = this.getAttribute('text');
+    var text = this.getAttribute("text");
     info.textContent = text;
 
     // Insert icon
     var imgUrl;
-    if(this.hasAttribute('img')) {
-      imgUrl = this.getAttribute('img');
+    if (this.hasAttribute("img")) {
+      imgUrl = this.getAttribute("img");
     } else {
-      imgUrl = 'img/default.png';
+      imgUrl = "img/default.png";
     }
-    var img = document.createElement('img');
+    var img = document.createElement("img");
     img.src = imgUrl;
     icon.appendChild(img);
 
     // Create some CSS to apply to the shadow dom
-    var style = document.createElement('style');
-
-    style.textContent = '.wrapper {' +
-                           'position: relative;' +
-                        '}' +
-
-                         '.info {' +
-                            'font-size: 0.8rem;' +
-                            'width: 200px;' +
-                            'display: inline-block;' +
-                            'border: 1px solid black;' +
-                            'padding: 10px;' +
-                            'background: white;' +
-                            'border-radius: 10px;' +
-                            'opacity: 0;' +
-                            'transition: 0.6s all;' +
-                            'position: absolute;' +
-                            'bottom: 20px;' +
-                            'left: 10px;' +
-                            'z-index: 3;' +
-                          '}' +
-
-                          'img {' +
-                            'width: 1.2rem' +
-                          '}' +
-
-                          '.icon:hover + .info, .icon:focus + .info {' +
-                            'opacity: 1;' +
-                          '}';
+    var style = document.createElement("style");
+
+    style.textContent =
+      ".wrapper {" +
+      "position: relative;" +
+      "}" +
+      ".info {" +
+      "font-size: 0.8rem;" +
+      "width: 200px;" +
+      "display: inline-block;" +
+      "border: 1px solid black;" +
+      "padding: 10px;" +
+      "background: white;" +
+      "border-radius: 10px;" +
+      "opacity: 0;" +
+      "transition: 0.6s all;" +
+      "position: absolute;" +
+      "bottom: 20px;" +
+      "left: 10px;" +
+      "z-index: 3;" +
+      "}" +
+      "img {" +
+      "width: 1.2rem" +
+      "}" +
+      ".icon:hover + .info, .icon:focus + .info {" +
+      "opacity: 1;" +
+      "}";
 
     // attach the created elements to the shadow dom
 
@@ -115,13 +113,15 @@ class PopUpInfo extends HTMLElement {
 }
 
 // Define the new element
-customElements.define('popup-info', PopUpInfo);
+customElements.define("popup-info", PopUpInfo);
 ```
 
 ```html
-<popup-info img="img/alt.png" text="Your card validation code (CVC) is an extra
+<popup-info
+  img="img/alt.png"
+  text="Your card validation code (CVC) is an extra
                                     security feature — it is the last 3 or 4
-                                    numbers on the back of your card.">
+                                    numbers on the back of your card."></popup-info>
 ```
 
 > **备注：** 自主自定义元素的构造函数必须扩展{{domxref("HTMLElement")}}。
@@ -140,35 +140,33 @@ class WordCount extends HTMLParagraphElement {
     // count words in element's parent element
     var wcParent = this.parentNode;
 
-    function countWords(node){
-      var text = node.innerText || node.textContent
+    function countWords(node) {
+      var text = node.innerText || node.textContent;
       return text.split(/\s+/g).length;
     }
 
-    var count = 'Words: ' + countWords(wcParent);
+    var count = "Words: " + countWords(wcParent);
 
     // Create a shadow root
-    var shadow = this.attachShadow({mode: 'open'});
+    var shadow = this.attachShadow({ mode: "open" });
 
     // Create text node and add word count to it
-    var text = document.createElement('span');
+    var text = document.createElement("span");
     text.textContent = count;
 
     // Append it to the shadow root
     shadow.appendChild(text);
 
-
     // Update count when element content changes
-    setInterval(function() {
-      var count = 'Words: ' + countWords(wcParent);
+    setInterval(function () {
+      var count = "Words: " + countWords(wcParent);
       text.textContent = count;
-    }, 200)
-
+    }, 200);
   }
 }
 
 // Define the new element
-customElements.define('word-count', WordCount, { extends: 'p' });
+customElements.define("word-count", WordCount, { extends: "p" });
 ```
 
 ```html
diff --git a/files/zh-cn/web/api/customelementregistry/get/index.md b/files/zh-cn/web/api/customelementregistry/get/index.md
index adea09714ddd00..a6708e2dd61b2b 100644
--- a/files/zh-cn/web/api/customelementregistry/get/index.md
+++ b/files/zh-cn/web/api/customelementregistry/get/index.md
@@ -25,20 +25,23 @@ constructor = customElements.get(name);
 ## 例子
 
 ```js
-customElements.define('my-paragraph',
+customElements.define(
+  "my-paragraph",
   class extends HTMLElement {
     constructor() {
       super();
-      let template = document.getElementById('my-paragraph');
+      let template = document.getElementById("my-paragraph");
       let templateContent = template.content;
 
-      const shadowRoot = this.attachShadow({mode: 'open'})
-        .appendChild(templateContent.cloneNode(true));
-  }
-})
+      const shadowRoot = this.attachShadow({ mode: "open" }).appendChild(
+        templateContent.cloneNode(true),
+      );
+    }
+  },
+);
 
 // Return a reference to the my-paragraph constructor
-let ctor = customElements.get('my-paragraph');
+let ctor = customElements.get("my-paragraph");
 ```
 
 ## 规范
diff --git a/files/zh-cn/web/api/customelementregistry/index.md b/files/zh-cn/web/api/customelementregistry/index.md
index 6a7a2c7fd291a2..b5bcc96a1c94cd 100644
--- a/files/zh-cn/web/api/customelementregistry/index.md
+++ b/files/zh-cn/web/api/customelementregistry/index.md
@@ -32,35 +32,33 @@ class WordCount extends HTMLParagraphElement {
     // count words in element's parent element
     var wcParent = this.parentNode;
 
-    function countWords(node){
-      var text = node.innerText || node.textContent
+    function countWords(node) {
+      var text = node.innerText || node.textContent;
       return text.split(/\s+/g).length;
     }
 
-    var count = 'Words: ' + countWords(wcParent);
+    var count = "Words: " + countWords(wcParent);
 
     // Create a shadow root
-    var shadow = this.attachShadow({mode: 'open'});
+    var shadow = this.attachShadow({ mode: "open" });
 
     // Create text node and add word count to it
-    var text = document.createElement('span');
+    var text = document.createElement("span");
     text.textContent = count;
 
     // Append it to the shadow root
     shadow.appendChild(text);
 
-
     // Update count when element content changes
-    setInterval(function() {
-      var count = 'Words: ' + countWords(wcParent);
+    setInterval(function () {
+      var count = "Words: " + countWords(wcParent);
       text.textContent = count;
-    }, 200)
-
+    }, 200);
   }
 }
 
 // Define the new element
-customElements.define('word-count', WordCount, { extends: 'p' });
+customElements.define("word-count", WordCount, { extends: "p" });
 ```
 
 ## 规范
diff --git a/files/zh-cn/web/api/customelementregistry/upgrade/index.md b/files/zh-cn/web/api/customelementregistry/upgrade/index.md
index 239fd60679aaa8..7224314cd70f06 100644
--- a/files/zh-cn/web/api/customelementregistry/upgrade/index.md
+++ b/files/zh-cn/web/api/customelementregistry/upgrade/index.md
@@ -35,7 +35,7 @@ customElements.define("spider-man", SpiderMan);
 console.assert(!(el instanceof SpiderMan)); // not yet upgraded
 
 customElements.upgrade(el);
-console.assert(el instanceof SpiderMan);    // upgraded!
+console.assert(el instanceof SpiderMan); // upgraded!
 ```
 
 ## 规范
diff --git a/files/zh-cn/web/api/customelementregistry/whendefined/index.md b/files/zh-cn/web/api/customelementregistry/whendefined/index.md
index cae1279769da24..7af85b8606256c 100644
--- a/files/zh-cn/web/api/customelementregistry/whendefined/index.md
+++ b/files/zh-cn/web/api/customelementregistry/whendefined/index.md
@@ -38,20 +38,20 @@ Promise<> customElements.whenDefined(name);
   <nav-menu>
     <menu-item>Item 1</menu-item>
     <menu-item>Item 2</menu-item>
-     ...
+    ...
     <menu-item>Item N</menu-item>
   </nav-menu>
 </nav>
 ```
 
 ```js
-const container = document.getElementById('menu-container');
-const placeholder = container.querySelector('.menu-placeholder');
+const container = document.getElementById("menu-container");
+const placeholder = container.querySelector(".menu-placeholder");
 // Fetch all the children of menu that are not yet defined.
-const undefinedElements = container.querySelectorAll(':not(:defined)');
+const undefinedElements = container.querySelectorAll(":not(:defined)");
 
-const promises = [...undefinedElements].map(
-  button => customElements.whenDefined(button.localName)
+const promises = [...undefinedElements].map((button) =>
+  customElements.whenDefined(button.localName),
 );
 
 // Wait for all the children to be upgraded,
diff --git a/files/zh-cn/web/api/customevent/customevent/index.md b/files/zh-cn/web/api/customevent/customevent/index.md
index 1018b034637af4..fb8b22eab2f63b 100644
--- a/files/zh-cn/web/api/customevent/customevent/index.md
+++ b/files/zh-cn/web/api/customevent/customevent/index.md
@@ -33,13 +33,15 @@ The **`CustomEvent()`** constructor creates a new {{domxref("CustomEvent")}}.
 
 ```js
 // add an appropriate event listener
-obj.addEventListener("cat", function(e) { process(e.detail) });
+obj.addEventListener("cat", function (e) {
+  process(e.detail);
+});
 
 // create and dispatch the event
 var event = new CustomEvent("cat", {
   detail: {
-    hazcheeseburger: true
-  }
+    hazcheeseburger: true,
+  },
 });
 obj.dispatchEvent(event);
 ```
@@ -57,26 +59,35 @@ obj.dispatchEvent(event);
 You can polyfill the `CustomEvent()` constructor functionality in Internet Explorer 9 and higher with the following code:
 
 ```js
-(function(){
-    try{
-        // a : While a window.CustomEvent object exists, it cannot be called as a constructor.
-        // b : There is no window.CustomEvent object
-        new window.CustomEvent('T');
-    }catch(e){
-        var CustomEvent = function(event, params){
-            params = params || { bubbles: false, cancelable: false, detail: undefined };
-
-            var evt = document.createEvent('CustomEvent');
-
-            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
-
-            return evt;
-        };
-
-        CustomEvent.prototype = window.Event.prototype;
-
-        window.CustomEvent = CustomEvent;
-    }
+(function () {
+  try {
+    // a : While a window.CustomEvent object exists, it cannot be called as a constructor.
+    // b : There is no window.CustomEvent object
+    new window.CustomEvent("T");
+  } catch (e) {
+    var CustomEvent = function (event, params) {
+      params = params || {
+        bubbles: false,
+        cancelable: false,
+        detail: undefined,
+      };
+
+      var evt = document.createEvent("CustomEvent");
+
+      evt.initCustomEvent(
+        event,
+        params.bubbles,
+        params.cancelable,
+        params.detail,
+      );
+
+      return evt;
+    };
+
+    CustomEvent.prototype = window.Event.prototype;
+
+    window.CustomEvent = CustomEvent;
+  }
 })();
 ```
 
diff --git a/files/zh-cn/web/api/customevent/detail/index.md b/files/zh-cn/web/api/customevent/detail/index.md
index fcb92309d6c47a..b883bb09487ed4 100644
--- a/files/zh-cn/web/api/customevent/detail/index.md
+++ b/files/zh-cn/web/api/customevent/detail/index.md
@@ -23,13 +23,15 @@ slug: Web/API/CustomEvent/detail
 
 ```js
 // add an appropriate event listener
-obj.addEventListener("cat", function(e) { process(e.detail) });
+obj.addEventListener("cat", function (e) {
+  process(e.detail);
+});
 
 // create and dispatch the event
 let event = new CustomEvent("cat", {
   detail: {
-    hazcheeseburger: true
-  }
+    hazcheeseburger: true,
+  },
 });
 obj.dispatchEvent(event);
 
diff --git a/files/zh-cn/web/api/datatransfer/cleardata/index.md b/files/zh-cn/web/api/datatransfer/cleardata/index.md
index ea3e729145b442..fdd4730ec51191 100644
--- a/files/zh-cn/web/api/datatransfer/cleardata/index.md
+++ b/files/zh-cn/web/api/datatransfer/cleardata/index.md
@@ -32,7 +32,8 @@ DataTransfer.clearData([format]);
 
 ```html
 <span class="tweaked" id="source" draggable="true">
-  Select this element, drag it to the Drop Zone and then release the selection to move the element.
+  Select this element, drag it to the Drop Zone and then release the selection
+  to move the element.
 </span>
 <span class="tweaked" id="target">Drop Zone</span>
 <div>Status: <span id="status">Drag to start</span></div>
@@ -59,68 +60,69 @@ span.tweaked {
 ### JavaScript
 
 ```js
-window.addEventListener('DOMContentLoaded', function () {
+window.addEventListener("DOMContentLoaded", function () {
   // Select HTML elements
-  var draggable = document.getElementById('source');
-  var dropable = document.getElementById('target');
-  var status = document.getElementById('status');
-  var data = document.getElementById('data');
+  var draggable = document.getElementById("source");
+  var dropable = document.getElementById("target");
+  var status = document.getElementById("status");
+  var data = document.getElementById("data");
   var dropped = false;
   // Register event handlers
-  draggable.addEventListener('dragstart', dragStartHandler);
-  draggable.addEventListener('dragend', dragEndHandler);
-  dropable.addEventListener('dragover', dragOverHandler);
-  dropable.addEventListener('dragleave', dragLeaveHandler);
-  dropable.addEventListener('drop', dropHandler);
-  function dragStartHandler (event) {
-    status.textContent = 'Drag in process';
+  draggable.addEventListener("dragstart", dragStartHandler);
+  draggable.addEventListener("dragend", dragEndHandler);
+  dropable.addEventListener("dragover", dragOverHandler);
+  dropable.addEventListener("dragleave", dragLeaveHandler);
+  dropable.addEventListener("drop", dropHandler);
+  function dragStartHandler(event) {
+    status.textContent = "Drag in process";
     // Change target element's border to signify drag has started
-    event.currentTarget.style.border = '1px dashed blue';
+    event.currentTarget.style.border = "1px dashed blue";
     // Start by clearing existing clipboards; this will affect all types since we
     // don't give a specific type.
     event.dataTransfer.clearData();
     // Set the drag's format and data (use event target's id for data)
-    event.dataTransfer.setData('text/plain', event.target.id);
-    data.textContent = event.dataTransfer.getData('text/plain');
+    event.dataTransfer.setData("text/plain", event.target.id);
+    data.textContent = event.dataTransfer.getData("text/plain");
   }
-  function dragEndHandler (event) {
+  function dragEndHandler(event) {
     if (!dropped) {
-      status.textContent = 'Drag canceled';
+      status.textContent = "Drag canceled";
     }
-    data.textContent = event.dataTransfer.getData('text/plain') || 'empty';
+    data.textContent = event.dataTransfer.getData("text/plain") || "empty";
     // Change border to signify drag is no longer in process
-    event.currentTarget.style.border = '1px solid black';
+    event.currentTarget.style.border = "1px solid black";
     if (dropped) {
       // Remove all event listeners
-      draggable.removeEventListener('dragstart', dragStartHandler);
-      draggable.removeEventListener('dragend', dragEndHandler);
-      dropable.removeEventListener('dragover', dragOverHandler);
-      dropable.removeEventListener('dragleave', dragLeaveHandler);
-      dropable.removeEventListener('drop', dropHandler);
+      draggable.removeEventListener("dragstart", dragStartHandler);
+      draggable.removeEventListener("dragend", dragEndHandler);
+      dropable.removeEventListener("dragover", dragOverHandler);
+      dropable.removeEventListener("dragleave", dragLeaveHandler);
+      dropable.removeEventListener("drop", dropHandler);
     }
   }
-  function dragOverHandler (event) {
-    status.textContent = 'Drop available';
+  function dragOverHandler(event) {
+    status.textContent = "Drop available";
     event.preventDefault();
   }
-  function dragLeaveHandler (event) {
-    status.textContent = 'Drag in process (drop was available)';
+  function dragLeaveHandler(event) {
+    status.textContent = "Drag in process (drop was available)";
     event.preventDefault();
   }
-  function dropHandler (event) {
+  function dropHandler(event) {
     dropped = true;
-    status.textContent = 'Drop done';
+    status.textContent = "Drop done";
     event.preventDefault();
     // Get data linked to event format « text »
-    var _data = event.dataTransfer.getData('text/plain');
+    var _data = event.dataTransfer.getData("text/plain");
     var element = document.getElementById(_data);
     // Append drag source element to event's target element
     event.target.appendChild(element);
     // Change CSS styles and displayed text
-    element.style.cssText = 'border: 1px solid black;display: block; color: red';
+    element.style.cssText =
+      "border: 1px solid black;display: block; color: red";
     element.textContent = "I'm in the Drop Zone!";
   }
-})
+});
 ```
 
 {{EmbedLiveSample('示例', 300, 250)}}