From 32583616be82151dbba2b4b761a64cb39086a7a2 Mon Sep 17 00:00:00 2001
From: Jason Lam <jasonlamv-t@hotmail.com>
Date: Fri, 28 Jul 2023 18:41:08 +0800
Subject: [PATCH 01/13] [zh-cn]: Update translation of String.padStart()
 (#14634)

Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 .../global_objects/string/padstart/index.md   | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/padstart/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/padstart/index.md
index 77b0a60ddd119e..f33b93dc6540c6 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/padstart/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/padstart/index.md
@@ -5,13 +5,13 @@ slug: Web/JavaScript/Reference/Global_Objects/String/padStart
 
 {{JSRef}}
 
-**`padStart()`** 方法用另一个字符串填充当前字符串（如果需要的话，会重复多次），以便产生的字符串达到给定的长度。从当前字符串的左侧开始填充。
+**`padStart()`** 方法用另一个字符串填充当前字符串（如果需要会重复填充），直到达到给定的长度。填充是从当前字符串的开头开始的。
 
 {{EmbedInteractiveExample("pages/js/string-padstart.html")}}
 
 ## 语法
 
-```js
+```js-nolint
 padStart(targetLength)
 padStart(targetLength, padString)
 ```
@@ -19,38 +19,37 @@ padStart(targetLength, padString)
 ### 参数
 
 - `targetLength`
-  - : 当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
+  - : 当前 `str` 填充后的长度。如果该值小于或等于 `str.length`，则会直接返回当前 `str`。
 - `padString` {{optional_inline}}
-  - : 填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的默认值为 " "（U+0020）。
+  - : 用于填充当前 `str` 的字符串。如果 `padString` 太长，无法适应 `targetLength`，则会从末尾被截断。默认值为 Unicode“空格”字符（U+0020）。
 
 ### 返回值
 
-在原字符串开头填充指定的填充字符串直到目标长度所形成的新字符串。
+在开头填充 `padString` 直到达到给定的 `targetLength` 所形成的 {{jsxref("String")}}。
 
 ## 示例
 
 ### 简单示例
 
 ```js
-'abc'.padStart(10);         // "       abc"
-'abc'.padStart(10, "foo");  // "foofoofabc"
-'abc'.padStart(6,"123465"); // "123abc"
-'abc'.padStart(8, "0");     // "00000abc"
-'abc'.padStart(1);          // "abc"
+"abc".padStart(10); // "       abc"
+"abc".padStart(10, "foo"); // "foofoofabc"
+"abc".padStart(6, "123465"); // "123abc"
+"abc".padStart(8, "0"); // "00000abc"
+"abc".padStart(1); // "abc"
 ```
 
 ### 将数字转换为固定长度的字符串
 
 ```js
 // JavaScript version of: (unsigned)
-//  printf "%0*d" width num
+// printf "%0*d" width num
 function leftFillNum(num, targetLength) {
-  return num.toString().padStart(targetLength, 0);
+  return num.toString().padStart(targetLength, "0");
 }
 
 const num = 123;
-console.log(leftFillNum(num, 5));
-// 预期输出："00123"
+console.log(leftFillNum(num, 5)); // "00123"
 ```
 
 ## 规范
@@ -63,6 +62,5 @@ console.log(leftFillNum(num, 5));
 
 ## 参见
 
-- [Polyfill of `String.prototype.padStart` in `core-js`](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
+- [`core-js` 中 `String.prototype.padStart` 的 polyfill](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
 - {{jsxref("String.prototype.padEnd()")}}
-- [A polyfill](https://github.com/behnammodi/polyfill/blob/master/string.polyfill.js)

From 58cf75f884999b3475b595c6cd3fbf098f34516c Mon Sep 17 00:00:00 2001
From: Jason Lam <jasonlamv-t@hotmail.com>
Date: Fri, 28 Jul 2023 18:41:24 +0800
Subject: [PATCH 02/13] [zh-cn]: Update translation of String.padEnd() (#14633)

Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 .../global_objects/string/padend/index.md     | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/padend/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/padend/index.md
index e45a5ffaafd327..f2e216d6a13172 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/padend/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/padend/index.md
@@ -5,13 +5,13 @@ slug: Web/JavaScript/Reference/Global_Objects/String/padEnd
 
 {{JSRef}}
 
-**`padEnd()`** 方法会用一个字符串填充当前字符串（如果需要的话则重复填充），返回填充后达到指定长度的字符串。从当前字符串的末尾（右侧）开始填充。
+**`padEnd()`** 方法会将当前字符串从末尾开始填充给定的字符串（如果需要会重复填充），直到达到给定的长度。填充是从当前字符串的末尾开始的。
 
 {{EmbedInteractiveExample("pages/js/string-padend.html")}}
 
 ## 语法
 
-```js
+```js-nolint
 padEnd(targetLength)
 padEnd(targetLength, padString)
 ```
@@ -19,21 +19,23 @@ padEnd(targetLength, padString)
 ### 参数
 
 - `targetLength`
-  - : 当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
+  - : 当前 `str` 填充后的长度。如果该值小于或等于 `str.length`，则会直接返回当前 `str`。
 - `padString` {{optional_inline}}
-  - : 填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的缺省值为 " "（U+0020）。
+  - : 用于填充当前 `str` 的字符串。如果 `padString` 太长，无法适应 `targetLength`，则会被截断：对于从左到右的语言，左侧的部分将会被保留；对于从右到左的语言，右侧的部分将会被保留。默认值为“ ” (`U+0020`)。
 
 ### 返回值
 
-在原字符串末尾填充指定的填充字符串直到目标长度所形成的新字符串。
+在当前 `str` 末尾填充 `padString` 直到达到给定的 `targetLength` 所形成的 {{jsxref("String")}}。
 
 ## 示例
 
+### 使用 padEnd
+
 ```js
-'abc'.padEnd(10);          // "abc       "
-'abc'.padEnd(10, "foo");   // "abcfoofoof"
-'abc'.padEnd(6, "123456"); // "abc123"
-'abc'.padEnd(1);           // "abc"
+"abc".padEnd(10); // "abc       "
+"abc".padEnd(10, "foo"); // "abcfoofoof"
+"abc".padEnd(6, "123456"); // "abc123"
+"abc".padEnd(1); // "abc"
 ```
 
 ## 规范
@@ -46,6 +48,5 @@ padEnd(targetLength, padString)
 
 ## 参见
 
-- [Polyfill of `String.prototype.padEnd` in `core-js`](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
+- [`core-js` 中 `String.prototype.padEnd` 的 polyfill](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
 - {{jsxref("String.prototype.padStart()")}}
-- [A polyfill](https://github.com/behnammodi/polyfill/blob/master/string.polyfill.js)

From ebe0b0ee27b9270ff1b61645a1b41346e0149afa Mon Sep 17 00:00:00 2001
From: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
Date: Fri, 28 Jul 2023 18:43:10 +0800
Subject: [PATCH 03/13] Update 'css FAQ' and fix prettier (#14548)

Co-authored-by: A1lo <yin199909@aliyun.com>
---
 .prettierignore                              |  1 -
 files/zh-cn/learn/css/howto/css_faq/index.md | 81 ++++++++++----------
 2 files changed, 39 insertions(+), 43 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index 707554e6dcef7d..4c0ab9d179b0d5 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -30,7 +30,6 @@ build/
 /files/ru/learn/server-side/django/forms/index.md
 /files/ru/learn/server-side/django/introduction/index.md
 /files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
-/files/zh-cn/learn/css/howto/css_faq/index.md
 /files/zh-cn/learn/server-side/django/forms/index.md
 
 # A full pass on all Markdown files is being performed.
diff --git a/files/zh-cn/learn/css/howto/css_faq/index.md b/files/zh-cn/learn/css/howto/css_faq/index.md
index 8c2655bc5b7a4c..86579c388400ea 100644
--- a/files/zh-cn/learn/css/howto/css_faq/index.md
+++ b/files/zh-cn/learn/css/howto/css_faq/index.md
@@ -1,27 +1,31 @@
 ---
 title: CSS 常见问题
 slug: Learn/CSS/Howto/CSS_FAQ
-original_slug: Web/CSS/Common_CSS_Questions
 ---
 
+{{LearnSidebar}}
+
+在本篇文章中，你会发现一些有关 CSS 的常见问题，这些问题及其解答可能会有助于你成为一名网站开发人员。
+
 ## 为什么有效的 CSS 没有正确的渲染？
 
-浏览器使用 DOCTYPE 声明来选择是否使用更符合 Web 标准或兼容旧浏览器的 bug 的模式。在你的 HTML 的开始使用一个正确的和现代的 DOCTYPE 声明将改善浏览器标准执行。
+浏览器使用 `DOCTYPE` 声明来选择是否使用更符合 Web 标准或兼容旧浏览器缺陷的模式。在你的 HTML 的开始使用一个正确的和现代的 `DOCTYPE` 声明将改善浏览器标准执行。
 
 现代浏览器主要有两种渲染模式：
 
-- _怪异模式_：又称向后兼容模式，允许将传统网页渲染为作者意图。旧浏览器使用的非标准渲染规则。不完整的、不正确的、缺少 DOCTYPE 声明或已知的 DOCTYPE 声明中普遍使用 2001 年以前的文件将在怪异模式中呈现。
-- _标准模式_：浏览器试图严格遵守 W3C 标准。新 HTML 网页有望被设计为符合标准的浏览器，这样做的结果就是，用现代 DOCTYPE 声明的页面将被用标准模式呈现。
+- _怪异模式_：又称向后兼容模式，允许按照旧版浏览器使用的非标准渲染规则，按作者的意图呈现旧版网页。如果文档中存在不完整、不正确或缺失的 `DOCTYPE` 声明，或已知的 2001 年以前常用的 `DOCTYPE` 声明，则会以怪异模式渲染。
+- _标准模式_：浏览器试图严格遵守 W3C 标准。新的 HTML 页面预计是为符合标准的浏览器设计的，因此，带有现代 `DOCTYPE` 声明的页面将使用标准模式渲染。
 
-基于 Gecko 的浏览器，有三分之一 _[Almost Standards Mode](/zh-CN/docs/Gecko's_%22Almost_Standards%22_Mode)_，只有一些小怪癖。
+有三分之一的基于 Gecko 的浏览器处于[接近标准模式](https://zh.wikipedia.org/wiki/怪异模式#接近标准模式)，只是有一些怪异行为。
 
-这是最常用的触发标准模式或准标准模式的 DOCTYPE 声明列表：
+这是最常用的触发标准模式的 `DOCTYPE` 声明：
 
 ```html
-<!doctype html> /* 这一行是 HTML5 的 doctype 声明。使用该声明会使现代浏览器使用
-HTML5 解析器处理页面，这是推荐的 doctype 声明。*/
+<!doctype html>
 ```
 
+你应该尽可能使用上述 doctype 声明。还有其他有效的传统 doctype 说明，它们会触发标准模式或接近标准模式：
+
 ```html
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 ```
@@ -38,33 +42,27 @@ HTML5 解析器处理页面，这是推荐的 doctype 声明。*/
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 ```
 
-请尽可能地使用 HTML 5 DOCTYPE。
-
 ## 为什么有效的 CSS 完全没有被渲染？
 
 可能的原因如下：
 
 - 引入的 CSS 文件路径写错了。
-
-- 为了使浏览器渲染样式文件，CSS 样式表必须用 `text/css` 的 MIME。如果 Web 服务器没有使用这种类型处理文件，则 CSS 也不会被应用。
+- 为了使浏览器渲染样式文件，CSS 样式表必须用 `text/css` 的 MIME 类型。如果 Web 服务器没有使用这种类型处理文件，则 CSS 也不会被应用。
 
 ## `id` 和 `class` 有什么不同？
 
-HTML 元素可以拥有一个 `id`/或 `class` 属性。 `id` 属性为元素指定应用一个有效名称，只能有一个具有该名称的元素。`class` 属性指定一个类名的元素，而这个名称可以被页面内的许多元素被使用。CSS 允许你可以对特定的 `id` 和/或类名的元素应用样式。
-
-- 当你想要将样式规则应用于多个块和元素时，你应该使用 class 选择符。
+HTML 元素可以拥有一个 `id` 和（或）`class` 属性。`id` 属性为元素指定应用一个有效名称，只能有一个具有该名称的元素。`class` 属性指定一个类名的元素，而这个名称可以被页面内的许多元素被使用。CSS 允许你可以对特定的 `id` 和/或类名的元素应用样式。
 
-- 当你想给一个特定元素或块应用样式规则时就使用 ID 选择符。此样式将只用于与该特定 id 匹配的元素。
+- 当你想要将样式规则应用于多个块和元素时，你应该使用特定于类的样式。
+- 当你想给一个特定元素或块应用样式规则时就使用特定于 id 的样式。此样式将只用于与该特定 id 匹配的元素。
 
-较少样式的样式表通常性能更高。因此建议尽可能多地使用类，保留 id 作为特定用途（比如链接 label 标签和 form 元素或者为语义上唯一的元素应用样式）：
+一般建议尽量使用类，只有在特定用途（如连接标签和表单元素或用于必须在语义上唯一的样式元素）绝对必要时才使用 id：
 
 - 使用类名可以让样式具有可扩展性——即使目前只有一个元素使用这个规则集来定义样式，未来可能会添加更多。
-
 - 类名可以让你同时为多个元素赋予样式，减少样式表的大小，避免了为每一个 id 选择器撰写同样的样式信息。越小的样式表带来的性能体验也就越好。
-
 - 类名选择器比 id 选择器的[优先级](/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#优先级)更低，所以可以很方便地覆盖它们。
 
-> **备注：** 在这篇文档中更深入层次的了解 [CSS 选择器](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors)。
+> **备注：** 参见 [CSS 选择器](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors)，以了解详情。
 
 ## 我如何还原属性的默认值？
 
@@ -80,7 +78,7 @@ h1 {
 }
 ```
 
-从 CSS2 开始，情况就不一样了。关键字 [initial](/zh-CN/docs/Web/CSS/initial) 现在是一个有效的 CSS 属性。它将给定的 CSS 属性值重置为默认值。
+从 CSS2 开始，情况就不一样了。关键字 [initial](/zh-CN/docs/Web/CSS/initial) 现在是一个有效的 CSS 属性值。它将给定的 CSS 属性值重置为默认值。
 
 ```css
 /* 标题元素的默认颜色为黑色 */
@@ -94,14 +92,14 @@ h1 {
 
 ## 我如何才可以从一个样式中衍生出另一种样式？
 
-CSS 不允许这样做（请查阅 [Eric Meyer's note about the Working Group's stance](http://archivist.incutio.com/viewlist/css-discuss/2685)）。但是，将多个类分配给单个元素，可以提供相同的效果。[CSS 变量](/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 也提供了一种方法来定义在多处复用的样式信息。
+CSS 并不完全允许用一种样式来定义另一种样式。但是，将多个类分配给单个元素，可以提供相同的效果。[CSS 变量](/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)也提供了一种方法来定义在多处复用的样式信息。
 
 ## 我该如何给一个元素分配多个类？
 
 HTML 元素可以通过列出的类属性，用空格分开它们。
 
 ```html
-<style type="text/css">
+<style>
   .news {
     background: black;
     color: white;
@@ -111,14 +109,14 @@ HTML 元素可以通过列出的类属性，用空格分开它们。
   }
 </style>
 
-<div class="news today">... content of today's news ...</div>
+<div class="news today">这是今天的新闻内容。</div>
 ```
 
-如果相同的属性中声明的规则，解决冲突首先通过特异性，然后根据 CSS 声明的顺序。在 `class` 属性类的顺序是不相关的。
+如果两个规则中都声明了相同的属性，则首先通过特异性解决冲突，然后根据 CSS 声明的顺序解决冲突。`class` 属性中类的顺序与此无关。
 
 ## 为什么我的样式规则不能正确地工作？
 
-在语法上正确的样式规则可能在某些情况下不适用。你可以使用调试工具 CSS 面板的[规则视图](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html)来调试这类问题。下面列出了最常见的忽略样式规则的实例：
+在语法上正确的样式规则可能在某些情况下不适用。你可以使用调试工具 *CSS 面板*的[规则视图](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html)来调试这类问题。下面列出了最常见的忽略样式规则的实例：
 
 ### HTML 元素层次结构
 
@@ -146,7 +144,7 @@ CSS 应用于 HTML 元素依靠于元素的层次结构。在任何 CSS 特异
 
 ### 显式重定义样式规则
 
-在 CSS 样式表中，顺序 **非常** 重要。如果先定义了一个规则，然后又重新定义了同样的规则，会使用最后一个定义。
+在 CSS 样式表中，顺序**非常**重要。如果先定义了一个规则，然后又重新定义了同样的规则，会使用最后一个定义。
 
 ```css
 #stockTicker {
@@ -170,9 +168,9 @@ CSS 应用于 HTML 元素依靠于元素的层次结构。在任何 CSS 特异
 
 为了避免此类错误，请对特定选择器仅定义一次规则，将属于那个选择器的规则归类于此组。
 
-### 使用便捷属性
+### 使用简写属性
 
-使用便捷属性的好处是语法更加紧凑。仅使用一部分便捷属性完全没有问题，但要注意，没有声明的属性将自动重置为默认状态，这意味着单个属性较靠前的规则可能会被隐式覆盖。
+使用简写属性的好处是语法更加紧凑。仅使用一部分简写属性完全没有问题，但要注意，没有声明的属性将自动重置为默认状态，这意味着单个属性较靠前的规则可能会被隐式覆盖。
 
 ```css
 #stockTicker {
@@ -190,12 +188,12 @@ CSS 应用于 HTML 元素依靠于元素的层次结构。在任何 CSS 特异
 <div id="stockTicker">NYS: <span class="stockSymbol">GE</span> +1.0 ...</div>
 ```
 
-在前一个示例中，问题发生在不同元素的规则中；但在同一个元素中问题也可能出现，因为顺序是 **重要** 的。
+在前一个示例中，问题发生在不同元素的规则中；但在同一个元素中问题也可能出现，因为顺序是**重要**的。
 
 ```css
 #stockTicker {
   font-weight: bold;
-  font: 12px Verdana; /* font-weight is now normal */
+  font: 12px Verdana; /* font-weight 现在为 normal */
 }
 ```
 
@@ -230,7 +228,7 @@ body * {
 
 ### CSS 中的优先级
 
-当某个元素应用了多个规则时，规则的选择依赖于样式的 [优先级](/zh-CN/docs/Web/CSS/Specificity)。内联样式（HTML 的 `style` 属性）最高，ID 选择器次之，再其次是类选择器，最后是元素名称选择器。
+当某个元素应用了多个规则时，规则的选择依赖于样式的[优先级](/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#优先级)。内联样式（HTML 的 `style` 属性）最高，ID 选择器次之，再其次是类选择器，最后是元素名称选择器。{{htmlelement("div")}} 的文本颜色将是红色的。
 
 ```css
 div {
@@ -245,35 +243,34 @@ div {
 ```
 
 ```html
-<div id="orange" class="green" style="color: red;">This is red</div>
+<div id="orange" class="green" style="color: red;">我是红的</div>
 ```
 
-当选择器具有多个部分时，规则会更加复杂。有关优先级计算的更多信息，请参阅 [CSS 2.1 Specification 6.4.3 章节](https://www.w3.org/TR/CSS21/cascade.html#specificity)。
+当选择器具有多个部分时，规则会更加复杂。有关优先级计算的更多信息，请参阅 [CSS 优先级文档](/zh-CN/docs/Web/CSS/Specificity)。
 
 ## -moz-\*， -ms-\*， -webkit-\*， -o-\* 以及 -khtml-\* 属性有什么用？
 
 这些被称为*前缀属性*的属性是 CSS 标准的扩展。这些是出于测试目的的使用，不至于污染标准命名空间，防止标准扩展时产生兼容性问题。
 
-不推荐在生产环境网站中使用这些属性，它们已经产生了巨大的网页兼容性混乱。例如，很多开发者只使用了 `-webkit-` 前缀版本的属性，但非前缀的版本已经在所有浏览器中得到支持，没有基于 Webkit 的浏览器很有可能会在今后丢失显示效果。这个问题过于严重，以至于其他浏览器也开始实现 `-webkit-` 前缀属性的别名以提升网站兼容性，即 [Compatibility Living Standard](https://compat.spec.whatwg.org/)。
+不推荐在生产环境网站中使用这些属性，它们已经产生了巨大的网页兼容性混乱。例如，很多开发者只使用了 `-webkit-` 前缀版本的属性，但非前缀的版本已经在所有浏览器中得到支持，没有基于 Webkit 的浏览器很有可能会在今后丢失显示效果。这个问题过于严重，以至于其他浏览器也开始实现 `-webkit-` 前缀属性的别名以提升网站兼容性，即[兼容性动态标准](https://compat.spec.whatwg.org/)。
 
 实际上，大部分浏览器在实现实验性功能时都不使用 CSS 前缀，或者仅在 Nightly 浏览器版本或相似机制上实现它们。
 
 如果需要使用前缀，建议先写带前缀的属性，然后再写不带前缀的标准版本。这样就可以在标准版本支持的时候覆盖掉前缀版本。例如：
 
 ```css
--ms-transform: rotate(90deg);
--webkit-transform: rotate(90deg);
-transform: rotate(90deg);
+-webkit-text-stroke: 4px navy;
+text-stroke: 4px navy;
 ```
 
-> **备注：** 为更深层次了解处理前缀属性，请参阅 [跨浏览器测试](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing) 模块的 [处理常见的 HTML 和 CSS 问题](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS)。
+> **备注：** 为更深层次了解处理前缀属性，请参阅[跨浏览器测试](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing)模块的[处理常见的 HTML 和 CSS 问题——处理 CSS 前缀](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#处理_css_前缀)。
 
-> **备注：** 为了解 Mozilla 前缀属性 CSS 的更多信息，请参阅 [Mozilla CSS 扩展](/zh-CN/docs/Web/CSS/Mozilla_Extensions)。
+> **备注：** 请参阅 [Mozilla CSS 扩展](/zh-CN/docs/Web/CSS/Mozilla_Extensions)和 [WebKit CSS 扩展](/zh-CN/docs/Web/CSS/WebKit_Extensions)，以了解浏览器前缀 CSS 属性的列表。
 
 ## z-index 属性与定位有什么关系？
 
 z-index 属性指定了元素的栈序。
 
-有较高 z-index/栈序的元素总是在有着较低 z-index/栈序的元素之前。z-index 只会在有着指定 position（`position:absolute`、`position:relative` 或 `position:fixed`）的元素上工作。
+具有较高 z-index/栈序的元素总是渲染于具有较低 z-index/栈序的元素之前。z-index 只会在有着指定 position（`position:absolute`、`position:relative` 或 `position:fixed`）的元素上工作。
 
-> **备注：** 请参阅 [定位](/zh-CN/docs/Learn/CSS/CSS_layout/Positioning) 文章，特别是 [介绍 z-index](/zh-CN/docs/Learn/CSS/CSS_layout/Positioning#介绍_z-index) 部分来深入学习。
+> **备注：** 请参阅[定位](/zh-CN/docs/Learn/CSS/CSS_layout/Positioning)文章，特别是[介绍 z-index](/zh-CN/docs/Learn/CSS/CSS_layout/Positioning#介绍_z-index) 部分来深入学习。

From e0f73ae86e34e36631d4594dc5f04453a6f4a422 Mon Sep 17 00:00:00 2001
From: "Queen Vinyl Da.i'gyu-Kazotetsu" <vinyldarkscratch@gmail.com>
Date: Fri, 28 Jul 2023 04:14:52 -0700
Subject: [PATCH 04/13] zh-cn: Format /web/svg using Prettier (#14672)

---
 .prettierignore                               |   1 -
 .../index.md                                  | 131 ++++++----
 .../web/svg/attribute/attributename/index.md  |   2 +-
 .../web/svg/attribute/baseline-shift/index.md |   8 +-
 .../web/svg/attribute/baseprofile/index.md    |  10 +-
 files/zh-cn/web/svg/attribute/begin/index.md  |   2 +-
 .../web/svg/attribute/clip-path/index.md      |  48 +++-
 files/zh-cn/web/svg/attribute/clip/index.md   |  18 +-
 files/zh-cn/web/svg/attribute/color/index.md  |  10 +-
 files/zh-cn/web/svg/attribute/cx/index.md     |  70 +++--
 files/zh-cn/web/svg/attribute/cy/index.md     |  70 +++--
 files/zh-cn/web/svg/attribute/d/index.md      | 194 +++++++++-----
 .../zh-cn/web/svg/attribute/display/index.md  |  18 +-
 files/zh-cn/web/svg/attribute/dur/index.md    |   2 +-
 files/zh-cn/web/svg/attribute/dx/index.md     |   8 +-
 files/zh-cn/web/svg/attribute/end/index.md    |   2 +-
 .../web/svg/attribute/fill-opacity/index.md   |   2 +-
 .../web/svg/attribute/fill-rule/index.md      |  74 ++++--
 files/zh-cn/web/svg/attribute/fill/index.md   |   2 +-
 files/zh-cn/web/svg/attribute/filter/index.md |   2 +-
 .../web/svg/attribute/font-family/index.md    |   8 +-
 files/zh-cn/web/svg/attribute/fr/index.md     |  54 ++--
 files/zh-cn/web/svg/attribute/from/index.md   |   2 +-
 files/zh-cn/web/svg/attribute/fx/index.md     |  47 ++--
 files/zh-cn/web/svg/attribute/height/index.md |  11 +-
 files/zh-cn/web/svg/attribute/id/index.md     |   9 +-
 files/zh-cn/web/svg/attribute/in/index.md     |  74 ++++--
 .../web/svg/attribute/kernelmatrix/index.md   |   6 +-
 .../zh-cn/web/svg/attribute/keytimes/index.md |  46 ++--
 .../web/svg/attribute/letter-spacing/index.md |  10 +-
 .../web/svg/attribute/marker-end/index.md     |  27 +-
 .../web/svg/attribute/marker-start/index.md   |  27 +-
 files/zh-cn/web/svg/attribute/mask/index.md   |   6 +-
 files/zh-cn/web/svg/attribute/max/index.md    |  22 +-
 files/zh-cn/web/svg/attribute/media/index.md  |  12 +-
 .../zh-cn/web/svg/attribute/opacity/index.md  |   6 +-
 files/zh-cn/web/svg/attribute/order/index.md  |   6 +-
 .../web/svg/attribute/pathlength/index.md     |  70 ++---
 .../web/svg/attribute/patternunits/index.md   |  30 ++-
 .../web/svg/attribute/pointer-events/index.md |  22 +-
 files/zh-cn/web/svg/attribute/points/index.md |   6 +-
 .../attribute/preserveaspectratio/index.md    |   9 +-
 files/zh-cn/web/svg/attribute/r/index.md      |  32 ++-
 files/zh-cn/web/svg/attribute/radius/index.md |   6 +-
 files/zh-cn/web/svg/attribute/result/index.md |   6 +-
 files/zh-cn/web/svg/attribute/rx/index.md     |  26 +-
 files/zh-cn/web/svg/attribute/scale/index.md  |   6 +-
 files/zh-cn/web/svg/attribute/seed/index.md   |   6 +-
 .../svg/attribute/stroke-dasharray/index.md   |  55 ++--
 .../svg/attribute/stroke-dashoffset/index.md  |   8 +-
 .../web/svg/attribute/stroke-linecap/index.md |  52 ++--
 .../svg/attribute/stroke-linejoin/index.md    | 177 +++++++++----
 .../svg/attribute/stroke-miterlimit/index.md  |   8 +-
 .../web/svg/attribute/stroke-opacity/index.md |  18 +-
 .../web/svg/attribute/stroke-width/index.md   |   6 +-
 files/zh-cn/web/svg/attribute/stroke/index.md |  12 +-
 files/zh-cn/web/svg/attribute/style/index.md  |   8 +-
 files/zh-cn/web/svg/attribute/target/index.md |  26 +-
 .../web/svg/attribute/text-anchor/index.md    |  57 +++--
 .../web/svg/attribute/transform/index.md      | 127 ++++++---
 files/zh-cn/web/svg/attribute/type/index.md   |   2 +-
 files/zh-cn/web/svg/attribute/values/index.md |   1 +
 .../web/svg/attribute/vector-effect/index.md  |  23 +-
 .../zh-cn/web/svg/attribute/version/index.md  |   6 +-
 files/zh-cn/web/svg/attribute/y/index.md      |   2 +-
 files/zh-cn/web/svg/content_type/index.md     |  22 +-
 files/zh-cn/web/svg/element/a/index.md        |  18 +-
 files/zh-cn/web/svg/element/animate/index.md  |  14 +-
 .../web/svg/element/animatemotion/index.md    |   9 +-
 .../web/svg/element/animatetransform/index.md |  30 ++-
 files/zh-cn/web/svg/element/circle/index.md   |   8 +-
 files/zh-cn/web/svg/element/clippath/index.md |  19 +-
 files/zh-cn/web/svg/element/feblend/index.md  |  29 ++-
 .../web/svg/element/fecolormatrix/index.md    |  42 ++-
 .../svg/element/fecomponenttransfer/index.md  |  36 ++-
 .../svg/element/fediffuselighting/index.md    |  43 +++-
 .../web/svg/element/fedropshadow/index.md     |  34 +--
 .../web/svg/element/fegaussianblur/index.md   |  30 +--
 files/zh-cn/web/svg/element/feimage/index.md  |  11 +-
 files/zh-cn/web/svg/element/filter/index.md   |  11 +-
 .../web/svg/element/foreignobject/index.md    |  19 +-
 files/zh-cn/web/svg/element/g/index.md        |   7 +-
 files/zh-cn/web/svg/element/image/index.md    |  16 +-
 .../web/svg/element/lineargradient/index.md   |  14 +-
 files/zh-cn/web/svg/element/marker/index.md   |  16 +-
 files/zh-cn/web/svg/element/mpath/index.md    |  45 ++--
 files/zh-cn/web/svg/element/path/index.md     |   6 +-
 .../web/svg/element/radialgradient/index.md   |  22 +-
 files/zh-cn/web/svg/element/rect/index.md     |   6 +-
 files/zh-cn/web/svg/element/script/index.md   |  16 +-
 files/zh-cn/web/svg/element/stop/index.md     |  21 +-
 files/zh-cn/web/svg/element/style/index.md    |   7 +-
 files/zh-cn/web/svg/element/svg/index.md      |  28 +-
 files/zh-cn/web/svg/element/symbol/index.md   |  29 ++-
 files/zh-cn/web/svg/element/textpath/index.md |  26 +-
 files/zh-cn/web/svg/element/tspan/index.md    |   4 +-
 files/zh-cn/web/svg/linking/index.md          |   2 +-
 .../web/svg/svg_animation_with_smil/index.md  |  50 ++--
 .../tutorial/clipping_and_masking/index.md    |  28 +-
 .../svg/tutorial/fills_and_strokes/index.md   |   8 +-
 .../web/svg/tutorial/filter_effects/index.md  |  98 ++++---
 .../web/svg/tutorial/getting_started/index.md |   6 +-
 .../zh-cn/web/svg/tutorial/gradients/index.md | 241 ++++++++++++------
 .../zh-cn/web/svg/tutorial/patterns/index.md  |  28 +-
 .../web/svg/tutorial/svg_and_css/index.md     | 198 +++++++-------
 105 files changed, 2026 insertions(+), 1125 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index 4c0ab9d179b0d5..93ef1c28e73f10 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -93,4 +93,3 @@ build/
 /files/zh-cn/web/css/**/*.md
 /files/zh-cn/web/html/**/*.md
 /files/zh-cn/web/javascript/reference/**/*.md
-/files/zh-cn/web/svg/**/*.md
diff --git a/files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.md b/files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.md
index 85dfae74cc4811..716e02f2234db6 100644
--- a/files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.md
+++ b/files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.md
@@ -16,7 +16,11 @@ slug: Web/SVG/Applying_SVG_effects_to_HTML_content
 要想在 CSS 样式中应用 SVG 效果，首先需要创建一个引用 SVG 的 CSS 样式。
 
 ```html
-<style>p { mask: url(#my-mask); }</style>
+<style>
+  p {
+    mask: url(#my-mask);
+  }
+</style>
 ```
 
 在上面的例子中，所有段落会被 [ID](/zh-CN/docs/Web/HTML/Global_attributes/id) 为 `my-mask` 的 [SVG `<mask>`](/zh-CN/docs/Web/SVG/Element/mask) 遮罩。
@@ -29,11 +33,11 @@ slug: Web/SVG/Applying_SVG_effects_to_HTML_content
 <svg height="0">
   <mask id="mask-1">
     <linearGradient id="gradient-1" y2="1">
-      <stop stop-color="white" offset="0"/>
-      <stop stop-opacity="0" offset="1"/>
+      <stop stop-color="white" offset="0" />
+      <stop stop-opacity="0" offset="1" />
     </linearGradient>
-    <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
-    <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/>
+    <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white" />
+    <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)" />
   </mask>
 </svg>
 ```
@@ -55,14 +59,15 @@ p {
 
 ```html
 <p class="target" style="background:lime;">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
 </p>
 <p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing
-    <b class="target">elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua.</b>
-    Ut enim ad minim veniam.
+  Lorem ipsum dolor sit amet, consectetur adipisicing
+  <b class="target"
+    >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b
+  >
+  Ut enim ad minim veniam.
 </p>
 ```
 
@@ -76,22 +81,23 @@ p {
 
 ```html
 <p class="target" style="background:lime;">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
 </p>
 <p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing
-    <b class="target">elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua.</b>
-    Ut enim ad minim veniam.
+  Lorem ipsum dolor sit amet, consectetur adipisicing
+  <b class="target"
+    >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b
+  >
+  Ut enim ad minim veniam.
 </p>
 
 <button onclick="toggleRadius()">Toggle radius</button>
 
 <svg height="0">
   <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox">
-    <circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
-    <rect x="0.5" y="0.2" width="0.5" height="0.8"/>
+    <circle cx="0.25" cy="0.25" r="0.25" id="circle" />
+    <rect x="0.5" y="0.2" width="0.5" height="0.8" />
   </clipPath>
 </svg>
 ```
@@ -114,7 +120,7 @@ p {
 ```js
 function toggleRadius() {
   var circle = document.getElementById("circle");
-  circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
+  circle.r.baseVal.value = 0.4 - circle.r.baseVal.value;
 }
 ```
 
@@ -126,15 +132,16 @@ function toggleRadius() {
 
 ```html
 <p class="target" style="background: lime;">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
 </p>
 <pre class="target">lorem</pre>
 <p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing
-    <b class="target">elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua.</b>
-    Ut enim ad minim veniam.
+  Lorem ipsum dolor sit amet, consectetur adipisicing
+  <b class="target"
+    >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b
+  >
+  Ut enim ad minim veniam.
 </p>
 ```
 
@@ -143,7 +150,7 @@ function toggleRadius() {
 ```html
 <svg height="0">
   <filter id="f1">
-    <feGaussianBlur stdDeviation="3"/>
+    <feGaussianBlur stdDeviation="3" />
   </filter>
 </svg>
 ```
@@ -153,10 +160,11 @@ function toggleRadius() {
 ```html
 <svg height="0">
   <filter id="f2">
-    <feColorMatrix values="0.3333 0.3333 0.3333 0 0
-                           0.3333 0.3333 0.3333 0 0
-                           0.3333 0.3333 0.3333 0 0
-                           0      0      0      1 0"/>
+    <feColorMatrix
+      values="0.3333 0.3333 0.3333 0 0
+              0.3333 0.3333 0.3333 0 0
+              0.3333 0.3333 0.3333 0 0
+              0      0      0      1 0" />
   </filter>
 </svg>
 ```
@@ -166,20 +174,29 @@ function toggleRadius() {
 ```html
 <svg height="0">
   <filter id="f3">
-    <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB"
-      order="3" kernelMatrix="0 -1 0   -1 4 -1   0 -1 0" preserveAlpha="true"/>
+    <feConvolveMatrix
+      filterRes="100 100"
+      style="color-interpolation-filters:sRGB"
+      order="3"
+      kernelMatrix="0 -1 0   -1 4 -1   0 -1 0"
+      preserveAlpha="true" />
   </filter>
   <filter id="f4">
-    <feSpecularLighting surfaceScale="5" specularConstant="1"
-                        specularExponent="10" lighting-color="white">
-      <fePointLight x="-5000" y="-10000" z="20000"/>
+    <feSpecularLighting
+      surfaceScale="5"
+      specularConstant="1"
+      specularExponent="10"
+      lighting-color="white">
+      <fePointLight x="-5000" y="-10000" z="20000" />
     </feSpecularLighting>
   </filter>
   <filter id="f5">
-    <feColorMatrix values="1 0 0 0 0
-                           0 1 0 0 0
-                           0 0 1 0 0
-                           0 1 0 0 0" style="color-interpolation-filters:sRGB"/>
+    <feColorMatrix
+      values="1 0 0 0 0
+              0 1 0 0 0
+              0 0 1 0 0
+              0 1 0 0 0"
+      style="color-interpolation-filters:sRGB" />
   </filter>
 </svg>
 ```
@@ -187,12 +204,24 @@ function toggleRadius() {
 使用以下 CSS 应用五个过滤器：
 
 ```css
-p.target { filter:url(#f3); }
-p.target:hover { filter:url(#f5); }
-b.target { filter:url(#f1); }
-b.target:hover { filter:url(#f4); }
-pre.target { filter:url(#f2); }
-pre.target:hover { filter:url(#f3); }
+p.target {
+  filter: url(#f3);
+}
+p.target:hover {
+  filter: url(#f5);
+}
+b.target {
+  filter: url(#f1);
+}
+b.target:hover {
+  filter: url(#f4);
+}
+pre.target {
+  filter: url(#f2);
+}
+pre.target:hover {
+  filter: url(#f3);
+}
 ```
 
 {{EmbedLiveSample('示例：Filtering', 650, 200)}}
@@ -206,7 +235,7 @@ pre.target:hover { filter:url(#f3); }
 <svg height="0">
   <defs>
     <filter id="wherearemyglasses" x="0" y="0">
-    <feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
+      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
     </filter>
   </defs>
 </svg>
@@ -215,7 +244,9 @@ pre.target:hover { filter:url(#f3); }
 你可以在同一个 class 中使用 SVG 和 CSS 过滤器：
 
 ```css
-.blur { filter: url(#wherearemyglasses); }
+.blur {
+  filter: url(#wherearemyglasses);
+}
 ```
 
 {{ EmbedLiveSample('示例：Blurred Text', 300, 100) }}
@@ -241,7 +272,9 @@ SVG 还可以用于添加比纯 HTML 文本更动态、更灵活的文本添加
 例如，CSS 规则在一个名为 default.css 的文件中，如下这样：
 
 ```css
-.target { clip-path: url(resources.svg#c1); }
+.target {
+  clip-path: url(resources.svg#c1);
+}
 ```
 
 这个 SVG 就可以从一个名为 resources.svg 的文件中导入，clip 路径为 ID c1。
diff --git a/files/zh-cn/web/svg/attribute/attributename/index.md b/files/zh-cn/web/svg/attribute/attributename/index.md
index f6f2119fb0ea14..d3a627960647f6 100644
--- a/files/zh-cn/web/svg/attribute/attributename/index.md
+++ b/files/zh-cn/web/svg/attribute/attributename/index.md
@@ -11,7 +11,7 @@ slug: Web/SVG/Attribute/attributeName
 
 | 类别     | 动画属性目标属性                                                                      |
 | -------- | ------------------------------------------------------------------------------------- |
-| 值       | \<attributeName>                                                                       |
+| 值       | \<attributeName>                                                                      |
 | 可变性   | No                                                                                    |
 | 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#AttributeNameAttribute) |
 
diff --git a/files/zh-cn/web/svg/attribute/baseline-shift/index.md b/files/zh-cn/web/svg/attribute/baseline-shift/index.md
index fc01b4121995cc..1f6e7becfee3f1 100644
--- a/files/zh-cn/web/svg/attribute/baseline-shift/index.md
+++ b/files/zh-cn/web/svg/attribute/baseline-shift/index.md
@@ -11,11 +11,11 @@ slug: Web/SVG/Attribute/baseline-shift
 
 ## 用法
 
-| 类别     | 外观属性                                                                                                   |
-| -------- | ---------------------------------------------------------------------------------------------------------- |
+| 类别     | 外观属性                                                                                                        |
+| -------- | --------------------------------------------------------------------------------------------------------------- |
 | 值       | **auto** \| baseline \| super \| sub \| \<percentage> \| [\<length>](/zh-CN/SVG/Content_type#Length) \| inherit |
-| 可变性   | Yes                                                                                                        |
-| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/text.html#BaselineShiftProperty)                        |
+| 可变性   | Yes                                                                                                             |
+| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/text.html#BaselineShiftProperty)                             |
 
 - baseline
   - : 没有基线切换，`dominant-baseline`依然在原来的位置。
diff --git a/files/zh-cn/web/svg/attribute/baseprofile/index.md b/files/zh-cn/web/svg/attribute/baseprofile/index.md
index b3996c2ce3dedd..0e943cd263b72c 100644
--- a/files/zh-cn/web/svg/attribute/baseprofile/index.md
+++ b/files/zh-cn/web/svg/attribute/baseprofile/index.md
@@ -29,11 +29,13 @@ slug: Web/SVG/Attribute/baseProfile
 ## 例子
 
 ```html
-<svg width="120" height="120" version="1.1"
- xmlns="http://www.w3.org/2000/svg" baseProfile="full">
-
+<svg
+  width="120"
+  height="120"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  baseProfile="full">
   ...
-
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/attribute/begin/index.md b/files/zh-cn/web/svg/attribute/begin/index.md
index 9c0a462b85c2e8..a26c27b78f5a12 100644
--- a/files/zh-cn/web/svg/attribute/begin/index.md
+++ b/files/zh-cn/web/svg/attribute/begin/index.md
@@ -13,7 +13,7 @@ slug: Web/SVG/Attribute/begin
 
 | 类别     | 动画定时属性                                                                  |
 | -------- | ----------------------------------------------------------------------------- |
-| 值       | \<begin-value-list>                                                            |
+| 值       | \<begin-value-list>                                                           |
 | 可变性   | No                                                                            |
 | 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#BeginAttribute) |
 
diff --git a/files/zh-cn/web/svg/attribute/clip-path/index.md b/files/zh-cn/web/svg/attribute/clip-path/index.md
index 8b673cd1749a72..6862efef2167d2 100644
--- a/files/zh-cn/web/svg/attribute/clip-path/index.md
+++ b/files/zh-cn/web/svg/attribute/clip-path/index.md
@@ -14,7 +14,11 @@ slug: Web/SVG/Attribute/clip-path
 ## 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
@@ -24,24 +28,44 @@ html,body,svg { height:100% }
   </clipPath>
 
   <!-- 左上：应用自定义的剪切路径 -->
-  <rect x="1" y="1" width="8" height="8" stroke="green"
-        clip-path="url(#myClip)" />
+  <rect
+    x="1"
+    y="1"
+    width="8"
+    height="8"
+    stroke="green"
+    clip-path="url(#myClip)" />
 
   <!-- 右上：应用 CSS 基本形状和 fill-box 几何。
        实质上和自定义剪切路径并把 clipPathUnits
        设成 objectBoundingBox 一样 -->
-  <rect x="11" y="1" width="8" height="8" stroke="green"
-        clip-path="circle() fill-box" />
+  <rect
+    x="11"
+    y="1"
+    width="8"
+    height="8"
+    stroke="green"
+    clip-path="circle() fill-box" />
 
   <!-- 左下 -->
-  <rect x="1" y="11" width="8" height="8" stroke="green"
-        clip-path="circle() stroke-box" />
+  <rect
+    x="1"
+    y="11"
+    width="8"
+    height="8"
+    stroke="green"
+    clip-path="circle() stroke-box" />
 
   <!-- 右下：应用 CSS 基本形状和 view-box 几何。
        实质上和自定义剪切路径并把 clipPathUnits
        设成 userSpaceOnUse 一样 -->
-  <rect x="11" y="11" width="8" height="8" stroke="green"
-        clip-path="circle() view-box" />
+  <rect
+    x="11"
+    y="11"
+    width="8"
+    height="8"
+    stroke="green"
+    clip-path="circle() view-box" />
 </svg>
 ```
 
@@ -50,9 +74,9 @@ html,body,svg { height:100% }
 ## Usage notes
 
 | 值         | {{cssxref('url')}} \| [ {{cssxref('basic-shape')}} \|\| `<geometry-box>` ] \| `none` |
-| ---------- | ---------------------------------------------------------------------------------------------------- |
-| 默认值     | `none`                                                                                               |
-| Animatable | 是                                                                                                   |
+| ---------- | ------------------------------------------------------------------------------------ |
+| 默认值     | `none`                                                                               |
+| Animatable | 是                                                                                   |
 
 - \<geometry-box>
   - : geometry-box 是应用 {{cssxref('basic-shape')}} 的额外信息，用于区分 CSS 基本形状如何应用于元素上：`fill-box` 表示将对象的包围框作为参照框；`stroke-box` 表示将对象的包围框加上描边的范围作为参照框；`view-box` 表示使用最近的 SVG 视窗作为参照框。
diff --git a/files/zh-cn/web/svg/attribute/clip/index.md b/files/zh-cn/web/svg/attribute/clip/index.md
index f16e95e83cc2c6..e1e21428c9803e 100644
--- a/files/zh-cn/web/svg/attribute/clip/index.md
+++ b/files/zh-cn/web/svg/attribute/clip/index.md
@@ -14,20 +14,22 @@ As a presentation attribute, it can be applied to any element but it has effect
 ## 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
   <!-- Auto clipping -->
-  <svg x="0" width="10" height="10"
-       clip="auto">
+  <svg x="0" width="10" height="10" clip="auto">
     <circle cx="5" cy="5" r="4" stroke="green" />
   </svg>
 
   <!-- Rect(top, right, bottom, left) clipping -->
-  <svg x="10" width="10" height="10"
-       clip="rect(1, 9, 8, 2)">
+  <svg x="10" width="10" height="10" clip="rect(1, 9, 8, 2)">
     <circle cx="5" cy="5" r="4" stroke="green" />
   </svg>
 </svg>
@@ -40,9 +42,9 @@ html,body,svg { height:100% }
 **Warning:** This property is deprecated. Use {{cssxref("clip-path")}} instead.
 
 | 可用值     | **auto** \| \<shape> \| inherit |
-| ---------- | ------------------------------ |
-| 默认值     | Yes                            |
-| Animatable | Yes                            |
+| ---------- | ------------------------------- |
+| 默认值     | Yes                             |
+| Animatable | Yes                             |
 
 The value `auto` defines a clipping path along the bounds of the viewport created by the given element.
 
diff --git a/files/zh-cn/web/svg/attribute/color/index.md b/files/zh-cn/web/svg/attribute/color/index.md
index b16d41d55cb5f9..3c399ea1ca22c2 100644
--- a/files/zh-cn/web/svg/attribute/color/index.md
+++ b/files/zh-cn/web/svg/attribute/color/index.md
@@ -13,7 +13,7 @@ slug: Web/SVG/Attribute/color
 
 | 类别     | 外观属性                                                                     |
 | -------- | ---------------------------------------------------------------------------- |
-| 值       | [\<color>](/zh-CN/SVG/Content_type#Color) \| inherit                             |
+| 值       | [\<color>](/zh-CN/SVG/Content_type#Color) \| inherit                         |
 | 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/color.html#ColorProperty) |
 
 ## 示例
@@ -22,7 +22,13 @@ slug: Web/SVG/Attribute/color
 <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1">
   <g color="green">
     <rect width="50" height="50" fill="currentColor" />
-    <circle r="25" cx="70" cy="70" stroke="currentColor" fill="none" stroke-width="5" />
+    <circle
+      r="25"
+      cx="70"
+      cy="70"
+      stroke="currentColor"
+      fill="none"
+      stroke-width="5" />
   </g>
 </svg>
 ```
diff --git a/files/zh-cn/web/svg/attribute/cx/index.md b/files/zh-cn/web/svg/attribute/cx/index.md
index 822497752f405b..16ef1c180c1bc3 100644
--- a/files/zh-cn/web/svg/attribute/cx/index.md
+++ b/files/zh-cn/web/svg/attribute/cx/index.md
@@ -12,17 +12,21 @@ slug: Web/SVG/Attribute/cx
 ## 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
   <radialGradient cx="25%" id="myGradient">
-    <stop offset="0"    stop-color="white" />
+    <stop offset="0" stop-color="white" />
     <stop offset="100%" stop-color="black" />
   </radialGradient>
 
-  <circle cx="50" cy="50" r="45"/>
+  <circle cx="50" cy="50" r="45" />
   <ellipse cx="150" cy="50" rx="45" ry="25" />
   <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" />
 </svg>
@@ -35,9 +39,9 @@ html,body,svg { height:100% }
 对于 {{SVGElement('circle')}}，`cx` 用来定义图形中心的 x 轴坐标。
 
 | 值     | **[\<length>](/zh-CN/docs/Web/SVG/Content_type#Length)** \| **[\<percentage>](/zh-CN/docs/Web/SVG/Content_type#Percentage)** |
-| ------ | -------------------------------------------------------------------------------------------------------------- |
-| 默认值 | `0`                                                                                                            |
-| 可变性 | Yes                                                                                                            |
+| ------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| 默认值 | `0`                                                                                                                          |
+| 可变性 | Yes                                                                                                                          |
 
 注：起始于 SVG2 `cx`，是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。
 
@@ -46,9 +50,9 @@ html,body,svg { height:100% }
 对于 {{SVGElement('ellipse')}}，`cx` 用来定义图形中心的 x 轴坐标。
 
 | 值     | **[\<length>](/zh-CN/docs/Web/SVG/Content_type#Length)** \| **[\<percentage>](/zh-CN/docs/Web/SVG/Content_type#Percentage)** |
-| ------ | -------------------------------------------------------------------------------------------------------------- |
-| 默认值 | `0`                                                                                                            |
-| 可变性 | Yes                                                                                                            |
+| ------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| 默认值 | `0`                                                                                                                          |
+| 可变性 | Yes                                                                                                                          |
 
 **注：** 起始于 SVG2 `cx`，是一个几何属性，意味着该属性也可以用作椭圆的 CSS 属性。
 
@@ -57,41 +61,63 @@ html,body,svg { height:100% }
 对于 {{SVGElement('radialGradient')}}, `cx` 用来定义径向渐变终止圆的 x 轴坐标。
 
 | 值     | **[\<length>](/zh-CN/docs/Web/SVG/Content_type#Length)** |
-| ------ | ------------------------------------------------- |
-| 默认值 | `50%`                                             |
-| 可变性 | Yes                                               |
+| ------ | -------------------------------------------------------- |
+| 默认值 | `50%`                                                    |
+| 可变性 | Yes                                                      |
 
 #### 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <radialGradient cx="0" id="myGradient000">
-      <stop offset="0%"   stop-color="gold" />
-      <stop offset="50%"  stop-color="green" />
+      <stop offset="0%" stop-color="gold" />
+      <stop offset="50%" stop-color="green" />
       <stop offset="100%" stop-color="white" />
     </radialGradient>
 
     <radialGradient cx="50%" id="myGradient050">
-      <stop offset="0%"   stop-color="gold" />
-      <stop offset="50%"  stop-color="green" />
+      <stop offset="0%" stop-color="gold" />
+      <stop offset="50%" stop-color="green" />
       <stop offset="100%" stop-color="white" />
     </radialGradient>
 
     <radialGradient cx="100%" id="myGradient100">
-      <stop offset="0%"   stop-color="gold" />
-      <stop offset="50%"  stop-color="green" />
+      <stop offset="0%" stop-color="gold" />
+      <stop offset="50%" stop-color="green" />
       <stop offset="100%" stop-color="white" />
     </radialGradient>
   </defs>
 
-  <rect x="1"  y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" />
-  <rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" />
-  <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" />
+  <rect
+    x="1"
+    y="1"
+    width="8"
+    height="8"
+    fill="url(#myGradient000)"
+    stroke="black" />
+  <rect
+    x="13"
+    y="1"
+    width="8"
+    height="8"
+    fill="url(#myGradient050)"
+    stroke="black" />
+  <rect
+    x="25"
+    y="1"
+    width="8"
+    height="8"
+    fill="url(#myGradient100)"
+    stroke="black" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/attribute/cy/index.md b/files/zh-cn/web/svg/attribute/cy/index.md
index c70e6687e682e2..55c89b1a5a292c 100644
--- a/files/zh-cn/web/svg/attribute/cy/index.md
+++ b/files/zh-cn/web/svg/attribute/cy/index.md
@@ -12,17 +12,21 @@ slug: Web/SVG/Attribute/cy
 ## 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
   <radialGradient cy="25%" id="myGradient">
-    <stop offset="0"    stop-color="white" />
+    <stop offset="0" stop-color="white" />
     <stop offset="100%" stop-color="black" />
   </radialGradient>
 
-  <circle  cy="50"  cx="50" r="45"/>
+  <circle cy="50" cx="50" r="45" />
   <ellipse cy="150" cx="50" rx="45" ry="25" />
   <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" />
 </svg>
@@ -35,9 +39,9 @@ html,body,svg { height:100% }
 对于 {{SVGElement('circle')}}，`cy` 用来定义图形中心的 y 轴坐标。
 
 | 值     | **[\<length>](/zh-CN/docs/Web/SVG/Content_type#Length)** \| **[\<percentage>](/zh-CN/docs/Web/SVG/Content_type#Percentage)** |
-| ------ | -------------------------------------------------------------------------------------------------------------- |
-| 默认值 | `0`                                                                                                            |
-| 可变性 | Yes                                                                                                            |
+| ------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| 默认值 | `0`                                                                                                                          |
+| 可变性 | Yes                                                                                                                          |
 
 **注：**起始于 SVG2，`cy` 是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。
 
@@ -46,9 +50,9 @@ html,body,svg { height:100% }
 对于 {{SVGElement('ellipse')}}，`cy` 用来定义图形中心的 y 轴坐标。
 
 | 值     | **[\<length>](/zh-CN/docs/Web/SVG/Content_type#Length)** \| **[\<percentage>](/zh-CN/docs/Web/SVG/Content_type#Percentage)** |
-| ------ | -------------------------------------------------------------------------------------------------------------- |
-| 默认值 | `0`                                                                                                            |
-| 可变性 | Yes                                                                                                            |
+| ------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| 默认值 | `0`                                                                                                                          |
+| 可变性 | Yes                                                                                                                          |
 
 **注：**起始于 SVG2，`cy` 是一个几何属性，意味着该属性也可以用作椭圆的 CSS 属性。
 
@@ -57,41 +61,63 @@ html,body,svg { height:100% }
 对于 {{SVGElement('radialGradient')}}，`cy` 用来定义径向渐变终止圆的 y 轴坐标。
 
 | 值     | **[\<length>](/zh-CN/docs/Web/SVG/Content_type#Length)** |
-| ------ | ------------------------------------------------- |
-| 默认值 | `50%`                                             |
-| 可变性 | Yes                                               |
+| ------ | -------------------------------------------------------- |
+| 默认值 | `50%`                                                    |
+| 可变性 | Yes                                                      |
 
 #### 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <radialGradient cy="0" id="myGradient000">
-      <stop offset="0%"   stop-color="gold" />
-      <stop offset="50%"  stop-color="green" />
+      <stop offset="0%" stop-color="gold" />
+      <stop offset="50%" stop-color="green" />
       <stop offset="100%" stop-color="white" />
     </radialGradient>
 
     <radialGradient cy="50%" id="myGradient050">
-      <stop offset="0%"   stop-color="gold" />
-      <stop offset="50%"  stop-color="green" />
+      <stop offset="0%" stop-color="gold" />
+      <stop offset="50%" stop-color="green" />
       <stop offset="100%" stop-color="white" />
     </radialGradient>
 
     <radialGradient cy="100%" id="myGradient100">
-      <stop offset="0%"   stop-color="gold" />
-      <stop offset="50%"  stop-color="green" />
+      <stop offset="0%" stop-color="gold" />
+      <stop offset="50%" stop-color="green" />
       <stop offset="100%" stop-color="white" />
     </radialGradient>
   </defs>
 
-  <rect x="1"  y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" />
-  <rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" />
-  <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" />
+  <rect
+    x="1"
+    y="1"
+    width="8"
+    height="8"
+    fill="url(#myGradient000)"
+    stroke="black" />
+  <rect
+    x="13"
+    y="1"
+    width="8"
+    height="8"
+    fill="url(#myGradient050)"
+    stroke="black" />
+  <rect
+    x="25"
+    y="1"
+    width="8"
+    height="8"
+    fill="url(#myGradient100)"
+    stroke="black" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/attribute/d/index.md b/files/zh-cn/web/svg/attribute/d/index.md
index 08b84e366c6f4c..a923be4486e0d5 100644
--- a/files/zh-cn/web/svg/attribute/d/index.md
+++ b/files/zh-cn/web/svg/attribute/d/index.md
@@ -16,12 +16,18 @@ slug: Web/SVG/Attribute/d
 ## 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <path fill="none" stroke="red"
+  <path
+    fill="none"
+    stroke="red"
     d="M 10,30
        A 20,20 0,0,1 50,30
        A 20,20 0,0,1 90,30
@@ -114,17 +120,25 @@ html,body,svg { height:100% }
 下面的示例展示了如何在悬停在元素上时应用新的路径。新的路径与旧的路径现统，但额外增加了一条穿过心形图案的线。
 
 ```css
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 
 /* This path is displayed on hover*/
 #svg_css_ex1:hover path {
-  d: path("M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90")
+  d: path(
+    "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90"
+  );
 }
 ```
 
 ```html
 <svg id="svg_css_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <path fill="none" stroke="red"
+  <path
+    fill="none"
+    stroke="red"
     d="M 10,30
        A 20,20 0,0,1 50,30
        A 20,20 0,0,1 90,30
@@ -225,12 +239,18 @@ _Moveto_ 指令可以被想象成拎起绘图笔，落脚到另一处。即，
 #### 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <path fill="none" stroke="red"
+  <path
+    fill="none"
+    stroke="red"
     d="M 10,10 h 10
        m  0,10 h 10
        m  0,10 h 10
@@ -252,7 +272,7 @@ html,body,svg { height:100% }
 
 ### Lineto 路径命令
 
-_Lineto_ 指令将绘制一条直线段。这个直线段从*当前位置*（_P<sub>o</sub>_; {_x<sub>o</sub>_, _y<sub>o</sub>_}）移到*指定位置*（_P<sub>n</sub>_; {_x<sub>n</sub>_, _y<sub>n</sub>_}）。然后，*指定位置*（_P<sub>n</sub>_）将变成下一个命令中的*当前位置*（_P<sub>o</sub>′_）。
+_Lineto_ 指令将绘制一条直线段。这个直线段从*当前位置*（_P<sub>o</sub>_; {_x<sub>o</sub>_, _y<sub>o</sub>_}）移到*指定位置*（_P<sub>n</sub>_; {_x<sub>n</sub>_, _y<sub>n</sub>_}）。然后，_指定位置_（_P<sub>n</sub>_）将变成下一个命令中的*当前位置*（_P<sub>o</sub>′_）。
 
 <table class="no-markdown">
   <tbody>
@@ -397,21 +417,29 @@ _Lineto_ 指令将绘制一条直线段。这个直线段从*当前位置*（_P<
 #### 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
   <!-- LineTo commands with absolute coordinates -->
-  <path fill="none" stroke="red"
-        d="M 10,10
+  <path
+    fill="none"
+    stroke="red"
+    d="M 10,10
            L 90,90
            V 10
            H 50" />
 
   <!-- LineTo commands with relative coordinates -->
-  <path fill="none" stroke="red"
-        d="M 110,10
+  <path
+    fill="none"
+    stroke="red"
+    d="M 110,10
            l 80,80
            v -80
            h -40" />
@@ -433,7 +461,7 @@ html,body,svg { height:100% }
 - 终点控制点
   - : (_P<sub>ce</sub>_ = {_x<sub>ce</sub>_, _y<sub>ce</sub>_})（控制在终点附近的曲线的曲率）
 
-绘制后，*终点*（_P<sub>n</sub>_）将成为下一个命令中的*当前位置*（_P<sub>o</sub>′_）。
+绘制后，_终点_（_P<sub>n</sub>_）将成为下一个命令中的*当前位置*（_P<sub>o</sub>′_）。
 
 <table class="no-markdown">
   <tbody>
@@ -569,45 +597,60 @@ html,body,svg { height:100% }
 #### 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
-<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-
+<svg
+  viewBox="0 0 200 100"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
   <!-- Cubic Bézier curve with absolute coordinates -->
-  <path fill="none" stroke="red"
-        d="M 10,90
+  <path
+    fill="none"
+    stroke="red"
+    d="M 10,90
            C 30,90 25,10 50,10
            S 70,90 90,90" />
 
   <!-- Cubic Bézier curve with relative coordinates -->
-  <path fill="none" stroke="red"
-        d="M 110,90
+  <path
+    fill="none"
+    stroke="red"
+    d="M 110,90
            c 20,0 15,-80 40,-80
            s 20,80 40,80" />
 
   <!-- Highlight the curve vertex and control points -->
   <g id="ControlPoints">
-
     <!-- First cubic command control points -->
     <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" />
-    <circle cx="30" cy="90" r="1.5"/>
+    <circle cx="30" cy="90" r="1.5" />
 
     <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" />
-    <circle cx="25" cy="10" r="1.5"/>
+    <circle cx="25" cy="10" r="1.5" />
 
     <!-- Second smooth command control points (the first one is implicit) -->
-    <line x1="50" y1="10" x2="75" y2="10" stroke="lightgrey" stroke-dasharray="2" />
-    <circle cx="75" cy="10" r="1.5" fill="lightgrey"/>
+    <line
+      x1="50"
+      y1="10"
+      x2="75"
+      y2="10"
+      stroke="lightgrey"
+      stroke-dasharray="2" />
+    <circle cx="75" cy="10" r="1.5" fill="lightgrey" />
 
     <line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" />
     <circle cx="70" cy="90" r="1.5" />
 
     <!-- curve vertex points -->
-    <circle cx="10" cy="90" r="1.5"/>
-    <circle cx="50" cy="10" r="1.5"/>
-    <circle cx="90" cy="90" r="1.5"/>
+    <circle cx="10" cy="90" r="1.5" />
+    <circle cx="50" cy="10" r="1.5" />
+    <circle cx="90" cy="90" r="1.5" />
   </g>
   <use xlink:href="#ControlPoints" x="100" />
 </svg>
@@ -617,7 +660,7 @@ html,body,svg { height:100% }
 
 ### 二次贝塞尔曲线
 
-*二次*[*贝塞尔曲线*](/zh-CN/docs/Glossary/Bezier_curve)是使用三个点定义的平滑曲线：
+*二次[贝塞尔曲线](/zh-CN/docs/Glossary/Bezier_curve)*是使用三个点定义的平滑曲线：
 
 - 起始点（当前位置）
   - : _P<sub>o</sub>_ = {_x<sub>o</sub>_, _y<sub>o</sub>_}
@@ -626,7 +669,7 @@ html,body,svg { height:100% }
 - 控制点
   - : _P<sub>c</sub>_ = {_x<sub>c</sub>_, _y<sub>c</sub>_}（控制曲率）
 
-绘制后，*终点*（_P<sub>n</sub>_）将成为下一个命令中的*当前位置*（_P<sub>o</sub>′_）。
+绘制后，_终点_（_P<sub>n</sub>_）将成为下一个命令中的*当前位置*（_P<sub>o</sub>′_）。
 
 <table class="no-markdown">
   <tbody>
@@ -760,15 +803,23 @@ html,body,svg { height:100% }
 #### 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
-<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-
+<svg
+  viewBox="0 0 200 100"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
   <!-- Quadratic Bézier curve with implicit repetition -->
-  <path fill="none" stroke="red"
-        d="M 10,50
+  <path
+    fill="none"
+    stroke="red"
+    d="M 10,50
            Q 25,25 40,50
            t 30,0 30,0 30,0 30,0 30,0" />
 
@@ -778,23 +829,31 @@ html,body,svg { height:100% }
     <circle cx="25" cy="25" r="1.5" />
 
     <!-- Curve vertex points -->
-    <circle cx="10" cy="50" r="1.5"/>
-    <circle cx="40" cy="50" r="1.5"/>
+    <circle cx="10" cy="50" r="1.5" />
+    <circle cx="40" cy="50" r="1.5" />
 
     <g id="SmoothQuadraticDown">
-      <polyline points="40,50 55,75 70,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" />
+      <polyline
+        points="40,50 55,75 70,50"
+        stroke="rgba(0,0,0,.2)"
+        stroke-dasharray="2"
+        fill="none" />
       <circle cx="55" cy="75" r="1.5" fill="lightgrey" />
       <circle cx="70" cy="50" r="1.5" />
     </g>
 
     <g id="SmoothQuadraticUp">
-      <polyline points="70,50 85,25 100,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" />
+      <polyline
+        points="70,50 85,25 100,50"
+        stroke="rgba(0,0,0,.2)"
+        stroke-dasharray="2"
+        fill="none" />
       <circle cx="85" cy="25" r="1.5" fill="lightgrey" />
       <circle cx="100" cy="50" r="1.5" />
     </g>
 
     <use xlink:href="#SmoothQuadraticDown" x="60" />
-    <use xlink:href="#SmoothQuadraticUp"   x="60" />
+    <use xlink:href="#SmoothQuadraticUp" x="60" />
     <use xlink:href="#SmoothQuadraticDown" x="120" />
   </g>
 </svg>
@@ -907,27 +966,38 @@ html,body,svg { height:100% }
 #### 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-
   <!-- The influence of the arc flags with which the arc is drawn -->
-  <path fill="none" stroke="red"
-        d="M 6,10
+  <path
+    fill="none"
+    stroke="red"
+    d="M 6,10
            A 6 4 10 1 0 14,10" />
 
-  <path fill="none" stroke="lime"
-        d="M 6,10
+  <path
+    fill="none"
+    stroke="lime"
+    d="M 6,10
            A 6 4 10 1 1 14,10" />
 
-  <path fill="none" stroke="purple"
-        d="M 6,10
+  <path
+    fill="none"
+    stroke="purple"
+    d="M 6,10
            A 6 4 10 0 1 14,10" />
 
-  <path fill="none" stroke="pink"
-        d="M 6,10
+  <path
+    fill="none"
+    stroke="pink"
+    d="M 6,10
            A 6 4 10 0 0 14,10" />
 </svg>
 ```
@@ -960,34 +1030,40 @@ _ClosePath_ 命令将从*当前位置*绘制一条直线到路径中的第一个
 #### 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg">
-
   <!--
   An open shape with the last point of
   the path different to the first one
   -->
-  <path stroke="red"
-        d="M 5,1
+  <path
+    stroke="red"
+    d="M 5,1
            l -4,8 8,0" />
 
   <!--
   An open shape with the last point of
   the path matching the first one
   -->
-  <path stroke="red"
-        d="M 15,1
+  <path
+    stroke="red"
+    d="M 15,1
            l -4,8 8,0 -4,-8" />
 
   <!--
   A closed shape with the last point of
   the path different to the first one
   -->
-  <path stroke="red"
-        d="M 25,1
+  <path
+    stroke="red"
+    d="M 25,1
            l -4,8 8,0
            z" />
 </svg>
diff --git a/files/zh-cn/web/svg/attribute/display/index.md b/files/zh-cn/web/svg/attribute/display/index.md
index 34c339e4fc85c2..c894aadb5827fd 100644
--- a/files/zh-cn/web/svg/attribute/display/index.md
+++ b/files/zh-cn/web/svg/attribute/display/index.md
@@ -28,7 +28,9 @@ As a presentation attribute, it can be applied to any element.
 ## 示例
 
 ```css hidden
-html, body, svg {
+html,
+body,
+svg {
   height: 100%;
 }
 ```
@@ -41,7 +43,13 @@ html, body, svg {
 
   <!-- Here the yellow rectangle is not displayed -->
   <rect x="120" y="0" width="100" height="100" fill="skyblue"></rect>
-  <rect x="140" y="20" width="60" height="60" fill="yellow" display="none"></rect>
+  <rect
+    x="140"
+    y="20"
+    width="60"
+    height="60"
+    fill="yellow"
+    display="none"></rect>
 </svg>
 ```
 
@@ -49,10 +57,10 @@ html, body, svg {
 
 ## 使用说明
 
-| Default value | `inline`                         |
-| ------------- | -------------------------------- |
+| Default value | `inline`                 |
+| ------------- | ------------------------ |
 | Value         | {{csssyntax("display")}} |
-| Animatable    | Yes                              |
+| Animatable    | Yes                      |
 
 For a description of the values, please refer to the {{cssxref("display", "CSS display")}} property.
 
diff --git a/files/zh-cn/web/svg/attribute/dur/index.md b/files/zh-cn/web/svg/attribute/dur/index.md
index b921cd35a0524a..a3c05fe4ae8f3e 100644
--- a/files/zh-cn/web/svg/attribute/dur/index.md
+++ b/files/zh-cn/web/svg/attribute/dur/index.md
@@ -11,7 +11,7 @@ slug: Web/SVG/Attribute/dur
 
 | 类别     | 动画定时属性                                                                |
 | -------- | --------------------------------------------------------------------------- |
-| 值       | [\<clock-value>](/zh-CN/SVG/Content_type#Clock-value) \| **indefinite**         |
+| 值       | [\<clock-value>](/zh-CN/SVG/Content_type#Clock-value) \| **indefinite**     |
 | 可变性   | No                                                                          |
 | 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#DurAttribute) |
 
diff --git a/files/zh-cn/web/svg/attribute/dx/index.md b/files/zh-cn/web/svg/attribute/dx/index.md
index c6d059c6e78c76..f1a83c66fd22f2 100644
--- a/files/zh-cn/web/svg/attribute/dx/index.md
+++ b/files/zh-cn/web/svg/attribute/dx/index.md
@@ -24,10 +24,10 @@ slug: Web/SVG/Attribute/dx
 
 ## 用法上下文
 
-| 分类     | 无                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| 数值类型 | [\<number>](/zh-CN/SVG/Content_type#Number) \| [T<.2Fvar>s">\<list-of-length>](/zh-CN/SVG/Content_type#List-of-<var>T<.2Fvar>s)                                                                                                                                                                                                                                                                                                                                                                                                              |
-| 可变     | 是                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| 分类     | 无                                                                                                                              |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| 数值类型 | [\<number>](/zh-CN/SVG/Content_type#Number) \| [T<.2Fvar>s">\<list-of-length>](/zh-CN/SVG/Content_type#List-of-<var>T<.2Fvar>s) |
+| 可变     | 是                                                                                                                              |
 
 ## 元素
 
diff --git a/files/zh-cn/web/svg/attribute/end/index.md b/files/zh-cn/web/svg/attribute/end/index.md
index 21c6d6b0719b38..39973c740f9ddc 100644
--- a/files/zh-cn/web/svg/attribute/end/index.md
+++ b/files/zh-cn/web/svg/attribute/end/index.md
@@ -13,7 +13,7 @@ slug: Web/SVG/Attribute/end
 
 | 类别     | 动画定时属性                                                                |
 | -------- | --------------------------------------------------------------------------- |
-| 值       | \<End-value-list>                                                            |
+| 值       | \<End-value-list>                                                           |
 | 可变性   | No                                                                          |
 | 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#EndAttribute) |
 
diff --git a/files/zh-cn/web/svg/attribute/fill-opacity/index.md b/files/zh-cn/web/svg/attribute/fill-opacity/index.md
index 42dfc5ea6d3a58..bdec1372375654 100644
--- a/files/zh-cn/web/svg/attribute/fill-opacity/index.md
+++ b/files/zh-cn/web/svg/attribute/fill-opacity/index.md
@@ -11,7 +11,7 @@ slug: Web/SVG/Attribute/fill-opacity
 
 | 类别     | 外观属性                                                                            |
 | -------- | ----------------------------------------------------------------------------------- |
-| 值       | [\<opacity-value>](/zh-CN/SVG/Content_type#Opacity_value) \| inherit                    |
+| 值       | [\<opacity-value>](/zh-CN/SVG/Content_type#Opacity_value) \| inherit                |
 | 初始值   | 1                                                                                   |
 | 可变性   | Yes                                                                                 |
 | 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/painting.html#FillOpacityProperty) |
diff --git a/files/zh-cn/web/svg/attribute/fill-rule/index.md b/files/zh-cn/web/svg/attribute/fill-rule/index.md
index 814e1acb803e38..84facdac874844 100644
--- a/files/zh-cn/web/svg/attribute/fill-rule/index.md
+++ b/files/zh-cn/web/svg/attribute/fill-rule/index.md
@@ -24,21 +24,29 @@ slug: Web/SVG/Attribute/fill-rule
 ## 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
   <!-- fill-rule 的默认值 -->
-  <polygon fill-rule="nonzero" stroke="red"
-   points="50,0 21,90 98,35 2,35 79,90"/>
+  <polygon
+    fill-rule="nonzero"
+    stroke="red"
+    points="50,0 21,90 98,35 2,35 79,90" />
 
   <!--
   从这个形状的中心到无穷远处有两条路径段（红色部分），因此
   该区域被认为是形状外部，并且没有被填充。
   -->
-  <polygon fill-rule="evenodd" stroke="red"
-   points="150,0 121,90 198,35 102,35 179,90"/>
+  <polygon
+    fill-rule="evenodd"
+    stroke="red"
+    points="150,0 121,90 198,35 102,35 179,90" />
 </svg>
 ```
 
@@ -62,30 +70,40 @@ html,body,svg { height:100% }
 #### Example
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
   <!-- nonzero 填充规则被用于路径段会相交的形状上的效果 -->
-  <polygon fill-rule="nonzero" stroke="red"
-           points="50,0 21,90 98,35 2,35 79,90"/>
+  <polygon
+    fill-rule="nonzero"
+    stroke="red"
+    points="50,0 21,90 98,35 2,35 79,90" />
 
   <!--
   nonzero 填充规则被用于一个形状在另一形状内部的效果
   这两个正方形的路径段方向相同（都是顺时针）
   -->
-  <path fill-rule="nonzero" stroke="red"
-        d="M110,0  h90 v90 h-90 z
-           M130,20 h50 v50 h-50 z"/>
+  <path
+    fill-rule="nonzero"
+    stroke="red"
+    d="M110,0  h90 v90 h-90 z
+           M130,20 h50 v50 h-50 z" />
 
   <!--
   这个例子与第二个例子几乎相同，唯一的区别是：两个形状的路径段方向相反
   外面的正方形是顺时针，里面的正方形则是逆时针
   -->
-  <path fill-rule="nonzero" stroke="red"
-        d="M210,0  h90 v90 h-90 z
-           M230,20 v50 h50 v-50 z"/>
+  <path
+    fill-rule="nonzero"
+    stroke="red"
+    d="M210,0  h90 v90 h-90 z
+           M230,20 v50 h50 v-50 z" />
 </svg>
 ```
 
@@ -98,30 +116,40 @@ html,body,svg { height:100% }
 #### Example
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
   <!-- evenodd 填充规则被用于路径段会相交的形状上的效果 -->
-  <polygon fill-rule="evenodd" stroke="red"
-           points="50,0 21,90 98,35 2,35 79,90"/>
+  <polygon
+    fill-rule="evenodd"
+    stroke="red"
+    points="50,0 21,90 98,35 2,35 79,90" />
 
   <!--
   evenodd 填充规则被用于一个形状在另一形状内部的效果
   这两个正方形的路径段方向相同（都是顺时针）
   -->
-  <path fill-rule="evenodd" stroke="red"
-        d="M110,0  h90 v90 h-90 z
-           M130,20 h50 v50 h-50 z"/>
+  <path
+    fill-rule="evenodd"
+    stroke="red"
+    d="M110,0  h90 v90 h-90 z
+           M130,20 h50 v50 h-50 z" />
 
   <!--
   这个例子与第二个例子几乎相同，唯一的区别是：两个形状的路径段方向相反
   外面的正方形是顺时针，里面的正方形则是逆时针
   -->
-  <path fill-rule="evenodd" stroke="red"
-        d="M210,0  h90 v90 h-90 z
-           M230,20 v50 h50 v-50 z"/>
+  <path
+    fill-rule="evenodd"
+    stroke="red"
+    d="M210,0  h90 v90 h-90 z
+           M230,20 v50 h50 v-50 z" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/attribute/fill/index.md b/files/zh-cn/web/svg/attribute/fill/index.md
index e17ff051a2865d..47be234349f038 100644
--- a/files/zh-cn/web/svg/attribute/fill/index.md
+++ b/files/zh-cn/web/svg/attribute/fill/index.md
@@ -30,7 +30,7 @@ slug: Web/SVG/Attribute/fill
 
 | 类别     | 外观属性                                                                     |
 | -------- | ---------------------------------------------------------------------------- |
-| 值       | [\<paint>](/zh-CN/SVG/Content_type#Paint)                                        |
+| 值       | [\<paint>](/zh-CN/SVG/Content_type#Paint)                                    |
 | 可变性   | Yes                                                                          |
 | 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/painting.html#FillProperty) |
 
diff --git a/files/zh-cn/web/svg/attribute/filter/index.md b/files/zh-cn/web/svg/attribute/filter/index.md
index fd5d559505c7d5..b169e3d9c89f2b 100644
--- a/files/zh-cn/web/svg/attribute/filter/index.md
+++ b/files/zh-cn/web/svg/attribute/filter/index.md
@@ -13,7 +13,7 @@ slug: Web/SVG/Attribute/filter
 
 | 类别     | 外观属性                                                                        |
 | -------- | ------------------------------------------------------------------------------- |
-| 值       | [\<funciri>](/zh-CN/SVG/Content_type#FuncIRI) \| **none** \| inherit                |
+| 值       | [\<funciri>](/zh-CN/SVG/Content_type#FuncIRI) \| **none** \| inherit            |
 | 可变性   | Yes                                                                             |
 | 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/filters.html#FilterProperty) |
 
diff --git a/files/zh-cn/web/svg/attribute/font-family/index.md b/files/zh-cn/web/svg/attribute/font-family/index.md
index 300167ae5c9111..d27187379ad98b 100644
--- a/files/zh-cn/web/svg/attribute/font-family/index.md
+++ b/files/zh-cn/web/svg/attribute/font-family/index.md
@@ -11,11 +11,11 @@ slug: Web/SVG/Attribute/font-family
 
 ## 使用上下文
 
-| 分类              | Presentation attribute                                                                  |
-| ----------------- | --------------------------------------------------------------------------------------- |
+| 分类              | Presentation attribute                                                                      |
+| ----------------- | ------------------------------------------------------------------------------------------- |
 | 值                | [[\<family-name> \| \<generic-family>],]\* [\<family-name> \| \<generic-family>] \| inherit |
-| 可动画 Animatable | Yes                                                                                     |
-| 规范文档          | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/text.html#FontFamilyProperty)        |
+| 可动画 Animatable | Yes                                                                                         |
+| 规范文档          | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/text.html#FontFamilyProperty)            |
 
 ## 例子
 
diff --git a/files/zh-cn/web/svg/attribute/fr/index.md b/files/zh-cn/web/svg/attribute/fr/index.md
index 932bae870f3499..41320d70c03f9e 100644
--- a/files/zh-cn/web/svg/attribute/fr/index.md
+++ b/files/zh-cn/web/svg/attribute/fr/index.md
@@ -11,7 +11,7 @@ slug: Web/SVG/Attribute/fr
 
 | 类别     | 无                                                                                                                           |
 | -------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| 值       | [\<length>](/zh-CN/docs/Web/SVG/Content_type#Length)                                                                          |
+| 值       | [\<length>](/zh-CN/docs/Web/SVG/Content_type#Length)                                                                         |
 | 可变性   | 非                                                                                                                           |
 | 规范文档 | [SVG 1.1 (2nd Edition): The radialGradient element](http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute) |
 
@@ -20,25 +20,47 @@ slug: Web/SVG/Attribute/fr
 ```html
 <?xml version="1.0" standalone="no"?>
 
-<svg width="120" height="120" version="1.1"
-  xmlns="http://www.w3.org/2000/svg">
+<svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <defs>
-      <radialGradient id="Gradient"
-            cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
+    <radialGradient
+      id="Gradient"
+      cx="0.5"
+      cy="0.5"
+      r="0.5"
+      fx="0.35"
+      fy="0.35"
+      fr="5%">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="blue" />
+    </radialGradient>
   </defs>
 
-  <rect x="10" y="10" rx="15" ry="15" width="100" height="100"
-        fill="url(#Gradient)" stroke="black" stroke-width="2"/>
-
-  <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
-  <circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
-  <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
-  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
-  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
+  <rect
+    x="10"
+    y="10"
+    rx="15"
+    ry="15"
+    width="100"
+    height="100"
+    fill="url(#Gradient)"
+    stroke="black"
+    stroke-width="2" />
 
+  <circle
+    cx="60"
+    cy="60"
+    r="50"
+    fill="transparent"
+    stroke="white"
+    stroke-width="2" />
+  <circle cx="35" cy="35" r="2" fill="white" stroke="white" />
+  <circle cx="60" cy="60" r="2" fill="white" stroke="white" />
+  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">
+    (fx,fy)
+  </text>
+  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">
+    (cx,cy)
+  </text>
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/attribute/from/index.md b/files/zh-cn/web/svg/attribute/from/index.md
index 4ec9a825bcb0cf..3398295bc5568a 100644
--- a/files/zh-cn/web/svg/attribute/from/index.md
+++ b/files/zh-cn/web/svg/attribute/from/index.md
@@ -11,7 +11,7 @@ slug: Web/SVG/Attribute/From
 
 | 类别       | 动画属性值                                                                   |
 | ---------- | ---------------------------------------------------------------------------- |
-| 值         | \<value>                                                                      |
+| 值         | \<value>                                                                     |
 | 动画特征   | No                                                                           |
 | 标准化文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#FromAttribute) |
 
diff --git a/files/zh-cn/web/svg/attribute/fx/index.md b/files/zh-cn/web/svg/attribute/fx/index.md
index 22399314975224..8fc004cd8e8521 100644
--- a/files/zh-cn/web/svg/attribute/fx/index.md
+++ b/files/zh-cn/web/svg/attribute/fx/index.md
@@ -11,7 +11,7 @@ slug: Web/SVG/Attribute/fx
 
 | 类别     | 无                                                                                                                           |
 | -------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| 值       | [\<coordinate>](/zh-CN/SVG/Content_type#Coordinate)                                                 |
+| 值       | [\<coordinate>](/zh-CN/SVG/Content_type#Coordinate)                                                                          |
 | 可变性   | 非                                                                                                                           |
 | 规范文档 | [SVG 1.1 (2nd Edition): The radialGradient element](http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute) |
 
@@ -20,25 +20,40 @@ slug: Web/SVG/Attribute/fx
 ```html
 <?xml version="1.0" standalone="no"?>
 
-<svg width="120" height="120" version="1.1"
-  xmlns="http://www.w3.org/2000/svg">
+<svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <defs>
-      <radialGradient id="Gradient"
-            cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
+    <radialGradient id="Gradient" cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="blue" />
+    </radialGradient>
   </defs>
 
-  <rect x="10" y="10" rx="15" ry="15" width="100" height="100"
-        fill="url(#Gradient)" stroke="black" stroke-width="2"/>
-
-  <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
-  <circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
-  <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
-  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
-  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
+  <rect
+    x="10"
+    y="10"
+    rx="15"
+    ry="15"
+    width="100"
+    height="100"
+    fill="url(#Gradient)"
+    stroke="black"
+    stroke-width="2" />
 
+  <circle
+    cx="60"
+    cy="60"
+    r="50"
+    fill="transparent"
+    stroke="white"
+    stroke-width="2" />
+  <circle cx="35" cy="35" r="2" fill="white" stroke="white" />
+  <circle cx="60" cy="60" r="2" fill="white" stroke="white" />
+  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">
+    (fx,fy)
+  </text>
+  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">
+    (cx,cy)
+  </text>
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/attribute/height/index.md b/files/zh-cn/web/svg/attribute/height/index.md
index 269ef49ebf2e11..49549cd5fe5c14 100644
--- a/files/zh-cn/web/svg/attribute/height/index.md
+++ b/files/zh-cn/web/svg/attribute/height/index.md
@@ -13,11 +13,12 @@ slug: Web/SVG/Attribute/height
 
 ```html
 <?xml version="1.0"?>
-<svg width="120" height="120"
-     viewBox="0 0 120 120"
-     xmlns="http://www.w3.org/2000/svg">
-
-  <rect x="10" y="10" width="100" height="100"/>
+<svg
+  width="120"
+  height="120"
+  viewBox="0 0 120 120"
+  xmlns="http://www.w3.org/2000/svg">
+  <rect x="10" y="10" width="100" height="100" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/attribute/id/index.md b/files/zh-cn/web/svg/attribute/id/index.md
index 49fd1fb5b9c1c6..b3a2155cc3da01 100644
--- a/files/zh-cn/web/svg/attribute/id/index.md
+++ b/files/zh-cn/web/svg/attribute/id/index.md
@@ -12,7 +12,11 @@ slug: Web/SVG/Attribute/id
 ## 示例
 
 ```html
-<svg width="120" height="120" viewPort="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+<svg
+  width="120"
+  height="120"
+  viewPort="0 0 120 120"
+  xmlns="http://www.w3.org/2000/svg">
   <style type="text/css">
     <![CDATA[
       #smallRect {
@@ -30,12 +34,13 @@ slug: Web/SVG/Attribute/id
 
 ## 用法说明
 
-| 值     | \<id>   |
+| 值     | \<id>  |
 | ------ | ------ |
 | 默认值 | _None_ |
 | 可动画 | No     |
 
 - \<id>
+
   - : 指定元素的 ID。该 ID 在节点树中必须是唯一的，不能为空字符串，并且不能包含任何空格字符。
 
     > **备注：** 应当避免使用会被解析为 SVG 视图规范的 `id` 值（如 `MyDrawing.svg#svgView(viewBox(0,200,1000,1000))`），或被解析为用作 URL 目标片段的基本媒体片段的 `id` 值。
diff --git a/files/zh-cn/web/svg/attribute/in/index.md b/files/zh-cn/web/svg/attribute/in/index.md
index 209ab76c844120..454a4bfe1007c1 100644
--- a/files/zh-cn/web/svg/attribute/in/index.md
+++ b/files/zh-cn/web/svg/attribute/in/index.md
@@ -15,10 +15,10 @@ in 属性标识输入的原语。
 
 ## Usage context
 
-| Categories | None                                                                                                                                       |
-| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| Categories | None                                                                                                                                        |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
 | Value      | `SourceGraphic` \| `SourceAlpha` \| `BackgroundImage` \| `BackgroundAlpha` \| `FillPaint` \| `StrokePaint` \| \<filter-primitive-reference> |
-| Animatable | Yes                                                                                                                                        |
+| Animatable | Yes                                                                                                                                         |
 
 - SourceGraphic
   - : 该关键词表示图形元素自身将作为{{SVGElement("filter")}}原语的原始输入。
@@ -41,27 +41,53 @@ in 属性标识输入的原语。
 
 ```html
 <div style="width: 420px; height: 220px;">
-<svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <filter id="backgroundMultiply">
-      <!-- This will not work. -->
-      <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply"/>
-    </filter>
-  </defs>
-  <image xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/>
-  <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundMultiply);" />
-</svg>
-
-<svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <filter id="imageMultiply">
-      <!-- This is a workaround. -->
-      <feImage xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/>
-      <feBlend in2="SourceGraphic" mode="multiply"/>
-    </filter>
-  </defs>
-  <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imageMultiply);"/>
-</svg>
+  <svg
+    style="width:200px; height:200px; display: inline;"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+      <filter id="backgroundMultiply">
+        <!-- This will not work. -->
+        <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply" />
+      </filter>
+    </defs>
+    <image
+      xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png"
+      x="10%"
+      y="10%"
+      width="80%"
+      height="80%" />
+    <circle
+      cx="50%"
+      cy="40%"
+      r="40%"
+      fill="#c00"
+      style="filter:url(#backgroundMultiply);" />
+  </svg>
+
+  <svg
+    style="width:200px; height:200px; display: inline;"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+      <filter id="imageMultiply">
+        <!-- This is a workaround. -->
+        <feImage
+          xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png"
+          x="10%"
+          y="10%"
+          width="80%"
+          height="80%" />
+        <feBlend in2="SourceGraphic" mode="multiply" />
+      </filter>
+    </defs>
+    <circle
+      cx="50%"
+      cy="40%"
+      r="40%"
+      fill="#c00"
+      style="filter:url(#imageMultiply);" />
+  </svg>
 </div>
 ```
 
diff --git a/files/zh-cn/web/svg/attribute/kernelmatrix/index.md b/files/zh-cn/web/svg/attribute/kernelmatrix/index.md
index 93ed026c1daf72..b9695e186bb80c 100644
--- a/files/zh-cn/web/svg/attribute/kernelmatrix/index.md
+++ b/files/zh-cn/web/svg/attribute/kernelmatrix/index.md
@@ -9,10 +9,10 @@ slug: Web/SVG/Attribute/kernelMatrix
 
 ## Usage context
 
-| Categories | None                                                                         |
-| ---------- | ---------------------------------------------------------------------------- |
+| Categories | None                                                                             |
+| ---------- | -------------------------------------------------------------------------------- |
 | Value      | [T<.2Fvar>s">\<list of number>](/zh-CN/SVG/Content_type#List-of-<var>T<.2Fvar>s) |
-| Animatable | Yes                                                                          |
+| Animatable | Yes                                                                              |
 
 ## Example
 
diff --git a/files/zh-cn/web/svg/attribute/keytimes/index.md b/files/zh-cn/web/svg/attribute/keytimes/index.md
index 23868fb5f7efae..e45a01094048b5 100644
--- a/files/zh-cn/web/svg/attribute/keytimes/index.md
+++ b/files/zh-cn/web/svg/attribute/keytimes/index.md
@@ -24,34 +24,36 @@ keyTimes 列表的语义取决于插值模式：
 
 | 类别   | 动画值属性 |
 | ------ | ---------- |
-| 值     | \<list>     |
+| 值     | \<list>    |
 | 可变性 | No         |
 
 ## 示例
 
 ```html
 <?xml version="1.0"?>
-<svg width="120" height="120"
-     viewPort="0 0 120 120" version="1.1"
-     xmlns="http://www.w3.org/2000/svg">
-
-    <circle cx="60" cy="10" r="10">
-
-        <animate attributeName="cx"
-                 attributeType="XML"
-                 dur="4s"
-                 values="60 ; 110 ; 60 ; 10 ; 60"
-                 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
-                 repeatCount="indefinite"/>
-
-        <animate attributeName="cy"
-                 attributeType="XML"
-                 dur="4s"
-                 values="10 ; 60 ; 110 ; 60 ; 10 "
-                 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
-                 repeatCount="indefinite"/>
-
-    </circle>
+<svg
+  width="120"
+  height="120"
+  viewPort="0 0 120 120"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <circle cx="60" cy="10" r="10">
+    <animate
+      attributeName="cx"
+      attributeType="XML"
+      dur="4s"
+      values="60 ; 110 ; 60 ; 10 ; 60"
+      keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
+      repeatCount="indefinite" />
+
+    <animate
+      attributeName="cy"
+      attributeType="XML"
+      dur="4s"
+      values="10 ; 60 ; 110 ; 60 ; 10 "
+      keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
+      repeatCount="indefinite" />
+  </circle>
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/attribute/letter-spacing/index.md b/files/zh-cn/web/svg/attribute/letter-spacing/index.md
index e12c0d188ff8ce..0d0a7db2cb8ad8 100644
--- a/files/zh-cn/web/svg/attribute/letter-spacing/index.md
+++ b/files/zh-cn/web/svg/attribute/letter-spacing/index.md
@@ -18,7 +18,9 @@ As a presentation attribute, it can be applied to any element but it has effect
 ## 示例
 
 ```css hidden
-html, body, svg {
+html,
+body,
+svg {
   height: 100%;
 }
 ```
@@ -35,9 +37,9 @@ html, body, svg {
 ## Usage notes
 
 | Value         | `normal` \| {{cssxref("length")}} |
-| ------------- | ---------------------------------------- |
-| Default value | `normal`                                 |
-| Animatable    | Yes                                      |
+| ------------- | --------------------------------- |
+| Default value | `normal`                          |
+| Animatable    | Yes                               |
 
 For a description of the values, please refer to the [CSS `letter-spacing`](/zh-CN/docs/Web/CSS/letter-spacing#Values) property.
 
diff --git a/files/zh-cn/web/svg/attribute/marker-end/index.md b/files/zh-cn/web/svg/attribute/marker-end/index.md
index 46cd0b0026f708..3010c8100673cf 100644
--- a/files/zh-cn/web/svg/attribute/marker-end/index.md
+++ b/files/zh-cn/web/svg/attribute/marker-end/index.md
@@ -16,7 +16,9 @@ slug: Web/SVG/Attribute/marker-end
 ## 示例
 
 ```css hidden
-html, body, svg {
+html,
+body,
+svg {
   height: 100%;
 }
 ```
@@ -24,16 +26,23 @@ html, body, svg {
 ```html
 <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
   <defs>
-    <marker id="triangle" viewBox="0 0 10 10"
-          refX="1" refY="5"
-          markerUnits="strokeWidth"
-          markerWidth="10" markerHeight="10"
-          orient="auto">
-      <path d="M 0 0 L 10 5 L 0 10 z" fill="#f00"/>
+    <marker
+      id="triangle"
+      viewBox="0 0 10 10"
+      refX="1"
+      refY="5"
+      markerUnits="strokeWidth"
+      markerWidth="10"
+      markerHeight="10"
+      orient="auto">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#f00" />
     </marker>
   </defs>
-  <polyline fill="none" stroke="black"
-      points="20,100 40,60 70,80 100,20" marker-end="url(#triangle)"/>
+  <polyline
+    fill="none"
+    stroke="black"
+    points="20,100 40,60 70,80 100,20"
+    marker-end="url(#triangle)" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/attribute/marker-start/index.md b/files/zh-cn/web/svg/attribute/marker-start/index.md
index f5c00147498cdb..8722ef8485b006 100644
--- a/files/zh-cn/web/svg/attribute/marker-start/index.md
+++ b/files/zh-cn/web/svg/attribute/marker-start/index.md
@@ -16,7 +16,9 @@ slug: Web/SVG/Attribute/marker-start
 ## 示例
 
 ```css hidden
-html, body, svg {
+html,
+body,
+svg {
   height: 100%;
 }
 ```
@@ -24,16 +26,23 @@ html, body, svg {
 ```html
 <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
   <defs>
-    <marker id="triangle" viewBox="0 0 10 10"
-          refX="1" refY="5"
-          markerUnits="strokeWidth"
-          markerWidth="10" markerHeight="10"
-          orient="auto">
-      <path d="M 0 0 L 10 5 L 0 10 z" fill="#f00"/>
+    <marker
+      id="triangle"
+      viewBox="0 0 10 10"
+      refX="1"
+      refY="5"
+      markerUnits="strokeWidth"
+      markerWidth="10"
+      markerHeight="10"
+      orient="auto">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#f00" />
     </marker>
   </defs>
-  <polyline fill="none" stroke="black"
-      points="20,100 40,60 70,80 100,20" marker-start="url(#triangle)"/>
+  <polyline
+    fill="none"
+    stroke="black"
+    points="20,100 40,60 70,80 100,20"
+    marker-start="url(#triangle)" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/attribute/mask/index.md b/files/zh-cn/web/svg/attribute/mask/index.md
index efe79dbf342bd7..35babd12c646a0 100644
--- a/files/zh-cn/web/svg/attribute/mask/index.md
+++ b/files/zh-cn/web/svg/attribute/mask/index.md
@@ -11,10 +11,10 @@ slug: Web/SVG/Attribute/mask
 
 ## 用法
 
-| 类别   | 外观属性                                                         |
-| ------ | ---------------------------------------------------------------- |
+| 类别   | 外观属性                                                             |
+| ------ | -------------------------------------------------------------------- |
 | 值     | [\<FuncIRI>](/zh-CN/SVG/Content_type#FuncIRI) \| **none** \| inherit |
-| 可变性 | Yes                                                              |
+| 可变性 | Yes                                                                  |
 
 - [\<funcIRI>](/zh-CN/SVG/Content_type#FuncIRI)
   - : 对同一 SVG 文档片段内部别的图形对象的一个引用，这个图形对象将用作遮罩。这个引用的句法与{{ cssxref("uri","CSS URI") }}的句法相同。
diff --git a/files/zh-cn/web/svg/attribute/max/index.md b/files/zh-cn/web/svg/attribute/max/index.md
index 635e38af28afed..aad07c0623b919 100644
--- a/files/zh-cn/web/svg/attribute/max/index.md
+++ b/files/zh-cn/web/svg/attribute/max/index.md
@@ -12,7 +12,9 @@ Five elements are using this attribute: {{SVGElement("animate")}}, {{SVGElement(
 ## 示例
 
 ```css hidden
-html, body, svg {
+html,
+body,
+svg {
   height: 100%;
 }
 ```
@@ -20,10 +22,20 @@ html, body, svg {
 ```html
 <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
   <circle cx="60" cy="10" r="10">
-    <animate attributeName="cx" dur="4s" max="6s" repeatCount="indefinite"
-        values="60 ; 110 ; 60 ; 10 ; 60" keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/>
-    <animate attributeName="cy" dur="4s" max="6s" repeatCount="indefinite"
-        values="10 ; 60 ; 110 ; 60 ; 10" keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/>
+    <animate
+      attributeName="cx"
+      dur="4s"
+      max="6s"
+      repeatCount="indefinite"
+      values="60 ; 110 ; 60 ; 10 ; 60"
+      keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" />
+    <animate
+      attributeName="cy"
+      dur="4s"
+      max="6s"
+      repeatCount="indefinite"
+      values="10 ; 60 ; 110 ; 60 ; 10"
+      keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" />
   </circle>
 </svg>
 ```
diff --git a/files/zh-cn/web/svg/attribute/media/index.md b/files/zh-cn/web/svg/attribute/media/index.md
index 6ee1152ef21357..5fa824cea48847 100644
--- a/files/zh-cn/web/svg/attribute/media/index.md
+++ b/files/zh-cn/web/svg/attribute/media/index.md
@@ -12,7 +12,9 @@ slug: Web/SVG/Attribute/media
 ## 示例
 
 ```css hidden
-html, body, svg {
+html,
+body,
+svg {
   height: 100%;
 }
 ```
@@ -20,10 +22,14 @@ html, body, svg {
 ```html
 <svg viewBox="0 0 240 220" xmlns="http://www.w3.org/2000/svg">
   <style>
-    rect { fill: black; }
+    rect {
+      fill: black;
+    }
   </style>
   <style media="all and (min-width: 600px)">
-    rect { fill: seagreen; }
+    rect {
+      fill: seagreen;
+    }
   </style>
 
   <text y="15">Resize the window to see the effect</text>
diff --git a/files/zh-cn/web/svg/attribute/opacity/index.md b/files/zh-cn/web/svg/attribute/opacity/index.md
index 4a7f65b0158285..26aa8489c15d2c 100644
--- a/files/zh-cn/web/svg/attribute/opacity/index.md
+++ b/files/zh-cn/web/svg/attribute/opacity/index.md
@@ -11,10 +11,10 @@ opacity 属性指定了一个对象或一组对象的透明度，也就是说，
 
 ## 用法
 
-| 类别   | 外观属性                   |
-| ------ | -------------------------- |
+| 类别   | 外观属性                    |
+| ------ | --------------------------- |
 | 值     | \<opacity-value> \| inherit |
-| 可变性 | Yes                        |
+| 可变性 | Yes                         |
 
 - \<opacity-value>
   - : 一致的不透明度设置，作为一个[\<number>](/zh-CN/SVG/Content_type#Number)被应用到整个对象上。任何超过范围 0.0 到 1.0 的值都会被压回这个范围。0.0 表示完全透明，1.0 表示完全不透明。
diff --git a/files/zh-cn/web/svg/attribute/order/index.md b/files/zh-cn/web/svg/attribute/order/index.md
index d88a65bafab14d..fb33b01f4c81f0 100644
--- a/files/zh-cn/web/svg/attribute/order/index.md
+++ b/files/zh-cn/web/svg/attribute/order/index.md
@@ -15,10 +15,10 @@ order 属性确定被用作 {{ SVGElement("feConvolveMatrix") }} 元素的矩阵
 
 ## Usage context
 
-| Categories | None                                                                    |
-| ---------- | ----------------------------------------------------------------------- |
+| Categories | None                                                                        |
+| ---------- | --------------------------------------------------------------------------- |
 | Value      | [\<number-optional-number>](/zh-CN/SVG/Content_type#Number-optional-number) |
-| Animatable | Yes                                                                     |
+| Animatable | Yes                                                                         |
 
 ## Example
 
diff --git a/files/zh-cn/web/svg/attribute/pathlength/index.md b/files/zh-cn/web/svg/attribute/pathlength/index.md
index d9974a3445c6ca..9318d8ef55fa0b 100644
--- a/files/zh-cn/web/svg/attribute/pathlength/index.md
+++ b/files/zh-cn/web/svg/attribute/pathlength/index.md
@@ -14,34 +14,38 @@ Seven elements are using this attribute: {{SVGElement('circle')}}, {{SVGElement(
 ## 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">
   <style>
-  path {
-    fill: none;
-    stroke: black;
-    stroke-width: 2;
-    stroke-dasharray: 10;
-  }
+    path {
+      fill: none;
+      stroke: black;
+      stroke-width: 2;
+      stroke-dasharray: 10;
+    }
   </style>
 
   <!-- No pathLength, the real length of the path is used. In that case, 100 user units -->
-  <path d="M 0,10 h100"/>
+  <path d="M 0,10 h100" />
 
   <!-- compute everything like if the path length was 90 user units long -->
-  <path d="M 0,20 h100" pathLength="90"/>
+  <path d="M 0,20 h100" pathLength="90" />
 
   <!-- compute everything like if the path length was 50 user units long -->
-  <path d="M 0,30 h100" pathLength="50"/>
+  <path d="M 0,30 h100" pathLength="50" />
 
   <!-- compute everything like if the path length was 30 user units long -->
-  <path d="M 0,40 h100" pathLength="30"/>
+  <path d="M 0,40 h100" pathLength="30" />
 
   <!-- compute everything like if the path length was 10 user units long -->
-  <path d="M 0,50 h100" pathLength="10"/>
+  <path d="M 0,50 h100" pathLength="10" />
 </svg>
 ```
 
@@ -52,63 +56,63 @@ html,body,svg { height:100% }
 For {{SVGElement('circle')}}, `pathLength` lets authors specify a total length for the circle, in user units.
 
 | Value         | **[\<number>](/zh-CN/docs/Web/SVG/Content_type#Number)** |
-| ------------- | ------------------------------------------------- |
-| Default value | _none_                                            |
-| Animatable    | Yes                                               |
+| ------------- | -------------------------------------------------------- |
+| Default value | _none_                                                   |
+| Animatable    | Yes                                                      |
 
 ## ellipse
 
 For {{SVGElement('ellipse')}}, `pathLength` lets authors specify a total length for the ellipse, in user units.
 
 | Value         | **[\<number>](/zh-CN/docs/Web/SVG/Content_type#Number)** |
-| ------------- | ------------------------------------------------- |
-| Default value | _none_                                            |
-| Animatable    | Yes                                               |
+| ------------- | -------------------------------------------------------- |
+| Default value | _none_                                                   |
+| Animatable    | Yes                                                      |
 
 ## line
 
 For {{SVGElement('line')}}, `pathLength` lets authors specify a total length for the line, in user units.
 
 | Value         | **[\<number>](/zh-CN/docs/Web/SVG/Content_type#Number)** |
-| ------------- | ------------------------------------------------- |
-| Default value | _none_                                            |
-| Animatable    | Yes                                               |
+| ------------- | -------------------------------------------------------- |
+| Default value | _none_                                                   |
+| Animatable    | Yes                                                      |
 
 ## path
 
 For {{SVGElement('path')}}, `pathLength` lets authors specify a total length for the path, in user units.
 
 | Value         | **[\<number>](/zh-CN/docs/Web/SVG/Content_type#Number)** |
-| ------------- | ------------------------------------------------- |
-| Default value | _none_                                            |
-| Animatable    | Yes                                               |
+| ------------- | -------------------------------------------------------- |
+| Default value | _none_                                                   |
+| Animatable    | Yes                                                      |
 
 ## polygon
 
 For {{SVGElement('polygon')}}, `pathLength` lets authors specify a total length for the shape, in user units.
 
 | Value         | **[\<number>](/zh-CN/docs/Web/SVG/Content_type#Number)** |
-| ------------- | ------------------------------------------------- |
-| Default value | _none_                                            |
-| Animatable    | Yes                                               |
+| ------------- | -------------------------------------------------------- |
+| Default value | _none_                                                   |
+| Animatable    | Yes                                                      |
 
 ## polyline
 
 For {{SVGElement('polyline')}}, `pathLength` lets authors specify a total length for the shape, in user units.
 
 | Value         | **[\<number>](/zh-CN/docs/Web/SVG/Content_type#Number)** |
-| ------------- | ------------------------------------------------- |
-| Default value | _none_                                            |
-| Animatable    | Yes                                               |
+| ------------- | -------------------------------------------------------- |
+| Default value | _none_                                                   |
+| Animatable    | Yes                                                      |
 
 ## rect
 
 For {{SVGElement('circle')}}, `pathLength` lets authors specify a total length for the rectangle, in user units.
 
 | Value         | **[\<number>](/zh-CN/docs/Web/SVG/Content_type#Number)** |
-| ------------- | ------------------------------------------------- |
-| Default value | _none_                                            |
-| Animatable    | Yes                                               |
+| ------------- | -------------------------------------------------------- |
+| Default value | _none_                                                   |
+| Animatable    | Yes                                                      |
 
 ## 规范
 
diff --git a/files/zh-cn/web/svg/attribute/patternunits/index.md b/files/zh-cn/web/svg/attribute/patternunits/index.md
index c238fcdbfb983b..3d985f9aa023bb 100644
--- a/files/zh-cn/web/svg/attribute/patternunits/index.md
+++ b/files/zh-cn/web/svg/attribute/patternunits/index.md
@@ -12,30 +12,42 @@ Only one element is using this attribute: {{SVGElement('pattern')}}
 ## 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
   <!-- All geometry properties are relative to the current user space -->
-  <pattern id="p1" x="12.5" y="12.5" width="25" height="25"
-           patternUnits="userSpaceOnUse">
+  <pattern
+    id="p1"
+    x="12.5"
+    y="12.5"
+    width="25"
+    height="25"
+    patternUnits="userSpaceOnUse">
     <circle cx="10" cy="10" r="10" />
   </pattern>
 
   <!-- All geometry properties are relative to the target bounding box -->
-  <pattern id="p2" x=".125" y=".125" width=".25" height=".25"
-           patternUnits="objectBoundingBox">
+  <pattern
+    id="p2"
+    x=".125"
+    y=".125"
+    width=".25"
+    height=".25"
+    patternUnits="objectBoundingBox">
     <circle cx="10" cy="10" r="10" />
   </pattern>
 
   <!-- Left square with user space tiles -->
-  <rect x="10"  y="10" width="80" height="80"
-        fill="url(#p1)" />
+  <rect x="10" y="10" width="80" height="80" fill="url(#p1)" />
 
   <!-- Right square with bounding box tiles -->
-  <rect x="110" y="10" width="80" height="80"
-        fill="url(#p2)" />
+  <rect x="110" y="10" width="80" height="80" fill="url(#p2)" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/attribute/pointer-events/index.md b/files/zh-cn/web/svg/attribute/pointer-events/index.md
index 81debf70a6aa5e..d453b4ffbfc74e 100644
--- a/files/zh-cn/web/svg/attribute/pointer-events/index.md
+++ b/files/zh-cn/web/svg/attribute/pointer-events/index.md
@@ -12,7 +12,11 @@ pointer-events 属性是一个展示属性，用于定义元素是否或何时
 ## 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
@@ -23,8 +27,7 @@ html,body,svg { height:100% }
   你需要点击 rect 元素在圆外的部分
   -->
   <rect x="0" y="0" height="10" width="10" fill="black" />
-  <circle cx="5" cy="5" r="4" fill="white"
-          pointer-events="visiblePoint" />
+  <circle cx="5" cy="5" r="4" fill="white" pointer-events="visiblePoint" />
 
   <!--
   下面的 circle 元素将永远不会获取到鼠标事件，
@@ -32,22 +35,21 @@ html,body,svg { height:100% }
   rect 元素都会改变颜色
   -->
   <rect x="10" y="0" height="10" width="10" fill="black" />
-  <circle cx="15" cy="5" r="4" fill="white"
-          pointer-events="none" />
+  <circle cx="15" cy="5" r="4" fill="white" pointer-events="none" />
 </svg>
 ```
 
 ```js
-window.addEventListener('mouseup', (e) => {
+window.addEventListener("mouseup", (e) => {
   // 在 #000000 和 #FFFFFF 之间随机选取一个颜色
-  const color = Math.round(Math.random() * 0xFFFFFF)
+  const color = Math.round(Math.random() * 0xffffff);
 
   // 将 color 变量的值按照 CSS 的要求进行格式化
-  const fill = '#' + color.toString(16).padStart(6,'0')
+  const fill = "#" + color.toString(16).padStart(6, "0");
 
   // 将 color 变量设置的颜色应用到实际点击的元素上
-  e.target.style.fill = fill
-})
+  e.target.style.fill = fill;
+});
 ```
 
 {{EmbedLiveSample('示例', '100%', 150)}}
diff --git a/files/zh-cn/web/svg/attribute/points/index.md b/files/zh-cn/web/svg/attribute/points/index.md
index 839e7dd8ab34a1..132f4455c926ba 100644
--- a/files/zh-cn/web/svg/attribute/points/index.md
+++ b/files/zh-cn/web/svg/attribute/points/index.md
@@ -11,10 +11,10 @@ slug: Web/SVG/Attribute/points
 
 ## 用法
 
-| 类别   | 无               |
-| ------ | ---------------- |
+| 类别   | 无                |
+| ------ | ----------------- |
 | 值     | \<list-of-points> |
-| 可变性 | Yes              |
+| 可变性 | Yes               |
 
 ## 示例
 
diff --git a/files/zh-cn/web/svg/attribute/preserveaspectratio/index.md b/files/zh-cn/web/svg/attribute/preserveaspectratio/index.md
index ed556624e5c352..a7d101d748dca4 100644
--- a/files/zh-cn/web/svg/attribute/preserveaspectratio/index.md
+++ b/files/zh-cn/web/svg/attribute/preserveaspectratio/index.md
@@ -15,12 +15,13 @@ slug: Web/SVG/Attribute/preserveAspectRatio
 
 ## 上下文用法
 
-| Categories | None                    |
-| ---------- | ----------------------- |
+| Categories | None                      |
+| ---------- | ------------------------- |
 | Value      | \<align> [\<meetOrSlice>] |
-| Animatable | Yes                     |
+| Animatable | Yes                       |
 
 - \<align>
+
   - : `<align>` 属性值表示是否强制统一缩放，当 SVG 的 viewbox 属性与视图属性宽高比不一致时使用。`<align>` 属性的值一定是下列的值之一：
 
     - **none** 不会进行强制统一缩放，如果需要，会缩放指定元素的图形内容，使元素的边界完全匹配视图矩形。（注意：如果 `<align>` 的值是 `none` ，则 `<meetOrSlice>` 属性的值将会被忽略。）
@@ -33,7 +34,9 @@ slug: Web/SVG/Attribute/preserveAspectRatio
     - **xMinYMax** - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的最小值与视图的 X 的最小值对齐。将 SVG 元素的 viewbox 属性的 Y 的最小值 + 元素的高度与视图的 Y 的最大值对齐。
     - **xMidYMax** - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的中点值与视图的 X 的中点值对齐。将 SVG 元素的 viewbox 属性的 Y 的最小值 + 元素的高度与视图的 Y 的最大值对齐。
     - **xMaxYMax** - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的最小值 + 元素的宽度与视图的 X 的最大值对齐。将 SVG 元素的 viewbox 属性的 Y 的最小值 + 元素的高度与视图的 Y 的最大值对齐。
+
 - \<meetOrSlice>
+
   - : `<meetOrSlice>` 是可选的，如果提供的话，与 `<align>` 间隔一个或多个的空格，参数所选值必须是以下值之一：
 
     - **meet** (默认值) - 图形将缩放到：
diff --git a/files/zh-cn/web/svg/attribute/r/index.md b/files/zh-cn/web/svg/attribute/r/index.md
index df583264787406..f59bc54d1d96c6 100644
--- a/files/zh-cn/web/svg/attribute/r/index.md
+++ b/files/zh-cn/web/svg/attribute/r/index.md
@@ -12,29 +12,33 @@ slug: Web/SVG/Attribute/r
 ## 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
   <radialGradient r="0" id="myGradient000">
-    <stop offset="0"    stop-color="white" />
+    <stop offset="0" stop-color="white" />
     <stop offset="100%" stop-color="black" />
   </radialGradient>
   <radialGradient r="50%" id="myGradient050">
-    <stop offset="0"    stop-color="white" />
+    <stop offset="0" stop-color="white" />
     <stop offset="100%" stop-color="black" />
   </radialGradient>
   <radialGradient r="100%" id="myGradient100">
-    <stop offset="0"    stop-color="white" />
+    <stop offset="0" stop-color="white" />
     <stop offset="100%" stop-color="black" />
   </radialGradient>
 
-  <circle cx="50"  cy="50" r="0"/>
-  <circle cx="150" cy="50" r="25"/>
-  <circle cx="250" cy="50" r="50"/>
+  <circle cx="50" cy="50" r="0" />
+  <circle cx="150" cy="50" r="25" />
+  <circle cx="250" cy="50" r="50" />
 
-  <rect x="20"  y="120" width="60" height="60" fill="url(#myGradient000)" />
+  <rect x="20" y="120" width="60" height="60" fill="url(#myGradient000)" />
   <rect x="120" y="120" width="60" height="60" fill="url(#myGradient050)" />
   <rect x="220" y="120" width="60" height="60" fill="url(#myGradient100)" />
 </svg>
@@ -47,9 +51,9 @@ html,body,svg { height:100% }
 对于 {{SVGElement('circle')}}，`r` 用来定义圆的半径以及它的大小。取值小于或等于零，圆将不会被绘制出来。
 
 | 值     | **[\<length>](/zh-CN/docs/Web/SVG/Content_type#Length)** \| **[\<percentage>](/zh-CN/docs/Web/SVG/Content_type#Percentage)** |
-| ------ | -------------------------------------------------------------------------------------------------------------- |
-| 默认值 | `0`                                                                                                            |
-| 可变性 | Yes                                                                                                            |
+| ------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| 默认值 | `0`                                                                                                                          |
+| 可变性 | Yes                                                                                                                          |
 
 **注：**起始于 SVG2，`r` 是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。
 
@@ -60,9 +64,9 @@ html,body,svg { height:100% }
 渐变将以此绘制出来：**100%** 渐变停止点会被映射到终止圆的一周上。取值小于或等于零，将会使用最后一个渐变 {{ SVGElement("stop") }} 的颜色和不透明度，导致该区域被绘制为单色。
 
 | 值     | **[\<length>](/zh-CN/docs/Web/SVG/Content_type#Length)** \| **[\<percentage>](/zh-CN/docs/Web/SVG/Content_type#Percentage)** |
-| ------ | -------------------------------------------------------------------------------------------------------------- |
-| 默认值 | `50%`                                                                                                          |
-| 可变性 | Yes                                                                                                            |
+| ------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| 默认值 | `50%`                                                                                                                        |
+| 可变性 | Yes                                                                                                                          |
 
 ## 规范
 
diff --git a/files/zh-cn/web/svg/attribute/radius/index.md b/files/zh-cn/web/svg/attribute/radius/index.md
index 9ebdfc206dd3b3..e26f6e381274a2 100644
--- a/files/zh-cn/web/svg/attribute/radius/index.md
+++ b/files/zh-cn/web/svg/attribute/radius/index.md
@@ -11,10 +11,10 @@ slug: Web/SVG/Attribute/radius
 
 ## 用法
 
-| 类别   | _无_                                                                    |
-| ------ | ----------------------------------------------------------------------- |
+| 类别   | _无_                                                                        |
+| ------ | --------------------------------------------------------------------------- |
 | 值     | [\<number-optional-number>](/zh-CN/SVG/Content_type#Number-optional-number) |
-| 可变性 | Yes                                                                     |
+| 可变性 | Yes                                                                         |
 
 ## 示例
 
diff --git a/files/zh-cn/web/svg/attribute/result/index.md b/files/zh-cn/web/svg/attribute/result/index.md
index 18b102450ac22c..59340c22447cd7 100644
--- a/files/zh-cn/web/svg/attribute/result/index.md
+++ b/files/zh-cn/web/svg/attribute/result/index.md
@@ -9,10 +9,10 @@ slug: Web/SVG/Attribute/result
 
 ## 用法
 
-| 类别   | 无                           |
-| ------ | ---------------------------- |
+| 类别   | 无                            |
+| ------ | ----------------------------- |
 | 值     | \<filter-primitive-reference> |
-| 可变性 | Yes                          |
+| 可变性 | Yes                           |
 
 注意`<filter-primitive-reference>`不是一个 XML ID，换句话说，`<filter-primitive-reference>`只在给定的{{ SVGElement("filter") }}元素内部有意义，因此只有局部范围。在同一个{{ SVGElement("filter") }}元素内部，同一个`<filter-primitive-reference>`出现多次也是合法的。如果引用了，`<filter-primitive-reference>`将使用在给定结果前面、离给定结果最近的滤镜。
 
diff --git a/files/zh-cn/web/svg/attribute/rx/index.md b/files/zh-cn/web/svg/attribute/rx/index.md
index d3f5e9cd469625..37ea355bb0d31e 100644
--- a/files/zh-cn/web/svg/attribute/rx/index.md
+++ b/files/zh-cn/web/svg/attribute/rx/index.md
@@ -12,18 +12,22 @@ slug: Web/SVG/Attribute/rx
 ## 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
-  <ellipse cx="50"  cy="50" rx="0"  ry="25" />
+  <ellipse cx="50" cy="50" rx="0" ry="25" />
   <ellipse cx="150" cy="50" rx="25" ry="25" />
   <ellipse cx="250" cy="50" rx="50" ry="25" />
 
-  <rect x="20"  y="120" width="60" height="60" rx="0"   ry="15"/>
-  <rect x="120" y="120" width="60" height="60" rx="15"  ry="15"/>
-  <rect x="220" y="120" width="60" height="60" rx="150" ry="15"/>
+  <rect x="20" y="120" width="60" height="60" rx="0" ry="15" />
+  <rect x="120" y="120" width="60" height="60" rx="15" ry="15" />
+  <rect x="220" y="120" width="60" height="60" rx="150" ry="15" />
 </svg>
 ```
 
@@ -34,9 +38,9 @@ html,body,svg { height:100% }
 对于 {{SVGElement('ellipse')}}，`rx` 属性定义了水平方向的半径尺寸。如果使用了负值或者零，那么椭圆就不会被绘制。
 
 | 取值         | **[\<length>](/zh-CN/docs/Web/SVG/Content_type#Length)** \| **[\<percentage>](/zh-CN/docs/Web/SVG/Content_type#Percentage)** \| `auto` |
-| ------------ | ------------------------------------------------------------------------------------------------------------------------ |
-| 默认值       | `auto`                                                                                                                   |
-| 是否支持动画 | 是                                                                                                                       |
+| ------------ | -------------------------------------------------------------------------------------------------------------------------------------- |
+| 默认值       | `auto`                                                                                                                                 |
+| 是否支持动画 | 是                                                                                                                                     |
 
 **注释：** 从 SVG2 开始， `rx` 是一个几何属性，也就是说，这个属性也可以用作椭圆的 CSS 属性。
 
@@ -51,9 +55,9 @@ html,body,svg { height:100% }
 - `rx` 属性的有效值为矩形宽度的一半（即，如果为 `rx` 指定的值大于矩形宽度的一半，那么浏览器会视为 `rx` 的值为矩形宽度的一半）。
 
 | 取值         | **[\<length>](/zh-CN/docs/Web/SVG/Content_type#Length)** \| **[\<percentage>](/zh-CN/docs/Web/SVG/Content_type#Percentage)** \| `auto` |
-| ------------ | ------------------------------------------------------------------------------------------------------------------------ |
-| 缺省值       | `auto`                                                                                                                   |
-| 是否支持动画 | 是                                                                                                                       |
+| ------------ | -------------------------------------------------------------------------------------------------------------------------------------- |
+| 缺省值       | `auto`                                                                                                                                 |
+| 是否支持动画 | 是                                                                                                                                     |
 
 **注释：** 从 SVG2 开始，`rx` 是一个几何属性，也就是说，这个属性也可以用作矩形（rect）的 CSS 属性。
 
diff --git a/files/zh-cn/web/svg/attribute/scale/index.md b/files/zh-cn/web/svg/attribute/scale/index.md
index f0de8eb07f4284..21c6182c5d68e5 100644
--- a/files/zh-cn/web/svg/attribute/scale/index.md
+++ b/files/zh-cn/web/svg/attribute/scale/index.md
@@ -13,10 +13,10 @@ slug: Web/SVG/Attribute/scale
 
 ## 用法
 
-| 类别   | _无_                                    |
-| ------ | --------------------------------------- |
+| 类别   | _无_                                        |
+| ------ | ------------------------------------------- |
 | 值     | [\<number>](/zh-CN/SVG/Content_type#Number) |
-| 可变性 | Yes                                     |
+| 可变性 | Yes                                         |
 
 ## 示例
 
diff --git a/files/zh-cn/web/svg/attribute/seed/index.md b/files/zh-cn/web/svg/attribute/seed/index.md
index 29bd88769d6566..a3235263e7afa9 100644
--- a/files/zh-cn/web/svg/attribute/seed/index.md
+++ b/files/zh-cn/web/svg/attribute/seed/index.md
@@ -11,10 +11,10 @@ slug: Web/SVG/Attribute/seed
 
 ## 用法
 
-| 类别   | _None_                                          |
-| ------ | ----------------------------------------------- |
+| 类别   | _None_                                           |
+| ------ | ------------------------------------------------ |
 | 值     | [\<number>](/zh-CN/docs/SVG/Content_type#Number) |
-| 可变性 | Yes                                             |
+| 可变性 | Yes                                              |
 
 ## 示例
 
diff --git a/files/zh-cn/web/svg/attribute/stroke-dasharray/index.md b/files/zh-cn/web/svg/attribute/stroke-dasharray/index.md
index 56a6c0d942e91f..385b11bbb09a01 100644
--- a/files/zh-cn/web/svg/attribute/stroke-dasharray/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke-dasharray/index.md
@@ -11,10 +11,10 @@ slug: Web/SVG/Attribute/stroke-dasharray
 
 ## 用法
 
-| 类别   | 外观属性                           |
-| ------ | ---------------------------------- |
+| 类别   | 外观属性                            |
+| ------ | ----------------------------------- |
 | 值     | **none** \| \<dasharray> \| inherit |
-| 可变性 | Yes                                |
+| 可变性 | Yes                                 |
 
 - \<dasharray>
   - : 它是一个[\<length>](/zh-CN/SVG/Content_type#Length)和[\<percentage>](/zh-CN/SVG/Content_type#Percentage)数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，**5,3,2**等同于**5,3,2,5,3,2**。
@@ -23,25 +23,36 @@ slug: Web/SVG/Attribute/stroke-dasharray
 
 ```html
 <?xml version="1.0"?>
-<svg width="200" height="200" viewPort="0 0 200 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
-
-    <line stroke-dasharray="5, 5"              x1="10" y1="10" x2="190" y2="10" />
-    <line stroke-dasharray="5, 10"             x1="10" y1="30" x2="190" y2="30" />
-    <line stroke-dasharray="10, 5"             x1="10" y1="50" x2="190" y2="50" />
-    <line stroke-dasharray="5, 1"              x1="10" y1="70" x2="190" y2="70" />
-    <line stroke-dasharray="1, 5"              x1="10" y1="90" x2="190" y2="90" />
-    <line stroke-dasharray="0.9"               x1="10" y1="110" x2="190" y2="110" />
-    <line stroke-dasharray="15, 10, 5"         x1="10" y1="130" x2="190" y2="130" />
-    <line stroke-dasharray="15, 10, 5, 10"     x1="10" y1="150" x2="190" y2="150" />
-    <line stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" />
-    <line stroke-dasharray="5, 5, 1, 5"        x1="10" y1="190" x2="190" y2="190" />
-
-<style><![CDATA[
-line{
-    stroke: black;
-    stroke-width: 2;
-}
-]]></style>
+<svg
+  width="200"
+  height="200"
+  viewPort="0 0 200 300"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <line stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10" />
+  <line stroke-dasharray="5, 10" x1="10" y1="30" x2="190" y2="30" />
+  <line stroke-dasharray="10, 5" x1="10" y1="50" x2="190" y2="50" />
+  <line stroke-dasharray="5, 1" x1="10" y1="70" x2="190" y2="70" />
+  <line stroke-dasharray="1, 5" x1="10" y1="90" x2="190" y2="90" />
+  <line stroke-dasharray="0.9" x1="10" y1="110" x2="190" y2="110" />
+  <line stroke-dasharray="15, 10, 5" x1="10" y1="130" x2="190" y2="130" />
+  <line stroke-dasharray="15, 10, 5, 10" x1="10" y1="150" x2="190" y2="150" />
+  <line
+    stroke-dasharray="15, 10, 5, 10, 15"
+    x1="10"
+    y1="170"
+    x2="190"
+    y2="170" />
+  <line stroke-dasharray="5, 5, 1, 5" x1="10" y1="190" x2="190" y2="190" />
+
+  <style>
+    <![CDATA[
+    line{
+        stroke: black;
+        stroke-width: 2;
+    }
+    ]]>
+  </style>
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/attribute/stroke-dashoffset/index.md b/files/zh-cn/web/svg/attribute/stroke-dashoffset/index.md
index 48844f30a52436..adff6abb91af9c 100644
--- a/files/zh-cn/web/svg/attribute/stroke-dashoffset/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke-dashoffset/index.md
@@ -13,11 +13,11 @@ slug: Web/SVG/Attribute/stroke-dashoffset
 
 ## 使用环境
 
-| 类别   | 显示属性                                                                                              |
-| ------ | ----------------------------------------------------------------------------------------------------- |
+| 类别   | 显示属性                                                                                                      |
+| ------ | ------------------------------------------------------------------------------------------------------------- |
 | 值     | [\<percentage>](/zh-CN/SVG/Content_type#Percentage) \| [\<length>](/zh-CN/SVG/Content_type#Length) \| inherit |
-| 初始值 | 1                                                                                                     |
-| 可动画 | Yes                                                                                                   |
+| 初始值 | 1                                                                                                             |
+| 可动画 | Yes                                                                                                           |
 
 ## 示例
 
diff --git a/files/zh-cn/web/svg/attribute/stroke-linecap/index.md b/files/zh-cn/web/svg/attribute/stroke-linecap/index.md
index 974592ccf4a431..5953085e517bf1 100644
--- a/files/zh-cn/web/svg/attribute/stroke-linecap/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke-linecap/index.md
@@ -20,24 +20,40 @@ slug: Web/SVG/Attribute/stroke-linecap
 
 ```html
 <?xml version="1.0"?>
-<svg width="120" height="120"
-     viewPort="0 0 120 120" version="1.1"
-     xmlns="http://www.w3.org/2000/svg">
-
-    <line stroke-linecap="butt"
-          x1="30" y1="30" x2="30" y2="90"
-          stroke="black" stroke-width="20"/>
-
-    <line stroke-linecap="round"
-          x1="60" y1="30" x2="60" y2="90"
-          stroke="black" stroke-width="20"/>
-
-    <line stroke-linecap="square"
-          x1="90" y1="30" x2="90" y2="90"
-          stroke="black" stroke-width="20"/>
-
-    <path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90"
-          stroke="white" />
+<svg
+  width="120"
+  height="120"
+  viewPort="0 0 120 120"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <line
+    stroke-linecap="butt"
+    x1="30"
+    y1="30"
+    x2="30"
+    y2="90"
+    stroke="black"
+    stroke-width="20" />
+
+  <line
+    stroke-linecap="round"
+    x1="60"
+    y1="30"
+    x2="60"
+    y2="90"
+    stroke="black"
+    stroke-width="20" />
+
+  <line
+    stroke-linecap="square"
+    x1="90"
+    y1="30"
+    x2="90"
+    y2="90"
+    stroke="black"
+    stroke-width="20" />
+
+  <path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90" stroke="white" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/attribute/stroke-linejoin/index.md b/files/zh-cn/web/svg/attribute/stroke-linejoin/index.md
index c0b0ea7e691a15..1865bd1f3be5e0 100644
--- a/files/zh-cn/web/svg/attribute/stroke-linejoin/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke-linejoin/index.md
@@ -23,7 +23,11 @@ slug: Web/SVG/Attribute/stroke-linejoin
 ## 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
@@ -32,49 +36,66 @@ html,body,svg { height:100% }
   Upper left path:
   Effect of the "miter" value
   -->
-  <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
-        stroke-linejoin="miter" />
+  <path
+    d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
+    stroke="black"
+    fill="none"
+    stroke-linejoin="miter" />
 
   <!--
   Center path:
   Effect of the "round" value
   -->
-  <path d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
-        stroke-linejoin="round" />
+  <path
+    d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
+    stroke="black"
+    fill="none"
+    stroke-linejoin="round" />
 
   <!--
   Upper right path:
   Effect of the "bevel" value
   -->
-  <path d="M13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
-        stroke-linejoin="bevel" />
+  <path
+    d="M13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
+    stroke="black"
+    fill="none"
+    stroke-linejoin="bevel" />
 
   <!--
   Bottom left path:
   Effect of the "miter-clip" value
   with fallback to "miter" if not supported.
   -->
-  <path d="M3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
-        stroke-linejoin="miter-clip" />
+  <path
+    d="M3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
+    stroke="black"
+    fill="none"
+    stroke-linejoin="miter-clip" />
 
   <!--
   Bottom right path:
   Effect of the "arcs" value
   with fallback to "miter" if not supported.
   -->
-  <path d="M9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
-        stroke-linejoin="arcs" />
-
+  <path
+    d="M9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
+    stroke="black"
+    fill="none"
+    stroke-linejoin="arcs" />
 
   <!--
   the following pink lines highlight the
   position of the path for each stroke
   -->
   <g id="highlight">
-    <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
-          stroke="pink" fill="none" stroke-width="0.025" />
-    <circle cx="1" cy="5"   r="0.05" fill="pink" />
-    <circle cx="3" cy="2"   r="0.05" fill="pink" />
+    <path
+      d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
+      stroke="pink"
+      fill="none"
+      stroke-width="0.025" />
+    <circle cx="1" cy="5" r="0.05" fill="pink" />
+    <circle cx="3" cy="2" r="0.05" fill="pink" />
     <circle cx="5" cy="5.5" r="0.05" fill="pink" />
   </g>
   <use xlink:href="#highlight" x="6" />
@@ -102,22 +123,32 @@ html,body,svg { height:100% }
 #### 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
   <!-- Effect of the "arcs" value -->
-  <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="black" fill="none"
-        stroke-linejoin="arcs" />
+  <path
+    d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3"
+    stroke="black"
+    fill="none"
+    stroke-linejoin="arcs" />
 
   <!--
   the following pink lines highlight the
   position of the path for each stroke
   -->
   <g id="p">
-    <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3"
-          stroke="pink" fill="none" stroke-width="0.025" />
+    <path
+      d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3"
+      stroke="pink"
+      fill="none"
+      stroke-width="0.025" />
     <circle cx="1" cy="5" r="0.05" fill="pink" />
     <circle cx="3" cy="2" r="0.05" fill="pink" />
     <circle cx="5" cy="5" r="0.05" fill="pink" />
@@ -134,22 +165,28 @@ The `bevel` 用斜角连接路径段。
 #### 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
   <!-- Effect of the "bevel" value -->
-  <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
-        stroke-linejoin="bevel" />
+  <path
+    d="M1,5 l2,-3 l2,3"
+    stroke="black"
+    fill="none"
+    stroke-linejoin="bevel" />
 
   <!--
   the following pink lines highlight the
   position of the path for each stroke
   -->
   <g id="p">
-    <path d="M1,5 l2,-3 l2,3"
-          stroke="pink" fill="none" stroke-width="0.025" />
+    <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
     <circle cx="1" cy="5" r="0.05" fill="pink" />
     <circle cx="3" cy="2" r="0.05" fill="pink" />
     <circle cx="5" cy="5" r="0.05" fill="pink" />
@@ -168,23 +205,37 @@ The `miter` 用尖角连接路径段。通过在路径段的切线处延伸笔
 #### 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg">
   <!-- Effect of the "miter" value -->
-  <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
-        stroke-linejoin="miter" />
+  <path
+    d="M1,5 l2,-3 l2,3"
+    stroke="black"
+    fill="none"
+    stroke-linejoin="miter" />
 
   <!-- Effect of the "miter" value on a sharp angle
        where de default miter limit is exceeded -->
-  <path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none"
-        stroke-linejoin="miter" />
+  <path
+    d="M7,5 l0.75,-3 l0.75,3"
+    stroke="black"
+    fill="none"
+    stroke-linejoin="miter" />
 
   <!-- the following red dotted line show where
        the miter value falls back to the bevel value -->
-  <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05"  stroke-width="0.025"/>
+  <path
+    d="M0,0 h10"
+    stroke="red"
+    stroke-dasharray="0.05"
+    stroke-width="0.025" />
 
   <!-- the following pink lines highlight the position of the path for each stroke -->
   <g>
@@ -193,10 +244,14 @@ html,body,svg { height:100% }
     <circle cx="3" cy="2" r="0.05" fill="pink" />
     <circle cx="5" cy="5" r="0.05" fill="pink" />
 
-    <path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" />
-    <circle cx="7"    cy="5" r="0.05" fill="pink" />
+    <path
+      d="M7,5 l0.75,-3 l0.75,3"
+      stroke="pink"
+      fill="none"
+      stroke-width="0.025" />
+    <circle cx="7" cy="5" r="0.05" fill="pink" />
     <circle cx="7.75" cy="2" r="0.05" fill="pink" />
-    <circle cx="8.5"  cy="5" r="0.05" fill="pink" />
+    <circle cx="8.5" cy="5" r="0.05" fill="pink" />
   </g>
 </svg>
 ```
@@ -214,22 +269,36 @@ The `miter-clip` 用尖角连接路径段。通过在路径段的切线处延伸
 #### 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg">
   <!-- Effect of the "miter-clip" value -->
-  <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
-        stroke-linejoin="miter-clip" />
+  <path
+    d="M1,5 l2,-3 l2,3"
+    stroke="black"
+    fill="none"
+    stroke-linejoin="miter-clip" />
 
   <!-- Effect of the "miter-clip" value on a sharp angle
        where de default miter limit is exceeded -->
-  <path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none"
-        stroke-linejoin="miter-clip" />
+  <path
+    d="M7,5 l0.75,-3 l0.75,3"
+    stroke="black"
+    fill="none"
+    stroke-linejoin="miter-clip" />
 
   <!-- the following red dotted line show where the clip should happen -->
-  <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05"  stroke-width="0.025"/>
+  <path
+    d="M0,0 h10"
+    stroke="red"
+    stroke-dasharray="0.05"
+    stroke-width="0.025" />
 
   <!-- the following pink lines highlight the position of the path for each stroke -->
   <g>
@@ -238,10 +307,14 @@ html,body,svg { height:100% }
     <circle cx="3" cy="2" r="0.05" fill="pink" />
     <circle cx="5" cy="5" r="0.05" fill="pink" />
 
-    <path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" />
-    <circle cx="7"    cy="5" r="0.05" fill="pink" />
+    <path
+      d="M7,5 l0.75,-3 l0.75,3"
+      stroke="pink"
+      fill="none"
+      stroke-width="0.025" />
+    <circle cx="7" cy="5" r="0.05" fill="pink" />
     <circle cx="7.75" cy="2" r="0.05" fill="pink" />
-    <circle cx="8.5"  cy="5" r="0.05" fill="pink" />
+    <circle cx="8.5" cy="5" r="0.05" fill="pink" />
   </g>
 </svg>
 ```
@@ -255,22 +328,28 @@ html,body,svg { height:100% }
 #### 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
   <!-- Effect of the "round" value -->
-  <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
-        stroke-linejoin="round" />
+  <path
+    d="M1,5 l2,-3 l2,3"
+    stroke="black"
+    fill="none"
+    stroke-linejoin="round" />
 
   <!--
   the following pink lines highlight the
   position of the path for each stroke
   -->
   <g id="p">
-    <path d="M1,5 l2,-3 l2,3"
-          stroke="pink" fill="none" stroke-width="0.025" />
+    <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
     <circle cx="1" cy="5" r="0.05" fill="pink" />
     <circle cx="3" cy="2" r="0.05" fill="pink" />
     <circle cx="5" cy="5" r="0.05" fill="pink" />
diff --git a/files/zh-cn/web/svg/attribute/stroke-miterlimit/index.md b/files/zh-cn/web/svg/attribute/stroke-miterlimit/index.md
index d6c33c713773a3..14121463e4c459 100644
--- a/files/zh-cn/web/svg/attribute/stroke-miterlimit/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke-miterlimit/index.md
@@ -17,11 +17,11 @@ miterLength / stroke-width = 1 / sin ( theta / 2 )
 
 ## 用法
 
-| 类别   | 外观属性                |
-| ------ | ----------------------- |
+| 类别   | 外观属性                 |
+| ------ | ------------------------ |
 | 值     | \<miterlimit> \| inherit |
-| 初始值 | 4                       |
-| 可动性 | Yes                     |
+| 初始值 | 4                        |
+| 可动性 | Yes                      |
 
 - \<miterlimit>
   - : 对斜角长度与{{ SVGAttr("stroke-width") }}的比率的限制。\<miterlimit>的值必须是一个大于或等于 1 的[\<number>](/zh-CN/SVG/Content_type#Number)。
diff --git a/files/zh-cn/web/svg/attribute/stroke-opacity/index.md b/files/zh-cn/web/svg/attribute/stroke-opacity/index.md
index b52a535b40703a..55e6f220d240df 100644
--- a/files/zh-cn/web/svg/attribute/stroke-opacity/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke-opacity/index.md
@@ -11,10 +11,10 @@ slug: Web/SVG/Attribute/stroke-opacity
 
 ## 用法
 
-| 类别   | 外观属性                   |
-| ------ | -------------------------- |
+| 类别   | 外观属性                    |
+| ------ | --------------------------- |
 | 值     | \<opacity-value> \| inherit |
-| 可变性 | Yes                        |
+| 可变性 | Yes                         |
 
 - \<opacity-value>
   - : 在当前对象的轮廓上用该涂色操作的不透明度。任何超出 0.0 到 1.0 范围的值都会被压回这个范围（0.0 表示完全透明，1.0 表示完全不透明）。
@@ -25,18 +25,18 @@ slug: Web/SVG/Attribute/stroke-opacity
 
 ```html
 <svg width="120px" height="120px" viewBox="0 0 120 120">
-  <rect x="10" y="10" width="100" height="100"/>
+  <rect x="10" y="10" width="100" height="100" />
 </svg>
 ```
 
 ### CSS
 
 ```css
-rect{
-  fill:#b4da55;
-  stroke:#000;
-  stroke-width:10px;
-  stroke-opacity:0.3;
+rect {
+  fill: #b4da55;
+  stroke: #000;
+  stroke-width: 10px;
+  stroke-opacity: 0.3;
 }
 ```
 
diff --git a/files/zh-cn/web/svg/attribute/stroke-width/index.md b/files/zh-cn/web/svg/attribute/stroke-width/index.md
index dc4e26c5e9b08d..81999bc29fa8f8 100644
--- a/files/zh-cn/web/svg/attribute/stroke-width/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke-width/index.md
@@ -11,10 +11,10 @@ slug: Web/SVG/Attribute/stroke-width
 
 ## 用法
 
-| 类别   | 外观属性                                                                                              |
-| ------ | ----------------------------------------------------------------------------------------------------- |
+| 类别   | 外观属性                                                                                                      |
+| ------ | ------------------------------------------------------------------------------------------------------------- |
 | 值     | [\<length>](/zh-CN/SVG/Content_type#Length) \| [\<percentage>](/zh-CN/SVG/Content_type#Percentage) \| inherit |
-| 可变性 | Yes                                                                                                   |
+| 可变性 | Yes                                                                                                           |
 
 ## 示例
 
diff --git a/files/zh-cn/web/svg/attribute/stroke/index.md b/files/zh-cn/web/svg/attribute/stroke/index.md
index b693f429dbef9e..8631dfa7157902 100644
--- a/files/zh-cn/web/svg/attribute/stroke/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke/index.md
@@ -9,10 +9,10 @@ slug: Web/SVG/Attribute/stroke
 
 ## 用法
 
-| 类别   | 外观属性                              |
-| ------ | ------------------------------------- |
+| 类别   | 外观属性                                  |
+| ------ | ----------------------------------------- |
 | 值     | [\<paint>](/zh-CN/SVG/Content_type#Paint) |
-| 可变性 | 是                                    |
+| 可变性 | 是                                        |
 
 ## 示例
 
@@ -21,8 +21,8 @@ slug: Web/SVG/Attribute/stroke
 ### 示例 1：用 stroke 属性画一条绿色的直线。
 
 ```html
-<svg height="50" width ="300">
-    <path stroke = "green" d="M5 20 1215 0" />
+<svg height="50" width="300">
+  <path stroke="green" d="M5 20 1215 0" />
 </svg>
 ```
 
@@ -30,7 +30,7 @@ slug: Web/SVG/Attribute/stroke
 
 ```html
 <svg height="200" width="200">
-    <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill ="black" />
+  <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill="black" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/attribute/style/index.md b/files/zh-cn/web/svg/attribute/style/index.md
index 7683eb7c6343c6..a79e7a90558f97 100644
--- a/files/zh-cn/web/svg/attribute/style/index.md
+++ b/files/zh-cn/web/svg/attribute/style/index.md
@@ -23,8 +23,12 @@ slug: Web/SVG/Attribute/style
 
 ```html
 <svg version="1.1" viewbox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg">
-  <rect height="300" width="600" x="200" y="100"
-     style="fill: red; stroke: blue; stroke-width: 3"/>
+  <rect
+    height="300"
+    width="600"
+    x="200"
+    y="100"
+    style="fill: red; stroke: blue; stroke-width: 3" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/attribute/target/index.md b/files/zh-cn/web/svg/attribute/target/index.md
index be375a38d545c8..4ceb4f8665dba6 100644
--- a/files/zh-cn/web/svg/attribute/target/index.md
+++ b/files/zh-cn/web/svg/attribute/target/index.md
@@ -12,14 +12,19 @@ slug: Web/SVG/Attribute/target
 ## 示例
 
 ```css hidden
-html, body, svg {
-    height: 100%;
+html,
+body,
+svg {
+  height: 100%;
 }
 
 text {
-    font: 20px Arial, Helvetica, sans-serif;
-    fill: blue;
-    text-decoration: underline;
+  font:
+    20px Arial,
+    Helvetica,
+    sans-serif;
+  fill: blue;
+  text-decoration: underline;
 }
 ```
 
@@ -27,13 +32,13 @@ text {
 <svg viewBox="0 0 300 120" xmlns="http://www.w3.org/2000/svg">
   <a href="https://developer.mozilla.org" target="_self">
     <text x="0" y="20">在 iframe 中打开链接</text>
-    </a>
+  </a>
   <a href="https://developer.mozilla.org" target="_blank">
     <text x="0" y="60">在新标签页或窗口中打开链接</text>
-    </a>
+  </a>
   <a href="https://developer.mozilla.org" target="_top">
     <text x="0" y="100">在此标签或窗口中打开链接</text>
-    </a>
+  </a>
 </svg>
 ```
 
@@ -47,6 +52,7 @@ text {
 | 可动画的 | 是                                                    |
 
 - `_replace` {{deprecated_inline}}
+
   - : 当前 SVG 图像被与当前 SVG 图像在同一帧中相同矩形区域中的链接内容替换。
 
     > **备注：** 这个值是从来没有很好的执行，之间的区别 `_replace`，并 `_self` 已通过在浏览上下文的 HTML 定义的变化变得多余。使用 `_self` 以取代目前的 SVG 文件。
@@ -58,9 +64,9 @@ text {
 - `_top`
   - : 完整活动窗口或选项卡的内容将由链接的内容替换（如果存在），并且可以从此文档中安全地访问
 - `_blank`
-  - : 如果此文档可以安全地显示，则需要一个新的未命名窗口或标签来显示链接的内容。如果用户代理不支持多个窗口/选项卡，则结果与_top 相同。
+  - : 如果此文档可以安全地显示，则需要一个新的未命名窗口或标签来显示链接的内容。如果用户代理不支持多个窗口/选项卡，则结果与\_top 相同。
 - `<XML-Name>`
-  - : 指定用于显示链接内容的浏览上下文的名称（选项卡，内联框架，对象等）。如果具有该名称的上下文已经存在，并且可以从此文档中安全地访问，则可以重新使用该上下文，替换现有内容。如果不存在，则创建它（与'_blank'相同，但现在有了一个名称）。该名称必须是有效的 XML 名称 \[XML11]，并且不能以下划线（U + 005F LOW LINE 字符）开头，以满足来自 HTML 的有效浏览上下文名称的要求。
+  - : 指定用于显示链接内容的浏览上下文的名称（选项卡，内联框架，对象等）。如果具有该名称的上下文已经存在，并且可以从此文档中安全地访问，则可以重新使用该上下文，替换现有内容。如果不存在，则创建它（与'\_blank'相同，但现在有了一个名称）。该名称必须是有效的 XML 名称 \[XML11]，并且不能以下划线（U + 005F LOW LINE 字符）开头，以满足来自 HTML 的有效浏览上下文名称的要求。
 
 ## 规范
 
diff --git a/files/zh-cn/web/svg/attribute/text-anchor/index.md b/files/zh-cn/web/svg/attribute/text-anchor/index.md
index 0466f5d0dca633..ab244bcd9cf8ce 100644
--- a/files/zh-cn/web/svg/attribute/text-anchor/index.md
+++ b/files/zh-cn/web/svg/attribute/text-anchor/index.md
@@ -29,33 +29,36 @@ slug: Web/SVG/Attribute/text-anchor
 
 ```html
 <?xml version="1.0"?>
-<svg width="120" height="120" viewBox="0 0 120 120"
-     xmlns="http://www.w3.org/2000/svg" version="1.1">
-
-    <!-- Materialisation of anchors -->
-    <path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" />
-
-
-    <!-- Anchors in action -->
-    <text text-anchor="start"
-          x="60" y="40">A</text>
-
-    <text text-anchor="middle"
-          x="60" y="75">A</text>
-
-    <text text-anchor="end"
-          x="60" y="110">A</text>
-
-    <!-- Materialisation of anchors -->
-    <circle cx="60" cy="40" r="3" fill="red" />
-    <circle cx="60" cy="75" r="3" fill="red" />
-    <circle cx="60" cy="110" r="3" fill="red" />
-
-<style><![CDATA[
-text{
-    font: bold 36px Verdana, Helvetica, Arial, sans-serif;
-}
-]]></style>
+<svg
+  width="120"
+  height="120"
+  viewBox="0 0 120 120"
+  xmlns="http://www.w3.org/2000/svg"
+  version="1.1">
+  <!-- Materialisation of anchors -->
+  <path
+    d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110"
+    stroke="grey" />
+
+  <!-- Anchors in action -->
+  <text text-anchor="start" x="60" y="40">A</text>
+
+  <text text-anchor="middle" x="60" y="75">A</text>
+
+  <text text-anchor="end" x="60" y="110">A</text>
+
+  <!-- Materialisation of anchors -->
+  <circle cx="60" cy="40" r="3" fill="red" />
+  <circle cx="60" cy="75" r="3" fill="red" />
+  <circle cx="60" cy="110" r="3" fill="red" />
+
+  <style>
+    <![CDATA[
+    text{
+        font: bold 36px Verdana, Helvetica, Arial, sans-serif;
+    }
+    ]]>
+  </style>
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/attribute/transform/index.md b/files/zh-cn/web/svg/attribute/transform/index.md
index f1e63831a28f50..9fac2a8efcaeb7 100644
--- a/files/zh-cn/web/svg/attribute/transform/index.md
+++ b/files/zh-cn/web/svg/attribute/transform/index.md
@@ -10,20 +10,30 @@ slug: Web/SVG/Attribute/transform
 ## 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
-<svg viewBox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <g fill="grey"
-     transform="rotate(-10 50 100)
+<svg
+  viewBox="-40 0 150 100"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g
+    fill="grey"
+    transform="rotate(-10 50 100)
                 translate(-36 45.5)
                 skewX(40)
                 scale(1 0.5)">
-    <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
+    <path
+      id="heart"
+      d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
   </g>
 
-  <use xlink:href="#heart" fill="none" stroke="red"/>
+  <use xlink:href="#heart" fill="none" stroke="red" />
 </svg>
 ```
 
@@ -36,9 +46,9 @@ html,body,svg { height:100% }
 另外，作为 SVG 1.1 的遗留物，{{SVGElement('linearGradient')}}和{{SVGElement('radialGradient')}}支持 `gradientTransform` 属性，而{{SVGElement('pattern')}}支持 `patternTransform` 属性，两者的行为完全相同于 `transform` 属性
 
 | Value         | **[\<transform-list>](/zh-CN/docs/Web/SVG/Content_type#Transform-list)** |
-| ------------- | ----------------------------------------------------------------- |
-| Default value | _none_                                                            |
-| Animatable    | Yes                                                               |
+| ------------- | ------------------------------------------------------------------------ |
+| Default value | _none_                                                                   |
+| Animatable    | Yes                                                                      |
 
 ## Transform functions
 
@@ -53,7 +63,11 @@ html,body,svg { height:100% }
 #### 举例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
@@ -84,8 +98,13 @@ html,body,svg { height:100% }
   newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 30 + 30 = 120
   newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 30 + 40 = 170
   -->
-  <rect x="10" y="10" width="30" height="20" fill="red"
-        transform="matrix(3 1 -1 3 30 40)" />
+  <rect
+    x="10"
+    y="10"
+    width="30"
+    height="20"
+    fill="red"
+    transform="matrix(3 1 -1 3 30 40)" />
 </svg>
 ```
 
@@ -98,7 +117,11 @@ html,body,svg { height:100% }
 #### 举例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
@@ -107,16 +130,31 @@ html,body,svg { height:100% }
   <rect x="5" y="5" width="40" height="40" fill="green" />
 
   <!-- Horizontal translation -->
-  <rect x="5" y="5" width="40" height="40" fill="blue"
-        transform="translate(50)" />
+  <rect
+    x="5"
+    y="5"
+    width="40"
+    height="40"
+    fill="blue"
+    transform="translate(50)" />
 
   <!-- Vertical translation -->
-  <rect x="5" y="5" width="40" height="40" fill="red"
-        transform="translate(0 50)" />
+  <rect
+    x="5"
+    y="5"
+    width="40"
+    height="40"
+    fill="red"
+    transform="translate(0 50)" />
 
   <!-- Both horizontal and vertical translation -->
-  <rect x="5" y="5" width="40" height="40" fill="yellow"
-         transform="translate(50,50)" />
+  <rect
+    x="5"
+    y="5"
+    width="40"
+    height="40"
+    fill="yellow"
+    transform="translate(50,50)" />
 </svg>
 ```
 
@@ -129,22 +167,23 @@ html,body,svg { height:100% }
 #### 举例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
   <!-- uniform scale -->
-  <circle cx="0" cy="0" r="10" fill="red"
-          transform="scale(4)" />
+  <circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" />
 
   <!-- vertical scale -->
-  <circle cx="0" cy="0" r="10" fill="yellow"
-          transform="scale(1,4)" />
+  <circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1,4)" />
 
   <!-- horizontal scale -->
-  <circle cx="0" cy="0" r="10" fill="pink"
-          transform="scale(4,1)" />
+  <circle cx="0" cy="0" r="10" fill="pink" transform="scale(4,1)" />
 
   <!-- No scale -->
   <circle cx="0" cy="0" r="10" fill="black" />
@@ -160,7 +199,11 @@ html,body,svg { height:100% }
 #### 举例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
@@ -168,12 +211,16 @@ html,body,svg { height:100% }
   <rect x="0" y="0" width="10" height="10" />
 
   <!-- rotation is done around the point 0,0 -->
-  <rect x="0" y="0" width="10" height="10" fill="red"
-        transform="rotate(100)" />
+  <rect x="0" y="0" width="10" height="10" fill="red" transform="rotate(100)" />
 
   <!-- rotation is done around the point 10,10 -->
-  <rect x="0" y="0" width="10" height="10" fill="green"
-        transform="rotate(100,10,10)" />
+  <rect
+    x="0"
+    y="0"
+    width="10"
+    height="10"
+    fill="green"
+    transform="rotate(100,10,10)" />
 </svg>
 ```
 
@@ -186,15 +233,18 @@ html,body,svg { height:100% }
 #### 举例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
   <rect x="-3" y="-3" width="6" height="6" />
 
-  <rect x="-3" y="-3" width="6" height="6" fill="red"
-        transform="skewX(30)" />
+  <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewX(30)" />
 </svg>
 ```
 
@@ -207,15 +257,18 @@ html,body,svg { height:100% }
 #### 举例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
   <rect x="-3" y="-3" width="6" height="6" />
 
-  <rect x="-3" y="-3" width="6" height="6" fill="red"
-        transform="skewY(30)" />
+  <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewY(30)" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/attribute/type/index.md b/files/zh-cn/web/svg/attribute/type/index.md
index 153051db94350e..7d6a4f1022e884 100644
--- a/files/zh-cn/web/svg/attribute/type/index.md
+++ b/files/zh-cn/web/svg/attribute/type/index.md
@@ -51,7 +51,7 @@ type 属性是一个类属性，他在不同的使用语境下有不同的意思
 
 | Categories         | _None_                                                                                                                                                                                                 |
 | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Value              | \<content-type>                                                                                                                                                                                         |
+| Value              | \<content-type>                                                                                                                                                                                        |
 | Animatable         | No                                                                                                                                                                                                     |
 | Normative document | [SVG 1.1 (2nd Edition) : script](http://www.w3.org/TR/SVG11/script.html#ScriptElementTypeAttribute) [SVG 1.1 (2nd Edition) : style](http://www.w3.org/TR/SVG11/styling.html#StyleElementTypeAttribute) |
 
diff --git a/files/zh-cn/web/svg/attribute/values/index.md b/files/zh-cn/web/svg/attribute/values/index.md
index 9020e9cf9c868c..81ad40c3779aac 100644
--- a/files/zh-cn/web/svg/attribute/values/index.md
+++ b/files/zh-cn/web/svg/attribute/values/index.md
@@ -31,6 +31,7 @@ values 属性具有不同的含义，具体取决于使用的上下文，它可
 | Animatable    | Yes                                                                                                                                                      |
 
 - `<list-of-numbers>`
+
   - : 该值是一个数字列表，根据 type 属性的值来定义不同解释：
 
     - `type="matrix"`，`values` 是 20 个矩阵值（a00 a01 a02 a03 a04 a10 a11 ... a34）的列表，以空格和/或逗号分隔。
diff --git a/files/zh-cn/web/svg/attribute/vector-effect/index.md b/files/zh-cn/web/svg/attribute/vector-effect/index.md
index 5a4055d436234a..9b54b9a34c8fad 100644
--- a/files/zh-cn/web/svg/attribute/vector-effect/index.md
+++ b/files/zh-cn/web/svg/attribute/vector-effect/index.md
@@ -36,15 +36,28 @@ slug: Web/SVG/Attribute/vector-effect
 ```html
 <svg viewBox="0 0 500 240">
   <!-- normal -->
-  <path d="M10,20L40,100L39,200z" stroke="black" stroke-width="2px" fill="none"></path>
+  <path
+    d="M10,20L40,100L39,200z"
+    stroke="black"
+    stroke-width="2px"
+    fill="none"></path>
 
   <!-- scaled -->
-  <path transform="translate(100,0)scale(4,1)" d="M10,20L40,100L39,200z" stroke="black"
-      stroke-width="2px" fill="none"></path>
+  <path
+    transform="translate(100,0)scale(4,1)"
+    d="M10,20L40,100L39,200z"
+    stroke="black"
+    stroke-width="2px"
+    fill="none"></path>
 
   <!-- fixed-->
-  <path vector-effect="non-scaling-stroke" transform="translate(300,0)scale(4,1)" d="M10,20L40,100L39,200z"
-      stroke="black" stroke-width="2px" fill="none"></path>
+  <path
+    vector-effect="non-scaling-stroke"
+    transform="translate(300,0)scale(4,1)"
+    d="M10,20L40,100L39,200z"
+    stroke="black"
+    stroke-width="2px"
+    fill="none"></path>
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/attribute/version/index.md b/files/zh-cn/web/svg/attribute/version/index.md
index 017c00add646d1..f6e63aa7f045cf 100644
--- a/files/zh-cn/web/svg/attribute/version/index.md
+++ b/files/zh-cn/web/svg/attribute/version/index.md
@@ -11,10 +11,10 @@ slug: Web/SVG/Attribute/version
 
 ## Usage context
 
-| 类别     | None                                    |
-| -------- | --------------------------------------- |
+| 类别     | None                                        |
+| -------- | ------------------------------------------- |
 | 值       | [\<number>](/zh-CN/SVG/Content_type#Number) |
-| 动画属性 | No                                      |
+| 动画属性 | No                                          |
 
 ## 规范
 
diff --git a/files/zh-cn/web/svg/attribute/y/index.md b/files/zh-cn/web/svg/attribute/y/index.md
index be029cbc51124d..46de0be3f04c39 100644
--- a/files/zh-cn/web/svg/attribute/y/index.md
+++ b/files/zh-cn/web/svg/attribute/y/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'y'
+title: "y"
 slug: Web/SVG/Attribute/y
 ---
 
diff --git a/files/zh-cn/web/svg/content_type/index.md b/files/zh-cn/web/svg/content_type/index.md
index e426f4d4a76d5e..d3f7ff486f04ea 100644
--- a/files/zh-cn/web/svg/content_type/index.md
+++ b/files/zh-cn/web/svg/content_type/index.md
@@ -10,6 +10,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
 ## 角度
 
 - \<angle>
+
   - : 可以用两种办法指定角度。如果用在样式表的属性的值中，`<angle>` 可以用如下方法定义：`plain angle ::= number (~"deg" | ~"grad" | ~"rad")?` 在这里 deg 标识了度数，grad 标识了斜率，rad 标识了弧度。对于定义在 CSS2 中的属性，必须提供一个角度单位标识符。对于在 SVG 特有的属性和它们对应的外观属性中的角度值，角度单位标识符是可选的。如果没有提供，角度值会被潜在分配一个度数单位。在所有元素的外观属性中，无论是在 SVG1.1 中定义的，还是在 CSS2 中定义的，如果指定了角度标识符，角度标识符必须是小写的。如果角度用在一个 SVG 属性中，`<angle>`可以用以下方式定义：
 
     ```plain
@@ -21,6 +22,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
 ## 任意值
 
 - \<anything>
+
   - : 基本类型 \<anything> 是一个零字符或多字符的序列。具体如下：
 
     ```plain
@@ -32,6 +34,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
 ## 时钟值
 
 - \<clock-value>
+
   - : 时钟值的句法与 [SMIL Animation](https://www.w3.org/TR/2001/REC-smil-animation-20010904/) 规范中写的句法相同。在这里重放一下时钟值的语法：
 
     ```
@@ -52,14 +55,17 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
     对于 `Timecount` 值，默认的公制前缀是“s”（秒）。在时钟值中不能嵌入空白，而且前导和末尾的空白字符会被忽略掉。下面是合法的时钟值的示例：
 
     - 完整时钟值：
+
       - `02:30:03` >= 2 小时 30 分钟又 3 秒
       - `50:00:10.25` = 50 小时 10 秒又 250 毫秒
 
     - 部分时钟值：
+
       - `02:33` >= 2 分钟又 33 秒
       - `00:10.5` = 10.5 秒 = 10 秒又 500 毫秒
 
     - Timecount 值：
+
       - `3.2h` >= 3.2 小时 = 3 小时 12 分钟
       - `45min` >= 45 分钟
       - `30s` >= 30 秒
@@ -73,6 +79,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
 ## 颜色
 
 - \<color>
+
   - : 基本类型\<color>是一个 CSS2 兼容的规范，针对 sRGB 颜色空间的颜色。\<color> 应用在 SVG 的属性 {{SVGAttr("color")}} 上，也是属性{{SVGAttr("fill")}}、属性{{SVGAttr("stroke")}}、属性{{SVGAttr("stop-color")}}、属性 {{SVGAttr("flood-color")}}和属性{{SVGAttr("lighting-color")}}的定义的组成部分，\<color> 还提供了可选的基于 ICC 的颜色规范。
 
     SVG 支持所有的定义在[CSS2 句法和基本数据类型](http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#value-def-color)中的 \<color> 供选择的句法，而且还支持[CSS Color Module Level 3](http://www.w3.org/TR/css3-color/)中的 \<color> 句法（取决于编译器）。
@@ -99,6 +106,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
 ## 频率
 
 - \<frequency>
+
   - : 频率值用在可听到的属性上。就如 CSS2 中所定义的，一个频率值是一个 [\<number>](/zh-CN/docs/SVG/Content_type#Number) 后面跟着一个频率单位标识符。频率单位标识符可以是：
 
     - `Hz`：赫兹
@@ -114,6 +122,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
 ## ICC 颜色
 
 - \<icccolor>
+
   - : \<icccolor> 一份 ICC 颜色规范。在 SVG 1.1，一份 ICC 颜色规范，顾名思义，是一个参考了一个{{SVGElement("color-profile")}} 元素，以及一个或更多颜色成分值。语法如下所示：
 
     ```plain
@@ -125,6 +134,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
 ## 整型数
 
 - \<integer>
+
   - : 用一个可选的正负符号（“+”或“-”）后面跟着一个或多个 0 到 9 的数字可以指定一个\<integer>：
 
     ```plain
@@ -136,6 +146,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
 ## IRI
 
 - \<IRI>
+
   - : 一个国际化资源标识符。在因特网上，资源是用 _IRI_（一个国际化资源标识符）标识的。举个例子，一个 SVG 文档调用了位于 `http://example.com` 上的 `someDrawing.svg`，可以使用下面的 _IRI_：
 
     ```
@@ -159,7 +170,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
     然后你再引用这个线性渐变，作为矩形的属性 {{SVGAttr("fill")}} 的值，如下：
 
     ```html
-    <rect fill="url(#MyGradient)"/>
+    <rect fill="url(#MyGradient)" />
     ```
 
     SVG 支持两种类型的 _IRI_ 引用：
@@ -172,6 +183,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
 ## 长度
 
 - \<length>
+
   - : 一个长度是一个可度量的距离，给定一个数字以及一个单位。长度可以用两种方法指定。如果在样式表中使用它，可以如下定义\<length>：
 
     ```
@@ -200,17 +212,19 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
 ## T 值数列
 
 - \<list-of-\_T_s>
+
   - : （在这里*T* 某些类型。）由一系列分开的值构成的数列。除非另有说明，SVG 的 XML 属性内的数列既可以是逗号分隔的，也可以是空格分隔的。用逗号作分隔符，逗号前面或后面可有带空格。数列中的空白被定义为一个或多个下列连续字符：“空格”（U+0020）、“制表符”（U+0009）、 “换行符”（U+000A）、 “回车符”（U+000D）以及“换页符”(U+000C)。下面是一个 EBNF 语法的模板，用来描述\<list-of-\_T_s>句法：
 
     ```plain
     list-of-Ts ::= T | T, list-of-Ts
     ```
 
-    在 SVG DOM 内部，\<list-of-_T_s>类型的值可以用一个限特定类型 _T_ 的接口来表达。举个例子，SVG DOM 中的\<list-of-lengths>使用一个 {{domxref("SVGLengthList")}} 对象或者 {{domxref("SVGAnimatedLengthList")}} 对象来表达。
+    在 SVG DOM 内部，\<list-of-_T_s>类型的值可以用一个限特定类型 \_T_ 的接口来表达。举个例子，SVG DOM 中的\<list-of-lengths>使用一个 {{domxref("SVGLengthList")}} 对象或者 {{domxref("SVGAnimatedLengthList")}} 对象来表达。
 
 ## 命名
 
 - \<name>
+
   - : 一个命名，是一个字符串，是不符合句法意义的少量的字符。
 
     ```plain
@@ -220,6 +234,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
 ## 数字
 
 - \<number>
+
   - : 真实数字可以用两种方法指定。如果用在样式表中，一个 \<number> 可以如下定义：`plain number ::= integer | [+-]? [0-9]* "." [0-9]+` 该句法与 CSS（CSS2 第 4.3.1 章节）中的定义一样。如果用在一个 SVG 属性中，一个 \<number> 可以用别的方法定义，允许一个数字后面跟着大数指数，以指定得更精确：
 
     ```plain
@@ -231,6 +246,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
 ## 带可取舍的后缀数字的数字
 
 - \<number-optional-number>
+
   - : 一对\<number>，其中第二个 \<number> 是可视情况取舍的。
 
     ```plain
@@ -252,6 +268,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
 ## 百分数
 
 - \<percentage>
+
   - : 一个数字后面跟着一个百分号“%”就可以指定一个百分数。
 
     ```plain
@@ -263,6 +280,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
 ## 时间
 
 - \<time>
+
   - : 一个时间值是一个 &#x3C;number> 后面紧跟着时间单位标识符。时间单位标识符可以是：
 
     - ms：毫秒
diff --git a/files/zh-cn/web/svg/element/a/index.md b/files/zh-cn/web/svg/element/a/index.md
index c7654555c2f64a..bcce3c02f23070 100644
--- a/files/zh-cn/web/svg/element/a/index.md
+++ b/files/zh-cn/web/svg/element/a/index.md
@@ -16,17 +16,15 @@ slug: Web/SVG/Element/a
 ## 示例
 
 ```html
-<svg width="140" height="30"
-     xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink">
-
-  <a xlink:href="https://developer.mozilla.org/zh-CN/docs/SVG"
-     target="_blank">
-    <rect height="30" width="120" y="0" x="0" rx="15"/>
-    <text fill="white" text-anchor="middle"
-          y="21" x="60">SVG on MDN</text>
+<svg
+  width="140"
+  height="30"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <a xlink:href="https://developer.mozilla.org/zh-CN/docs/SVG" target="_blank">
+    <rect height="30" width="120" y="0" x="0" rx="15" />
+    <text fill="white" text-anchor="middle" y="21" x="60">SVG on MDN</text>
   </a>
-
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/element/animate/index.md b/files/zh-cn/web/svg/element/animate/index.md
index bbbeac42c62516..07eb1ec7ac8ca1 100644
--- a/files/zh-cn/web/svg/element/animate/index.md
+++ b/files/zh-cn/web/svg/element/animate/index.md
@@ -10,13 +10,23 @@ slug: Web/SVG/Element/animate
 ## 示例
 
 ```css hidden
-html,body,svg { height:100%; margin:0; padding:0; }
+html,
+body,
+svg {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
 ```
 
 ```html
 <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
   <rect width="10" height="10">
-    <animate attributeName="rx" values="0;5;0" dur="10s" repeatCount="indefinite" />
+    <animate
+      attributeName="rx"
+      values="0;5;0"
+      dur="10s"
+      repeatCount="indefinite" />
   </rect>
 </svg>
 ```
diff --git a/files/zh-cn/web/svg/element/animatemotion/index.md b/files/zh-cn/web/svg/element/animatemotion/index.md
index 525e2a3adc4164..d86e591cc0fea6 100644
--- a/files/zh-cn/web/svg/element/animatemotion/index.md
+++ b/files/zh-cn/web/svg/element/animatemotion/index.md
@@ -12,7 +12,14 @@ slug: Web/SVG/Element/animateMotion
 ## 示例
 
 ```css
-html,body,svg { height:100%; margin: 0; padding: 0; display:block; }
+html,
+body,
+svg {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  display: block;
+}
 ```
 
 ```xml
diff --git a/files/zh-cn/web/svg/element/animatetransform/index.md b/files/zh-cn/web/svg/element/animatetransform/index.md
index fffed60cd886f5..deee960d0f960e 100644
--- a/files/zh-cn/web/svg/element/animatetransform/index.md
+++ b/files/zh-cn/web/svg/element/animatetransform/index.md
@@ -15,19 +15,23 @@ slug: Web/SVG/Element/animateTransform
 
 ```html
 <?xml version="1.0"?>
-<svg width="120" height="120"  viewBox="0 0 120 120"
-     xmlns="http://www.w3.org/2000/svg" version="1.1"
-     xmlns:xlink="http://www.w3.org/1999/xlink" >
-
-    <polygon points="60,30 90,90 30,90">
-        <animateTransform attributeName="transform"
-                          attributeType="XML"
-                          type="rotate"
-                          from="0 60 70"
-                          to="360 60 70"
-                          dur="10s"
-                          repeatCount="indefinite"/>
-    </polygon>
+<svg
+  width="120"
+  height="120"
+  viewBox="0 0 120 120"
+  xmlns="http://www.w3.org/2000/svg"
+  version="1.1"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <polygon points="60,30 90,90 30,90">
+    <animateTransform
+      attributeName="transform"
+      attributeType="XML"
+      type="rotate"
+      from="0 60 70"
+      to="360 60 70"
+      dur="10s"
+      repeatCount="indefinite" />
+  </polygon>
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/element/circle/index.md b/files/zh-cn/web/svg/element/circle/index.md
index 02574d23617328..51f16fc7124720 100644
--- a/files/zh-cn/web/svg/element/circle/index.md
+++ b/files/zh-cn/web/svg/element/circle/index.md
@@ -14,12 +14,16 @@ slug: Web/SVG/Element/circle
 ## 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="50" cy="50" r="50"/>
+  <circle cx="50" cy="50" r="50" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/element/clippath/index.md b/files/zh-cn/web/svg/element/clippath/index.md
index 8984f842ba88fb..78dbbc89777e71 100644
--- a/files/zh-cn/web/svg/element/clippath/index.md
+++ b/files/zh-cn/web/svg/element/clippath/index.md
@@ -12,7 +12,11 @@ slug: Web/SVG/Element/clipPath
 ## 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
@@ -25,7 +29,9 @@ html,body,svg { height:100% }
   </clipPath>
 
   <!-- 作为引用元素（英文原文：for reference）的黑色心形 -->
-  <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
+  <path
+    id="heart"
+    d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
 
   <!--
     和上述黑色心形形状相同的红色心形，剪切路径是上面定义的圆；
@@ -38,7 +44,14 @@ html,body,svg { height:100% }
 ```css
 /* 如果浏览器支持几何属性 r，可以加一点 css */
 
-@keyframes openYourHeart {from {r: 0} to {r: 60px}}
+@keyframes openYourHeart {
+  from {
+    r: 0;
+  }
+  to {
+    r: 60px;
+  }
+}
 
 #myClip circle {
   animation: openYourHeart 15s infinite;
diff --git a/files/zh-cn/web/svg/element/feblend/index.md b/files/zh-cn/web/svg/element/feblend/index.md
index 5705f387e7dcb1..bf16989f40c543 100644
--- a/files/zh-cn/web/svg/element/feblend/index.md
+++ b/files/zh-cn/web/svg/element/feblend/index.md
@@ -36,19 +36,32 @@ slug: Web/SVG/Element/feBlend
 ### SVG
 
 ```html
-<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg
+  width="200"
+  height="200"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
     <filter id="spotlight">
-      <feFlood result="floodFill" x="0" y="0" width="100%" height="100%"
-          flood-color="green" flood-opacity="1"/>
-      <feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/>
+      <feFlood
+        result="floodFill"
+        x="0"
+        y="0"
+        width="100%"
+        height="100%"
+        flood-color="green"
+        flood-opacity="1" />
+      <feBlend in="SourceGraphic" in2="floodFill" mode="multiply" />
     </filter>
   </defs>
 
-  <image xlink:href="/files/6457/mdn_logo_only_color.png"
-      x="10%" y="10%" width="80%" height="80%"
-      style="filter:url(#spotlight);"/>
+  <image
+    xlink:href="/files/6457/mdn_logo_only_color.png"
+    x="10%"
+    y="10%"
+    width="80%"
+    height="80%"
+    style="filter:url(#spotlight);" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/element/fecolormatrix/index.md b/files/zh-cn/web/svg/element/fecolormatrix/index.md
index e07ec7e58e538f..931722e8baccc6 100644
--- a/files/zh-cn/web/svg/element/fecolormatrix/index.md
+++ b/files/zh-cn/web/svg/element/fecolormatrix/index.md
@@ -14,11 +14,13 @@ slug: Web/SVG/Element/feColorMatrix
 ## 示例
 
 ```html
-<svg width="100%" height="100%" viewBox="0 0 150 360"
- preserveAspectRatio="xMidYMid meet"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink">
-
+<svg
+  width="100%"
+  height="100%"
+  viewBox="0 0 150 360"
+  preserveAspectRatio="xMidYMid meet"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
   <text x="70" y="50">Reference</text>
   <g>
     <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
@@ -26,11 +28,11 @@ slug: Web/SVG/Element/feColorMatrix
     <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
   </g>
 
-
   <text x="70" y="120">matrix</text>
 
   <filter id="colorMeMatrix">
-    <feColorMatrix in="SourceGraphic"
+    <feColorMatrix
+      in="SourceGraphic"
       type="matrix"
       values="0 0 0 0 0
               1 1 1 1 0
@@ -39,18 +41,15 @@ slug: Web/SVG/Element/feColorMatrix
   </filter>
 
   <g filter="url(#colorMeMatrix)">
-    <circle cx="30" cy="100" r="20" fill="blue"  fill-opacity="0.5" />
+    <circle cx="30" cy="100" r="20" fill="blue" fill-opacity="0.5" />
     <circle cx="20" cy="120" r="20" fill="green" fill-opacity="0.5" />
-    <circle cx="40" cy="120" r="20" fill="red"   fill-opacity="0.5" />
+    <circle cx="40" cy="120" r="20" fill="red" fill-opacity="0.5" />
   </g>
 
-
   <text x="70" y="190">saturate</text>
 
   <filter id="colorMeSaturate">
-    <feColorMatrix in="SourceGraphic"
-      type="saturate"
-      values="0.2" />
+    <feColorMatrix in="SourceGraphic" type="saturate" values="0.2" />
   </filter>
 
   <g filter="url(#colorMeSaturate)">
@@ -59,33 +58,28 @@ slug: Web/SVG/Element/feColorMatrix
     <circle cx="40" cy="190" r="20" fill="red" fill-opacity="0.5" />
   </g>
 
-
   <text x="70" y="260">hueRotate</text>
 
   <filter id="colorMeHueRotate">
-    <feColorMatrix in="SourceGraphic"
-      type="hueRotate"
-      values="180" />
+    <feColorMatrix in="SourceGraphic" type="hueRotate" values="180" />
   </filter>
 
   <g filter="url(#colorMeHueRotate)">
-    <circle cx="30" cy="240" r="20" fill="blue"  fill-opacity="0.5" />
+    <circle cx="30" cy="240" r="20" fill="blue" fill-opacity="0.5" />
     <circle cx="20" cy="260" r="20" fill="green" fill-opacity="0.5" />
-    <circle cx="40" cy="260" r="20" fill="red"   fill-opacity="0.5" />
+    <circle cx="40" cy="260" r="20" fill="red" fill-opacity="0.5" />
   </g>
 
-
   <text x="70" y="320">luminanceToAlpha</text>
 
   <filter id="colorMeLTA">
-    <feColorMatrix in="SourceGraphic"
-      type="luminanceToAlpha" />
+    <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" />
   </filter>
 
   <g filter="url(#colorMeLTA)">
-    <circle cx="30" cy="310" r="20" fill="blue"  fill-opacity="0.5" />
+    <circle cx="30" cy="310" r="20" fill="blue" fill-opacity="0.5" />
     <circle cx="20" cy="330" r="20" fill="green" fill-opacity="0.5" />
-    <circle cx="40" cy="330" r="20" fill="red"   fill-opacity="0.5" />
+    <circle cx="40" cy="330" r="20" fill="red" fill-opacity="0.5" />
   </g>
 </svg>
 ```
diff --git a/files/zh-cn/web/svg/element/fecomponenttransfer/index.md b/files/zh-cn/web/svg/element/fecomponenttransfer/index.md
index 60a90f7c6580e5..3952e49c82c465 100644
--- a/files/zh-cn/web/svg/element/fecomponenttransfer/index.md
+++ b/files/zh-cn/web/svg/element/fecomponenttransfer/index.md
@@ -38,7 +38,13 @@ slug: Web/SVG/Element/feComponentTransfer
 ```html
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300">
   <defs>
-    <linearGradient id="rainbow" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100%" y2="0">
+    <linearGradient
+      id="rainbow"
+      gradientUnits="userSpaceOnUse"
+      x1="0"
+      y1="0"
+      x2="100%"
+      y2="0">
       <stop offset="0" stop-color="#ff0000"></stop>
       <stop offset="0.2" stop-color="#ffff00"></stop>
       <stop offset="0.4" stop-color="#00ff00"></stop>
@@ -81,13 +87,33 @@ slug: Web/SVG/Element/feComponentTransfer
     <text x="0" y="5%">Default</text>
     <rect x="0" y="8%" width="100%" height="20"></rect>
     <text x="0" y="26%">Identity</text>
-    <rect x="0" y="29%" width="100%" height="20" style="filter:url(#identity)"></rect>
+    <rect
+      x="0"
+      y="29%"
+      width="100%"
+      height="20"
+      style="filter:url(#identity)"></rect>
     <text x="0" y="47%">Table lookup</text>
-    <rect x="0" y="50%" width="100%" height="20" style="filter:url(#table)"></rect>
+    <rect
+      x="0"
+      y="50%"
+      width="100%"
+      height="20"
+      style="filter:url(#table)"></rect>
     <text x="0" y="68%">Linear function</text>
-    <rect x="0" y="71%" width="100%" height="20" style="filter:url(#linear)"></rect>
+    <rect
+      x="0"
+      y="71%"
+      width="100%"
+      height="20"
+      style="filter:url(#linear)"></rect>
     <text x="0" y="89%">Gamma function</text>
-    <rect x="0" y="92%" width="100%" height="20" style="filter:url(#gamma)"></rect>
+    <rect
+      x="0"
+      y="92%"
+      width="100%"
+      height="20"
+      style="filter:url(#gamma)"></rect>
   </g>
 </svg>
 ```
diff --git a/files/zh-cn/web/svg/element/fediffuselighting/index.md b/files/zh-cn/web/svg/element/fediffuselighting/index.md
index d4c624f5095d42..642b9067f72109 100644
--- a/files/zh-cn/web/svg/element/fediffuselighting/index.md
+++ b/files/zh-cn/web/svg/element/fediffuselighting/index.md
@@ -19,7 +19,6 @@ slug: Web/SVG/Element/feDiffuseLighting
 
 ```html
 <svg width="440" height="140" xmlns="http://www.w3.org/2000/svg">
-
   <!-- No light is applied -->
   <text text-anchor="middle" x="60" y="22">No Light</text>
   <circle cx="60" cy="80" r="50" fill="green" />
@@ -31,8 +30,14 @@ slug: Web/SVG/Element/feDiffuseLighting
       <fePointLight x="150" y="60" z="20" />
     </feDiffuseLighting>
 
-    <feComposite in="SourceGraphic" in2="light"
-                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
+    <feComposite
+      in="SourceGraphic"
+      in2="light"
+      operator="arithmetic"
+      k1="1"
+      k2="0"
+      k3="0"
+      k4="0" />
   </filter>
 
   <circle cx="170" cy="80" r="50" fill="green" filter="url(#lightMe1)" />
@@ -41,11 +46,17 @@ slug: Web/SVG/Element/feDiffuseLighting
   <text text-anchor="middle" x="280" y="22">feDistantLight</text>
   <filter id="lightMe2">
     <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
-      <feDistantLight azimuth="240" elevation="20"/>
+      <feDistantLight azimuth="240" elevation="20" />
     </feDiffuseLighting>
 
-    <feComposite in="SourceGraphic" in2="light"
-                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
+    <feComposite
+      in="SourceGraphic"
+      in2="light"
+      operator="arithmetic"
+      k1="1"
+      k2="0"
+      k3="0"
+      k4="0" />
   </filter>
 
   <circle cx="280" cy="80" r="50" fill="green" filter="url(#lightMe2)" />
@@ -54,12 +65,24 @@ slug: Web/SVG/Element/feDiffuseLighting
   <text text-anchor="middle" x="390" y="22">feSpotLight</text>
   <filter id="lightMe3">
     <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
-      <feSpotLight x="360" y="5" z="30" limitingConeAngle="20"
-                   pointsAtX="390" pointsAtY="80" pointsAtZ="0"/>
+      <feSpotLight
+        x="360"
+        y="5"
+        z="30"
+        limitingConeAngle="20"
+        pointsAtX="390"
+        pointsAtY="80"
+        pointsAtZ="0" />
     </feDiffuseLighting>
 
-    <feComposite in="SourceGraphic" in2="light"
-                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
+    <feComposite
+      in="SourceGraphic"
+      in2="light"
+      operator="arithmetic"
+      k1="1"
+      k2="0"
+      k3="0"
+      k4="0" />
   </filter>
 
   <circle cx="390" cy="80" r="50" fill="green" filter="url(#lightMe3)" />
diff --git a/files/zh-cn/web/svg/element/fedropshadow/index.md b/files/zh-cn/web/svg/element/fedropshadow/index.md
index 21a15de2a2f0f5..26ce9fa3b7dcd3 100644
--- a/files/zh-cn/web/svg/element/fedropshadow/index.md
+++ b/files/zh-cn/web/svg/element/fedropshadow/index.md
@@ -12,33 +12,37 @@ SVG **`<feDropShadow>`** 原语创建输入图像的阴影。它只能在 {{SVGE
 ## 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <filter id="shadow">
-      <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
+      <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2" />
     </filter>
     <filter id="shadow2">
-      <feDropShadow dx="0" dy="0" stdDeviation="0.5"
-          flood-color="cyan"/>
+      <feDropShadow dx="0" dy="0" stdDeviation="0.5" flood-color="cyan" />
     </filter>
     <filter id="shadow3">
-      <feDropShadow dx="-0.8" dy="-0.8" stdDeviation="0"
-          flood-color="pink" flood-opacity="0.5"/>
+      <feDropShadow
+        dx="-0.8"
+        dy="-0.8"
+        stdDeviation="0"
+        flood-color="pink"
+        flood-opacity="0.5" />
     </filter>
   </defs>
 
-  <circle cx="5" cy="50%" r="4"
-      style="fill:pink; filter:url(#shadow);"/>
+  <circle cx="5" cy="50%" r="4" style="fill:pink; filter:url(#shadow);" />
 
-  <circle cx="15" cy="50%" r="4"
-      style="fill:pink; filter:url(#shadow2);"/>
+  <circle cx="15" cy="50%" r="4" style="fill:pink; filter:url(#shadow2);" />
 
-  <circle cx="25" cy="50%" r="4"
-      style="fill:pink; filter:url(#shadow3);"/>
+  <circle cx="25" cy="50%" r="4" style="fill:pink; filter:url(#shadow3);" />
 </svg>
 ```
 
@@ -47,11 +51,11 @@ html,body,svg { height:100% }
 ## 属性
 
 - {{SVGAttr("dx")}}
-  - : 此属性定义了投影的 x 轴偏移量。*值类型*：[**\<number>**](/zh-CN/docs/Web/SVG/Content_type#数字)；*默认值*：`2`；*可用于动画*：**是**
+  - : 此属性定义了投影的 x 轴偏移量。_值类型_：[**\<number>**](/zh-CN/docs/Web/SVG/Content_type#数字)；_默认值_：`2`；_可用于动画_：**是**
 - {{SVGAttr("dy")}}
-  - : 此属性定义了投影的 y 轴偏移量。*值类型*：[**\<number>**](/zh-CN/docs/Web/SVG/Content_type#数字)；*默认值*：`2`；*可用于动画*：**是**
+  - : 此属性定义了投影的 y 轴偏移量。_值类型_：[**\<number>**](/zh-CN/docs/Web/SVG/Content_type#数字)；_默认值_：`2`；_可用于动画_：**是**
 - {{SVGAttr("stdDeviation")}}
-  - : 此属性定义了投影的模糊操作的标准差。*值类型*：[**\<number>**](/zh-CN/docs/Web/SVG/Content_type#数字)；*默认值*：`2`；*可用于动画*：**是**
+  - : 此属性定义了投影的模糊操作的标准差。_值类型_：[**\<number>**](/zh-CN/docs/Web/SVG/Content_type#数字)；_默认值_：`2`；_可用于动画_：**是**
 
 ### 全局属性
 
diff --git a/files/zh-cn/web/svg/element/fegaussianblur/index.md b/files/zh-cn/web/svg/element/fegaussianblur/index.md
index c73e11883ed9bc..e891a0a5dec339 100644
--- a/files/zh-cn/web/svg/element/fegaussianblur/index.md
+++ b/files/zh-cn/web/svg/element/fegaussianblur/index.md
@@ -16,18 +16,18 @@ slug: Web/SVG/Element/feGaussianBlur
 ### 简单示例
 
 ```html
-<svg width="230" height="120"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink">
-
+<svg
+  width="230"
+  height="120"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
   <filter id="blurMe">
     <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
   </filter>
 
-  <circle cx="60"  cy="60" r="50" fill="green" />
+  <circle cx="60" cy="60" r="50" fill="green" />
 
-  <circle cx="170" cy="60" r="50" fill="green"
-          filter="url(#blurMe)" />
+  <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurMe)" />
 </svg>
 ```
 
@@ -38,21 +38,21 @@ slug: Web/SVG/Element/feGaussianBlur
 ### 投影示例
 
 ```html
-<svg width="120" height="120"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink">
-
+<svg
+  width="120"
+  height="120"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
   <filter id="dropShadow">
     <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
     <feOffset dx="2" dy="4" />
     <feMerge>
-        <feMergeNode />
-        <feMergeNode in="SourceGraphic" />
+      <feMergeNode />
+      <feMergeNode in="SourceGraphic" />
     </feMerge>
   </filter>
 
-  <circle cx="60"  cy="60" r="50" fill="green"
-          filter="url(#dropShadow)" />
+  <circle cx="60" cy="60" r="50" fill="green" filter="url(#dropShadow)" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/element/feimage/index.md b/files/zh-cn/web/svg/element/feimage/index.md
index 392000e3c933b5..4e628cf2cacbfa 100644
--- a/files/zh-cn/web/svg/element/feimage/index.md
+++ b/files/zh-cn/web/svg/element/feimage/index.md
@@ -37,16 +37,17 @@ slug: Web/SVG/Element/feImage
 ### SVG
 
 ```html
-<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg
+  viewBox="0 0 200 200"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
     <filter id="image">
-      <feImage xlink:href="/files/6457/mdn_logo_only_color.png"/>
+      <feImage xlink:href="/files/6457/mdn_logo_only_color.png" />
     </filter>
   </defs>
 
-  <rect x="10%" y="10%" width="80%" height="80%"
-      style="filter:url(#image);"/>
+  <rect x="10%" y="10%" width="80%" height="80%" style="filter:url(#image);" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/element/filter/index.md b/files/zh-cn/web/svg/element/filter/index.md
index daea351186b2b4..f2c1e120192fc1 100644
--- a/files/zh-cn/web/svg/element/filter/index.md
+++ b/files/zh-cn/web/svg/element/filter/index.md
@@ -43,14 +43,13 @@ slug: Web/SVG/Element/filter
 
 ```html
 <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg">
- <filter id="blurMe">
-   <feGaussianBlur stdDeviation="5"/>
- </filter>
+  <filter id="blurMe">
+    <feGaussianBlur stdDeviation="5" />
+  </filter>
 
- <circle cx="60" cy="60" r="50" fill="green" />
+  <circle cx="60" cy="60" r="50" fill="green" />
 
- <circle cx="170" cy="60" r="50" fill="green"
-          filter="url(#blurMe)" />
+  <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurMe)" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/element/foreignobject/index.md b/files/zh-cn/web/svg/element/foreignobject/index.md
index 9e42eaf65335dc..4494c84d4d0590 100644
--- a/files/zh-cn/web/svg/element/foreignobject/index.md
+++ b/files/zh-cn/web/svg/element/foreignobject/index.md
@@ -10,17 +10,23 @@ slug: Web/SVG/Element/foreignObject
 ## 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
   <style>
-    polygon { fill: black }
+    polygon {
+      fill: black;
+    }
 
     div {
       color: white;
-      font:18px serif;
+      font: 18px serif;
       height: 100%;
       overflow: auto;
     }
@@ -35,10 +41,9 @@ html,body,svg { height:100% }
       be avoided, but it is mandatory in the context of an SVG document
     -->
     <div xmlns="http://www.w3.org/1999/xhtml">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      Sed mollis mollis mi ut ultricies. Nullam magna ipsum,
-      porta vel dui convallis, rutrum imperdiet eros. Aliquam
-      erat volutpat.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis mollis
+      mi ut ultricies. Nullam magna ipsum, porta vel dui convallis, rutrum
+      imperdiet eros. Aliquam erat volutpat.
     </div>
   </foreignObject>
 </svg>
diff --git a/files/zh-cn/web/svg/element/g/index.md b/files/zh-cn/web/svg/element/g/index.md
index 204ee36855a92e..00550aa633711d 100644
--- a/files/zh-cn/web/svg/element/g/index.md
+++ b/files/zh-cn/web/svg/element/g/index.md
@@ -14,8 +14,11 @@ slug: Web/SVG/Element/g
 ## 示例
 
 ```html
-<svg width="100%" height="100%" viewBox="0 0 95 50"
-     xmlns="http://www.w3.org/2000/svg">
+<svg
+  width="100%"
+  height="100%"
+  viewBox="0 0 95 50"
+  xmlns="http://www.w3.org/2000/svg">
   <g stroke="green" fill="white" stroke-width="5">
     <circle cx="25" cy="25" r="15" />
     <circle cx="40" cy="25" r="15" />
diff --git a/files/zh-cn/web/svg/element/image/index.md b/files/zh-cn/web/svg/element/image/index.md
index e261ff6380da9f..c563a26b2ab7b4 100644
--- a/files/zh-cn/web/svg/element/image/index.md
+++ b/files/zh-cn/web/svg/element/image/index.md
@@ -49,10 +49,18 @@ SVG 文件是这样的一种图像：不被当做外部资源加载，不可以
 在 SVG 对象中基本呈现 PNG 图像：
 
 ```html
-<svg width="100%" height="100%" viewBox="0 0 100 100"
-     xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink">
-  <image xlink:href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100" />
+<svg
+  width="100%"
+  height="100%"
+  viewBox="0 0 100 100"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <image
+    xlink:href="/files/2917/fxlogo.png"
+    x="0"
+    y="0"
+    height="100"
+    width="100" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/element/lineargradient/index.md b/files/zh-cn/web/svg/element/lineargradient/index.md
index 714f1c51f9dd19..d3aa3ac847e406 100644
--- a/files/zh-cn/web/svg/element/lineargradient/index.md
+++ b/files/zh-cn/web/svg/element/lineargradient/index.md
@@ -14,15 +14,21 @@ slug: Web/SVG/Element/linearGradient
 ## 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
-<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg
+  viewBox="0 0 10 10"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
     <linearGradient id="myGradient" gradientTransform="rotate(90)">
-      <stop offset="5%"  stop-color="gold" />
+      <stop offset="5%" stop-color="gold" />
       <stop offset="95%" stop-color="red" />
     </linearGradient>
   </defs>
diff --git a/files/zh-cn/web/svg/element/marker/index.md b/files/zh-cn/web/svg/element/marker/index.md
index c16295c227d74a..8ca23f80e804e7 100644
--- a/files/zh-cn/web/svg/element/marker/index.md
+++ b/files/zh-cn/web/svg/element/marker/index.md
@@ -164,24 +164,24 @@ svg {
 ## 属性
 
 - {{SVGAttr("markerHeight")}}
-  - : 该属性定义了 marker 视口的高度。*值的类型*：**[\<length>](/zh-CN/docs/Web/SVG/Content_type#长度)**；*默认值*：`3`；*动画性*：**有**
+  - : 该属性定义了 marker 视口的高度。_值的类型_：**[\<length>](/zh-CN/docs/Web/SVG/Content_type#长度)**；_默认值_：`3`；_动画性_：**有**
 - {{SVGAttr("markerUnits")}}
-  - : 该属性为 `markerWidth`、`markerHeight` 和 `<marker>` 的内容定义了坐标系。*值的类型*：`userSpaceOnUse`|`strokeWidth` ；*默认值*：`strokeWidth`；*动画性*：**有**
+  - : 该属性为 `markerWidth`、`markerHeight` 和 `<marker>` 的内容定义了坐标系。_值的类型_：`userSpaceOnUse`|`strokeWidth` ；_默认值_：`strokeWidth`；_动画性_：**有**
 - {{SVGAttr("markerWidth")}}
-  - : 该属性定义了 marker 视图的宽度。*值的类型*：**[\<length>](/zh-CN/docs/Web/SVG/Content_type#长度)** ；*默认值*：`3`；*动画性*：**有**
+  - : 该属性定义了 marker 视图的宽度。_值的类型_：**[\<length>](/zh-CN/docs/Web/SVG/Content_type#长度)** ；_默认值_：`3`；_动画性_：**有**
 - {{SVGAttr("orient")}}
-  - : 该属性定义了 marker 相对于它所附着到形状的方向。*值的类型*：`auto`|`auto-start-reverse`|**[\<angle>](/zh-CN/docs/Web/SVG/Content_type#角度)** ；*默认值*：`0`；*动画性*：**有**
+  - : 该属性定义了 marker 相对于它所附着到形状的方向。_值的类型_：`auto`|`auto-start-reverse`|**[\<angle>](/zh-CN/docs/Web/SVG/Content_type#角度)** ；_默认值_：`0`；_动画性_：**有**
 - {{SVGAttr("preserveAspectRatio")}}
-  - : 该属性定义了 svg 片段在嵌入具有不同宽高比例的容器中应该如何变形。*值的类型*：(`none`| `xMinYMin`| `xMidYMin`| `xMaxYMin`| `xMinYMid`| `xMidYMid`| `xMaxYMid`| `xMinYMax`| `xMidYMax`| `xMaxYMax`) (`meet`|`slice`)? ；*默认值*：`xMidYMid meet`；*动画性*：**有**
+  - : 该属性定义了 svg 片段在嵌入具有不同宽高比例的容器中应该如何变形。_值的类型_：(`none`| `xMinYMin`| `xMidYMin`| `xMaxYMin`| `xMinYMid`| `xMidYMid`| `xMaxYMid`| `xMinYMax`| `xMidYMax`| `xMaxYMax`) (`meet`|`slice`)? ；_默认值_：`xMidYMid meet`；_动画性_：**有**
 - {{SVGAttr("refX")}}
   - : 该属性定义了标记参考点的 x 的坐标。
-    *值的类型*：`left`|`center`|`right`|**[\<coordinate>](/zh-CN/docs/Web/SVG/Content_type#坐标)** ；*默认值*：`0`；*动画性*：**有**
+    _值的类型_：`left`|`center`|`right`|**[\<coordinate>](/zh-CN/docs/Web/SVG/Content_type#坐标)** ；_默认值_：`0`；_动画性_：**有**
 - {{SVGAttr("refY")}}
   - : 该属性定义了标记参考点的 y 的坐标。
-    *值的类型*：`top`|`center`|`bottom`|**[\<coordinate>](/zh-CN/docs/Web/SVG/Content_type#坐标)** ；*默认值*：`0`；*动画性*：**有**
+    _值的类型_：`top`|`center`|`bottom`|**[\<coordinate>](/zh-CN/docs/Web/SVG/Content_type#坐标)** ；_默认值_：`0`；_动画性_：**有**
 - {{SVGAttr("viewBox")}}
   - : 该属性定义了当前 SVG 片段的 SVG 视口边界。
-    *值的类型*：**[\<list-of-numbers>](/zh-CN/docs/Web/SVG/Content_type#t值数列)** ；*默认值*：none；*动画性*：**有**
+    _值的类型_：**[\<list-of-numbers>](/zh-CN/docs/Web/SVG/Content_type#t值数列)** ；_默认值_：none；_动画性_：**有**
 
 ### 全局属性
 
diff --git a/files/zh-cn/web/svg/element/mpath/index.md b/files/zh-cn/web/svg/element/mpath/index.md
index 373c6d2dd93b30..12a784c2d8edb7 100644
--- a/files/zh-cn/web/svg/element/mpath/index.md
+++ b/files/zh-cn/web/svg/element/mpath/index.md
@@ -14,29 +14,44 @@ slug: Web/SVG/Element/mpath
 ## 示例
 
 ```html
-<svg width="100%" height="100%"  viewBox="0 0 500 300"
-     xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink" >
-
-  <rect x="1" y="1" width="498" height="298"
-        fill="none" stroke="blue" stroke-width="2" />
+<svg
+  width="100%"
+  height="100%"
+  viewBox="0 0 500 300"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <rect
+    x="1"
+    y="1"
+    width="498"
+    height="298"
+    fill="none"
+    stroke="blue"
+    stroke-width="2" />
 
   <!-- Draw the outline of the motion path in blue, along
           with three small circles at the start, middle and end. -->
-  <path id="path1" d="M100,250 C 100,50 400,50 400,250"
-        fill="none" stroke="blue" stroke-width="7.06"  />
-  <circle cx="100" cy="250" r="17.64" fill="blue"  />
-  <circle cx="250" cy="100" r="17.64" fill="blue"  />
-  <circle cx="400" cy="250" r="17.64" fill="blue"  />
+  <path
+    id="path1"
+    d="M100,250 C 100,50 400,50 400,250"
+    fill="none"
+    stroke="blue"
+    stroke-width="7.06" />
+  <circle cx="100" cy="250" r="17.64" fill="blue" />
+  <circle cx="250" cy="100" r="17.64" fill="blue" />
+  <circle cx="400" cy="250" r="17.64" fill="blue" />
 
   <!-- Here is a triangle which will be moved about the motion path.
        It is defined with an upright orientation with the base of
        the triangle centered horizontally just above the origin. -->
-  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
-        fill="yellow" stroke="red" stroke-width="7.06"  >
+  <path
+    d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
+    fill="yellow"
+    stroke="red"
+    stroke-width="7.06">
     <!-- Define the motion path animation -->
-    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
-       <mpath xlink:href="#path1"/>
+    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
+      <mpath xlink:href="#path1" />
     </animateMotion>
   </path>
 </svg>
diff --git a/files/zh-cn/web/svg/element/path/index.md b/files/zh-cn/web/svg/element/path/index.md
index 7db306653f19de..25dfe7e497626c 100644
--- a/files/zh-cn/web/svg/element/path/index.md
+++ b/files/zh-cn/web/svg/element/path/index.md
@@ -17,7 +17,11 @@ path 元素是用来定义形状的通用元素。所有的基本形状都可以
 ## 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
diff --git a/files/zh-cn/web/svg/element/radialgradient/index.md b/files/zh-cn/web/svg/element/radialgradient/index.md
index 1d69420bfd07ca..80e792e8b683e0 100644
--- a/files/zh-cn/web/svg/element/radialgradient/index.md
+++ b/files/zh-cn/web/svg/element/radialgradient/index.md
@@ -41,27 +41,27 @@ svg {
 ## 属性
 
 - {{SVGAttr("cx")}}
-  - : 这个属性定义了径向渐变的终点圆的 X 坐标。*值类型*：[**\<length>**](/zh-CN/docs/Web/SVG/Content_type#长度)；*默认值*：`50%`；*动画性*：**有**
+  - : 这个属性定义了径向渐变的终点圆的 X 坐标。_值类型_：[**\<length>**](/zh-CN/docs/Web/SVG/Content_type#长度)；_默认值_：`50%`；_动画性_：**有**
 - {{SVGAttr("cy")}}
-  - : 这个属性定义了径向渐变的终点圆的 Y 坐标。*值类型*：[**\<length>**](/zh-CN/docs/Web/SVG/Content_type#长度)；*默认值*：`50%`；*动画性*：**有**
+  - : 这个属性定义了径向渐变的终点圆的 Y 坐标。_值类型_：[**\<length>**](/zh-CN/docs/Web/SVG/Content_type#长度)；_默认值_：`50%`；_动画性_：**有**
 - {{SVGAttr("fr")}}
-  - : 这个属性定义了径向梯度的起点圆的半径。渐变的绘制将使 0% {{SVGElement('stop','gradient stop')}} 被映射到起始圆的周长。*值类型*：[**\<length>**](/zh-CN/docs/Web/SVG/Content_type#长度)；*默认值*：`0%`；*动画性*：**有**
+  - : 这个属性定义了径向梯度的起点圆的半径。渐变的绘制将使 0% {{SVGElement('stop','gradient stop')}} 被映射到起始圆的周长。_值类型_：[**\<length>**](/zh-CN/docs/Web/SVG/Content_type#长度)；_默认值_：`0%`；_动画性_：**有**
 - {{SVGAttr("fx")}}
-  - : 这个属性定义了径向渐变的起点圆的 X 坐标。*值类型*：[**\<length>**](/zh-CN/docs/Web/SVG/Content_type#长度)；*默认值*：与 `cx` 相同；*动画性*：**有**
+  - : 这个属性定义了径向渐变的起点圆的 X 坐标。_值类型_：[**\<length>**](/zh-CN/docs/Web/SVG/Content_type#长度)；_默认值_：与 `cx` 相同；_动画性_：**有**
 - {{SVGAttr("fy")}}
-  - : 这个属性定义了径向渐变的起点圆的 Y 坐标。*值类型*：[**\<length>**](/zh-CN/docs/Web/SVG/Content_type#长度)；*默认值*：与 `cy` 相同；*动画性*：**有**
+  - : 这个属性定义了径向渐变的起点圆的 Y 坐标。_值类型_：[**\<length>**](/zh-CN/docs/Web/SVG/Content_type#长度)；_默认值_：与 `cy` 相同；_动画性_：**有**
 - {{SVGAttr("gradientUnits")}}
-  - : 这个属性定义了 `cx`、`cy`、`r`、`fx`、`fy`、`fr` 属性的坐标系统；*值类型*：`userSpaceOnUse`|`objectBoundingBox`；*默认值*：`objectBoundingBox`；*动画性*：**有**
+  - : 这个属性定义了 `cx`、`cy`、`r`、`fx`、`fy`、`fr` 属性的坐标系统；_值类型_：`userSpaceOnUse`|`objectBoundingBox`；_默认值_：`objectBoundingBox`；_动画性_：**有**
 - {{SVGAttr("gradientTransform")}}
-  - : 这个属性为梯度坐标系提供了额外的[变换](/zh-CN/docs/Web/SVG/Atribute/transform)。*值类型*：**[\<transform-list>](/zh-CN/docs/Web/SVG/Content_type#transform-list)** ；*默认值*：*identity transform*；*动画性*：**有**
+  - : 这个属性为梯度坐标系提供了额外的[变换](/zh-CN/docs/Web/SVG/Atribute/transform)。_值类型_：**[\<transform-list>](/zh-CN/docs/Web/SVG/Content_type#transform-list)** ；_默认值_：_identity transform_；_动画性_：**有**
 - {{SVGAttr("href")}}
-  - : 这个属性定义了对另一个将被用作模板 `<radialGradient>` 元素的引用。*值类型*：[**\<URL>**](/zh-CN/docs/Web/SVG/Content_type#url)；*默认值*：none；*动画性*：**有**
+  - : 这个属性定义了对另一个将被用作模板 `<radialGradient>` 元素的引用。_值类型_：[**\<URL>**](/zh-CN/docs/Web/SVG/Content_type#url)；_默认值_：none；_动画性_：**有**
 - {{SVGAttr("r")}}
-  - : 这个属性定义了径向渐变的终点圆的半径。梯度的绘制将使 100% 的{{SVGElement('stop','gradient stop')}} 被映射到终点圆的周长。*值类型*：[**\<length>**](/zh-CN/docs/Web/SVG/Content_type#长度)；*默认值*：`50%`；*动画性*：**有**
+  - : 这个属性定义了径向渐变的终点圆的半径。梯度的绘制将使 100% 的{{SVGElement('stop','gradient stop')}} 被映射到终点圆的周长。_值类型_：[**\<length>**](/zh-CN/docs/Web/SVG/Content_type#长度)；_默认值_：`50%`；_动画性_：**有**
 - {{SVGAttr("spreadMethod")}}
-  - : 这个属性表明，如果渐变在包含渐变的形状的边界内开始或结束，它将如何表现。*值类型*：`pad`|`reflect`|`repeat`；*默认值*：`pad`；*动画性*：**有**
+  - : 这个属性表明，如果渐变在包含渐变的形状的边界内开始或结束，它将如何表现。_值类型_：`pad`|`reflect`|`repeat`；_默认值_：`pad`；_动画性_：**有**
 - {{SVGAttr("xlink:href")}}
-  - : {{Deprecated_Header}}对另一个将被用作模板的 `<radialGradient>` 元素的 [\<IRI>](/zh-CN/docs/Web/SVG/Content_type#iri) 引用。*值类型*：[**\<IRI>**](/zh-CN/docs/Web/SVG/Content_type#iri)；*默认值*：none；*动画性*：**有**
+  - : {{Deprecated_Header}}对另一个将被用作模板的 `<radialGradient>` 元素的 [\<IRI>](/zh-CN/docs/Web/SVG/Content_type#iri) 引用。_值类型_：[**\<IRI>**](/zh-CN/docs/Web/SVG/Content_type#iri)；_默认值_：none；_动画性_：**有**
 
 ### 全局属性
 
diff --git a/files/zh-cn/web/svg/element/rect/index.md b/files/zh-cn/web/svg/element/rect/index.md
index 6be358f804dbbd..a3793a8d075945 100644
--- a/files/zh-cn/web/svg/element/rect/index.md
+++ b/files/zh-cn/web/svg/element/rect/index.md
@@ -14,7 +14,11 @@ slug: Web/SVG/Element/rect
 ## 示例
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
diff --git a/files/zh-cn/web/svg/element/script/index.md b/files/zh-cn/web/svg/element/script/index.md
index 51cdbc96df892c..9b4660b91a12e0 100644
--- a/files/zh-cn/web/svg/element/script/index.md
+++ b/files/zh-cn/web/svg/element/script/index.md
@@ -16,8 +16,11 @@ slug: Web/SVG/Element/script
 下面的代码片段演示了 SVG `script`标签的作用。在代码中，我们使用 JavaScript 改变 SVG {{SVGElement("circle")}} 元素的半径。
 
 ```html
-<svg width="100%" height="100%" viewBox="0 0 100 100"
-     xmlns="http://www.w3.org/2000/svg">
+<svg
+  width="100%"
+  height="100%"
+  viewBox="0 0 100 100"
+  xmlns="http://www.w3.org/2000/svg">
   <script type="text/javascript">
     // <![CDATA[
     function change(evt) {
@@ -30,13 +33,12 @@ slug: Web/SVG/Element/script
         radius = 15;
       }
 
-      target.setAttribute("r",radius);
-   }
-   // ]]>
+      target.setAttribute("r", radius);
+    }
+    // ]]>
   </script>
 
-  <circle cx="50" cy="50" r="45" fill="green"
-          onclick="change(evt)" />
+  <circle cx="50" cy="50" r="45" fill="green" onclick="change(evt)" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/element/stop/index.md b/files/zh-cn/web/svg/element/stop/index.md
index 0e1ef0c8c7538c..c252db3a2ef812 100644
--- a/files/zh-cn/web/svg/element/stop/index.md
+++ b/files/zh-cn/web/svg/element/stop/index.md
@@ -14,9 +14,11 @@ slug: Web/SVG/Element/stop
 ## 示例
 
 ```html
-<svg width="100%" height="100%" viewBox="0 0 80 40"
-     xmlns="http://www.w3.org/2000/svg">
-
+<svg
+  width="100%"
+  height="100%"
+  viewBox="0 0 80 40"
+  xmlns="http://www.w3.org/2000/svg">
   <defs>
     <linearGradient id="MyGradient">
       <stop offset="5%" stop-color="#F60" />
@@ -25,12 +27,17 @@ slug: Web/SVG/Element/stop
   </defs>
 
   <!-- Outline the drawing area in black -->
-  <rect fill="none" stroke="black"
-        x="0.5" y="0.5" width="79" height="39"/>
+  <rect fill="none" stroke="black" x="0.5" y="0.5" width="79" height="39" />
 
   <!-- The rectangle is filled using a linear gradient -->
-  <rect fill="url(#MyGradient)" stroke="black" stroke-width="1"
-        x="10" y="10" width="60" height="20"/>
+  <rect
+    fill="url(#MyGradient)"
+    stroke="black"
+    stroke-width="1"
+    x="10"
+    y="10"
+    width="60"
+    height="20" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/element/style/index.md b/files/zh-cn/web/svg/element/style/index.md
index bb6bd3eb72b4f7..fc5d5e4aa7d2e4 100644
--- a/files/zh-cn/web/svg/element/style/index.md
+++ b/files/zh-cn/web/svg/element/style/index.md
@@ -14,8 +14,11 @@ slug: Web/SVG/Element/style
 ## 示例
 
 ```html
-<svg width="100%" height="100%" viewBox="0 0 100 100"
-     xmlns="http://www.w3.org/2000/svg">
+<svg
+  width="100%"
+  height="100%"
+  viewBox="0 0 100 100"
+  xmlns="http://www.w3.org/2000/svg">
   <style>
     /* <![CDATA[ */
     circle {
diff --git a/files/zh-cn/web/svg/element/svg/index.md b/files/zh-cn/web/svg/element/svg/index.md
index 86abaa889d58ac..ed50f4c28d34c6 100644
--- a/files/zh-cn/web/svg/element/svg/index.md
+++ b/files/zh-cn/web/svg/element/svg/index.md
@@ -29,22 +29,20 @@ slug: Web/SVG/Element/svg
 它可以包含在 html5 文档里，如下所示：
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
-  <meta charset="UTF-8" />
-  <title>HTML/SVG Example</title>
-</head>
-
-<body>
-
-  <svg width="150" height="100" viewBox="0 0 3 2">
-    <rect width="1" height="2" x="0" fill="#008d46" />
-    <rect width="1" height="2" x="1" fill="#ffffff" />
-    <rect width="1" height="2" x="2" fill="#d2232c" />
-  </svg>
-
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <title>HTML/SVG Example</title>
+  </head>
+
+  <body>
+    <svg width="150" height="100" viewBox="0 0 3 2">
+      <rect width="1" height="2" x="0" fill="#008d46" />
+      <rect width="1" height="2" x="1" fill="#ffffff" />
+      <rect width="1" height="2" x="2" fill="#d2232c" />
+    </svg>
+  </body>
 </html>
 ```
 
diff --git a/files/zh-cn/web/svg/element/symbol/index.md b/files/zh-cn/web/svg/element/symbol/index.md
index 97e6ce1cfdc6da..af593a981b1c87 100644
--- a/files/zh-cn/web/svg/element/symbol/index.md
+++ b/files/zh-cn/web/svg/element/symbol/index.md
@@ -15,19 +15,22 @@ slug: Web/SVG/Element/symbol
 
 ```html
 <svg>
-<!-- symbol definition  NEVER draw -->
-<symbol id="sym01" viewBox="0 0 150 110">
-  <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/>
-  <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/>
-</symbol>
-
-<!-- actual drawing by "use" element -->
-<use xlink:href="#sym01"
-     x="0" y="0" width="100" height="50"/>
-<use xlink:href="#sym01"
-     x="0" y="50" width="75" height="38"/>
-<use xlink:href="#sym01"
-     x="0" y="100" width="50" height="25"/>
+  <!-- symbol definition  NEVER draw -->
+  <symbol id="sym01" viewBox="0 0 150 110">
+    <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red" />
+    <circle
+      cx="90"
+      cy="60"
+      r="40"
+      stroke-width="8"
+      stroke="green"
+      fill="white" />
+  </symbol>
+
+  <!-- actual drawing by "use" element -->
+  <use xlink:href="#sym01" x="0" y="0" width="100" height="50" />
+  <use xlink:href="#sym01" x="0" y="50" width="75" height="38" />
+  <use xlink:href="#sym01" x="0" y="100" width="50" height="25" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/element/textpath/index.md b/files/zh-cn/web/svg/element/textpath/index.md
index 0696527c62e039..1e0cc60355f13f 100644
--- a/files/zh-cn/web/svg/element/textpath/index.md
+++ b/files/zh-cn/web/svg/element/textpath/index.md
@@ -14,18 +14,22 @@ slug: Web/SVG/Element/textPath
 ## 示例
 
 ```html
-<svg width="100%" height="100%" viewBox="0 0 1000 300"
-     xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg
+  width="100%"
+  height="100%"
+  viewBox="0 0 1000 300"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
-    <path id="MyPath"
-          d="M 100 200
+    <path
+      id="MyPath"
+      d="M 100 200
              C 200 100 300   0 400 100
              C 500 200 600 300 700 200
              C 800 100 900 100 900 100" />
   </defs>
 
-  <use xlink:href="#MyPath" fill="none" stroke="red"  />
+  <use xlink:href="#MyPath" fill="none" stroke="red" />
 
   <text font-family="Verdana" font-size="42.5">
     <textPath xlink:href="#MyPath">
@@ -34,8 +38,14 @@ slug: Web/SVG/Element/textPath
   </text>
 
   <!-- Show outline of the viewport using 'rect' element -->
-  <rect x="1" y="1" width="998" height="298"
-        fill="none" stroke="black" stroke-width="2" />
+  <rect
+    x="1"
+    y="1"
+    width="998"
+    height="298"
+    fill="none"
+    stroke="black"
+    stroke-width="2" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/element/tspan/index.md b/files/zh-cn/web/svg/element/tspan/index.md
index 49d319435844d0..99f155c458a14f 100644
--- a/files/zh-cn/web/svg/element/tspan/index.md
+++ b/files/zh-cn/web/svg/element/tspan/index.md
@@ -34,7 +34,9 @@ svg {
   </style>
 
   <text x="10" y="30" class="small">
-    你<tspan>不是</tspan>香蕉！
+    你
+    <tspan>不是</tspan>
+    香蕉！
   </text>
 </svg>
 ```
diff --git a/files/zh-cn/web/svg/linking/index.md b/files/zh-cn/web/svg/linking/index.md
index f4433eba3460db..f4817d6580d0d9 100644
--- a/files/zh-cn/web/svg/linking/index.md
+++ b/files/zh-cn/web/svg/linking/index.md
@@ -13,7 +13,7 @@ page1.html:
 <html>
   <body>
     <p>This is a SVG button:</p>
-    <object width="100" height="50" type="image/svg+xml" data="button.svg"/>
+    <object width="100" height="50" type="image/svg+xml" data="button.svg" />
   </body>
 </html>
 ```
diff --git a/files/zh-cn/web/svg/svg_animation_with_smil/index.md b/files/zh-cn/web/svg/svg_animation_with_smil/index.md
index 289fcb1f17fed7..1dbb0f1a32d821 100644
--- a/files/zh-cn/web/svg/svg_animation_with_smil/index.md
+++ b/files/zh-cn/web/svg/svg_animation_with_smil/index.md
@@ -37,8 +37,11 @@ Firefox 4 利用 [Synchronized Multimedia Integration Language](https://www.w3.o
   <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
   <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
     <animate
-       attributeName="cx" from="0" to="500"
-       dur="5s" repeatCount="indefinite" />
+      attributeName="cx"
+      from="0"
+      to="500"
+      dur="5s"
+      repeatCount="indefinite" />
   </circle>
 </svg>
 ```
@@ -53,16 +56,22 @@ Firefox 4 利用 [Synchronized Multimedia Integration Language](https://www.w3.o
 <svg width="300" height="100">
   <title>SVG SMIL Animate with transform</title>
   <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
-  <rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1">
+  <rect
+    x="0"
+    y="50"
+    width="15"
+    height="34"
+    fill="blue"
+    stroke="black"
+    stroke-width="1">
     <animateTransform
-       attributeName="transform"
-       begin="0s"
-       dur="20s"
-       type="rotate"
-       from="0 60 60"
-       to="360 100 60"
-       repeatCount="indefinite"
-    />
+      attributeName="transform"
+      begin="0s"
+      dur="20s"
+      type="rotate"
+      from="0 60 60"
+      to="360 100 60"
+      repeatCount="indefinite" />
   </rect>
 </svg>
 ```
@@ -82,9 +91,7 @@ Firefox 4 利用 [Synchronized Multimedia Integration Language](https://www.w3.o
   <title>SVG SMIL Animate with Path</title>
   <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
   <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
-    <animateMotion
-       path="M 0 0 H 300 Z"
-       dur="3s" repeatCount="indefinite" />
+    <animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
   </circle>
 </svg>
 ```
@@ -101,10 +108,19 @@ Firefox 4 利用 [Synchronized Multimedia Integration Language](https://www.w3.o
 <svg width="300" height="100">
   <title>SVG SMIL Animate with Path</title>
   <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
-  <rect x="0" y="0" width="20" height="20" fill="blue" stroke="black" stroke-width="1">
+  <rect
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+    fill="blue"
+    stroke="black"
+    stroke-width="1">
     <animateMotion
-       path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z"
-       dur="3s" repeatCount="indefinite" rotate="auto" />
+      path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z"
+      dur="3s"
+      repeatCount="indefinite"
+      rotate="auto" />
   </rect>
 </svg>
 ```
diff --git a/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.md b/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.md
index af3fe0b9357f5b..8657ff4e220041 100644
--- a/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.md
+++ b/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.md
@@ -18,7 +18,10 @@ slug: Web/SVG/Tutorial/Clipping_and_masking
 我们在一个圆形的基础上创建上面提到的半圆形：
 
 ```html
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
     <clipPath id="cut-off-bottom">
       <rect x="0" y="0" width="200" height="100" />
@@ -42,14 +45,17 @@ slug: Web/SVG/Tutorial/Clipping_and_masking
 遮罩的效果最令人印象深刻的是表现为一个渐变。如果你想要让一个元素淡出，你可以利用遮罩效果实现这一点。
 
 ```html
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
     <linearGradient id="Gradient">
       <stop offset="0" stop-color="white" stop-opacity="0" />
       <stop offset="1" stop-color="white" stop-opacity="1" />
     </linearGradient>
     <mask id="Mask">
-      <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"  />
+      <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" />
     </mask>
   </defs>
 
@@ -73,9 +79,21 @@ slug: Web/SVG/Tutorial/Clipping_and_masking
 上面的矩形将绘制为半透明。填充和描边还有两个属性是`fill-opacity`和`stroke-opacity`，分别用来控制填充和描边的不透明度。需要注意的是描边将绘制在填充的上面。因此，如果你在一个元素上设置了描边透明度，但它同时设有填充，则描边的一半应用填充色，另一半将应用背景色。
 
 ```html
-<svg  width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
+<svg
+  width="200"
+  height="200"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
   <rect x="0" y="0" width="200" height="200" fill="blue" />
-  <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" />
+  <circle
+    cx="100"
+    cy="100"
+    r="50"
+    stroke="yellow"
+    stroke-width="40"
+    stroke-opacity=".5"
+    fill="red" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.md b/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.md
index b9eec9062ea758..bbaf3e62ac2d08 100644
--- a/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.md
+++ b/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.md
@@ -121,10 +121,10 @@ CSS 可以利用 style 属性插入到元素的行间：
 如上把样式放到一块你可以更轻松地调整一大组元素的样式，同样你也可以使用**hover**这样的伪类来创建翻转之类的效果：
 
 ```css
- #MyRect:hover {
-   stroke: black;
-   fill: blue;
- }
+#MyRect:hover {
+  stroke: black;
+  fill: blue;
+}
 ```
 
 你最好读一下 CSS 教程以便掌握它，一些可以在 HTML 里使用的 CSS，在 svg 里可能无法正常工作，比如`before`和`after`伪类。所以这里需要一点经验。
diff --git a/files/zh-cn/web/svg/tutorial/filter_effects/index.md b/files/zh-cn/web/svg/tutorial/filter_effects/index.md
index 03f246db27a9f9..1c2142faa17c23 100644
--- a/files/zh-cn/web/svg/tutorial/filter_effects/index.md
+++ b/files/zh-cn/web/svg/tutorial/filter_effects/index.md
@@ -16,45 +16,70 @@ slug: Web/SVG/Tutorial/Filter_effects
 滤镜通过 {{SVGElement('filter')}} 元素进行定义，并且置于 `<defs>` 区块中。在 `filter` 标签中提供一系列*图元*（_primitives_），以及在前一个基本变换操作上建立的另一个操作（比如添加模糊后又添加明亮效果）。如果要应用所创建的滤镜效果，只需要为 SVG 图形元素设置 {{SVGAttr('filter')}} 属性即可。
 
 ```html
-<svg width="250" viewBox="0 0 200 85"
-     xmlns="http://www.w3.org/2000/svg" version="1.1">
+<svg
+  width="250"
+  viewBox="0 0 200 85"
+  xmlns="http://www.w3.org/2000/svg"
+  version="1.1">
   <defs>
     <!-- Filter declaration -->
-    <filter id="MyFilter" filterUnits="userSpaceOnUse"
-            x="0" y="0"
-            width="200" height="120">
-
+    <filter
+      id="MyFilter"
+      filterUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="200"
+      height="120">
       <!-- offsetBlur -->
-      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
-      <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
+      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
+      <feOffset in="blur" dx="4" dy="4" result="offsetBlur" />
 
       <!-- litPaint -->
-      <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
-                          specularExponent="20" lighting-color="#bbbbbb"
-                          result="specOut">
-        <fePointLight x="-5000" y="-10000" z="20000"/>
+      <feSpecularLighting
+        in="blur"
+        surfaceScale="5"
+        specularConstant=".75"
+        specularExponent="20"
+        lighting-color="#bbbbbb"
+        result="specOut">
+        <fePointLight x="-5000" y="-10000" z="20000" />
       </feSpecularLighting>
-      <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
-      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
-                   k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
+      <feComposite
+        in="specOut"
+        in2="SourceAlpha"
+        operator="in"
+        result="specOut" />
+      <feComposite
+        in="SourceGraphic"
+        in2="specOut"
+        operator="arithmetic"
+        k1="0"
+        k2="1"
+        k3="1"
+        k4="0"
+        result="litPaint" />
 
       <!-- merge offsetBlur + litPaint -->
       <feMerge>
-        <feMergeNode in="offsetBlur"/>
-        <feMergeNode in="litPaint"/>
+        <feMergeNode in="offsetBlur" />
+        <feMergeNode in="litPaint" />
       </feMerge>
     </filter>
   </defs>
 
   <!-- Graphic elements -->
   <g filter="url(#MyFilter)">
-      <path fill="none" stroke="#D90000" stroke-width="10"
-            d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" />
-      <path fill="#D90000"
-            d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" />
-      <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
-        <text x="52" y="52">SVG</text>
-      </g>
+    <path
+      fill="none"
+      stroke="#D90000"
+      stroke-width="10"
+      d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" />
+    <path
+      fill="#D90000"
+      d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" />
+    <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana">
+      <text x="52" y="52">SVG</text>
+    </g>
   </g>
 </svg>
 ```
@@ -64,9 +89,7 @@ slug: Web/SVG/Tutorial/Filter_effects
 ### 步骤 1
 
 ```html
-<feGaussianBlur in="SourceAlpha"
-                stdDeviation="4"
-                result="blur"/>
+<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
 ```
 
 设置 {{SVGElement('feGaussianBlur')}} 中的 `in` 属性为 `"SourceAlpha"` 值，即原图像的 alpha 通道，并设置了模糊度为 4 以及把 `result` 保存在了一个名为 "blur" 的临时缓冲区中。
@@ -74,9 +97,7 @@ slug: Web/SVG/Tutorial/Filter_effects
 ### 步骤 2
 
 ```html
-<feOffset in="blur"
-          dx="4" dy="4"
-          result="offsetBlur"/>
+<feOffset in="blur" dx="4" dy="4" result="offsetBlur" />
 ```
 
 {{SVGElement('feOffset')}} 设置 `in` 的值为 "blur"，即我们前面保存 `result` 的那个临时缓冲区。然后设置相对坐标，向右偏移 4，向下偏移 4。最后把结果 `result` 保存到名为 "offsetBlur" 的缓冲区中。步骤 1、2 其实是创建图形阴影的两个图元。
@@ -84,11 +105,14 @@ slug: Web/SVG/Tutorial/Filter_effects
 ### 步骤 3
 
 ```html
-<feSpecularLighting in="offsetBlur"
-                    surfaceScale="5" specularConstant=".75"
-                    specularExponent="20" lighting-color="#bbbbbb"
-                    result="specOut">
-  <fePointLight x="-5000" y="-10000" z="20000"/>
+<feSpecularLighting
+  in="offsetBlur"
+  surfaceScale="5"
+  specularConstant=".75"
+  specularExponent="20"
+  lighting-color="#bbbbbb"
+  result="specOut">
+  <fePointLight x="-5000" y="-10000" z="20000" />
 </feSpecularLighting>
 ```
 
@@ -97,9 +121,7 @@ slug: Web/SVG/Tutorial/Filter_effects
 ### 步骤 4
 
 ```html
-<feComposite in="specOut" in2="SourceAlpha"
-             operator="in"
-             result="specOut"/>
+<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />
 ```
 
 第一个 {{SVGElement('feComposite')}} 元素设置输入源为 "specOut"，第二个输入源（`in2`）为 "SourceAlpha"，将 "specOut" 的结果效果遮盖掉，以致于最后的结果不会大于 "SourceAlpha"（源图像），最后覆盖输出结果 `result` 为 "specOut"。
diff --git a/files/zh-cn/web/svg/tutorial/getting_started/index.md b/files/zh-cn/web/svg/tutorial/getting_started/index.md
index 9a242bebe14a18..3c2c5adfb3cd25 100644
--- a/files/zh-cn/web/svg/tutorial/getting_started/index.md
+++ b/files/zh-cn/web/svg/tutorial/getting_started/index.md
@@ -34,9 +34,9 @@ slug: Web/SVG/Tutorial/Getting_Started
 
 1. 从 {{SVGElement("svg")}} 根元素开始：
 
-    - 应舍弃来自 (X)HTML 的 doctype 声明，因为基于 DTD 的 SVG 验证导致的问题比它能解决的问题更多。
-    - SVG 2 之前 `version` 属性和 `baseProfile` 属性用来供其他类型的验证识别 SVG 的版本。SVG 2 已弃用 `version` 和 `baseProfile` 这两个属性。
-    - 作为 XML 的一种方言，SVG 必须正确的绑定命名空间（在 xmlns 属性中绑定）。请阅读[命名空间速成](/zh-CN/docs/Web/SVG/Namespaces_Crash_Course)页面获取更多信息。
+   - 应舍弃来自 (X)HTML 的 doctype 声明，因为基于 DTD 的 SVG 验证导致的问题比它能解决的问题更多。
+   - SVG 2 之前 `version` 属性和 `baseProfile` 属性用来供其他类型的验证识别 SVG 的版本。SVG 2 已弃用 `version` 和 `baseProfile` 这两个属性。
+   - 作为 XML 的一种方言，SVG 必须正确的绑定命名空间（在 xmlns 属性中绑定）。请阅读[命名空间速成](/zh-CN/docs/Web/SVG/Namespaces_Crash_Course)页面获取更多信息。
 
 2. 绘制一个完全覆盖图像区域的矩形 {{SVGElement("rect")}}，把背景颜色设为红色。
 3. 一个半径 80px 的绿色圆圈 {{SVGElement("circle")}} 绘制在红色矩形的正中央（向右偏移 150px，向下偏移 100px）。
diff --git a/files/zh-cn/web/svg/tutorial/gradients/index.md b/files/zh-cn/web/svg/tutorial/gradients/index.md
index fc2115b4edfa68..07b4df020fb1d9 100644
--- a/files/zh-cn/web/svg/tutorial/gradients/index.md
+++ b/files/zh-cn/web/svg/tutorial/gradients/index.md
@@ -20,27 +20,35 @@ slug: Web/SVG/Tutorial/Gradients
 ```html
 <svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <defs>
-      <linearGradient id="Gradient1">
-        <stop class="stop1" offset="0%"/>
-        <stop class="stop2" offset="50%"/>
-        <stop class="stop3" offset="100%"/>
-      </linearGradient>
-      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="50%" stop-color="black" stop-opacity="0"/>
-        <stop offset="100%" stop-color="blue"/>
-      </linearGradient>
-      <style type="text/css"><![CDATA[
-        #rect1 { fill: url(#Gradient1); }
-        .stop1 { stop-color: red; }
-        .stop2 { stop-color: black; stop-opacity: 0; }
-        .stop3 { stop-color: blue; }
-      ]]></style>
+    <linearGradient id="Gradient1">
+      <stop class="stop1" offset="0%" />
+      <stop class="stop2" offset="50%" />
+      <stop class="stop3" offset="100%" />
+    </linearGradient>
+    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="50%" stop-color="black" stop-opacity="0" />
+      <stop offset="100%" stop-color="blue" />
+    </linearGradient>
+    <style type="text/css">
+      <![CDATA[
+              #rect1 { fill: url(#Gradient1); }
+              .stop1 { stop-color: red; }
+              .stop2 { stop-color: black; stop-opacity: 0; }
+              .stop3 { stop-color: blue; }
+            ]]>
+    </style>
   </defs>
 
-  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
-  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
-
+  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100" />
+  <rect
+    x="10"
+    y="120"
+    rx="15"
+    ry="15"
+    width="100"
+    height="100"
+    fill="url(#Gradient2)" />
 </svg>
 ```
 
@@ -49,7 +57,7 @@ slug: Web/SVG/Tutorial/Gradients
 以上是一个应用了线性渐变的`<rect>`元素的示例。线性渐变内部有几个{{SVGElement('stop')}} 结点，这些结点通过指定位置的 offset（偏移）属性和 stop-color（颜色中值）属性来说明在渐变的特定位置上应该是什么颜色；可以直接指定这两个属性值，也可以通过 CSS 来指定他们的值，该例子中混合使用了这两种方法。例如：该示例中指明了渐变开始颜色为红色，到中间位置时变成半透明的黑色，最后变成蓝色。虽然你可以根据需求按照自己的喜好插入很多中间颜色，但是偏移量应该始终从 0% 开始（或者 0 也可以，百分号可以扔掉），到 100%（或 1）结束。如果`stop`设置的位置有重合，将使用 XML 树中较晚设置的值。而且，类似于填充和描边，你也可以指定属性`stop-opacity`来设置某个位置的半透明度（同样，对于 FF3 你也可以设置 rgba 值）。
 
 ```html
- <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
+<stop offset="100%" stop-color="yellow" stop-opacity="0.5" />
 ```
 
 使用渐变时，我们需要在一个对象的属性`fill`或属性`stroke`中引用它，这跟你在 CSS 中使用`url`引用元素的方法一样。在本例中，url 只是一个渐变的引用，我们已经给这个渐变一个 ID——“Gradient”。要想附加它，将属性`fill`设置为`url(#Gradient)`即可。现在对象就变成多色的了，也可以用同样的方式处理`stroke`。
@@ -57,19 +65,25 @@ slug: Web/SVG/Tutorial/Gradients
 `<linearGradient>` 元素还需要一些其他的属性值，它们指定了渐变的大小和出现范围。渐变的方向可以通过两个点来控制，它们分别是属性 x1、x2、y1 和 y2，这些属性定义了渐变路线走向。渐变色默认是水平方向的，但是通过修改这些属性，就可以旋转该方向。下例中的 Gradient2 创建了一个垂直渐变。
 
 ```html
- <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
+<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"></linearGradient>
 ```
 
 > **备注：** 你也可以在渐变上使用`xlink:href 属性。如果`使用了该属性时，一个渐变的属性和颜色中值（stop）可以被另一个渐变包含引用。在下例中，你就不需要在 Grandient2 中重新创建全部的颜色中值（stop）。
 >
 > ```html
 > <linearGradient id="Gradient1">
-> <stop id="stop1" offset="0%"/>
-> <stop id="stop2" offset="50%"/>
-> <stop id="stop3" offset="100%"/>
+>   <stop id="stop1" offset="0%" />
+>   <stop id="stop2" offset="50%" />
+>   <stop id="stop3" offset="100%" />
 > </linearGradient>
-> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"
->     xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Gradient1"/>
+> <linearGradient
+>   id="Gradient2"
+>   x1="0"
+>   x2="0"
+>   y1="0"
+>   y2="1"
+>   xmlns:xlink="http://www.w3.org/1999/xlink"
+>   xlink:href="#Gradient1" />
 > ```
 >
 > 尽管通常你可能在文档的顶部就定义了 Gradient1，但我在结点上直接包含了 xlink 的命名空间，关于这点的更多信息我们会在[讨论图片](/zh-CN/Web/SVG/Tutorial/Other_content_in_SVG)的时候详解。
@@ -84,19 +98,32 @@ slug: Web/SVG/Tutorial/Gradients
 <?xml version="1.0" standalone="no"?>
 <svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <defs>
-      <radialGradient id="RadialGradient1">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-      <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
+    <radialGradient id="RadialGradient1">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="blue" />
+    </radialGradient>
+    <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="blue" />
+    </radialGradient>
   </defs>
 
-  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/>
-  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/>
-
+  <rect
+    x="10"
+    y="10"
+    rx="15"
+    ry="15"
+    width="100"
+    height="100"
+    fill="url(#RadialGradient1)" />
+  <rect
+    x="10"
+    y="120"
+    rx="15"
+    ry="15"
+    width="100"
+    height="100"
+    fill="url(#RadialGradient2)" />
 </svg>
 ```
 
@@ -111,25 +138,40 @@ slug: Web/SVG/Tutorial/Gradients
 ```html
 <?xml version="1.0" standalone="no"?>
 
-<svg width="120" height="120" version="1.1"
-  xmlns="http://www.w3.org/2000/svg">
+<svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <defs>
-      <radialGradient id="Gradient"
-            cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
+    <radialGradient id="Gradient" cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="blue" />
+    </radialGradient>
   </defs>
 
-  <rect x="10" y="10" rx="15" ry="15" width="100" height="100"
-        fill="url(#Gradient)" stroke="black" stroke-width="2"/>
-
-  <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
-  <circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
-  <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
-  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
-  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
-
+  <rect
+    x="10"
+    y="10"
+    rx="15"
+    ry="15"
+    width="100"
+    height="100"
+    fill="url(#Gradient)"
+    stroke="black"
+    stroke-width="2" />
+
+  <circle
+    cx="60"
+    cy="60"
+    r="50"
+    fill="transparent"
+    stroke="white"
+    stroke-width="2" />
+  <circle cx="35" cy="35" r="2" fill="white" stroke="white" />
+  <circle cx="60" cy="60" r="2" fill="white" stroke="white" />
+  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">
+    (fx,fy)
+  </text>
+  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">
+    (cx,cy)
+  </text>
 </svg>
 ```
 
@@ -146,34 +188,75 @@ slug: Web/SVG/Tutorial/Gradients
 
 <svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <defs>
-      <radialGradient id="GradientPad"
-            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
-            spreadMethod="pad">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-      <radialGradient id="GradientRepeat"
-            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
-            spreadMethod="repeat">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-      <radialGradient id="GradientReflect"
-            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
-            spreadMethod="reflect">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
+    <radialGradient
+      id="GradientPad"
+      cx="0.5"
+      cy="0.5"
+      r="0.4"
+      fx="0.75"
+      fy="0.75"
+      spreadMethod="pad">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="blue" />
+    </radialGradient>
+    <radialGradient
+      id="GradientRepeat"
+      cx="0.5"
+      cy="0.5"
+      r="0.4"
+      fx="0.75"
+      fy="0.75"
+      spreadMethod="repeat">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="blue" />
+    </radialGradient>
+    <radialGradient
+      id="GradientReflect"
+      cx="0.5"
+      cy="0.5"
+      r="0.4"
+      fx="0.75"
+      fy="0.75"
+      spreadMethod="reflect">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="blue" />
+    </radialGradient>
   </defs>
 
-  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/>
-  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/>
-  <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/>
-
-  <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text>
-  <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text>
-  <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text>
-
+  <rect
+    x="10"
+    y="10"
+    rx="15"
+    ry="15"
+    width="100"
+    height="100"
+    fill="url(#GradientPad)" />
+  <rect
+    x="10"
+    y="120"
+    rx="15"
+    ry="15"
+    width="100"
+    height="100"
+    fill="url(#GradientRepeat)" />
+  <rect
+    x="120"
+    y="120"
+    rx="15"
+    ry="15"
+    width="100"
+    height="100"
+    fill="url(#GradientReflect)" />
+
+  <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">
+    Pad
+  </text>
+  <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">
+    Repeat
+  </text>
+  <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">
+    Reflect
+  </text>
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/tutorial/patterns/index.md b/files/zh-cn/web/svg/tutorial/patterns/index.md
index 2cf4f5d32c390b..e8deda164b5b95 100644
--- a/files/zh-cn/web/svg/tutorial/patterns/index.md
+++ b/files/zh-cn/web/svg/tutorial/patterns/index.md
@@ -16,23 +16,33 @@ slug: Web/SVG/Tutorial/Patterns
 <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
   <defs>
     <linearGradient id="Gradient1">
-      <stop offset="5%" stop-color="white"/>
-      <stop offset="95%" stop-color="blue"/>
+      <stop offset="5%" stop-color="white" />
+      <stop offset="95%" stop-color="blue" />
     </linearGradient>
     <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
-      <stop offset="5%" stop-color="red"/>
-      <stop offset="95%" stop-color="orange"/>
+      <stop offset="5%" stop-color="red" />
+      <stop offset="95%" stop-color="orange" />
     </linearGradient>
 
     <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
-      <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
-      <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
-      <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
+      <rect x="0" y="0" width="50" height="50" fill="skyblue" />
+      <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)" />
+      <circle
+        cx="25"
+        cy="25"
+        r="20"
+        fill="url(#Gradient1)"
+        fill-opacity="0.5" />
     </pattern>
-
   </defs>
 
-  <rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200"/>
+  <rect
+    fill="url(#Pattern)"
+    stroke="black"
+    x="0"
+    y="0"
+    width="200"
+    height="200" />
 </svg>
 ```
 
diff --git a/files/zh-cn/web/svg/tutorial/svg_and_css/index.md b/files/zh-cn/web/svg/tutorial/svg_and_css/index.md
index bf7b0829ff5d28..aeafeae53f2910 100644
--- a/files/zh-cn/web/svg/tutorial/svg_and_css/index.md
+++ b/files/zh-cn/web/svg/tutorial/svg_and_css/index.md
@@ -16,119 +16,133 @@ slug: Web/SVG/Tutorial/SVG_and_CSS
 建立一个 SVG 文件 `doc8.svg`。复制下面所有内容：
 
 ```html
-<svg width="600px" height="600px" viewBox="-300 -300 600 600"
-    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-
-  <link rel="stylesheet"
-    href="style8.css" type="text/css"/>
+<svg
+  width="600px"
+  height="600px"
+  viewBox="-300 -300 600 600"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <link rel="stylesheet" href="style8.css" type="text/css" />
 
   <title>SVG demonstration</title>
   <desc>Mozilla CSS Getting Started - SVG demonstration</desc>
 
   <defs>
-    <radialGradient id="fade" cx="0" cy="0" r="200"
-        gradientUnits="userSpaceOnUse">
-      <stop id="fade-stop-1" offset="33%"/>
-      <stop id="fade-stop-2" offset="95%"/>
+    <radialGradient
+      id="fade"
+      cx="0"
+      cy="0"
+      r="200"
+      gradientUnits="userSpaceOnUse">
+      <stop id="fade-stop-1" offset="33%" />
+      <stop id="fade-stop-2" offset="95%" />
     </radialGradient>
   </defs>
 
   <text id="heading" x="-280" y="-270">SVG demonstration</text>
-  <text id="caption" x="-280" y="-250">Move your mouse pointer over the flower.</text>
+  <text id="caption" x="-280" y="-250">
+    Move your mouse pointer over the flower.
+  </text>
 
   <g id="flower">
-    <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/>
+    <circle
+      id="overlay"
+      cx="0"
+      cy="0"
+      r="200"
+      stroke="none"
+      fill="url(#fade)" />
 
     <g id="outer-petals">
       <g class="quadrant">
         <g class="segment">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(18)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(36)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(54)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(72)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
       </g>
 
       <g class="quadrant">
         <g class="segment" transform="rotate(90)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(108)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(126)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(144)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(162)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
       </g>
 
       <g class="quadrant">
         <g class="segment" transform="rotate(180)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(198)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(216)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(234)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(252)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
       </g>
 
       <g class="quadrant">
         <g class="segment" transform="rotate(270)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(288)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(306)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(324)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(342)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
       </g>
     </g>
@@ -136,93 +150,93 @@ slug: Web/SVG/Tutorial/SVG_and_CSS
     <g id="inner-petals" transform="rotate(9) scale(0.33)">
       <g class="quadrant">
         <g class="segment">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(18)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(36)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(54)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(72)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
       </g>
 
       <g class="quadrant">
         <g class="segment" transform="rotate(90)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(108)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(126)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(144)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(162)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
       </g>
 
       <g class="quadrant">
         <g class="segment" transform="rotate(180)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(198)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(216)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(234)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(252)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
       </g>
 
       <g class="quadrant">
         <g class="segment" transform="rotate(270)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(288)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(306)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(324)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
         <g class="segment" transform="rotate(342)">
-          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+          <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
+          <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
         </g>
       </g>
     </g>
@@ -287,7 +301,7 @@ svg {
 
 /* outer petals */
 #outer-petals {
-  opacity: .75;
+  opacity: 0.75;
   --segment-fill-fill: azure;
   --segment-fill-stroke: lightsteelblue;
   --segment-fill-stroke-width: 1;

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 05/13] 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)}}

From ac8ff0f23ba45d50f7b9491d59f429a53c6c424c Mon Sep 17 00:00:00 2001
From: "Queen Vinyl Da.i'gyu-Kazotetsu" <vinyldarkscratch@gmail.com>
Date: Fri, 28 Jul 2023 06:27:04 -0700
Subject: [PATCH 06/13] ja: Format /learn/javascript using Prettier (#14557)

* ja: Format /learn/javascript using Prettier

* Revert unwanted changes
---
 .prettierignore                               |   1 -
 .../implementing_a_promise-based_api/index.md |  43 +--
 .../asynchronous/introducing/index.md         |  40 ++-
 .../asynchronous/introducing_workers/index.md |  49 +--
 .../javascript/asynchronous/promises/index.md |  92 +++--
 .../build_your_own_function/index.md          | 208 ++++++-----
 .../building_blocks/conditionals/index.md     | 229 +++++++------
 .../building_blocks/events/index.md           | 173 ++++++----
 .../building_blocks/functions/index.md        | 170 ++++-----
 .../building_blocks/image_gallery/index.md    |   8 +-
 .../building_blocks/looping_code/index.md     | 218 +++++++-----
 .../building_blocks/return_values/index.md    |  96 +++---
 .../client-side_storage/index.md              | 245 +++++++------
 .../drawing_graphics/index.md                 | 158 +++++----
 .../fetching_data/index.md                    |  33 +-
 .../introduction/index.md                     |  68 ++--
 .../manipulating_documents/index.md           |  32 +-
 .../third_party_apis/index.md                 |  80 ++---
 .../video_and_audio_apis/index.md             |  87 ++---
 .../first_steps/a_first_splash/index.md       | 147 ++++----
 .../javascript/first_steps/arrays/index.md    | 258 +++++++-------
 .../javascript/first_steps/math/index.md      |  74 ++--
 .../silly_story_generator/index.md            |  22 +-
 .../javascript/first_steps/strings/index.md   |   8 +-
 .../test_your_skills_colon__arrays/index.md   |  10 +-
 .../test_your_skills_colon__math/index.md     |  10 +-
 .../useful_string_methods/index.md            | 323 +++++++++---------
 .../javascript/first_steps/variables/index.md |  60 ++--
 .../first_steps/what_is_javascript/index.md   |  60 ++--
 .../first_steps/what_went_wrong/index.md      |  72 ++--
 files/ja/learn/javascript/howto/index.md      |  10 +-
 .../learn/javascript/objects/basics/index.md  |   4 +-
 .../objects/classes_in_javascript/index.md    |  27 +-
 .../ja/learn/javascript/objects/json/index.md |  58 ++--
 .../objects/object_building_practice/index.md |   2 +-
 .../index.md                                  |   2 +-
 36 files changed, 1676 insertions(+), 1501 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index 93ef1c28e73f10..50dc02b28a883d 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -40,7 +40,6 @@ build/
 /files/es/web/javascript/reference/**/*.md
 
 # ja
-/files/ja/learn/javascript/**/*.md
 /files/ja/mozilla/**/*.md
 /files/ja/mdn/**/*.md
 /files/ja/mozilla/add-ons/**/*.md
diff --git a/files/ja/learn/javascript/asynchronous/implementing_a_promise-based_api/index.md b/files/ja/learn/javascript/asynchronous/implementing_a_promise-based_api/index.md
index 2f7e70e101cea3..134e15b2da1ecc 100644
--- a/files/ja/learn/javascript/asynchronous/implementing_a_promise-based_api/index.md
+++ b/files/ja/learn/javascript/asynchronous/implementing_a_promise-based_api/index.md
@@ -48,16 +48,16 @@ div {
 ```
 
 ```js
-const output = document.querySelector('#output');
-const button = document.querySelector('#set-alarm');
+const output = document.querySelector("#output");
+const button = document.querySelector("#set-alarm");
 
 function setAlarm() {
   setTimeout(() => {
-    output.textContent = '起きて！';
+    output.textContent = "起きて！";
   }, 1000);
 }
 
-button.addEventListener('click', setAlarm);
+button.addEventListener("click", setAlarm);
 ```
 
 {{EmbedLiveSample("Wrapping setTimeout()", 600, 100)}}
@@ -76,7 +76,7 @@ button.addEventListener('click', setAlarm);
 function alarm(person, delay) {
   return new Promise((resolve, reject) => {
     if (delay < 0) {
-      throw new Error('アラームの待ち時間を負数にすることはできません。');
+      throw new Error("アラームの待ち時間を負数にすることはできません。");
     }
     setTimeout(() => {
       resolve(`${person}、起きて！`);
@@ -122,15 +122,15 @@ button {
 ```
 
 ```js
-const name = document.querySelector('#name');
-const delay = document.querySelector('#delay');
-const button = document.querySelector('#set-alarm');
-const output = document.querySelector('#output');
+const name = document.querySelector("#name");
+const delay = document.querySelector("#delay");
+const button = document.querySelector("#set-alarm");
+const output = document.querySelector("#output");
 
 function alarm(person, delay) {
   return new Promise((resolve, reject) => {
     if (delay < 0) {
-      throw new Error('アラームの待ち時間を負数にすることはできません。');
+      throw new Error("アラームの待ち時間を負数にすることはできません。");
     }
     setTimeout(() => {
       resolve(`${person}、起きて！`);
@@ -138,10 +138,12 @@ function alarm(person, delay) {
   });
 }
 
-button.addEventListener('click', () => {
+button.addEventListener("click", () => {
   alarm(name.value, delay.value)
-    .then((message) => output.textContent = message)
-    .catch((error) => output.textContent = `アラームを設定できません: ${error}`);
+    .then((message) => (output.textContent = message))
+    .catch(
+      (error) => (output.textContent = `アラームを設定できません: ${error}`),
+    );
 });
 ```
 
@@ -180,15 +182,15 @@ button {
 ```
 
 ```js
-const name = document.querySelector('#name');
-const delay = document.querySelector('#delay');
-const button = document.querySelector('#set-alarm');
-const output = document.querySelector('#output');
+const name = document.querySelector("#name");
+const delay = document.querySelector("#delay");
+const button = document.querySelector("#set-alarm");
+const output = document.querySelector("#output");
 
 function alarm(person, delay) {
   return new Promise((resolve, reject) => {
     if (delay < 0) {
-      throw new Error('アラームの待ち時間を負数にすることはできません。');
+      throw new Error("アラームの待ち時間を負数にすることはできません。");
     }
     setTimeout(() => {
       resolve(`${person}、起きて！`);
@@ -196,12 +198,11 @@ function alarm(person, delay) {
   });
 }
 
-button.addEventListener('click', async () => {
+button.addEventListener("click", async () => {
   try {
     const message = await alarm(name.value, delay.value);
     output.textContent = message;
-  }
-  catch (error) {
+  } catch (error) {
     output.textContent = `アラームを設定できません: ${error}`;
   }
 });
diff --git a/files/ja/learn/javascript/asynchronous/introducing/index.md b/files/ja/learn/javascript/asynchronous/introducing/index.md
index 015831174bea64..45b13ae4eaf4ac 100644
--- a/files/ja/learn/javascript/asynchronous/introducing/index.md
+++ b/files/ja/learn/javascript/asynchronous/introducing/index.md
@@ -43,7 +43,7 @@ l10n:
 以下のようなコードを考えてみましょう。
 
 ```js
-const name = 'Miriam';
+const name = "Miriam";
 const greeting = `Hello, my name is ${name}!`;
 console.log(greeting);
 // "Hello, my name is Miriam!"
@@ -64,7 +64,7 @@ function makeGreeting(name) {
   return `Hello, my name is ${name}!`;
 }
 
-const name = 'Miriam';
+const name = "Miriam";
 const greeting = makeGreeting(name);
 console.log(greeting);
 // "Hello, my name is Miriam!"
@@ -113,15 +113,15 @@ function generatePrimes(quota) {
   return primes;
 }
 
-const quota = document.querySelector('#quota');
-const output = document.querySelector('#output');
+const quota = document.querySelector("#quota");
+const output = document.querySelector("#output");
 
-document.querySelector('#generate').addEventListener('click', () => {
+document.querySelector("#generate").addEventListener("click", () => {
   const primes = generatePrimes(quota.value);
   output.textContent = `${quota.value} 個の素数を生成しました。`;
 });
 
-document.querySelector('#reload').addEventListener('click', () => {
+document.querySelector("#reload").addEventListener("click", () => {
   document.location.reload();
 });
 ```
@@ -182,15 +182,15 @@ function generatePrimes(quota) {
   return primes;
 }
 
-const quota = document.querySelector('#quota');
-const output = document.querySelector('#output');
+const quota = document.querySelector("#quota");
+const output = document.querySelector("#output");
 
-document.querySelector('#generate').addEventListener('click', () => {
+document.querySelector("#generate").addEventListener("click", () => {
   const primes = generatePrimes(quota.value);
   output.textContent = `${quota.value} 個の素数を生成しました。`;
 });
 
-document.querySelector('#reload').addEventListener('click', () => {
+document.querySelector("#reload").addEventListener("click", () => {
   document.location.reload();
 });
 ```
@@ -230,23 +230,27 @@ pre {
 ```
 
 ```js
-const log = document.querySelector('.event-log');
+const log = document.querySelector(".event-log");
 
-document.querySelector('#xhr').addEventListener('click', () => {
-  log.textContent = '';
+document.querySelector("#xhr").addEventListener("click", () => {
+  log.textContent = "";
 
   const xhr = new XMLHttpRequest();
 
-  xhr.addEventListener('loadend', () => {
+  xhr.addEventListener("loadend", () => {
     log.textContent = `${log.textContent}ステータス ${xhr.status} で完了しました`;
   });
 
-  xhr.open('GET', 'https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json');
+  xhr.open(
+    "GET",
+    "https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json",
+  );
   xhr.send();
-  log.textContent = `${log.textContent}XHR リクエストを開始しました\n`;});
+  log.textContent = `${log.textContent}XHR リクエストを開始しました\n`;
+});
 
-document.querySelector('#reload').addEventListener('click', () => {
-  log.textContent = '';
+document.querySelector("#reload").addEventListener("click", () => {
+  log.textContent = "";
   document.location.reload();
 });
 ```
diff --git a/files/ja/learn/javascript/asynchronous/introducing_workers/index.md b/files/ja/learn/javascript/asynchronous/introducing_workers/index.md
index 95bbeb250bc16c..7aa03e98c30f60 100644
--- a/files/ja/learn/javascript/asynchronous/introducing_workers/index.md
+++ b/files/ja/learn/javascript/asynchronous/introducing_workers/index.md
@@ -50,12 +50,11 @@ l10n:
 
 ```js
 function generatePrimes(quota) {
-
   function isPrime(n) {
     for (let c = 2; c <= Math.sqrt(n); ++c) {
       if (n % c === 0) {
-          return false;
-       }
+        return false;
+      }
     }
     return true;
   }
@@ -73,14 +72,17 @@ function generatePrimes(quota) {
   return primes;
 }
 
-document.querySelector('#generate').addEventListener('click', () => {
-  const quota = document.querySelector('#quota').value;
+document.querySelector("#generate").addEventListener("click", () => {
+  const quota = document.querySelector("#quota").value;
   const primes = generatePrimes(quota);
-  document.querySelector('#output').textContent = `Finished generating ${quota} primes!`;
+  document.querySelector(
+    "#output",
+  ).textContent = `Finished generating ${quota} primes!`;
 });
 
-document.querySelector('#reload').addEventListener('click', () => {
-  document.querySelector('#user-input').value = 'Try typing in here immediately after pressing "Generate primes"';
+document.querySelector("#reload").addEventListener("click", () => {
+  document.querySelector("#user-input").value =
+    'Try typing in here immediately after pressing "Generate primes"';
   document.location.reload();
 });
 ```
@@ -99,7 +101,7 @@ document.querySelector('#reload').addEventListener('click', () => {
 "index.html" ファイルと "style.css" ファイルは、すでに完成しています。
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ja">
   <head>
     <meta charset="utf-8" />
@@ -118,7 +120,8 @@ document.querySelector('#reload').addEventListener('click', () => {
 
     <textarea id="user-input" rows="5" cols="62">
 ［素数の生成］を押した後、すぐにここに入力してみてください。
-</textarea>
+</textarea
+    >
 
     <div id="output"></div>
   </body>
@@ -140,15 +143,15 @@ textarea {
 
 ```js
 // 新しいワーカーを作成し、"generate.js" にあるコードを与えます。
-const worker = new Worker('./generate.js');
+const worker = new Worker("./generate.js");
 
 // ユーザーが［素数の生成］をクリックしたら、ワーカーにメッセージを送ります。
 // メッセージのコマンドは "generate" であり、メッセージには生成する素数の
 // 数である "quota" も含まれています。
-document.querySelector('#generate').addEventListener('click', () => {
-  const quota = document.querySelector('#quota').value;
+document.querySelector("#generate").addEventListener("click", () => {
+  const quota = document.querySelector("#quota").value;
   worker.postMessage({
-    command: 'generate',
+    command: "generate",
     quota,
   });
 });
@@ -156,12 +159,15 @@ document.querySelector('#generate').addEventListener('click', () => {
 // ワーカーがメインスレッドにメッセージを送り返したら、メッセージ
 // データから受け取った生成された素数の個数を含むユーザーへの
 // メッセージで出力ボックスを更新します。
-worker.addEventListener('message', (message) => {
-  document.querySelector('#output').textContent = `${message.data} 個の素数を生成しました。`;
+worker.addEventListener("message", (message) => {
+  document.querySelector(
+    "#output",
+  ).textContent = `${message.data} 個の素数を生成しました。`;
 });
 
-document.querySelector('#reload').addEventListener('click', () => {
-  document.querySelector('#user-input').value = '［素数の生成］を押した後、すぐにここに入力してみてください。';
+document.querySelector("#reload").addEventListener("click", () => {
+  document.querySelector("#user-input").value =
+    "［素数の生成］を押した後、すぐにここに入力してみてください。";
   document.location.reload();
 });
 ```
@@ -183,19 +189,18 @@ document.querySelector('#reload').addEventListener('click', () => {
 // メインスレッドからのメッセージを待ち受けします。
 // メッセージのコマンドが "generate" であれば、 `generatePrimes()` を呼び出します。
 addEventListener("message", (message) => {
-  if (message.data.command === 'generate') {
+  if (message.data.command === "generate") {
     generatePrimes(message.data.quota);
   }
 });
 
 // Generate primes (very inefficiently)
 function generatePrimes(quota) {
-
   function isPrime(n) {
     for (let c = 2; c <= Math.sqrt(n); ++c) {
       if (n % c === 0) {
-          return false;
-       }
+        return false;
+      }
     }
     return true;
   }
diff --git a/files/ja/learn/javascript/asynchronous/promises/index.md b/files/ja/learn/javascript/asynchronous/promises/index.md
index f66f4fd131cd8b..20eddd4d6b7e4a 100644
--- a/files/ja/learn/javascript/asynchronous/promises/index.md
+++ b/files/ja/learn/javascript/asynchronous/promises/index.md
@@ -43,7 +43,9 @@ l10n:
 これをブラウザーの JavaScript コンソールにコピーしてください。
 
 ```js
-const fetchPromise = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
+const fetchPromise = fetch(
+  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
+);
 
 console.log(fetchPromise);
 
@@ -80,7 +82,9 @@ Promise { <state>: "pending" }
 これを実行してみましょう。
 
 ```js
-const fetchPromise = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
+const fetchPromise = fetch(
+  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
+);
 
 fetchPromise.then((response) => {
   const jsonPromise = response.json();
@@ -99,7 +103,9 @@ fetchPromise.then((response) => {
 もちろんそうです。しかし、プロミスのエレガントな特徴は、_`then()` 自身がプロミスを返し、それに渡された関数の結果で完了することです_。これはつまり、上記のコードをこのように書き換えることができる（そして、確かにそうすべき）ということです。
 
 ```js
-const fetchPromise = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
+const fetchPromise = fetch(
+  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
+);
 
 fetchPromise
   .then((response) => response.json())
@@ -113,7 +119,9 @@ fetchPromise
 次のステップに移動する前に、もう一つ追加しなければならないことがあります。リクエストを読み込む前に、サーバーがリクエストを受け入れ、処理することができたかどうかを調べる必要があります。これを行うには、レスポンスのステータスコードを調べて、それが "OK" でない場合はエラーを発生させます。
 
 ```js
-const fetchPromise = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
+const fetchPromise = fetch(
+  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
+);
 
 fetchPromise
   .then((response) => {
@@ -140,7 +148,9 @@ fetchPromise
 このバージョンの `fetch()` コードを試してみてください。 `catch()` を使用したエラーハンドラーを追加し、リクエストが失敗するように URL も変更しています。
 
 ```js
-const fetchPromise = fetch('bad-scheme://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
+const fetchPromise = fetch(
+  "bad-scheme://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
+);
 
 fetchPromise
   .then((response) => {
@@ -191,9 +201,15 @@ fetchPromise
 例を示します。
 
 ```js
-const fetchPromise1 = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
-const fetchPromise2 = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found');
-const fetchPromise3 = fetch('https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json');
+const fetchPromise1 = fetch(
+  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
+);
+const fetchPromise2 = fetch(
+  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found",
+);
+const fetchPromise3 = fetch(
+  "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json",
+);
 
 Promise.all([fetchPromise1, fetchPromise2, fetchPromise3])
   .then((responses) => {
@@ -202,7 +218,7 @@ Promise.all([fetchPromise1, fetchPromise2, fetchPromise3])
     }
   })
   .catch((error) => {
-    console.error(`Failed to fetch: ${error}`)
+    console.error(`Failed to fetch: ${error}`);
   });
 ```
 
@@ -219,9 +235,15 @@ https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json: 200
 同じコードを間違った形の URL で試すと、次のようになります。
 
 ```js
-const fetchPromise1 = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
-const fetchPromise2 = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found');
-const fetchPromise3 = fetch('bad-scheme://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json');
+const fetchPromise1 = fetch(
+  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
+);
+const fetchPromise2 = fetch(
+  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found",
+);
+const fetchPromise3 = fetch(
+  "bad-scheme://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json",
+);
 
 Promise.all([fetchPromise1, fetchPromise2, fetchPromise3])
   .then((responses) => {
@@ -230,7 +252,7 @@ Promise.all([fetchPromise1, fetchPromise2, fetchPromise3])
     }
   })
   .catch((error) => {
-    console.error(`Failed to fetch: ${error}`)
+    console.error(`Failed to fetch: ${error}`);
   });
 ```
 
@@ -243,16 +265,22 @@ Failed to fetch: TypeError: Failed to fetch
 時には、設定されたプロミスのうちどれかが履行される必要があり、どれが履行されるかは気にしないことがあるかもしれません。そのような場合は {{jsxref("Promise/any", "Promise.any()")}} を指定します。これは `Promise.all()` と似ていますが、プロミスの配列のいずれかが履行されるとすぐに履行され、すべてが拒否されると拒否される点が異なります。
 
 ```js
-const fetchPromise1 = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
-const fetchPromise2 = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found');
-const fetchPromise3 = fetch('https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json');
+const fetchPromise1 = fetch(
+  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
+);
+const fetchPromise2 = fetch(
+  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found",
+);
+const fetchPromise3 = fetch(
+  "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json",
+);
 
 Promise.any([fetchPromise1, fetchPromise2, fetchPromise3])
   .then((response) => {
     console.log(`${response.url}: ${response.status}`);
   })
   .catch((error) => {
-    console.error(`Failed to fetch: ${error}`)
+    console.error(`Failed to fetch: ${error}`);
   });
 ```
 
@@ -279,7 +307,9 @@ async function fetchProducts() {
   try {
     // この行の後、この関数は `fetch()` 呼び出しが決定されるのを待ちます。
     // `fetch()` 呼び出しは Response を返すか、エラーを発生させます。
-    const response = await fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
+    const response = await fetch(
+      "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
+    );
     if (!response.ok) {
       throw new Error(`HTTP error: ${response.status}`);
     }
@@ -287,8 +317,7 @@ async function fetchProducts() {
     // `response.json()` 呼び出しは、解釈された JSON オブジェクトを返すか、エラーを発生させるかのどちらかです。
     const data = await response.json();
     console.log(data[0].name);
-  }
-  catch (error) {
+  } catch (error) {
     console.error(`Could not get products: ${error}`);
   }
 }
@@ -305,20 +334,21 @@ fetchProducts();
 ```js example-bad
 async function fetchProducts() {
   try {
-    const response = await fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
+    const response = await fetch(
+      "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
+    );
     if (!response.ok) {
       throw new Error(`HTTP error: ${response.status}`);
     }
     const data = await response.json();
     return data;
-  }
-  catch (error) {
+  } catch (error) {
     console.error(`Could not get products: ${error}`);
   }
 }
 
 const promise = fetchProducts();
-console.log(promise[0].name);   // "promise" は Promise オブジェクトなので、これは動作しません。
+console.log(promise[0].name); // "promise" は Promise オブジェクトなので、これは動作しません。
 ```
 
 その代わり、次のようにする必要があります。
@@ -326,14 +356,15 @@ console.log(promise[0].name);   // "promise" は Promise オブジェクトな
 ```js
 async function fetchProducts() {
   try {
-    const response = await fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
+    const response = await fetch(
+      "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
+    );
     if (!response.ok) {
       throw new Error(`HTTP error: ${response.status}`);
     }
     const data = await response.json();
     return data;
-  }
-  catch (error) {
+  } catch (error) {
     console.error(`Could not get products: ${error}`);
   }
 }
@@ -347,14 +378,15 @@ promise.then((data) => console.log(data[0].name));
 ```js
 try {
   // await を非同期関数の外で使用することは、モジュールの中でしか許されません。
-  const response = await fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
+  const response = await fetch(
+    "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
+  );
   if (!response.ok) {
     throw new Error(`HTTP error: ${response.status}`);
   }
   const data = await response.json();
   console.log(data[0].name);
-}
-catch(error) {
+} catch (error) {
   console.error(`Could not get products: ${error}`);
 }
 ```
diff --git a/files/ja/learn/javascript/building_blocks/build_your_own_function/index.md b/files/ja/learn/javascript/building_blocks/build_your_own_function/index.md
index 6359a0ad03e6fd..3fe1213997d22f 100644
--- a/files/ja/learn/javascript/building_blocks/build_your_own_function/index.md
+++ b/files/ja/learn/javascript/building_blocks/build_your_own_function/index.md
@@ -8,15 +8,15 @@ slug: Learn/JavaScript/Building_blocks/Build_your_own_function
 前の記事で扱った重要な理屈をたくさん使って、この記事では実践的な練習を行ないます。ここではあなたが自力で独自関数を作成するための練習を行なっていきます。同時に、関数を扱う上で役に立つ細々の説明もしていきます。
 
 | 前提知識: | 基本的なコンピューターの知識、HTML と CSS への理解、[JavaScript の第一歩](/ja/docs/Learn/JavaScript/First_steps)、[関数 — 再利用可能なコードブロック](/ja/docs/Learn/JavaScript/Building_blocks/Functions)。 |
-| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| 目的:     | 独自の関数を作成する練習、役に立つ関連事項についてつっこんだ説明。                                                                                                                                            |
+| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| 目的:     | 独自の関数を作成する練習、役に立つ関連事項についてつっこんだ説明。                                                                                                                                           |
 
 ## Active learning: 関数を作ってみよう
 
 これから作ってみる独自の関数を `displayMessage()`。これは独自のメッセージボックスをウェブページ上に表示し、ブラウザー組込みの [alert()](/ja/docs/Web/API/Window/alert) 関数の特製の代替品として動作します。既に見たものですが、忘れた事にしましょう。以下をブラウザーの JavaScript コンソールから打ち込みます、どのページでも構いません:
 
 ```js
-alert('This is a message');
+alert("This is a message");
 ```
 
 `alert` 関数は引数を一つ取ります — アラートボックスに表示される文字列です。文字列を色々変えてメッセージを変化させてみて下さい。
@@ -34,42 +34,40 @@ alert('This is a message');
 1. [function-start.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html) ファイルにアクセスして、ローカルコピーを作成するところから初めます。HTML は単純です — body にはボタン一つしかありません。特製メッセージボックス用の基本的な CSS スタイルと、JavaScript を追加していく用の空の {{htmlelement("script")}} 要素が含まれています。
 2. 次に、`<script>` 要素の中に以下を追加して下さい:
 
-    ```js
-    function displayMessage() {
+   ```js
+   function displayMessage() {}
+   ```
 
-    }
-    ```
-
-    キーワード `function` から始めますが、これは関数を定義するという意味です。この後には、関数につけたい名前、カッ括弧の組、中括弧の組と続きます。関数に渡したい引数は括弧の中に、関数を呼び出したときに走らせたいコードは中括弧の中に書きます。
+   キーワード `function` から始めますが、これは関数を定義するという意味です。この後には、関数につけたい名前、カッ括弧の組、中括弧の組と続きます。関数に渡したい引数は括弧の中に、関数を呼び出したときに走らせたいコードは中括弧の中に書きます。
 
 3. 最後に、以下のコードを中括弧の中に追加します:
 
-    ```js
-    const html = document.querySelector('html');
+   ```js
+   const html = document.querySelector("html");
 
-    const panel = document.createElement('div');
-    panel.setAttribute('class', 'msgBox');
-    html.appendChild(panel);
+   const panel = document.createElement("div");
+   panel.setAttribute("class", "msgBox");
+   html.appendChild(panel);
 
-    const msg = document.createElement('p');
-    msg.textContent = 'This is a message box';
-    panel.appendChild(msg);
+   const msg = document.createElement("p");
+   msg.textContent = "This is a message box";
+   panel.appendChild(msg);
 
-    const closeBtn = document.createElement('button');
-    closeBtn.textContent = 'x';
-    panel.appendChild(closeBtn);
+   const closeBtn = document.createElement("button");
+   closeBtn.textContent = "x";
+   panel.appendChild(closeBtn);
 
-    closeBtn.onclick = function() {
-      panel.parentNode.removeChild(panel);
-    }
-    ```
+   closeBtn.onclick = function () {
+     panel.parentNode.removeChild(panel);
+   };
+   ```
 
 これは見ていくにはそこそこの量のコードですから、一つ一ついっしょに進んでいく事にしましょう。
 
 最初の行では {{domxref("document.querySelector()")}} と呼ばれる DOM API 関数を使って {{htmlelement("html")}} 要素を選択し、`html` という名前の定数に要素への参照を保存したので、これを使っていろいろやっていきます:
 
 ```js
-const html = document.querySelector('html');
+const html = document.querySelector("html");
 ```
 
 次の部分では別の DOM API 関数 {{domxref("document.createElement()")}} を使い、{{htmlelement("div")}} 要素を作成、これへの参照を `panel` という定数に保存しています。この要素は我々のメッセージボックスの外枠となっていきます。
@@ -79,20 +77,20 @@ const html = document.querySelector('html');
 最後に、前に保存した html 変数の DOM 関数 {{domxref("Node.appendChild()")}} を呼んでいますが、この関数は一つの要素を別の要素の子として組み入れる働きをします。panel という`<div>` 要素を子として、`<html>` 要素の中に追加したいのです。作成した要素は作成したページにぽんと現われたりはしません — どこに置くのかも指定しなければなりません。なのでこのようにする必要があります。
 
 ```js
-const panel = document.createElement('div');
-panel.setAttribute('class', 'msgBox');
+const panel = document.createElement("div");
+panel.setAttribute("class", "msgBox");
 html.appendChild(panel);
 ```
 
 次の 2 つのセクションでは既に見た同じ `createElement()` と `appendChild()` 関数を使用して、2 つの新しい要素、つまり {{htmlelement("p")}} と {{htmlelement("button")}} を作成し、`<div>` パネルの子要素としてページに挿入します。段落の中にメッセージを挿入する {{domxref("Node.textContent")}} プロパティ (要素のテキスト内容を表す) とボタンの中に 'x' を使います。このボタンは、ユーザーがメッセージボックスを閉じるときにクリック/アクティブ化する必要があります。
 
 ```js
-const msg = document.createElement('p');
-msg.textContent = 'This is a message box';
+const msg = document.createElement("p");
+msg.textContent = "This is a message box";
 panel.appendChild(msg);
 
-const closeBtn = document.createElement('button');
-closeBtn.textContent = 'x';
+const closeBtn = document.createElement("button");
+closeBtn.textContent = "x";
 panel.appendChild(closeBtn);
 ```
 
@@ -101,9 +99,9 @@ panel.appendChild(closeBtn);
 簡単に説明すると、`onclick` ハンドラーはボタン (または実際にはページ上の任意の要素) で使用できるプロパティで、ボタンをクリックしたときに実行するコードを指定する関数に設定できます。後の[イベントの記事](/ja/docs/Learn/JavaScript/Building_blocks/Events)で、これらについてさらに詳しく学びます。`onclick` ハンドラーは、ボタンがクリックされたときに実行されるコードを含む無名関数と等しくなります。関数内の行は {{domxref("Node.removeChild()")}} DOM API 関数を使用して、HTML 要素の特定の子要素 (この場合は `<div>` パネル) を削除することを指定します。
 
 ```js
-closeBtn.onclick = function() {
+closeBtn.onclick = function () {
   panel.parentNode.removeChild(panel);
-}
+};
 ```
 
 基本的には、このコードブロック全体が HTML のブロックを生成してページに挿入しています。
@@ -123,32 +121,32 @@ closeBtn.onclick = function() {
 
 1. 関数の下に次の行を含めて呼び出してみてください:
 
-    ```js
-    displayMessage();
-    ```
+   ```js
+   displayMessage();
+   ```
 
-    この行は関数を呼び出し、すぐに実行させます。コードを保存してブラウザーを再読み込みすると、小さなメッセージボックスがすぐに 1 回だけ表示されます。それを一度呼ぶだけです。
+   この行は関数を呼び出し、すぐに実行させます。コードを保存してブラウザーを再読み込みすると、小さなメッセージボックスがすぐに 1 回だけ表示されます。それを一度呼ぶだけです。
 
 2. サンプルページでブラウザーの開発者ツールを開き、JavaScript コンソールに移動してもう一度その行を入力すると、もう一度表示されます。これは楽しいことです - 私たちは今好きな時に呼び出すことができる再利用可能な関数を持っています。
 
-    しかし、ユーザーとシステムのアクションに応じて表示されるようにすることをお勧めします。実際のアプリケーションでは、このようなメッセージボックスは、新しいデータが利用可能であること、エラーが発生したこと、ユーザーがプロファイルを削除しようとしている (「これは本当ですか？」)、またはユーザーが 新しい連絡先や操作が正常に終了しました...などが起こったときに呼び出されるでしょう。
+   しかし、ユーザーとシステムのアクションに応じて表示されるようにすることをお勧めします。実際のアプリケーションでは、このようなメッセージボックスは、新しいデータが利用可能であること、エラーが発生したこと、ユーザーがプロファイルを削除しようとしている (「これは本当ですか？」)、またはユーザーが 新しい連絡先や操作が正常に終了しました...などが起こったときに呼び出されるでしょう。
 
-    このデモでは、ユーザーがボタンをクリックするとメッセージボックスが表示されます。
+   このデモでは、ユーザーがボタンをクリックするとメッセージボックスが表示されます。
 
 3. 追加した前の行を削除します。
 4. 次に、ボタンを選択し、そのボタンへの参照を定数に格納します。関数定義の上のコードに次の行を追加します:
 
-    ```js
-    const btn = document.querySelector('button');
-    ```
+   ```js
+   const btn = document.querySelector("button");
+   ```
 
 5. 最後に、前の行の下に次の行を追加します:
 
-    ```js
-    btn.onclick = displayMessage;
-    ```
+   ```js
+   btn.onclick = displayMessage;
+   ```
 
-    関数内の `closeBtn.onclick...` 行と同様に、ここではボタンがクリックされたことに応答してコードを呼び出します。しかしこの場合、コードを含む無名関数を呼び出す代わりに、関数名を直接呼び出しています。
+   関数内の `closeBtn.onclick...` 行と同様に、ここではボタンがクリックされたことに応答してコードを呼び出します。しかしこの場合、コードを含む無名関数を呼び出す代わりに、関数名を直接呼び出しています。
 
 6. ページを保存して再表示してみてください。ボタンをクリックするとメッセージボックスが表示されるはずです。
 
@@ -168,45 +166,45 @@ btn.onclick = displayMessage();
 
 1. まず、関数の最初の行を更新します。
 
-    ```js
-    function displayMessage() {
-    ```
+   ```js
+   function displayMessage() {
+   ```
 
-    このようになります:
+   このようになります:
 
-    ```js
-    function displayMessage(msgText, msgType) {
-    ```
+   ```js
+   function displayMessage(msgText, msgType) {
+   ```
 
-    関数を呼び出すと、括弧内に 2 つの変数値を指定して、メッセージボックスに表示するメッセージとそのメッセージのタイプを指定できます。
+   関数を呼び出すと、括弧内に 2 つの変数値を指定して、メッセージボックスに表示するメッセージとそのメッセージのタイプを指定できます。
 
 2. 最初のパラメーターを使用するには、関数内の次の行を更新します:
 
-    ```js
-    msg.textContent = 'This is a message box';
-    ```
+   ```js
+   msg.textContent = "This is a message box";
+   ```
 
-    このようになります
+   このようになります
 
-    ```js
-    msg.textContent = msgText;
-    ```
+   ```js
+   msg.textContent = msgText;
+   ```
 
 3. 最後に関数呼び出しを更新して、更新されたメッセージテキストを追加する必要があります。次の行を変更します。
 
-    ```js
-    btn.onclick = displayMessage;
-    ```
+   ```js
+   btn.onclick = displayMessage;
+   ```
 
-    このブロックのようになります:
+   このブロックのようになります:
 
-    ```js
-    btn.onclick = function() {
-      displayMessage('Woo, this is a different message!');
-    };
-    ```
+   ```js
+   btn.onclick = function () {
+     displayMessage("Woo, this is a different message!");
+   };
+   ```
 
-    私たちが呼び出している関数の括弧内にパラメーターを指定したい場合、直接呼び出すことはできません - 直接のスコープにないため、すぐに呼び出されないように無名関数の中に入れる必要があります。ボタンがクリックされるまで呼び出されません。
+   私たちが呼び出している関数の括弧内にパラメーターを指定したい場合、直接呼び出すことはできません - 直接のスコープにないため、すぐに呼び出されないように無名関数の中に入れる必要があります。ボタンがクリックされるまで呼び出されません。
 
 4. 再読み込みしてコードをもう一度試してみてください。それでもパラメーター内のメッセージを変えてボックスに表示されるメッセージを変えることができます。
 
@@ -216,58 +214,58 @@ btn.onclick = displayMessage();
 
 1. まず始めに、この演習に必要なアイコン ([warning](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/icons/warning.png) と [chat](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/icons/chat.png)) を GitHub からダウンロードしてください。HTML ファイルと同じ場所にある `icons` という新しいフォルダーに保存します
 
-    > **メモ:** [iconfinder.com](https://www.iconfinder.com/) にある warning と chat のアイコンは [Nazarrudin Ansyari](https://www.iconfinder.com/nazarr) によってデザインされたものです。ありがとう！ (実際のアイコンのページは移動か削除されています。)
+   > **メモ:** [iconfinder.com](https://www.iconfinder.com/) にある warning と chat のアイコンは [Nazarrudin Ansyari](https://www.iconfinder.com/nazarr) によってデザインされたものです。ありがとう！ (実際のアイコンのページは移動か削除されています。)
 
 2. 次に、HTML ファイル内の CSS を探します。私たちは、アイコンの道を作るためにいくつかの変更を行います。まず `.msgBox` の幅を次のように更新します
 
-    ```css
-    width: 200px;
-    ```
+   ```css
+   width: 200px;
+   ```
 
-    このようにします
+   このようにします
 
-    ```css
-    width: 242px;
-    ```
+   ```css
+   width: 242px;
+   ```
 
 3. 次に、`.msgBox p { ... }` ルール内に次の行を追加します
 
-    ```css
-    padding-left: 82px;
-    background-position: 25px center;
-    background-repeat: no-repeat;
-    ```
+   ```css
+   padding-left: 82px;
+   background-position: 25px center;
+   background-repeat: no-repeat;
+   ```
 
 4. これでアイコンの表示を処理するために、`displayMessage()` 関数にコードを追加する必要があります。関数の終了中括弧 (`}`) のすぐ上に次のブロックを追加します。
 
-    ```js
-    if (msgType === 'warning') {
-      msg.style.backgroundImage = 'url(icons/warning.png)';
-      panel.style.backgroundColor = 'red';
-    } else if (msgType === 'chat') {
-      msg.style.backgroundImage = 'url(icons/chat.png)';
-      panel.style.backgroundColor = 'aqua';
-    } else {
-      msg.style.paddingLeft = '20px';
-    }
-    ```
+   ```js
+   if (msgType === "warning") {
+     msg.style.backgroundImage = "url(icons/warning.png)";
+     panel.style.backgroundColor = "red";
+   } else if (msgType === "chat") {
+     msg.style.backgroundImage = "url(icons/chat.png)";
+     panel.style.backgroundColor = "aqua";
+   } else {
+     msg.style.paddingLeft = "20px";
+   }
+   ```
 
-    ここで、`msgType` パラメーターが `'warning'` に設定されている場合、警告アイコンが表示され、パネルの背景色は赤に設定されます。`'chat'`に設定されている場合、チャットアイコンが表示され、パネルの背景色が青色に設定されます。`msgType` パラメーターがまったく設定されていない (または別のものに変更されている) 場合、コードの `else { ... }` 部分が有効になり、段落には単にデフォルトのパディングが与えられ、背景パネルの色もしくはアイコンのどちらかが未設定の状態となります。これは `msgType` パラメーターが指定されていない場合、省略可能なパラメーターであることを意味するデフォルトの状態を提供します。
+   ここで、`msgType` パラメーターが `'warning'` に設定されている場合、警告アイコンが表示され、パネルの背景色は赤に設定されます。`'chat'`に設定されている場合、チャットアイコンが表示され、パネルの背景色が青色に設定されます。`msgType` パラメーターがまったく設定されていない (または別のものに変更されている) 場合、コードの `else { ... }` 部分が有効になり、段落には単にデフォルトのパディングが与えられ、背景パネルの色もしくはアイコンのどちらかが未設定の状態となります。これは `msgType` パラメーターが指定されていない場合、省略可能なパラメーターであることを意味するデフォルトの状態を提供します。
 
 5. 更新された関数をテストしましょう。この `displayMessage()` 呼び出しを更新して：
 
-    ```js
-    displayMessage('Woo, this is a different message!');
-    ```
+   ```js
+   displayMessage("Woo, this is a different message!");
+   ```
 
-    これらのうちの 1 つにしましょう。
+   これらのうちの 1 つにしましょう。
 
-    ```js
-    displayMessage('Your inbox is almost full — delete some mails', 'warning');
-    displayMessage('Brian: Hi there, how are you today?','chat');
-    ```
+   ```js
+   displayMessage("Your inbox is almost full — delete some mails", "warning");
+   displayMessage("Brian: Hi there, how are you today?", "chat");
+   ```
 
-    私たちの (今はそうではない) 小さな機能がどのように役立つかがわかります。
+   私たちの (今はそうではない) 小さな機能がどのように役立つかがわかります。
 
 > **メモ:** サンプルをうまく動作させることができない場合は、コードを [GitHub の完成バージョン](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html)と比較して ([see it running live](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html) もみて) チェックしてください。もしくは私たちにヘルプを依頼してください。
 
diff --git a/files/ja/learn/javascript/building_blocks/conditionals/index.md b/files/ja/learn/javascript/building_blocks/conditionals/index.md
index 4b38dac726e379..1f4057853b08a4 100644
--- a/files/ja/learn/javascript/building_blocks/conditionals/index.md
+++ b/files/ja/learn/javascript/building_blocks/conditionals/index.md
@@ -104,24 +104,28 @@ if (shoppingDone === true) {
 ```
 
 ```js
-const select = document.querySelector('select');
-const para = document.querySelector('p');
+const select = document.querySelector("select");
+const para = document.querySelector("p");
 
-select.addEventListener('change', setWeather);
+select.addEventListener("change", setWeather);
 
 function setWeather() {
   const choice = select.value;
 
-  if (choice === 'sunny') {
-    para.textContent = '今日はとてもいい天気です。短いパンツをはいて、砂浜や公園に出かけ、アイスクリームを食べましょう！';
-  } else if (choice === 'rainy') {
-    para.textContent = '雨が降っています。レインコートと傘を忘れないようにして、できる限り室内で過ごしましょう。';
-  } else if (choice === 'snowing') {
-    para.textContent = '雪が降ってとても寒いです！室内でホットチョコレートを飲むか、雪だるまを作るのがよいでしょう。';
-  } else if (choice === 'overcast') {
-    para.textContent = '雨は降っていませんが、空はとても暗くなっています。万が一に備えレインコートを持ちましょう。';
+  if (choice === "sunny") {
+    para.textContent =
+      "今日はとてもいい天気です。短いパンツをはいて、砂浜や公園に出かけ、アイスクリームを食べましょう！";
+  } else if (choice === "rainy") {
+    para.textContent =
+      "雨が降っています。レインコートと傘を忘れないようにして、できる限り室内で過ごしましょう。";
+  } else if (choice === "snowing") {
+    para.textContent =
+      "雪が降ってとても寒いです！室内でホットチョコレートを飲むか、雪だるまを作るのがよいでしょう。";
+  } else if (choice === "overcast") {
+    para.textContent =
+      "雨は降っていませんが、空はとても暗くなっています。万が一に備えレインコートを持ちましょう。";
   } else {
-    para.textContent = '';
+    para.textContent = "";
   }
 }
 ```
@@ -148,12 +152,12 @@ function setWeather() {
 真偽 (`true`/`false`) の値を判定する場合には少しの配慮が必要であることを付け加えさせてください。おそらく何度か躓くであろう、よくあるパターンです。`false`、`undefined`、`null`、`0`、`NaN`、空文字列 (`''`) 以外の値は条件文で使った場合に `true` となります。ですから、その値が `true` であるか判定したい場合や、その値が存在するか (例えば、`undefined` ではないこと) 判定したい場合は単に変数名を使用するだけです。
 
 ```js
-let cheese = 'チェダー';
+let cheese = "チェダー";
 
 if (cheese) {
-  console.log('やった！チーズトーストを作るチーズがあるよ。');
+  console.log("やった！チーズトーストを作るチーズがあるよ。");
 } else {
-  console.log('今日はチーズトーストのチーズがないよ。');
+  console.log("今日はチーズトーストのチーズがないよ。");
 }
 ```
 
@@ -162,7 +166,8 @@ if (cheese) {
 ```js
 let shoppingDone = false;
 
-if (shoppingDone) { // '=== true' を明示的に指定する必要はありません
+if (shoppingDone) {
+  // '=== true' を明示的に指定する必要はありません
   let childsAllowance = 10;
 } else {
   let childsAllowance = 5;
@@ -174,11 +179,17 @@ if (shoppingDone) { // '=== true' を明示的に指定する必要はありま
 `if...else` ステートメントを入れ子にして、他の `if...else` ステートメントの中で使用することは全く問題ありません。例えば、天気予報アプリケーションで気温に応じて表示する内容を切り替えたい場合以下のように書くことができます。
 
 ```js
-if (choice === 'sunny') {
+if (choice === "sunny") {
   if (temperature < 86) {
-    para.textContent = '外の気温は ' + temperature + ' 度です — とてもいい天気です。海水浴や、公園に出かけてアイスクリームを食べましょう';
+    para.textContent =
+      "外の気温は " +
+      temperature +
+      " 度です — とてもいい天気です。海水浴や、公園に出かけてアイスクリームを食べましょう";
   } else if (temperature >= 86) {
-    para.textContent = '外の気温は ' + temperature + ' 度です — かなり暑いです！外出する場合にはアイスクリームを持って出かけましょう。';
+    para.textContent =
+      "外の気温は " +
+      temperature +
+      " 度です — かなり暑いです！外出する場合にはアイスクリームを持って出かけましょう。";
   }
 }
 ```
@@ -195,10 +206,16 @@ if (choice === 'sunny') {
 AND の例を示すため、先ほどのコードを書き直すと以下のようになります。
 
 ```js
-if (choice === 'sunny' && temperature < 86) {
-  para.textContent = '外の気温は ' + temperature + ' 度です — とてもいい天気です。海水浴や、公園に出かけてアイスクリームを食べましょう';
-} else if (choice === 'sunny' && temperature >= 86) {
-  para.textContent = '外の気温は ' + temperature + ' 度です — かなり暑いです！外出する場合にはアイスクリームを持って出かけましょう。';
+if (choice === "sunny" && temperature < 86) {
+  para.textContent =
+    "外の気温は " +
+    temperature +
+    " 度です — とてもいい天気です。海水浴や、公園に出かけてアイスクリームを食べましょう";
+} else if (choice === "sunny" && temperature >= 86) {
+  para.textContent =
+    "外の気温は " +
+    temperature +
+    " 度です — かなり暑いです！外出する場合にはアイスクリームを持って出かけましょう。";
 }
 ```
 
@@ -207,20 +224,20 @@ if (choice === 'sunny' && temperature < 86) {
 今度は OR の例を見てみましょう。
 
 ```js
-if (iceCreamCarOutside || houseStatus === '火事') {
-  console.log('すぐに家から出ましょう。');
+if (iceCreamCarOutside || houseStatus === "火事") {
+  console.log("すぐに家から出ましょう。");
 } else {
-  console.log('それでは家にいましょう。');
+  console.log("それでは家にいましょう。");
 }
 ```
 
 論理演算子の最後は NOT です。`!` 演算子で表され、式を否定するのに使用します。それでは先ほどの OR と組み合わせてみましょう。
 
 ```js
-if (!(iceCreamVanOutside || houseStatus === '火事')) {
-  console.log('それでは家にいましょう。');
+if (!(iceCreamVanOutside || houseStatus === "火事")) {
+  console.log("それでは家にいましょう。");
 } else {
-  console.log('すぐに家から出ましょう。');
+  console.log("すぐに家から出ましょう。");
 }
 ```
 
@@ -229,7 +246,7 @@ if (!(iceCreamVanOutside || houseStatus === '火事')) {
 論理ステートメントは思うがままに、いくつでも繋げることが可能です。次の例では両方の OR ステートメントが真を返した場合に AND ステートメントが真となり、`if` の中のコードが実行されます。
 
 ```js
-if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'スティーブ')) {
+if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === "スティーブ")) {
   // コードを実行
 }
 ```
@@ -245,7 +262,7 @@ if (x === 5 || 7 || 10 || 20) {
 この場合、`if(...)` の条件式は常に真となります。なぜなら 7 (もしくはその他 0 以外の数値) が常に `true` と評価されるためです。この条件式は「もし x が 5 であるか 7 が真であるならば (7 は常に真です)」となります。これは求めているものではありませんよね！このコードの誤りを修正するためには、OR 演算子の隣に常に完全な条件を書かなければなりません。
 
 ```js
-if (x === 5 || x === 7 || x === 10 ||x === 20) {
+if (x === 5 || x === 7 || x === 10 || x === 20) {
   // コードを実行する
 }
 ```
@@ -303,30 +320,33 @@ switch ( 式 ) {
 ```
 
 ```js
-const select = document.querySelector('select');
-const para = document.querySelector('p');
-
-select.addEventListener('change', setWeather);
+const select = document.querySelector("select");
+const para = document.querySelector("p");
 
+select.addEventListener("change", setWeather);
 
 function setWeather() {
   const choice = select.value;
 
   switch (choice) {
-    case 'sunny':
-      para.textContent = '今日はとてもいい天気です。短いパンツをはいて、砂浜や公園に出かけ、アイスクリームを食べましょう！';
+    case "sunny":
+      para.textContent =
+        "今日はとてもいい天気です。短いパンツをはいて、砂浜や公園に出かけ、アイスクリームを食べましょう！";
       break;
-    case 'rainy':
-      para.textContent = '雨が降っています。レインコートと傘を忘れないようにしましょう。';
+    case "rainy":
+      para.textContent =
+        "雨が降っています。レインコートと傘を忘れないようにしましょう。";
       break;
-    case 'snowing':
-      para.textContent = '雪が降ってとても寒いです！室内でホットチョコレートを飲むか、雪だるまを作るのがよいでしょう。';
+    case "snowing":
+      para.textContent =
+        "雪が降ってとても寒いです！室内でホットチョコレートを飲むか、雪だるまを作るのがよいでしょう。";
       break;
-    case 'overcast':
-      para.textContent = '雨は降っていませんが、空はとても暗くなっています。万が一に備えレインコートを持ちましょう。';
+    case "overcast":
+      para.textContent =
+        "雨は降っていませんが、空はとても暗くなっています。万が一に備えレインコートを持ちましょう。";
       break;
     default:
-      para.textContent = '';
+      para.textContent = "";
   }
 }
 ```
@@ -346,7 +366,9 @@ function setWeather() {
 それでは実際に例を見て見ましょう。
 
 ```js
-let greeting = ( isBirthday ) ? 'スミスさん、誕生日おめでとうございます！良い一日を。' : 'スミスさんおはようございます。';
+let greeting = isBirthday
+  ? "スミスさん、誕生日おめでとうございます！良い一日を。"
+  : "スミスさんおはようございます。";
 ```
 
 この例では `isBirthday` という変数があり、この変数が `true` の場合、お客に誕生日を祝福するメッセージを送ります。そうでなければ、通常の挨拶を送ります。
@@ -366,18 +388,20 @@ let greeting = ( isBirthday ) ? 'スミスさん、誕生日おめでとうご
 ```
 
 ```js
-const select = document.querySelector('select');
-const html = document.querySelector('html');
-document.body.style.padding = '10px';
+const select = document.querySelector("select");
+const html = document.querySelector("html");
+document.body.style.padding = "10px";
 
 function update(bgColor, textColor) {
   html.style.backgroundColor = bgColor;
   html.style.color = textColor;
 }
 
-select.onchange = function() {
-  ( select.value === 'black' ) ? update('black','white') : update('white','black');
-}
+select.onchange = function () {
+  select.value === "black"
+    ? update("black", "white")
+    : update("white", "black");
+};
 ```
 
 {{ EmbedLiveSample('Ternary_operator_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}
@@ -433,7 +457,10 @@ select.onchange = function() {
 </div>
 
 <h2>コードエディタ</h2>
-<p class="a11y-label">コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p>
+<p class="a11y-label">
+  コードエディタから抜けるには Esc
+  キーを押して下さい(タブキーではタブ文字を挿入します)。
+</p>
 
 <textarea id="code" class="playable-code" style="height: 400px;width: 95%">
 const select = document.querySelector('select');
@@ -462,8 +489,8 @@ createCalendar(31,'1 月');
 </textarea>
 
 <div class="playable-buttons">
-  <input id="reset" type="button" value="リセット">
-  <input id="solution" type="button" value="答えを見る">
+  <input id="reset" type="button" value="リセット" />
+  <input id="solution" type="button" value="答えを見る" />
 </div>
 ```
 
@@ -483,7 +510,7 @@ createCalendar(31,'1 月');
   border: 2px solid white;
   padding: 5px;
   height: 40px;
-  background-color: #4A2DB6;
+  background-color: #4a2db6;
   color: white;
 }
 
@@ -509,9 +536,9 @@ body {
 ```
 
 ```js hidden
-const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
 let code = textarea.value;
 let userEntry = textarea.value;
 
@@ -519,38 +546,39 @@ function updateCode() {
   eval(textarea.value);
 }
 
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = jsSolution;
-  solution.value = '答えを見る';
+  solution.value = "答えを見る";
   updateCode();
 });
 
-solution.addEventListener('click', function() {
-  if(solution.value === '答えを見る') {
+solution.addEventListener("click", function () {
+  if (solution.value === "答えを見る") {
     textarea.value = solutionEntry;
-    solution.value = '答えを隠す';
+    solution.value = "答えを隠す";
   } else {
     textarea.value = userEntry;
-    solution.value = '答えを見る';
+    solution.value = "答えを見る";
   }
   updateCode();
 });
 
-const jsSolution = 'const select = document.querySelector(\'select\');\nconst list = document.querySelector(\'ul\');\nlet h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n let choice = select.value;\n let days = 31;\n if(choice === \'2\') {\n days = 28;\n } else if(choice === \'4\' || choice === \'6\' || choice === \'9\'|| choice === \'11\') {\n days = 30;\n }\n\n createCalendar(days, choice + \' 月\');\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = \'\';\n h1.textContent = choice;\n for(let i = 1; i <= days; i++) {\n let listItem = document.createElement(\'li\');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,\'1 月\');';
+const jsSolution =
+  "const select = document.querySelector('select');\nconst list = document.querySelector('ul');\nlet h1 = document.querySelector('h1');\n\nselect.onchange = function() {\n let choice = select.value;\n let days = 31;\n if(choice === '2') {\n days = 28;\n } else if(choice === '4' || choice === '6' || choice === '9'|| choice === '11') {\n days = 30;\n }\n\n createCalendar(days, choice + ' 月');\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = '';\n h1.textContent = choice;\n for(let i = 1; i <= days; i++) {\n let listItem = document.createElement('li');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,'1 月');";
 let solutionEntry = jsSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // タブキーでテキストエリアから抜けてしまうのを防ぎ、
 // 代わりにカーソル位置にタブ文字を挿入する
 
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
   if (e.keyCode === 9) {
     e.preventDefault();
-    insertAtCaret('\t');
+    insertAtCaret("\t");
   }
 
   if (e.keyCode === 27) {
@@ -561,8 +589,11 @@ textarea.onkeydown = function(e){
 function insertAtCaret(text) {
   const scrollPos = textarea.scrollTop;
   const caretPos = textarea.selectionStart;
-  const front = (textarea.value).substring(0, caretPos);
-  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  const front = textarea.value.substring(0, caretPos);
+  const back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
   textarea.value = front + text + back;
   caretPos = caretPos + text.length;
   textarea.selectionStart = caretPos;
@@ -573,10 +604,10 @@ function insertAtCaret(text) {
 
 // ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する
 
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
   // ユーザーのコードが表示されているときのみ状態を保存し、
   // 答えのコードでユーザーコードが上書きされないようにする
-  if(solution.value === '答えを見る') {
+  if (solution.value === "答えを見る") {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
@@ -614,7 +645,10 @@ textarea.onkeyup = function(){
 </div>
 
 <h2>コードエディタ</h2>
-<p class="a11y-label">コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p>
+<p class="a11y-label">
+  コードエディタから抜けるには Esc
+  キーを押して下さい(タブキーではタブ文字を挿入します)。
+</p>
 
 <textarea id="code" class="playable-code" style="height: 450px;width: 95%">
 const select = document.querySelector('select');
@@ -629,11 +663,12 @@ select.onchange = function() {
 function update(bgColor, textColor) {
   html.style.backgroundColor = bgColor;
   html.style.color = textColor;
-}</textarea>
+}</textarea
+>
 
 <div class="playable-buttons">
-  <input id="reset" type="button" value="リセット">
-  <input id="solution" type="button" value="答えを見る">
+  <input id="reset" type="button" value="リセット" />
+  <input id="solution" type="button" value="答えを見る" />
 </div>
 ```
 
@@ -660,9 +695,9 @@ body {
 ```
 
 ```js hidden
-const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
 let code = textarea.value;
 let userEntry = textarea.value;
 
@@ -670,38 +705,39 @@ function updateCode() {
   eval(textarea.value);
 }
 
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = jsSolution;
-  solution.value = '答えを見る';
+  solution.value = "答えを見る";
   updateCode();
 });
 
-solution.addEventListener('click', function() {
-  if(solution.value === '答えを見る') {
+solution.addEventListener("click", function () {
+  if (solution.value === "答えを見る") {
     textarea.value = solutionEntry;
-    solution.value = '答えを隠す';
+    solution.value = "答えを隠す";
   } else {
     textarea.value = userEntry;
-    solution.value = '答えを見る';
+    solution.value = "答えを見る";
   }
   updateCode();
 });
 
-const jsSolution = 'const select = document.querySelector(\'select\');\nconst html = document.querySelector(\'.output\');\n\nselect.onchange = function() {\n const choice = select.value;\n\n switch(choice) {\n case \'black\':\n update(\'black\',\'white\');\n break;\n case \'white\':\n update(\'white\',\'black\');\n break;\n case \'purple\':\n update(\'purple\',\'white\');\n break;\n case \'yellow\':\n update(\'yellow\',\'darkgray\');\n break;\n case \'psychedelic\':\n update(\'lime\',\'purple\');\n break;\n }\n}\n\nfunction update(bgColor, textColor) {\n html.style.backgroundColor = bgColor;\n html.style.color = textColor;\n}';
+const jsSolution =
+  "const select = document.querySelector('select');\nconst html = document.querySelector('.output');\n\nselect.onchange = function() {\n const choice = select.value;\n\n switch(choice) {\n case 'black':\n update('black','white');\n break;\n case 'white':\n update('white','black');\n break;\n case 'purple':\n update('purple','white');\n break;\n case 'yellow':\n update('yellow','darkgray');\n break;\n case 'psychedelic':\n update('lime','purple');\n break;\n }\n}\n\nfunction update(bgColor, textColor) {\n html.style.backgroundColor = bgColor;\n html.style.color = textColor;\n}";
 let solutionEntry = jsSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // タブキーでテキストエリアから抜けてしまうのを防ぎ、
 // 代わりにカーソル位置にタブ文字を挿入する
 
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
   if (e.keyCode === 9) {
     e.preventDefault();
-    insertAtCaret('\t');
+    insertAtCaret("\t");
   }
 
   if (e.keyCode === 27) {
@@ -712,8 +748,11 @@ textarea.onkeydown = function(e){
 function insertAtCaret(text) {
   const scrollPos = textarea.scrollTop;
   const caretPos = textarea.selectionStart;
-  const front = (textarea.value).substring(0, caretPos);
-  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  const front = textarea.value.substring(0, caretPos);
+  const back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
   textarea.value = front + text + back;
   caretPos = caretPos + text.length;
   textarea.selectionStart = caretPos;
@@ -724,10 +763,10 @@ function insertAtCaret(text) {
 
 // ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する
 
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
   // ユーザーのコードが表示されているときのみ状態を保存し、
   // 答えのコードでユーザーコードが上書きされないようにする
-  if(solution.value === '答えを見る') {
+  if (solution.value === "答えを見る") {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
diff --git a/files/ja/learn/javascript/building_blocks/events/index.md b/files/ja/learn/javascript/building_blocks/events/index.md
index ed1b5ed33cae83..f1f45020ec32b9 100644
--- a/files/ja/learn/javascript/building_blocks/events/index.md
+++ b/files/ja/learn/javascript/building_blocks/events/index.md
@@ -42,22 +42,25 @@ slug: Learn/JavaScript/Building_blocks/Events
 ```
 
 ```css hidden
-button { margin: 10px };
+button {
+  margin: 10px;
+}
 ```
 
 JavaScript はこのようになります:
 
 ```js
-const btn = document.querySelector('button');
+const btn = document.querySelector("button");
 
 function random(number) {
-  return Math.floor(Math.random() * (number+1));
+  return Math.floor(Math.random() * (number + 1));
 }
 
-btn.onclick = function() {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+btn.onclick = function () {
+  const rndCol =
+    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
   document.body.style.backgroundColor = rndCol;
-}
+};
 ```
 
 このコードでは、`btn` という変数に {{domxref("Document.querySelector()")}} 関数を使って取得したボタンへの参照を格納しています。それとは別にランダムな数値を返す関数も定義しています。コードの 3 つ目の部分はイベントハンドラーです。`btn` 変数は[`<button>`](/ja/docs/Web/HTML/Element/button)要素を指していますが、この種のオブジェクトにはたくさん発火し得るイベントがあるので、色々なイベントハンドラーが使えます。[`onclick`](/ja/docs/Web/API/GlobalEventHandlers/onclick) イベントハンドラプロパティに、ランダムな RGB 色を生成し [`<body>`](/ja/docs/Web/HTML/Element/body) の [`background-color`](/ja/docs/Web/CSS/background-color) を設定するコードを抱えた匿名関数を代入する事で、[`click`](/ja/docs/Web/API/Element/click_event) イベントが発火されるのを待ちかまえます。
@@ -87,12 +90,13 @@ btn.onclick = function() {
 イベントハンドラーコードを代入するためのいろいろなプロパティがあり、そういったものをここまでのコースで最もたくさん見てきました。上記の例に戻りましょう。
 
 ```js
-const btn = document.querySelector('button');
+const btn = document.querySelector("button");
 
-btn.onclick = function() {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+btn.onclick = function () {
+  const rndCol =
+    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
   document.body.style.backgroundColor = rndCol;
-}
+};
 ```
 
 [`onclick`](/ja/docs/Web/API/GlobalEventHandlers/onclick) プロパティがこの例で使用されているイベントハンドラープロパティです。ボタンで利用可能なプロパティ(例えば [`btn.textContent`](/ja/docs/Web/API/Node/textContent) や [`btn.style`](/ja/docs/Web/API/HTMLElement/style))のうちの 1 プロパティに過ぎませんが、特別な種類のものです(コードを代入すると、そのコードはボタンでイベントが発火した際に実行される)。
@@ -100,10 +104,11 @@ btn.onclick = function() {
 ハンドラープロパティには、名前付き関数の関数名 ([Build your own function](/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function) でみられるような) を設定することもできます。こう書いても動作は同じです:
 
 ```js
-const btn = document.querySelector('button');
+const btn = document.querySelector("button");
 
 function bgChange() {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  const rndCol =
+    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
   document.body.style.backgroundColor = rndCol;
 }
 
@@ -131,7 +136,8 @@ btn.onclick = bgChange;
 
 ```js
 function bgChange() {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  const rndCol =
+    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
   document.body.style.backgroundColor = rndCol;
 }
 ```
@@ -141,7 +147,9 @@ function bgChange() {
 Web 上で見かける最初期のイベントハンドラー登録方法には、上の例のような**イベントハンドラー HTML 属性**(**インラインイベントハンドラー**とも言う)があります — 属性値がイベント発生時に実行したい JavaScript コードそのものです。上の例では{{htmlelement("script")}}要素の中で定義された関数を起動していますが、直接 JavsScript そのものを属性の中に入れる事もできます。例えば:
 
 ```html
-<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
+<button onclick="alert('Hello, this is my old-fashioned event handler!');">
+  Press me
+</button>
 ```
 
 多くのイベントハンドラープロパティと等価な HTML 属性を見付けるでしょうが、使うべきではありません — こういうのは悪い方法とみなされています。ちょっとした事を手早く片づけたい時、イベントハンドラー属性を使うのが簡単に思えるかもしれませんが、あっという間に手がつけられない、効率の悪いものになってしまいます。
@@ -151,7 +159,7 @@ Web 上で見かける最初期のイベントハンドラー登録方法には
 (HTML と JavaScript が)一つのファイルになっているとしても、インラインイベントハンドラーは良いアイデアではありません。ボタン一つならいいですが、ボタンが 100 あったら? ファイルに 100 の属性を追加したならば、あっという間に管理していくのは悪夢と化す事でしょう。JavaScript を使えば、ページにボタンがいくつあろうが、全部のボタンにイベントハンドラーを追加するのは簡単です、こんな具合です:
 
 ```js
-const buttons = document.querySelectorAll('button');
+const buttons = document.querySelectorAll("button");
 
 for (let i = 0; i < buttons.length; i++) {
   buttons[i].onclick = bgChange;
@@ -161,7 +169,7 @@ for (let i = 0; i < buttons.length; i++) {
 ここにある他のオプションは [`NodeList`](/ja/docs/Web/API/NodeList) オブジェクトの組み込みメソッドの [`forEach()`](/ja/docs/Web/API/NodeList/forEach) で使えることに注意してください:
 
 ```js
-buttons.forEach(function(button) {
+buttons.forEach(function (button) {
   button.onclick = bgChange;
 });
 ```
@@ -173,14 +181,15 @@ buttons.forEach(function(button) {
 最新のイベント機構は [Document Object Model (DOM) Level 2 Events](https://www.w3.org/TR/DOM-Level-2-Events/) 仕様で規定されていて、ブラウザーに新しい関数が追加されました — [`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener)です。この関数はイベントハンドラープロパティと同じ方向性ですが、文法は明確に異なります。ランダム色の例をこんな風に書き換える事ができます:
 
 ```js
-const btn = document.querySelector('button');
+const btn = document.querySelector("button");
 
 function bgChange() {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  const rndCol =
+    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
   document.body.style.backgroundColor = rndCol;
 }
 
-btn.addEventListener('click', bgChange);
+btn.addEventListener("click", bgChange);
 ```
 
 > **メモ:** [こちら](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html)に GitHub 上のサンプルがあります (また、[こちら](http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html)で実際に動くところが見られます)。
@@ -188,8 +197,9 @@ btn.addEventListener('click', bgChange);
 `addEventListener()` 関数のカッコの中で、二つの引数を指定しています — ハンドラーを登録したいイベントの名前と、それに反応して実行させたいコードを含んだ関数です。匿名関数を使って、実行したいコードを全部 addEventListener() 関数の引数に書いてしまっても全く問題ありません。こんな具合です:
 
 ```js
-btn.addEventListener('click', function() {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+btn.addEventListener("click", function () {
+  const rndCol =
+    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
   document.body.style.backgroundColor = rndCol;
 });
 ```
@@ -197,7 +207,7 @@ btn.addEventListener('click', function() {
 この方式は、ここまでで見てきた古い方式に勝る点がいくつかあります。まず第一に、逆を行なう関数 [`removeEventListener()`](/ja/docs/Web/API/EventTarget/removeEventListener)があり、以前に追加したリスナーを削除できます。例えばこうすると、このセクションの最初のコード部で追加したリスナーを削除します:
 
 ```js
-btn.removeEventListener('click', bgChange);
+btn.removeEventListener("click", bgChange);
 ```
 
 単純で小さなプログラムではたいした事ありませんが、大きくて複雑なプログラムでは、古く使われないイベントハンドラーを除去しておくと効率が良くなります。さらに、これは例えば同じボタンに状況の違いによって異なる動作をさせる事ができるようになります — ただ適切なイベントハンドラーを追加したり削除するだけで良いのです。
@@ -214,8 +224,8 @@ myElement.onclick = functionB;
 ですがこれなら動きます:
 
 ```js
-myElement.addEventListener('click', functionA);
-myElement.addEventListener('click', functionB);
+myElement.addEventListener("click", functionA);
+myElement.addEventListener("click", functionB);
 ```
 
 要素がクリックされると、どちらの関数も走ります。
@@ -252,12 +262,13 @@ etc.
 
 ```js
 function bgChange(e) {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  const rndCol =
+    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
   e.target.style.backgroundColor = rndCol;
   console.log(e);
 }
 
-btn.addEventListener('click', bgChange);
+btn.addEventListener("click", bgChange);
 ```
 
 > **メモ:** [こちら](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html) に GitHub 上のサンプルがあります (また、[こちら](http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)で実際に動くところが見れらます)。
@@ -269,22 +280,22 @@ btn.addEventListener('click', bgChange);
 複数の要素に同じイベントハンドラを割り当てて、どれかでイベントがあったときに何かさせたいような場合、`e.target` はとてつもなく有用なものです。複数の要素に同じイベントハンドラーを割り当てて、どれかでイベントがあったときに何かさせたいような場合、e.target はとてつもなく有用なものです。例えばクリックすると見えなくなるタイルが 16 個あるとします。`e.target` を使ってそれをただ消せるなら、もっと難解な手段で選びだすのよりも使いすいでしょう。続く例では (完全なソースコードは [useful-eventtarget.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html) を見てください; ここで [ライブ実行](http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html) も見られます)、16 個の {{htmlelement("div")}} 要素を JavaScript で生成します。そしてこれらを全部 {{domxref("document.querySelectorAll()")}}を使って選択し、ループで一つ一つに `onclick` ハンドラを追加して、それぞれがクリックされた時にランダムな色が表われるようにしています:
 
 ```js
-const divs = document.querySelectorAll('div');
+const divs = document.querySelectorAll("div");
 
 for (let i = 0; i < divs.length; i++) {
-  divs[i].onclick = function(e) {
+  divs[i].onclick = function (e) {
     e.target.style.backgroundColor = bgChange();
-  }
+  };
 }
 ```
 
 結果はこうです(クリックして遊んでみてください):
 
 ```html hidden
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Useful event target example</title>
     <style>
       div {
@@ -298,25 +309,26 @@ for (let i = 0; i < divs.length; i++) {
   <body>
     <script>
       for (let i = 1; i <= 16; i++) {
-        const myDiv = document.createElement('div');
+        const myDiv = document.createElement("div");
         document.body.appendChild(myDiv);
       }
 
       function random(number) {
-        return Math.floor(Math.random()*number);
+        return Math.floor(Math.random() * number);
       }
 
       function bgChange() {
-        var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+        var rndCol =
+          "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
         return rndCol;
       }
 
-      const divs = document.querySelectorAll('div');
+      const divs = document.querySelectorAll("div");
 
       for (let i = 0; i < divs.length; i++) {
-        divs[i].onclick = function(e) {
+        divs[i].onclick = function (e) {
           e.target.style.backgroundColor = bgChange();
-        }
+        };
       }
     </script>
   </body>
@@ -339,14 +351,14 @@ for (let i = 0; i < divs.length; i++) {
 <form>
   <div>
     <label for="fname">First name: </label>
-    <input id="fname" type="text">
+    <input id="fname" type="text" />
   </div>
   <div>
     <label for="lname">Last name: </label>
-    <input id="lname" type="text">
+    <input id="lname" type="text" />
   </div>
   <div>
-     <input id="submit" type="submit">
+    <input id="submit" type="submit" />
   </div>
 </form>
 <p></p>
@@ -361,17 +373,17 @@ div {
 さあちょっとした JavaScript です — ここでは [onsubmit](/ja/docs/Web/API/GlobalEventHandlers/onsubmit) イベントハンドラー(フォームがサブミットされるとサブミットイベントが発火します)の中で、テキストフィールドが空かどうかテストするだけのとても簡単なチェックを実装します。もし空なら、イベントオブジェクトの [`preventDefault()`](/ja/docs/Web/API/Event/preventDefault) 関数— これでフォームの送信を抑制します — を呼び、それからフォームの下にあるパラグラフに、何が問題なのかユーザーに伝えるためのエラーメッセージを表示します:
 
 ```js
-const form = document.querySelector('form');
-const fname = document.getElementById('fname');
-const lname = document.getElementById('lname');
-const para = document.querySelector('p');
+const form = document.querySelector("form");
+const fname = document.getElementById("fname");
+const lname = document.getElementById("lname");
+const para = document.querySelector("p");
 
-form.onsubmit = function(e) {
-  if (fname.value === '' || lname.value === '') {
+form.onsubmit = function (e) {
+  if (fname.value === "" || lname.value === "") {
     e.preventDefault();
-    para.textContent = 'You need to fill in both names!';
+    para.textContent = "You need to fill in both names!";
   }
-}
+};
 ```
 
 言うまでもなく弱っちいフォームの検証です — 例えばフォームに空白や数字が入っていても止められません — が、例としては十分です。結果はこうなります。
@@ -385,21 +397,25 @@ form.onsubmit = function(e) {
 ここで最後に説明していくのは、滅多には遭遇しませんが、理解できていないととても苦痛になるかもしれない事柄です。ある一つの要素で同じイベントに紐付く二つのハンドラが活性化された時に何が起きるのかを説明するのが、イベントのバブリングとキャプチャリングという二種類のメカニズムです。わかりやすくするために次の例を見てください — [show-video-box.html](http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html) 例を新しいタブで開いてください ([ソースコード](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html) もまた別のタブに)。ライブでも下で見られます:
 
 ```html hidden
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Show video box example</title>
     <style>
       div {
         position: absolute;
         top: 50%;
-        transform: translate(-50%,-50%);
+        transform: translate(-50%, -50%);
         width: 480px;
         height: 380px;
         border-radius: 10px;
         background-color: #eee;
-        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1));
+        background-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0),
+          rgba(0, 0, 0, 0.1)
+        );
       }
 
       .hidden {
@@ -415,7 +431,6 @@ form.onsubmit = function(e) {
         width: 400px;
         margin: 40px auto;
       }
-
     </style>
   </head>
   <body>
@@ -423,36 +438,41 @@ form.onsubmit = function(e) {
 
     <div class="hidden">
       <video>
-        <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4">
-        <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm">
-        <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+        <source
+          src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4"
+          type="video/mp4" />
+        <source
+          src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm"
+          type="video/webm" />
+        <p>
+          Your browser doesn't support HTML5 video. Here is a
+          <a href="rabbit320.mp4">link to the video</a> instead.
+        </p>
       </video>
     </div>
 
     <script>
+      const btn = document.querySelector("button");
+      const videoBox = document.querySelector("div");
+      const video = document.querySelector("video");
 
-      const btn = document.querySelector('button');
-      const videoBox = document.querySelector('div');
-      const video = document.querySelector('video');
-
-      btn.onclick = function() {
+      btn.onclick = function () {
         displayVideo();
-      }
+      };
 
       function displayVideo() {
-        if(videoBox.getAttribute('class') === 'hidden') {
-          videoBox.setAttribute('class','showing');
+        if (videoBox.getAttribute("class") === "hidden") {
+          videoBox.setAttribute("class", "showing");
         }
       }
 
-      videoBox.addEventListener('click',function() {
-        videoBox.setAttribute('class','hidden');
+      videoBox.addEventListener("click", function () {
+        videoBox.setAttribute("class", "hidden");
       });
 
-      video.addEventListener('click',function() {
+      video.addEventListener("click", function () {
         video.play();
       });
-
     </script>
   </body>
 </html>
@@ -467,9 +487,12 @@ form.onsubmit = function(e) {
 
 <div class="hidden">
   <video>
-    <source src="rabbit320.mp4" type="video/mp4">
-    <source src="rabbit320.webm" type="video/webm">
-    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+    <source src="rabbit320.mp4" type="video/mp4" />
+    <source src="rabbit320.webm" type="video/webm" />
+    <p>
+      Your browser doesn't support HTML5 video. Here is a
+      <a href="rabbit320.mp4">link to the video</a> instead.
+    </p>
   </video>
 </div>
 ```
@@ -477,9 +500,9 @@ form.onsubmit = function(e) {
 {{htmlelement("button")}} がクリックされると、`<div>` のクラス属性を `hidden` から `showing` に変更するので、ビデオが表示されます(例の CSS にこの二つのクラスが含まれており、それぞれはボックスの位置をスクリーンの外、内にします)。
 
 ```js
-btn.onclick = function() {
-  videoBox.setAttribute('class', 'showing');
-}
+btn.onclick = function () {
+  videoBox.setAttribute("class", "showing");
+};
 ```
 
 では二つばかり `onclick` イベントハンドラーを追加します — 最初のは `<div>` に、二つ目は `<video>`にです。ビデオの外側の `<div>` 領域がクリックされた時にはボックスがまた隠れるようにし、ビデオそのものがクリックされたらビデオが再生されるようにしたいというわけです。
@@ -528,7 +551,7 @@ video.onclick = function() {
 よって我々の今の問題は、先のコードブロック、第二のハンドラー関数をこのように変更して解決できます:
 
 ```js
-video.onclick = function(e) {
+video.onclick = function (e) {
   e.stopPropagation();
   video.play();
 };
diff --git a/files/ja/learn/javascript/building_blocks/functions/index.md b/files/ja/learn/javascript/building_blocks/functions/index.md
index 01502dc137c882..a8682d1a0b665b 100644
--- a/files/ja/learn/javascript/building_blocks/functions/index.md
+++ b/files/ja/learn/javascript/building_blocks/functions/index.md
@@ -22,8 +22,8 @@ JavaScript の中で、関数はあらゆるところに見つかるでしょう
 このコースではブラウザーに組込まれた関数をたくさん使ってきました。毎回テキスト文字列を操作したときには、こんな風に:
 
 ```js
-let myText = 'I am a string';
-let newString = myText.replace('string', 'sausage');
+let myText = "I am a string";
+let newString = myText.replace("string", "sausage");
 console.log(newString);
 // the replace() string function takes a string,
 // replaces one substring with another, and returns
@@ -33,8 +33,8 @@ console.log(newString);
 あるいは毎回配列を操作したときには:
 
 ```js
-let myArray = ['I', 'love', 'chocolate', 'frogs'];
-let madeAString = myArray.join(' ');
+let myArray = ["I", "love", "chocolate", "frogs"];
+let madeAString = myArray.join(" ");
 console.log(madeAString);
 // the join() function takes an array, joins
 // all the array items together into a single
@@ -68,10 +68,10 @@ JavaScript 言語にはたくさんの組込み関数があるので、いろい
 
 ```js
 function draw() {
-  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  ctx.clearRect(0, 0, WIDTH, HEIGHT);
   for (let i = 0; i < 100; i++) {
     ctx.beginPath();
-    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.fillStyle = "rgba(255,0,0,0.5)";
     ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
     ctx.fill();
   }
@@ -88,7 +88,7 @@ draw();
 
 ```js
 function random(number) {
-  return Math.floor(Math.random()*number);
+  return Math.floor(Math.random() * number);
 }
 ```
 
@@ -100,7 +100,7 @@ function random(number) {
 
 ```js
 function myFunction() {
-  alert('hello');
+  alert("hello");
 }
 
 myFunction();
@@ -113,7 +113,7 @@ myFunction();
 
 ```js
 function myFunction() {
-  alert('hello');
+  alert("hello");
 }
 ```
 
@@ -128,11 +128,11 @@ function() {
 これは**匿名関数**と呼ばれます — 名前がないんです! それだけでは何もしません。匿名関数はよくイベントハンドラで使われていて、例えば以下では関連づけられたボタンがクリックされるたび、関数の中のコードが走ります:
 
 ```js
-const myButton = document.querySelector('button');
+const myButton = document.querySelector("button");
 
-myButton.onclick = function() {
-  alert('hello');
-}
+myButton.onclick = function () {
+  alert("hello");
+};
 ```
 
 上の例では、ページの中に選択してクリックするための{{htmlelement("button")}}要素が存在しなければならないでしょう。あなたはこのような例をここまでのコースで見てきましたし、ここから先の記事でもっと学習し、使い方を見ていく事になります。
@@ -140,9 +140,9 @@ myButton.onclick = function() {
 匿名関数を変数の値として代入する事もできます:
 
 ```js
-const myGreeting = function() {
-  alert('hello');
-}
+const myGreeting = function () {
+  alert("hello");
+};
 ```
 
 この関数は次のように起動できます:
@@ -168,18 +168,18 @@ anotherGreeting();
 
 ```js
 function myGreeting() {
-  alert('hello');
+  alert("hello");
 }
 ```
 
 匿名関数は主にイベント発火 — ボタンがクリックされたとか — のレスポンスとして、一連のコードを走らせるだけのような場合に、イベントハンドラとして使われます。くりかえしですが、こんな具合です:
 
 ```js
-myButton.onclick = function() {
-  alert('hello');
+myButton.onclick = function () {
+  alert("hello");
   // I can put as much code
   // inside here as I want
-}
+};
 ```
 
 ## 関数の引数
@@ -197,8 +197,8 @@ let myNumber = Math.random();
 ですがブラウザー組込みの文字列関数 [replace()](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace) は二つの引数が必要です — 主文字列から探すべき部分文字列と、部分文字列を置換する文字列です:
 
 ```js
-let myText = 'I am a string';
-let newString = myText.replace('string', 'sausage');
+let myText = "I am a string";
+let newString = myText.replace("string", "sausage");
 ```
 
 > **メモ:** 複数の引数を指定するときは、カンマで区切って書きます
@@ -206,8 +206,8 @@ let newString = myText.replace('string', 'sausage');
 引数には省略可能 — 書かなくても良い — なものもある事に触れておくべきでしょう。省略された場合、関数はだいたいデフォルトに規定された動作を行ないます。例えば、配列の [join()](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join) 関数のパラメータは省略可能です:
 
 ```js
-let myArray = ['I', 'love', 'chocolate', 'frogs'];
-let madeAString = myArray.join(' ');
+let myArray = ["I", "love", "chocolate", "frogs"];
+let madeAString = myArray.join(" ");
 // returns 'I love chocolate frogs'
 let madeAString = myArray.join();
 // returns 'I,love,chocolate,frogs'
@@ -236,17 +236,17 @@ JavaScript がこう作られているのにはいくつも理由があります
 
 ```js
 // first.js
-let name = 'Chris';
+let name = "Chris";
 function greeting() {
-  alert('Hello ' + name + ': welcome to our company.');
+  alert("Hello " + name + ": welcome to our company.");
 }
 ```
 
 ```js
 // second.js
-let name = 'Zaptec';
+let name = "Zaptec";
 function greeting() {
-  alert('Our company is called ' + name + '.');
+  alert("Our company is called " + name + ".");
 }
 ```
 
@@ -270,89 +270,89 @@ function greeting() {
 2. ブラウザーとテキストエディターでサンプルを開きます
 3. ブラウザーの開発者ツールで JavaScript コンソールを開きます。JavaScript コンソールで、次のコマンドを入力します。
 
-    ```js
-    output(x);
-    ```
+   ```js
+   output(x);
+   ```
 
-    変数 x の出力値が画面に表示されるはずです。
+   変数 x の出力値が画面に表示されるはずです。
 
 4. コンソールに次のように入力してみてください
 
-    ```js
-    output(y);
-    output(z);
-    ```
+   ```js
+   output(y);
+   output(z);
+   ```
 
-    どちらも、"[ReferenceError: y is not defined](/ja/docs/Web/JavaScript/Reference/Errors/Not_defined)"の一行のエラーが返されるはずです。なぜでしょうか？ 関数スコープのため、つまり `y` と `z` は `a()` と `b()` 関数の中でロックされているので、global スコープから呼び出されたときには `output()` はそれらにアクセスできません。
+   どちらも、"[ReferenceError: y is not defined](/ja/docs/Web/JavaScript/Reference/Errors/Not_defined)"の一行のエラーが返されるはずです。なぜでしょうか？ 関数スコープのため、つまり `y` と `z` は `a()` と `b()` 関数の中でロックされているので、global スコープから呼び出されたときには `output()` はそれらにアクセスできません。
 
 5. しかし、別の関数の中から呼び出されたときはどうでしょうか？ `a()` と `b()` を次のように編集してみてください：
 
-    ```js
-    function a() {
-      let y = 2;
-      output(y);
-    }
+   ```js
+   function a() {
+     let y = 2;
+     output(y);
+   }
 
-    function b() {
-      let z = 3;
-      output(z);
-    }
-    ```
+   function b() {
+     let z = 3;
+     output(z);
+   }
+   ```
 
-    コードを保存してブラウザーに再ロードしてから、JavaScript コンソールから `a()` と `b()` 関数を呼び出してみてください。
+   コードを保存してブラウザーに再ロードしてから、JavaScript コンソールから `a()` と `b()` 関数を呼び出してみてください。
 
-    ```js
-    a();
-    b();
-    ```
+   ```js
+   a();
+   b();
+   ```
 
-    ページに `y` と `z` の値の出力が表示されます。`output()` 関数が他の関数の中、つまり表示される変数が定義されているのと同じスコープでそれぞれ呼び出されているので、これはうまくいきます。`output()` 自体はグローバルスコープで定義されているので、どこからでも利用できます。
+   ページに `y` と `z` の値の出力が表示されます。`output()` 関数が他の関数の中、つまり表示される変数が定義されているのと同じスコープでそれぞれ呼び出されているので、これはうまくいきます。`output()` 自体はグローバルスコープで定義されているので、どこからでも利用できます。
 
 6. 今度は次のようにコードを更新してみてください：
 
-    ```js
-    function a() {
-      let y = 2;
-      output(x);
-    }
+   ```js
+   function a() {
+     let y = 2;
+     output(x);
+   }
 
-    function b() {
-      let z = 3;
-      output(x);
-    }
-    ```
+   function b() {
+     let z = 3;
+     output(x);
+   }
+   ```
 
-    保存してもう一度読み込み、JavaScript コンソールでもう一度試してみてください：
+   保存してもう一度読み込み、JavaScript コンソールでもう一度試してみてください：
 
-    ```js
-    a();
-    b();
-    ```
+   ```js
+   a();
+   b();
+   ```
 
-    `a()` と `b()` の両方の呼び出しは `x` の値、つまり 1 が出力されます。これは `x` がグローバル変数であり、すべてのコード内どこでも利用可能であるため、`output()` の呼び出しが `x` と同じスコープではなくてもうまく動きます。
+   `a()` と `b()` の両方の呼び出しは `x` の値、つまり 1 が出力されます。これは `x` がグローバル変数であり、すべてのコード内どこでも利用可能であるため、`output()` の呼び出しが `x` と同じスコープではなくてもうまく動きます。
 
 7. 最後に、次のようにコードを更新してみてください：
 
-    ```js
-    function a() {
-      let y = 2;
-      output(z);
-    }
+   ```js
+   function a() {
+     let y = 2;
+     output(z);
+   }
 
-    function b() {
-      let z = 3;
-      output(y);
-    }
-    ```
+   function b() {
+     let z = 3;
+     output(y);
+   }
+   ```
 
-    保存してもう一度読み込み、JavaScript コンソールでもう一度試してみてください：
+   保存してもう一度読み込み、JavaScript コンソールでもう一度試してみてください：
 
-    ```js
-    a();
-    b();
-    ```
+   ```js
+   a();
+   b();
+   ```
 
-    今度は `a()` と `b()` の両方の呼び出しで、迷惑な "[ReferenceError: _variable name_ is not defined](/ja/docs/Web/JavaScript/Reference/Errors/Not_defined)" エラーが返されます — これは `output()` 呼び出しと、出力しようとしている変数が同じ関数のスコープにない、つまりこれらの関数呼び出しからは変数が参照できない状態だからです。
+   今度は `a()` と `b()` の両方の呼び出しで、迷惑な "[ReferenceError: _variable name_ is not defined](/ja/docs/Web/JavaScript/Reference/Errors/Not_defined)" エラーが返されます — これは `output()` 呼び出しと、出力しようとしている変数が同じ関数のスコープにない、つまりこれらの関数呼び出しからは変数が参照できない状態だからです。
 
 > **メモ:** 同じスコープルールはループ (`for() { ... }` など) と条件ブロック (`if() { ... }`など) には適用されません。それらは非常によく似ていますが、同じものではありません。混乱しないように注意してください。
 
diff --git a/files/ja/learn/javascript/building_blocks/image_gallery/index.md b/files/ja/learn/javascript/building_blocks/image_gallery/index.md
index e8668461392636..79a792f7652ec3 100644
--- a/files/ja/learn/javascript/building_blocks/image_gallery/index.md
+++ b/files/ja/learn/javascript/building_blocks/image_gallery/index.md
@@ -25,14 +25,12 @@ HTML、CSS と画像および数行の JavaScript のコードが提供されて
 <h1>Image gallery example</h1>
 
 <div class="full-img">
-  <img class="displayed-img" src="images/pic1.jpg">
+  <img class="displayed-img" src="images/pic1.jpg" />
   <div class="overlay"></div>
   <button class="dark">Darken</button>
 </div>
 
-<div class="thumb-bar">
-
-</div>
+<div class="thumb-bar"></div>
 ```
 
 例ではこのように見えます:
@@ -82,7 +80,7 @@ JavaScript に必要なもの:
 次のコードは上記の 2 と 3 で示された変更を行う基本的なものです。
 
 ```js
-btn.setAttribute('class', xxx);
+btn.setAttribute("class", xxx);
 btn.textContent = xxx;
 overlay.style.backgroundColor = xxx;
 ```
diff --git a/files/ja/learn/javascript/building_blocks/looping_code/index.md b/files/ja/learn/javascript/building_blocks/looping_code/index.md
index a9921dd269ae56..a22326d533622f 100644
--- a/files/ja/learn/javascript/building_blocks/looping_code/index.md
+++ b/files/ja/learn/javascript/building_blocks/looping_code/index.md
@@ -66,30 +66,36 @@ button {
 こちらはこの例を実装している JavaScript コードです。
 
 ```js
-const btn = document.querySelector('button');
-const canvas = document.querySelector('canvas');
-const ctx = canvas.getContext('2d');
+const btn = document.querySelector("button");
+const canvas = document.querySelector("canvas");
+const ctx = canvas.getContext("2d");
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener("DOMContentLoaded", () => {
   canvas.width = document.documentElement.clientWidth;
   canvas.height = document.documentElement.clientHeight;
-})
+});
 
 function random(number) {
-  return Math.floor(Math.random()*number);
+  return Math.floor(Math.random() * number);
 }
 
 function draw() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   for (let i = 0; i < 100; i++) {
     ctx.beginPath();
-    ctx.fillStyle = 'rgba(255,0,0,0.5)';
-    ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
+    ctx.fillStyle = "rgba(255,0,0,0.5)";
+    ctx.arc(
+      random(canvas.width),
+      random(canvas.height),
+      random(50),
+      0,
+      2 * Math.PI,
+    );
     ctx.fill();
   }
 }
 
-btn.addEventListener('click',draw);
+btn.addEventListener("click", draw);
 ```
 
 ### ループありとループなし
@@ -99,8 +105,14 @@ btn.addEventListener('click',draw);
 ```js
 for (let i = 0; i < 100; i++) {
   ctx.beginPath();
-  ctx.fillStyle = 'rgba(255,0,0,0.5)';
-  ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
+  ctx.fillStyle = "rgba(255,0,0,0.5)";
+  ctx.arc(
+    random(canvas.width),
+    random(canvas.height),
+    random(50),
+    0,
+    2 * Math.PI,
+  );
   ctx.fill();
 }
 ```
@@ -115,8 +127,14 @@ for (let i = 0; i < 100; i++) {
 
 ```js
 ctx.beginPath();
-ctx.fillStyle = 'rgba(255,0,0,0.5)';
-ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
+ctx.fillStyle = "rgba(255,0,0,0.5)";
+ctx.arc(
+  random(canvas.width),
+  random(canvas.height),
+  random(50),
+  0,
+  2 * Math.PI,
+);
 ctx.fill();
 ```
 
@@ -134,7 +152,7 @@ ctx.fill();
 コレクションをループ処理する基本的なツールは {{jsxref("statements/for...of","for...of")}} ループです。
 
 ```js
-const cats = ['Leopard', 'Serval', 'Jaguar', 'Tiger', 'Caracal', 'Lion'];
+const cats = ["Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion"];
 
 for (const cat of cats) {
   console.log(cat);
@@ -158,7 +176,7 @@ function toUpper(string) {
   return string.toUpperCase();
 }
 
-const cats = ['Leopard', 'Serval', 'Jaguar', 'Tiger', 'Caracal', 'Lion'];
+const cats = ["Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion"];
 
 const upperCats = cats.map(toUpper);
 
@@ -176,10 +194,10 @@ console.log(upperCats);
 
 ```js
 function lCat(cat) {
-  return cat.startsWith('L');
+  return cat.startsWith("L");
 }
 
-const cats = ['Leopard', 'Serval', 'Jaguar', 'Tiger', 'Caracal', 'Lion'];
+const cats = ["Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion"];
 
 const filtered = cats.filter(lCat);
 
@@ -198,9 +216,9 @@ console.log(filtered);
 関数式を使用すると、上の例をもっとコンパクトに書き直すことができます。
 
 ```js
-const cats = ['Leopard', 'Serval', 'Jaguar', 'Tiger', 'Caracal', 'Lion'];
+const cats = ["Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion"];
 
-const filtered = cats.filter((cat) => cat.startsWith('L'));
+const filtered = cats.filter((cat) => cat.startsWith("L"));
 console.log(filtered);
 // [ "Leopard", "Lion" ]
 ```
@@ -225,7 +243,7 @@ for (初期化処理; 条件; 最後の式) {
    1. **初期化処理**: これはたいていの場合、繰り返し回数分増やしていく変数の初期化処理となります。
       この変数を**カウンター変数**と呼ぶことがあります。
    2. **条件**: これは、ループがいつ繰り返しをやめるかを定義します。
-    これはふつう、比較演算子を伴って、終了条件に達したかどうかを確認します。
+      これはふつう、比較演算子を伴って、終了条件に達したかどうかを確認します。
    3. **最後の式**: これはループの 1 回が終了する度に評価される（または実行される）コードです。
       通常、カウンター変数を増加させ（場合によっては減少させ）、条件が `true` ではなくなるポイントに近づけていきます。
 
@@ -242,21 +260,21 @@ for (初期化処理; 条件; 最後の式) {
 ```
 
 ```js
-const results = document.querySelector('#results');
+const results = document.querySelector("#results");
 
 function calculate() {
   for (let i = 1; i < 10; i++) {
     const newResult = `${i} x ${i} = ${i * i}`;
     results.textContent += `${newResult}\n`;
   }
-  results.textContent += '\n完了!';
+  results.textContent += "\n完了!";
 }
 
-const calculateBtn = document.querySelector('#calculate');
-const clearBtn = document.querySelector('#clear');
+const calculateBtn = document.querySelector("#calculate");
+const clearBtn = document.querySelector("#clear");
 
-calculateBtn.addEventListener('click', calculate);
-clearBtn.addEventListener('click', () => results.textContent = '');
+calculateBtn.addEventListener("click", calculate);
+clearBtn.addEventListener("click", () => (results.textContent = ""));
 ```
 
 これは次のような出力結果となります。
@@ -285,7 +303,7 @@ clearBtn.addEventListener('click', () => results.textContent = '');
 上の `for...of` の例をもう一度見てみましょう。
 
 ```js
-const cats = ['Leopard', 'Serval', 'Jaguar', 'Tiger', 'Caracal', 'Lion'];
+const cats = ["Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion"];
 
 for (const cat of cats) {
   console.log(cat);
@@ -295,7 +313,7 @@ for (const cat of cats) {
 このコードは次のように書き換えることができます。
 
 ```js
-const cats = ['Leopard', 'Serval', 'Jaguar', 'Tiger', 'Caracal', 'Lion'];
+const cats = ["Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion"];
 
 for (let i = 0; i < cats.length; i++) {
   console.log(cats[i]);
@@ -317,12 +335,12 @@ JavaScript の初期のバージョンでは、`for...of` は存在しなかっ
 例えば、以下のコードでは、猫の一覧をメッセージとして出力したい。
 
 ```js
-const cats = ['Pete', 'Biggles', 'Jasmine'];
+const cats = ["Pete", "Biggles", "Jasmine"];
 
-let myFavoriteCats = 'My cats are called ';
+let myFavoriteCats = "My cats are called ";
 
 for (const cat of cats) {
-  myFavoriteCats += `${cat}, `
+  myFavoriteCats += `${cat}, `;
 }
 
 console.log(myFavoriteCats); // "My cats are called Pete, Biggles, Jasmine, "
@@ -343,19 +361,20 @@ My cats are called Pete, Biggles, and Jasmine.
 しかし、これを行うには、ループがいつ最後の反復処理に入ったかを知る必要があります。そのためには、`for` ループを使い、`i` の値を調べればよいのです。
 
 ```js
-const cats = ['Pete', 'Biggles', 'Jasmine'];
+const cats = ["Pete", "Biggles", "Jasmine"];
 
-let myFavoriteCats = 'My cats are called ';
+let myFavoriteCats = "My cats are called ";
 
 for (let i = 0; i < cats.length; i++) {
-  if (i === cats.length - 1) {   // 配列の最後にいる場合
-    myFavoriteCats += `and ${cats[i]}.`
+  if (i === cats.length - 1) {
+    // 配列の最後にいる場合
+    myFavoriteCats += `and ${cats[i]}.`;
   } else {
-    myFavoriteCats += `${cats[i]}, `
+    myFavoriteCats += `${cats[i]}, `;
   }
 }
 
-console.log(myFavoriteCats);     // "My cats are called Pete, Biggles, and Jasmine."
+console.log(myFavoriteCats); // "My cats are called Pete, Biggles, and Jasmine."
 ```
 
 ## break でループを終了
@@ -370,7 +389,7 @@ console.log(myFavoriteCats);     // "My cats are called Pete, Biggles, and Jasmi
 
 ```html
 <label for="search">連絡先の名前: </label>
-<input id="search" type="text">
+<input id="search" type="text" />
 <button>検索</button>
 
 <p></p>
@@ -379,26 +398,32 @@ console.log(myFavoriteCats);     // "My cats are called Pete, Biggles, and Jasmi
 現在の JavaScript では、
 
 ```js
-const contacts = ['クリス:2232322', 'サラ:3453456', 'ビル:7654322', 'メアリー:9998769', 'ダイアン:9384975'];
-const para = document.querySelector('p');
-const input = document.querySelector('input');
-const btn = document.querySelector('button');
-
-btn.addEventListener('click', () => {
+const contacts = [
+  "クリス:2232322",
+  "サラ:3453456",
+  "ビル:7654322",
+  "メアリー:9998769",
+  "ダイアン:9384975",
+];
+const para = document.querySelector("p");
+const input = document.querySelector("input");
+const btn = document.querySelector("button");
+
+btn.addEventListener("click", () => {
   const searchName = input.value.toLowerCase();
-  input.value = '';
+  input.value = "";
   input.focus();
-  para.textContent = '';
+  para.textContent = "";
   for (const contact of contacts) {
-    const splitContact = contact.split(':');
+    const splitContact = contact.split(":");
     if (splitContact[0].toLowerCase() === searchName) {
       para.textContent = `${splitContact[0]}の電話番号は${splitContact[1]}です。`;
       break;
     }
   }
-  if (para.textContent === '') {
-   para.textContent = '連絡先が見つかりません。';
- }
+  if (para.textContent === "") {
+    para.textContent = "連絡先が見つかりません。";
+  }
 });
 ```
 
@@ -409,8 +434,8 @@ btn.addEventListener('click', () => {
 3. テキスト入力欄に入力された値を `searchName` という変数に格納してから、次の検索に備え、入力欄をクリアし、フォーカスを設定しています。検索に大文字小文字を区別しないよう、文字列に [`toLowerCase()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase) を実行しているのに注意してください。
 4. ここからが本題の `for...of` ループです。
 
-    1. ループの中では、まず現在の連絡先をコロン文字で分割し、結果の 2 つの値を `splitContact` という配列に格納します。
-    2. それから、条件文を用いて、`splitContact[0]` （連絡先の名前）が入力された `searchName` にまた [`toLowerCase()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase) を使って小文字化したものと等しいかを判定します。
+   1. ループの中では、まず現在の連絡先をコロン文字で分割し、結果の 2 つの値を `splitContact` という配列に格納します。
+   2. それから、条件文を用いて、`splitContact[0]` （連絡先の名前）が入力された `searchName` にまた [`toLowerCase()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase) を使って小文字化したものと等しいかを判定します。
       もし等しければ、文字列を段落に入れてその連絡先の電話番号を示し、`break` を使用してループを終了しています。
 
 5. ループの後、連絡先が設定されたかどうかをチェックし、設定されていない場合は段落テキストを「連絡先が見つかりません。」に設定しています。
@@ -435,14 +460,14 @@ HTML は基本的に前回の例と同じで、単純なテキスト入力と、
 JavaScript もほとんど同じですが、ループ自体が若干異なります。
 
 ```js
-const para = document.querySelector('p');
-const input = document.querySelector('input');
-const btn = document.querySelector('button');
+const para = document.querySelector("p");
+const input = document.querySelector("input");
+const btn = document.querySelector("button");
 
-btn.addEventListener('click', () => {
-  para.textContent = '出力: ';
+btn.addEventListener("click", () => {
+  para.textContent = "出力: ";
   const num = input.value;
-  input.value = '';
+  input.value = "";
   input.focus();
   for (let i = 1; i <= num; i++) {
     let sqRoot = Math.sqrt(i);
@@ -490,9 +515,9 @@ while (条件) {
 猫のリストの例をもう一度見てみましょう。ただし、while ループを使うように書き直してみましょう。
 
 ```js
-const cats = ['Pete', 'Biggles', 'Jasmine'];
+const cats = ["Pete", "Biggles", "Jasmine"];
 
-let myFavoriteCats = 'My cats are called ';
+let myFavoriteCats = "My cats are called ";
 
 let i = 0;
 
@@ -506,7 +531,7 @@ while (i < cats.length) {
   i++;
 }
 
-console.log(myFavoriteCats);     // "My cats are called Pete, Biggles, and Jasmine."
+console.log(myFavoriteCats); // "My cats are called Pete, Biggles, and Jasmine."
 ```
 
 > **メモ:** これは期待どおりに動作します。[GitHub でライブ実行](https://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html)してみてください（[完全なソースコード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/while.html)を見ることもできます）。
@@ -529,9 +554,9 @@ do {
 `do...while` ループを使用するように、猫のリストの例をもう一度書き直してみましょう。
 
 ```js
-const cats = ['Pete', 'Biggles', 'Jasmine'];
+const cats = ["Pete", "Biggles", "Jasmine"];
 
-let myFavoriteCats = 'My cats are called ';
+let myFavoriteCats = "My cats are called ";
 
 let i = 0;
 
@@ -545,7 +570,7 @@ do {
   i++;
 } while (i < cats.length);
 
-console.log(myFavoriteCats);     // "My cats are called Pete, Biggles, and Jasmine."
+console.log(myFavoriteCats); // "My cats are called Pete, Biggles, and Jasmine."
 ```
 
 > **メモ:** こちらも、これは期待どおりに動作します。[GitHub でライブ実行](https://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html)してみてください（[完全なソースコード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/do-while.html)を見ることもできます）。
@@ -584,7 +609,8 @@ console.log(myFavoriteCats);     // "My cats are called Pete, Biggles, and Jasmi
 
 <h2>編集可能なコード</h2>
 <p class="a11y-label">
-  Esc を押すと、コード領域からフォーカスを外すことができます（Tab はタブ文字を挿入します）。
+  Esc を押すと、コード領域からフォーカスを外すことができます（Tab
+  はタブ文字を挿入します）。
 </p>
 <textarea id="code" class="playable-code" style="height: 300px;width: 95%">
 let output = document.querySelector('.output');
@@ -626,9 +652,9 @@ body {
 ```
 
 ```js hidden
-const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
 let code = textarea.value;
 let userEntry = textarea.value;
 
@@ -636,21 +662,21 @@ function updateCode() {
   eval(textarea.value);
 }
 
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = jsSolution;
-  solution.value = '解答を表示';
+  solution.value = "解答を表示";
   updateCode();
 });
 
-solution.addEventListener('click', function() {
-  if (solution.value === '解答を表示') {
+solution.addEventListener("click", function () {
+  if (solution.value === "解答を表示") {
     textarea.value = solutionEntry;
-    solution.value = '解答を隠す';
+    solution.value = "解答を隠す";
   } else {
     textarea.value = userEntry;
-    solution.value = '解答を表示';
+    solution.value = "解答を表示";
   }
   updateCode();
 });
@@ -677,16 +703,16 @@ while (i >= 0) {
 
 let solutionEntry = jsSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
   if (e.keyCode === 9) {
     e.preventDefault();
-    insertAtCaret('\t');
+    insertAtCaret("\t");
   }
 
   if (e.keyCode === 27) {
@@ -698,7 +724,10 @@ function insertAtCaret(text) {
   const scrollPos = textarea.scrollTop;
   let caretPos = textarea.selectionStart;
   const front = textarea.value.substring(0, caretPos);
-  const back = textarea.value.substring(textarea.selectionEnd, textarea.value.length);
+  const back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
 
   textarea.value = front + text + back;
   caretPos += text.length;
@@ -713,7 +742,7 @@ function insertAtCaret(text) {
 textarea.onkeyup = () => {
   // We only want to save the state when the user code is being shown,
   // not the solution, so that solution is not saved over the user code
-  if (solution.value === '解答を表示') {
+  if (solution.value === "解答を表示") {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
@@ -803,9 +832,9 @@ body {
 ```
 
 ```js hidden
-const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
 let code = textarea.value;
 let userEntry = textarea.value;
 
@@ -813,7 +842,7 @@ function updateCode() {
   eval(textarea.value);
 }
 
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = jsSolution;
@@ -821,10 +850,10 @@ reset.addEventListener('click', function() {
   updateCode();
 });
 
-solution.addEventListener('click', function() {
-  if(solution.value === "解答を表示") {
+solution.addEventListener("click", function () {
+  if (solution.value === "解答を表示") {
     textarea.value = solutionEntry;
-    solution.value = '解答を隠す';
+    solution.value = "解答を隠す";
   } else {
     textarea.value = userEntry;
     solution.value = "解答を表示";
@@ -854,16 +883,16 @@ admitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-
 
 let solutionEntry = jsSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
   if (e.keyCode === 9) {
     e.preventDefault();
-    insertAtCaret('\t');
+    insertAtCaret("\t");
   }
 
   if (e.keyCode === 27) {
@@ -875,7 +904,10 @@ function insertAtCaret(text) {
   const scrollPos = textarea.scrollTop;
   let caretPos = textarea.selectionStart;
   const front = textarea.value.substring(0, caretPos);
-  const back = textarea.value.substring(textarea.selectionEnd, textarea.value.length);
+  const back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
 
   textarea.value = front + text + back;
   caretPos += text.length;
@@ -890,7 +922,7 @@ function insertAtCaret(text) {
 textarea.onkeyup = () => {
   // We only want to save the state when the user code is being shown,
   // not the solution, so that solution is not saved over the user code
-  if(solution.value === "解答を表示") {
+  if (solution.value === "解答を表示") {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
diff --git a/files/ja/learn/javascript/building_blocks/return_values/index.md b/files/ja/learn/javascript/building_blocks/return_values/index.md
index 5aff8964328974..3cee2b9514ad83 100644
--- a/files/ja/learn/javascript/building_blocks/return_values/index.md
+++ b/files/ja/learn/javascript/building_blocks/return_values/index.md
@@ -18,8 +18,8 @@ slug: Learn/JavaScript/Building_blocks/Return_values
 以下の見覚えのある例を見てみましょう (このシリーズの[過去の記事](/ja/docs/Learn/JavaScript/Building_blocks/Functions#Built-in_browser_functions)より) 。
 
 ```js
-let myText = 'I am a string';
-let newString = myText.replace('string', 'sausage');
+let myText = "I am a string";
+let newString = myText.replace("string", "sausage");
 console.log(newString);
 // 文字列の replace() 関数は文字列を受け取り、
 // 一方の部分文字列をもう一方の部分文字列に置き換え、
@@ -49,7 +49,7 @@ function draw() {
   ctx.clearRect(0, 0, WIDTH, HEIGHT);
   for (let i = 0; i < 100; i++) {
     ctx.beginPath();
-    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.fillStyle = "rgba(255,0,0,0.5)";
     ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
     ctx.fill();
   }
@@ -98,49 +98,59 @@ ctx.arc(500, 200, 35, 0, 2 * Math.PI);
 1. まず最初に GitHub から [function-library.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html) ファイルをローカル環境にコピーします。このファイルはシンプルな HTML のページで、文字列入力用の {{htmlelement("input")}} フィールドとパラグラフ（段落）要素を含んでいます。また、{{htmlelement("script")}} 要素があり、この中でページ内の HTML 要素の参照を 2 つの変数で保持させています。このページに対して、テキストボックスに数値を入力したら、入力した数値と関連のある異なる数値を下のパラグラフ要素に表示させるようにしていきます。
 2. いくつかの関数を `<script>` 要素に追加していきましょう。既に記述されている 2 行の [JavaScript](/ja/docs/Web/JavaScript) のコードの下に、以下の関数定義を追加します。
 
-    ```js
-    function squared(num) {
-      return num * num;
-    }
-
-    function cubed(num) {
-      return num * num * num;
-    }
-
-    function factorial(num) {
-      if (num < 0) return undefined;
-      if (num == 0) return 1;
-      let x = num - 1;
-      while (x > 1) {
-        num *= x;
-        x--;
-      }
-      return num;
-    }
-    ```
-
-    `squared()` 関数と `cubed()` 関数は大変わかりやすいでしょう。引数として渡された値の 2 乗や 3 乗を返しています。`factorial()` 関数は渡された数の[階乗](https://ja.wikipedia.org/wiki/%E9%9A%8E%E4%B9%97)を返しています。
+   ```js
+   function squared(num) {
+     return num * num;
+   }
+
+   function cubed(num) {
+     return num * num * num;
+   }
+
+   function factorial(num) {
+     if (num < 0) return undefined;
+     if (num == 0) return 1;
+     let x = num - 1;
+     while (x > 1) {
+       num *= x;
+       x--;
+     }
+     return num;
+   }
+   ```
+
+   `squared()` 関数と `cubed()` 関数は大変わかりやすいでしょう。引数として渡された値の 2 乗や 3 乗を返しています。`factorial()` 関数は渡された数の[階乗](https://ja.wikipedia.org/wiki/%E9%9A%8E%E4%B9%97)を返しています。
 
 3. 次に input に入力された数値を出力する処理を追加していきます。イベントハンドラーを既存の関数の下に記述しましょう。
 
-    ```js
-    input.onchange = function() {
-      const num = input.value;
-      if (isNaN(num)) {
-        para.textContent = 'You need to enter a number!';
-      } else {
-        para.textContent = num + ' squared is ' + squared(num) + '. ' +
-                           num + ' cubed is ' + cubed(num) + '. ' +
-                           num + ' factorial is ' + factorial(num) + '.';
-      }
-    }
-    ```
-
-    ここでは `onchange` イベントハンドラーを作っています。これは文字列入力での `change` イベントが発火した時に実行されます。つまり新しい値が `input` に入力され、送信された時です (たとえば値を入力し、<kbd>Tab</kbd> か <kbd>Return</kbd> を押して入力からフォーカスを外す時)。この無名関数が実行されると、`input` に入力された値が `num` 定数に代入されます。
-
-    次に、条件付きテストを行うようにします。もし入力された値が数値でなければ、パラグラフ要素にエラーメッセージを出力します。テストでは、式 `isNaN(num)` が true を返すかどうか見るようにします。一般的に値が数値でないかをテストする際には [`isNaN()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/isNaN) 関数を使います。この関数では、渡された値が数値でなければ `true` を返し、数値であれば `false` を返します。
-
-    もしテストが `false` を返した場合、`num` の値は数値です。したがって、数値の 2 乗、3 乗、階乗の値を示す文が、パラグラフ要素内に出力されます。その出力する文章内で必要とする値を計算するために `squared()` 関数、`cubed()` 関数、`factorial()` 関数を呼んでいます。
+   ```js
+   input.onchange = function () {
+     const num = input.value;
+     if (isNaN(num)) {
+       para.textContent = "You need to enter a number!";
+     } else {
+       para.textContent =
+         num +
+         " squared is " +
+         squared(num) +
+         ". " +
+         num +
+         " cubed is " +
+         cubed(num) +
+         ". " +
+         num +
+         " factorial is " +
+         factorial(num) +
+         ".";
+     }
+   };
+   ```
+
+   ここでは `onchange` イベントハンドラーを作っています。これは文字列入力での `change` イベントが発火した時に実行されます。つまり新しい値が `input` に入力され、送信された時です (たとえば値を入力し、<kbd>Tab</kbd> か <kbd>Return</kbd> を押して入力からフォーカスを外す時)。この無名関数が実行されると、`input` に入力された値が `num` 定数に代入されます。
+
+   次に、条件付きテストを行うようにします。もし入力された値が数値でなければ、パラグラフ要素にエラーメッセージを出力します。テストでは、式 `isNaN(num)` が true を返すかどうか見るようにします。一般的に値が数値でないかをテストする際には [`isNaN()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/isNaN) 関数を使います。この関数では、渡された値が数値でなければ `true` を返し、数値であれば `false` を返します。
+
+   もしテストが `false` を返した場合、`num` の値は数値です。したがって、数値の 2 乗、3 乗、階乗の値を示す文が、パラグラフ要素内に出力されます。その出力する文章内で必要とする値を計算するために `squared()` 関数、`cubed()` 関数、`factorial()` 関数を呼んでいます。
 
 4. コードを保存して、それをブラウザーで表示してみましょう。
 
diff --git a/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.md b/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.md
index 95beed283c9629..69a4f0dcac6115 100644
--- a/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.md
+++ b/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.md
@@ -87,14 +87,14 @@ MDN 学習領域の他の場所で、[静的サイト](/ja/docs/Learn/Server-sid
    {{domxref("Storage.setItem()")}} メソッドによって、ストレージ内にデータ項目を保存できます。このメソッドは 2 つの引数をとります。すなわち、その項目の名前と、その値です。JavaScript コンソールに以下のように打ち込んでみてください（もし良ければ、値は自分の名前に変更してください）。
 
    ```js
-   localStorage.setItem('name','Chris');
+   localStorage.setItem("name", "Chris");
    ```
 
 4. {{domxref("Storage.getItem()")}} メソッドは 1 つの引数をとります。つまり、取り出したいデータ項目の名前です。そして、このメソッドは、その項目の値を返します。今度は JavaScript コンソールに以下の行を打ち込んでください。
 
    ```js
-   let myName = localStorage.getItem('name');
-   myName
+   let myName = localStorage.getItem("name");
+   myName;
    ```
 
    2 行目を入力すると、`myName` という変数が今や `name` というデータ項目の値を保有していることが分かるはずです。
@@ -102,9 +102,9 @@ MDN 学習領域の他の場所で、[静的サイト](/ja/docs/Learn/Server-sid
 5. {{domxref("Storage.removeItem()")}} メソッドは 1 つの引数をとります。つまり、削除したいデータ項目の名前です。このメソッドは、ウェブストレージからその項目を削除します。 JavaScript コンソールに以下の行を打ち込んでください。
 
    ```js
-   localStorage.removeItem('name');
-   myName = localStorage.getItem('name');
-   myName
+   localStorage.removeItem("name");
+   myName = localStorage.getItem("name");
+   myName;
    ```
 
    3 行目は、今度は `null` を返すはずです。というのも、もはや `name` という項目はウェブストレージ内に存在しないからです。
@@ -117,9 +117,9 @@ MDN 学習領域の他の場所で、[静的サイト](/ja/docs/Learn/Server-sid
 2. 以下の行をブラウザーの JavaScript コンソールに打ち込んでください。
 
    ```js
-   localStorage.setItem('name','Chris');
-   let myName = localStorage.getItem('name');
-   myName
+   localStorage.setItem("name", "Chris");
+   let myName = localStorage.getItem("name");
+   myName;
    ```
 
    name という項目が返されるのが分かるはずです。
@@ -128,8 +128,8 @@ MDN 学習領域の他の場所で、[静的サイト](/ja/docs/Learn/Server-sid
 4. 再び、以下の行を入力してください。
 
    ```js
-   let myName = localStorage.getItem('name');
-   myName
+   let myName = localStorage.getItem("name");
+   myName;
    ```
 
    ブラウザーを終了させてから再び開いたのに、それでも値が利用可能である、ということが分かるはずです。
@@ -156,31 +156,31 @@ MDN 学習領域の他の場所で、[静的サイト](/ja/docs/Learn/Server-sid
 
    ```js
    // 必要な定数を作成
-   const rememberDiv = document.querySelector('.remember');
-   const forgetDiv = document.querySelector('.forget');
-   const form = document.querySelector('form');
-   const nameInput = document.querySelector('#entername');
-   const submitBtn = document.querySelector('#submitname');
-   const forgetBtn = document.querySelector('#forgetname');
-
-   const h1 = document.querySelector('h1');
-   const personalGreeting = document.querySelector('.personal-greeting');
+   const rememberDiv = document.querySelector(".remember");
+   const forgetDiv = document.querySelector(".forget");
+   const form = document.querySelector("form");
+   const nameInput = document.querySelector("#entername");
+   const submitBtn = document.querySelector("#submitname");
+   const forgetBtn = document.querySelector("#forgetname");
+
+   const h1 = document.querySelector("h1");
+   const personalGreeting = document.querySelector(".personal-greeting");
    ```
 
 4. 次は、送信ボタンが押されたときにフォームが実際に送信されるのを阻止するために、小さなイベントリスナーを記載する必要があります。これは私たちが望むような動作ではないからです。前回のコードの下に、次のスニペットを追加してください。
 
    ```js
    // ボタンが押されたときにフォームを送信しないようにする
-   form.addEventListener('submit', (e) => e.preventDefault());
+   form.addEventListener("submit", (e) => e.preventDefault());
    ```
 
 5. 次に、イベントリスナーを追加する必要があります。このイベントリスナーのハンドラー関数は、"Say hello" ボタンがクリックされたときに動作するようにします。コメントでそれぞれが何を行うか詳細に説明していますが、要するにここではユーザーがテキスト入力ボックスに入力した名前を受け取り、 `setItem()` を使用してウェブストレージに保存し、次に `nameDisplayCheck()` という関数を呼び出して実際のウェブサイトの更新を処理しているのです。これをコードの一番下に追加してください。
 
    ```js
    // 'Say hello' ボタンがクリックされたら関数を実行する
-   submitBtn.addEventListener('click', () => {
+   submitBtn.addEventListener("click", () => {
      // 入力された名前をウェブストレージに保存
-     localStorage.setItem('name', nameInput.value);
+     localStorage.setItem("name", nameInput.value);
      // nameDisplayCheck() を動作させ、パーソナライズされた挨拶の表示と、
      // フォームの表示を更新する
      nameDisplayCheck();
@@ -191,9 +191,9 @@ MDN 学習領域の他の場所で、[静的サイト](/ja/docs/Learn/Server-sid
 
    ```js
    // 'Forget' ボタンがクリックされたら関数を実行する
-   forgetBtn.addEventListener('click', () => {
+   forgetBtn.addEventListener("click", () => {
      // 保存してある名前をウェブストレージから削除
-     localStorage.removeItem('name');
+     localStorage.removeItem("name");
      // 再び nameDisplayCheck() を実行して、一般的な挨拶を表示するとともに
      // フォーム表示を更新する
      nameDisplayCheck();
@@ -206,21 +206,22 @@ MDN 学習領域の他の場所で、[静的サイト](/ja/docs/Learn/Server-sid
    // nameDisplayCheck() という関数を定義する
    function nameDisplayCheck() {
      // 'name' というデータ項目がウェブストレージに保存されているかどうかを調べる
-     if (localStorage.getItem('name')) {
-      // もし保存されていたら、個人に合わせた挨拶を表示
-       const name = localStorage.getItem('name');
+     if (localStorage.getItem("name")) {
+       // もし保存されていたら、個人に合わせた挨拶を表示
+       const name = localStorage.getItem("name");
        h1.textContent = `Welcome, ${name}`;
        personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
        // フォームのうち 'remember' の部分を隠し、'forget' の部分を表示
-       forgetDiv.style.display = 'block';
-       rememberDiv.style.display = 'none';
+       forgetDiv.style.display = "block";
+       rememberDiv.style.display = "none";
      } else {
        // もし保存されていなければ、一般的な挨拶を表示
-       h1.textContent = 'Welcome to our website ';
-       personalGreeting.textContent = 'Welcome to our website. We hope you have fun while you are here.';
+       h1.textContent = "Welcome to our website ";
+       personalGreeting.textContent =
+         "Welcome to our website. We hope you have fun while you are here.";
        // フォームのうち 'forget' の部分を隠し、'remember' の部分を表示
-       forgetDiv.style.display = 'none';
-       rememberDiv.style.display = 'block';
+       forgetDiv.style.display = "none";
+       rememberDiv.style.display = "block";
      }
    }
    ```
@@ -270,31 +271,33 @@ MDN 学習領域の他の場所で、[静的サイト](/ja/docs/Learn/Server-sid
    let db;
    ```
 
-    ここでは、`db` と呼ばれる変数を宣言しています。これは後に、データベースを表すオブジェクトを記憶するのに使われます。この変数を何箇所かで使うつもりなので、物事を容易にするために、ここでこの変数を大域的に宣言しておきました。
+   ここでは、`db` と呼ばれる変数を宣言しています。これは後に、データベースを表すオブジェクトを記憶するのに使われます。この変数を何箇所かで使うつもりなので、物事を容易にするために、ここでこの変数を大域的に宣言しておきました。
 
 2. 次に、以下のものをコードの末尾に加えてください。
 
    ```js
    // データベースを開きます。データベースがまだ存在しない場合は作成されます。
    // （後述の upgradeneed ハンドラーを参照）。
-   const openRequest = window.indexedDB.open('notes_db', 1);
+   const openRequest = window.indexedDB.open("notes_db", 1);
    ```
 
    この行は、 `notes_db` というデータベースのバージョン `1` を開くためのリクエストを作成します。もしこれがまだ存在しない場合は、後続のコードで作成されます。このリクエストパターンは、 IndexedDB 全体でとても多く使用されるでしょう。データベース処理には時間がかかります。結果を待つ間にブラウザーがハングアップするのは避けたいので、データベースの操作は{{Glossary("asynchronous", "非同期")}}です。つまり、すぐに実行するのではなく、将来のある時点で実行し、実行が完了したら通知を受け取ります。
 
    IndexedDB でこれを扱うには、リクエストオブジェクトを作成します（これは好きなように名付けることができます。ここでは `openRequest` と名付けているので、何のためのオブジェクトかは明らかでしょう）。そして、リクエストが完全に完了したり、失敗したりしたときにコードを実行するために、イベントハンドラーを使用します。
 
-    > **メモ:** バージョン番号は重要です。もし、データベースをアップグレードしたい場合（例えば、テーブル構造を変更するなど）、バージョンを上げ、 `upgradeneeded` ハンドラー（下記参照）の内部で異なるスキーマを指定するなどして、コードを再度実行する必要があります。このチュートリアルでは、データベースのアップグレードについては触れません。
+   > **メモ:** バージョン番号は重要です。もし、データベースをアップグレードしたい場合（例えば、テーブル構造を変更するなど）、バージョンを上げ、 `upgradeneeded` ハンドラー（下記参照）の内部で異なるスキーマを指定するなどして、コードを再度実行する必要があります。このチュートリアルでは、データベースのアップグレードについては触れません。
 
 3. 前回追加した部分のすぐ下に、次のイベントハンドラーを追加してください。
 
    ```js
    // error ハンドラーは、データベースがうまく開けなかったことを意味します。
-   openRequest.addEventListener('error', () => console.error('Database failed to open'));
+   openRequest.addEventListener("error", () =>
+     console.error("Database failed to open"),
+   );
 
    // success ハンドラーは、データベースがうまく開けたことを意味します。
-   openRequest.addEventListener('success', () => {
-     console.log('Database opened successfully');
+   openRequest.addEventListener("success", () => {
+     console.log("Database opened successfully");
 
      // 開いたデータベースオブジェクトを db という変数に記憶します。これは以降で頻繁に使われます。
      db = openRequest.result;
@@ -312,20 +315,22 @@ MDN 学習領域の他の場所で、[静的サイト](/ja/docs/Learn/Server-sid
 
    ```js
    // データベースのテーブルがまだ存在しない場合は、それを設定します。
-   openRequest.addEventListener('upgradeneeded', (e) => {
-
+   openRequest.addEventListener("upgradeneeded", (e) => {
      // 開いたデータベースの参照を取得します。
      db = e.target.result;
 
      // 自動増加するキーを含んだ、メモを格納するための objectStore を
      // 作成します（基本的に単一の表のように）。
-     const objectStore = db.createObjectStore('notes_os', { keyPath: 'id', autoIncrement:true });
+     const objectStore = db.createObjectStore("notes_os", {
+       keyPath: "id",
+       autoIncrement: true,
+     });
 
      // objectStore にどのようなデータ項目を格納するかを定義します。
-     objectStore.createIndex('title', 'title', { unique: false });
-     objectStore.createIndex('body', 'body', { unique: false });
+     objectStore.createIndex("title", "title", { unique: false });
+     objectStore.createIndex("body", "body", { unique: false });
 
-     console.log('Database setup complete');
+     console.log("Database setup complete");
    });
    ```
 
@@ -333,7 +338,7 @@ MDN 学習領域の他の場所で、[静的サイト](/ja/docs/Learn/Server-sid
 
    次に {{domxref("IDBDatabase.createObjectStore()")}} を使用して、呼び出されたデータベースの中に `notes_os` という名前の新しいオブジェクトストアを作成します。これは、従来のデータベースシステムにおける単一の表に相当します。これに notes という名前をつけて、 `id` という `autoIncrement` キーフィールドも指定しました。新しいレコードが作成されるたびに、このフィールドに自動的に値が増加するので、開発者は明示的にこのフィールドを設定する必要はありません。キーである `id` フィールドは、レコードを削除するときや表示するときなど、レコードを一意に識別するために使用されます。
 
-    他にも {{domxref("IDBObjectStore.createIndex()")}} メソッドを使用して、`title` （それぞれのメモのタイトルを格納）と `body` （メモの本文を格納）の 2 つのインデックス（フィールド）も作成しています。
+   他にも {{domxref("IDBObjectStore.createIndex()")}} メソッドを使用して、`title` （それぞれのメモのタイトルを格納）と `body` （メモの本文を格納）の 2 つのインデックス（フィールド）も作成しています。
 
 このデータベーススキーマを設定した上で、データベースにレコードを追加し始めると、各レコードはこのようなオブジェクトとして表わされることになります。
 
@@ -353,7 +358,7 @@ MDN 学習領域の他の場所で、[静的サイト](/ja/docs/Learn/Server-sid
 
 ```js
 // submit イベントハンドラーを作成し、フォームが送信されたときに addData() 関数が実行されるようにします。
-form.addEventListener('submit', addData);
+form.addEventListener("submit", addData);
 ```
 
 では、`addData()` 関数を定義しましょう。上記の行の下に、以下のものを追加してください。
@@ -368,29 +373,31 @@ function addData(e) {
   const newItem = { title: titleInput.value, body: bodyInput.value };
 
   // 読み書きのデータベーストランザクションを開いて、データの追加に備えます。
-  const transaction = db.transaction(['notes_os'], 'readwrite');
+  const transaction = db.transaction(["notes_os"], "readwrite");
 
   // すでにデータベースに追加されているオブジェクトストアを呼び出すします。
-  const objectStore = transaction.objectStore('notes_os');
+  const objectStore = transaction.objectStore("notes_os");
 
   // newItem オブジェクトをオブジェクトストアに追加するリクエストを行います。
   const addRequest = objectStore.add(newItem);
 
-  addRequest.addEventListener('success', () => {
+  addRequest.addEventListener("success", () => {
     // フォームをクリアして、次の項目の追加に備えます。
-    titleInput.value = '';
-    bodyInput.value = '';
+    titleInput.value = "";
+    bodyInput.value = "";
   });
 
   // トランザクションが完了し、完全に終了した場合の成功を報告します。
-  transaction.addEventListener('complete', () => {
-    console.log('Transaction completed: database modification finished.');
+  transaction.addEventListener("complete", () => {
+    console.log("Transaction completed: database modification finished.");
 
     // 表示データの更新を行い、新しく追加された項目を表示するために、再度 displayData() を実行します。
     displayData();
   });
 
-  transaction.addEventListener('error', () => console.log('Transaction not opened due to error'));
+  transaction.addEventListener("error", () =>
+    console.log("Transaction not opened due to error"),
+  );
 }
 ```
 
@@ -418,8 +425,8 @@ function displayData() {
 
   // オブジェクトストアを開き、カーソルを取得します。カーソルはストア内の
   // 異なるデータ項目をすべて反復処理します。
-  const objectStore = db.transaction('notes_os').objectStore('notes_os');
-  objectStore.openCursor().addEventListener('success', (e) => {
+  const objectStore = db.transaction("notes_os").objectStore("notes_os");
+  objectStore.openCursor().addEventListener("success", (e) => {
     // カーソルへの参照を取得します。
     const cursor = e.target.result;
 
@@ -427,9 +434,9 @@ function displayData() {
     if (cursor) {
       // リスト項目、h3、p を作成し、表示する際に各データ項目を中に入れます。
       // HTML フラグメントを構成し、リストの中に追加します。
-      const listItem = document.createElement('li');
-      const h3 = document.createElement('h3');
-      const para = document.createElement('p');
+      const listItem = document.createElement("li");
+      const h3 = document.createElement("h3");
+      const para = document.createElement("p");
 
       listItem.appendChild(h3);
       listItem.appendChild(para);
@@ -441,28 +448,28 @@ function displayData() {
 
       // listItem の属性内部に、このデータ項目の ID を保存します。こうすると、
       // どの項目に対応しているのかがわかります。これは、後で項目を削除したくなったときに有用です。
-      listItem.setAttribute('data-note-id', cursor.value.id);
+      listItem.setAttribute("data-note-id", cursor.value.id);
 
       // ボタンを作成し、それを各 listItem の内部に設置します。
-      const deleteBtn = document.createElement('button');
+      const deleteBtn = document.createElement("button");
       listItem.appendChild(deleteBtn);
-      deleteBtn.textContent = 'Delete';
+      deleteBtn.textContent = "Delete";
 
       // ボタンがクリックされたら deleteItem() 関数が実行されるように、
       // イベントハンドラーを設定します。
-      deleteBtn.addEventListener('click', deleteItem);
+      deleteBtn.addEventListener("click", deleteItem);
 
       // カーソルの次の項目へ反復処理を行います。
       cursor.continue();
     } else {
       // Again, if list item is empty, display a 'No notes stored' message
       if (!list.firstChild) {
-        const listItem = document.createElement('li');
-        listItem.textContent = 'No notes stored.'
+        const listItem = document.createElement("li");
+        listItem.textContent = "No notes stored.";
         list.appendChild(listItem);
       }
       // 反復処理をすべきカーソルの項目がこれ以上ない場合、そのように示します。
-      console.log('Notes all displayed');
+      console.log("Notes all displayed");
     }
   });
 }
@@ -488,15 +495,15 @@ function deleteItem(e) {
   // 削除したいタスクの名前を取得します。
   // IDB で使用する前に、これを数値に変換する必要があります。
   // IDB のキー値は型が重視されます。
-  const noteId = Number(e.target.parentNode.getAttribute('data-note-id'));
+  const noteId = Number(e.target.parentNode.getAttribute("data-note-id"));
 
   // データベーストランザクションを開き、タスクを削除します。上で取得した id を使用してタスクを探します。
-  const transaction = db.transaction(['notes_os'], 'readwrite');
-  const objectStore = transaction.objectStore('notes_os');
+  const transaction = db.transaction(["notes_os"], "readwrite");
+  const objectStore = transaction.objectStore("notes_os");
   const deleteRequest = objectStore.delete(noteId);
 
   // データ項目を削除したことを報告します。
-  transaction.addEventListener('complete', () => {
+  transaction.addEventListener("complete", () => {
     // ボタンの親、すなわちリスト項目を削除します。
     // すると、それは表示されなくなります。
     e.target.parentNode.parentNode.removeChild(e.target.parentNode);
@@ -504,8 +511,8 @@ function deleteItem(e) {
 
     // この場合も、リスト項目が空であれば、「メモが格納されていません」というメッセージを表示します。
     if (!list.firstChild) {
-      const listItem = document.createElement('li');
-      listItem.textContent = 'No notes stored.';
+      const listItem = document.createElement("li");
+      listItem.textContent = "No notes stored.";
       list.appendChild(listItem);
     }
   });
@@ -532,12 +539,12 @@ function deleteItem(e) {
 
    ```js
    const videos = [
-     { 'name' : 'crystal' },
-     { 'name' : 'elf' },
-     { 'name' : 'frog' },
-     { 'name' : 'monster' },
-     { 'name' : 'pig' },
-     { 'name' : 'rabbit' }
+     { name: "crystal" },
+     { name: "elf" },
+     { name: "frog" },
+     { name: "monster" },
+     { name: "pig" },
+     { name: "rabbit" },
    ];
    ```
 
@@ -548,16 +555,20 @@ function deleteItem(e) {
    ```js
    function init() {
      // 動画の名前を一つずつループ処理してゆきます。
-     for(const video of videos) {
-      // トランザクションを開き、オブジェクトストアを取得し、名前によって各動画を get() します。
-       const objectStore = db.transaction('videos_os').objectStore('videos_os');
+     for (const video of videos) {
+       // トランザクションを開き、オブジェクトストアを取得し、名前によって各動画を get() します。
+       const objectStore = db.transaction("videos_os").objectStore("videos_os");
        const request = objectStore.get(video.name);
-       request.addEventListener('success', () => {
+       request.addEventListener("success", () => {
          // もし結果がデータベース内に存在したら（存在しなければ undefined）
          if (request.result) {
            // displayVideo() を用いて、動画を IDB から取り出して表示します。
-           console.log('taking videos from IDB');
-           displayVideo(request.result.mp4, request.result.webm, request.result.name);
+           console.log("taking videos from IDB");
+           displayVideo(
+             request.result.mp4,
+             request.result.webm,
+             request.result.name,
+           );
          } else {
            // 動画をネットワークから取ってきます。
            fetchVideoFromNetwork(video);
@@ -569,14 +580,18 @@ function deleteItem(e) {
 
 3. 以下のスニペットは、`fetchVideoFromNetwork()` 内から引用したものです。ここでは、2 つの別々の {{domxref("fetch()")}} 要求を用いて MP4 版と WebM 版の動画を読み込んでいます。次に {{domxref("Response.blob()")}} メソッドを使用してそれぞれのレスポンスの本文を blob として抽出し、後で格納したり表示したりできる動画のオブジェクト表現を得ています。
 
-    しかし、ここで問題があります。これらの二つの要求はどちらも非同期的なのですが、双方のプロミスが履行された (fulfilled) 場合にだけ動画を表示もしくは保存しようと試みたいのです。幸い、そうした問題を扱う組み込みメソッドがあります。すなわち {{jsxref("Promise.all()")}} です。これは一つの引数 — 成立したかどうかを調べたい個々のプロミスすべてに対する参照を配列に入れたもの — をとり、これ自体がプロミスに基づいています。
+   しかし、ここで問題があります。これらの二つの要求はどちらも非同期的なのですが、双方のプロミスが履行された (fulfilled) 場合にだけ動画を表示もしくは保存しようと試みたいのです。幸い、そうした問題を扱う組み込みメソッドがあります。すなわち {{jsxref("Promise.all()")}} です。これは一つの引数 — 成立したかどうかを調べたい個々のプロミスすべてに対する参照を配列に入れたもの — をとり、これ自体がプロミスに基づいています。
 
    このプロミスの `then()` ハンドラー内で、先ほどと同様に `displayVideo()` 関数を呼び出して動画を UI に表示し、さらに `storeVideo()` 関数を呼び出して動画をデータベース内に格納しています。
 
    ```js
    // fetch() 関数を使用して MP4 版と WebM 版の動画を取得し、そのレスポンス本体を blob として公開します。
-   const mp4Blob = fetch(`videos/${video.name}.mp4`).then((response) => response.blob());
-   const webmBlob = fetch(`videos/${video.name}.webm`).then((response) => response.blob());
+   const mp4Blob = fetch(`videos/${video.name}.mp4`).then((response) =>
+     response.blob(),
+   );
+   const webmBlob = fetch(`videos/${video.name}.webm`).then((response) =>
+     response.blob(),
+   );
 
    // 両方のプロミスが履行されたときのみ、次のコードを実行します。
    Promise.all([mp4Blob, webmBlob]).then((values) => {
@@ -593,13 +608,17 @@ function deleteItem(e) {
    // storeVideo() 関数を定義します。
    function storeVideo(mp4, webm, name) {
      // トランザクションを開き、オブジェクトストアを取得し、IDB に書き込めるように読み書きできるようにします。
-     const objectStore = db.transaction(['videos_os'], 'readwrite').objectStore('videos_os');
+     const objectStore = db
+       .transaction(["videos_os"], "readwrite")
+       .objectStore("videos_os");
 
      // add() を使ってレコードを IDB に追加します。
      const request = objectStore.add({ mp4, webm, name });
 
-     request.addEventListener('success', () => console.log('Record addition attempt finished'));
-     request.addEventListener('error', () => console.error(request.error));
+     request.addEventListener("success", () =>
+       console.log("Record addition attempt finished"),
+     );
+     request.addEventListener("error", () => console.error(request.error));
    }
    ```
 
@@ -613,17 +632,17 @@ function deleteItem(e) {
      const webmURL = URL.createObjectURL(webmBlob);
 
      // ページに動画を埋め込むための DOM 要素を作成する
-     const article = document.createElement('article');
-     const h2 = document.createElement('h2');
+     const article = document.createElement("article");
+     const h2 = document.createElement("h2");
      h2.textContent = title;
-     const video = document.createElement('video');
+     const video = document.createElement("video");
      video.controls = true;
-     const source1 = document.createElement('source');
+     const source1 = document.createElement("source");
      source1.src = mp4URL;
-     source1.type = 'video/mp4';
-     const source2 = document.createElement('source');
+     source1.type = "video/mp4";
+     const source2 = document.createElement("source");
      source2.src = webmURL;
-     source2.type = 'video/webm';
+     source2.type = "video/webm";
 
      // DOM 要素のページへの埋め込み
      section.appendChild(article);
@@ -660,10 +679,12 @@ Cache API もクライアント側のストレージ機構ですが、少し異
 
 ```js
 // サイトがオフラインで動くようにする処理を制御するために、サービスワーカーを登録します。
-if ('serviceWorker' in navigator) {
+if ("serviceWorker" in navigator) {
   navigator.serviceWorker
-    .register('/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js')
-    .then(() => console.log('Service Worker Registered'));
+    .register(
+      "/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js",
+    )
+    .then(() => console.log("Service Worker Registered"));
 }
 ```
 
@@ -680,18 +701,18 @@ if ('serviceWorker' in navigator) {
 ここで、キャッシュ API の動作を確認します。Domxref("CacheStorage.open()")}} メソッドを使用して、レスポンスを格納できる新しいキャッシュオブジェクトを開いています（IndexedDB オブジェクトストアのようなものです）。このプロミスは `video-store` キャッシュを表す {{domxref("Cache")}} オブジェクトで履行されます。次に {{domxref("Cache.addAll()")}} メソッドを使用して、一連のアセットをフェッチし、そのレスポンスをキャッシュに追加しています。
 
 ```js
-self.addEventListener('install', (e) => {
+self.addEventListener("install", (e) => {
   e.waitUntil(
     caches
-      .open('video-store')
+      .open("video-store")
       .then((cache) =>
         cache.addAll([
-          '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/',
-          '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.html',
-          '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js',
-          '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/style.css',
-        ])
-      )
+          "/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/",
+          "/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.html",
+          "/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js",
+          "/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/style.css",
+        ]),
+      ),
   );
 });
 ```
@@ -711,10 +732,10 @@ self.addEventListener('install', (e) => {
 一致するものが見つかった場合、それを独自のレスポンスとして返します。そうでない場合は、ネットワークからのレスポンスを [fetch()](/ja/docs/Web/API/fetch) して、代わりにそれを返します。
 
 ```js
-self.addEventListener('fetch', (e) => {
+self.addEventListener("fetch", (e) => {
   console.log(e.request.url);
   e.respondWith(
-    caches.match(e.request).then((response) => response || fetch(e.request))
+    caches.match(e.request).then((response) => response || fetch(e.request)),
   );
 });
 ```
diff --git a/files/ja/learn/javascript/client-side_web_apis/drawing_graphics/index.md b/files/ja/learn/javascript/client-side_web_apis/drawing_graphics/index.md
index faed12477ead61..9be75086bb259a 100644
--- a/files/ja/learn/javascript/client-side_web_apis/drawing_graphics/index.md
+++ b/files/ja/learn/javascript/client-side_web_apis/drawing_graphics/index.md
@@ -95,9 +95,9 @@ canvas タグの内部には、ユーザーのブラウザーが canvas に対
 3. 次に、 "script.js" を開き、以下の JavaScript の行を追加してください。
 
    ```js
-   const canvas = document.querySelector('.myCanvas');
-   const width = canvas.width = window.innerWidth;
-   const height = canvas.height = window.innerHeight;
+   const canvas = document.querySelector(".myCanvas");
+   const width = (canvas.width = window.innerWidth);
+   const height = (canvas.height = window.innerHeight);
    ```
 
    ここでは、定数 `canvas` にキャンバスへの参照を格納しています。2 つ目の行では、新しい定数 `width` とキャンバスの `width` プロパティを {{domxref("Window.innerWidth")}} （ビューポート幅に等しい値）に設定しています。3 行目では、新しい定数 `height` とキャンバスの `height` プロパティを {{domxref("Window.innerHeight")}} （ビューポートの高さを指定）に等しくなるように設定しています。これで、ブラウザーウィンドウの幅と高さをすべて満たすキャンバスを保有することができます。
@@ -113,7 +113,7 @@ canvas タグの内部には、ユーザーのブラウザーが canvas に対
 この場合、 2D キャンバスを取得したいので、 "script.js" の他の行の下に、以下の JavaScript を追加してください。
 
 ```js
-const ctx = canvas.getContext('2d');
+const ctx = canvas.getContext("2d");
 ```
 
 > **メモ:** 他にも、 WebGL の場合は `webgl`、WebGL 2 の場合は `webgl2` などのコンテキスト値を選ぶことができますが、この記事では必要ありません。
@@ -123,7 +123,7 @@ const ctx = canvas.getContext('2d');
 次に移動する前に最後のことをしましょう。キャンバスの背景を黒く塗って、キャンバス API を最初に体験してもらいましょう。 JavaScript の一番下に以下の行を追加してください。
 
 ```js
-ctx.fillStyle = 'rgb(0, 0, 0)';
+ctx.fillStyle = "rgb(0, 0, 0)";
 ctx.fillRect(0, 0, width, height);
 ```
 
@@ -147,7 +147,7 @@ ctx.fillRect(0, 0, width, height);
 2. 次に、 JavaScript の一番下に、以下の行を追加してください。
 
    ```js
-   ctx.fillStyle = 'rgb(255, 0, 0)';
+   ctx.fillStyle = "rgb(255, 0, 0)";
    ctx.fillRect(50, 50, 100, 150);
    ```
 
@@ -156,7 +156,7 @@ ctx.fillRect(0, 0, width, height);
 3. もうひとつ矩形を追加してみましょう。今度は緑色の矩形です。 JavaScript の一番下に以下のものを追加してください。
 
    ```js
-   ctx.fillStyle = 'rgb(0, 255, 0)';
+   ctx.fillStyle = "rgb(0, 255, 0)";
    ctx.fillRect(75, 75, 100, 100);
    ```
 
@@ -165,7 +165,7 @@ ctx.fillRect(0, 0, width, height);
 4. 半透明の色を指定することで、例えば `rgba()` を使用して半透明のグラフィックを描画することができることに注意してください。 `a` 値は「アルファチャンネル」と呼ばれるもの、つまり色が持つ透明度の量を定義します。この値が高いほど、その背後にあるものをより見えなくすることができます。あなたのコードに以下のように追加してください。
 
    ```js
-   ctx.fillStyle = 'rgba(255, 0, 255, 0.75)';
+   ctx.fillStyle = "rgba(255, 0, 255, 0.75)";
    ctx.fillRect(25, 100, 175, 50);
    ```
 
@@ -178,7 +178,7 @@ ctx.fillRect(0, 0, width, height);
 1. 前の例に以下のものを追加してください。また、前の JavaScript の行の下に追加してください。
 
    ```js
-   ctx.strokeStyle = 'rgb(255, 255, 255)';
+   ctx.strokeStyle = "rgb(255, 255, 255)";
    ctx.strokeRect(25, 25, 175, 200);
    ```
 
@@ -211,7 +211,7 @@ ctx.fillRect(0, 0, width, height);
 典型的な、簡単なパス描画処理をすると、次のようになります。
 
 ```js
-ctx.fillStyle = 'rgb(255, 0, 0)';
+ctx.fillStyle = "rgb(255, 0, 0)";
 ctx.beginPath();
 ctx.moveTo(50, 50);
 // draw your path
@@ -226,14 +226,14 @@ ctx.fill();
 
    ```js
    function degToRad(degrees) {
-     return degrees * Math.PI / 180;
+     return (degrees * Math.PI) / 180;
    }
    ```
 
 2. 次に、先ほどの追加部分の下に従うことでパスを開始します。ここでは、三角形の色を設定し、パスを描き始め、何も描かずにペンを (50, 50) に移動させています。そこが三角形を描き始める場所です。
 
    ```js
-   ctx.fillStyle = 'rgb(255, 0, 0)';
+   ctx.fillStyle = "rgb(255, 0, 0)";
    ctx.beginPath();
    ctx.moveTo(50, 50);
    ```
@@ -273,7 +273,7 @@ ctx.fill();
 1. キャンバスには円弧を追加してみましょう。コードの一番下に以下のように追加してください。
 
    ```js
-   ctx.fillStyle = 'rgb(0, 0, 255)';
+   ctx.fillStyle = "rgb(0, 0, 255)";
    ctx.beginPath();
    ctx.arc(150, 106, 50, degToRad(0), degToRad(360), false);
    ctx.fill();
@@ -286,7 +286,7 @@ ctx.fill();
 2. もうひとつ、円弧を加えてみましょう。
 
    ```js
-   ctx.fillStyle = 'yellow';
+   ctx.fillStyle = "yellow";
    ctx.beginPath();
    ctx.arc(200, 106, 50, degToRad(-45), degToRad(45), true);
    ctx.lineTo(200, 106);
@@ -322,14 +322,14 @@ ctx.fill();
 以下のブロックを JavaScript の最下部に追加してみてください。
 
 ```js
-ctx.strokeStyle = 'white';
+ctx.strokeStyle = "white";
 ctx.lineWidth = 1;
-ctx.font = '36px arial';
-ctx.strokeText('Canvas text', 50, 50);
+ctx.font = "36px arial";
+ctx.strokeText("Canvas text", 50, 50);
 
-ctx.fillStyle = 'red';
-ctx.font = '48px georgia';
-ctx.fillText('Canvas text', 50, 150);
+ctx.fillStyle = "red";
+ctx.font = "48px georgia";
+ctx.fillText("Canvas text", 50, 150);
 ```
 
 ここでは、アウトラインとストロークの 2 つのテキストを描きます。最終的な例はこのようになるはずです。
@@ -352,7 +352,7 @@ ctx.fillText('Canvas text', 50, 150);
 
    ```js
    const image = new Image();
-   image.src = 'firefox.png';
+   image.src = "firefox.png";
    ```
 
    ここでは {{domxref("HTMLImageElement.Image()", "Image()")}} コンストラクターを使用して、新しい {{domxref("HTMLImageElement")}} オブジェクトを作成しています。返されるオブジェクトは、既存の {{htmlelement("img")}} 要素への参照を取得したときに返されるオブジェクトと同じ型です。次に、その [`src`](/ja/docs/Web/HTML/Element/img#src) 属性を、Firefox ロゴ画像と同じになるように設定します。この時点で、ブラウザーは画像の読み込みを開始します。
@@ -360,7 +360,7 @@ ctx.fillText('Canvas text', 50, 150);
 3. ここで、`drawImage()` を使用して画像を埋め込むことができますが、最初に画像ファイルが読み込まれたことを確認する必要があり、そうでなければコードは失敗してしまいます。これは `load` イベントを使用して実現することができます。このイベントは画像の読み込みが完了したときにのみ発行されます。前のブロックの下に、以下のブロックを追加してください。
 
    ```js
-   image.addEventListener('load', () => ctx.drawImage(image, 20, 20));
+   image.addEventListener("load", () => ctx.drawImage(image, 20, 20));
    ```
 
    今、ブラウザーで例を読み込むと、キャンバスに埋め込まれた画像が表示されるはずです。
@@ -397,7 +397,7 @@ ctx.fillText('Canvas text', 50, 150);
 2. 以下の行を JavaScript の一番下に追加します。これには新しいメソッド {{domxref("CanvasRenderingContext2D.translate", "translate()")}} が含まれていて、キャンバスの原点を移動させます。
 
    ```js
-   ctx.translate(width/2, height/2);
+   ctx.translate(width / 2, height / 2);
    ```
 
    これにより、座標原点 (0, 0) は左上隅ではなく、キャンバスの中央に移されます。これは、今回のようにキャンバスの中心から相対的にデザインを描画させたい多くの状況でとても有用です。
@@ -406,19 +406,17 @@ ctx.fillText('Canvas text', 50, 150);
 
    ```js
    function degToRad(degrees) {
-     return degrees * Math.PI / 180;
+     return (degrees * Math.PI) / 180;
    }
 
    function rand(min, max) {
-     return Math.floor(Math.random() * (max-min+1)) + (min);
+     return Math.floor(Math.random() * (max - min + 1)) + min;
    }
 
    let length = 250;
    let moveOffset = 20;
 
-   for (let i = 0; i < length; i++) {
-
-   }
+   for (let i = 0; i < length; i++) {}
    ```
 
    ここでは、上の三角形の例で見たのと同じ `degToRad()` 関数、指定された下限と上限の間の乱数を返す `rand()` 関数、変数 `length` と `moveOffset` （これについては後で詳しく説明します）、そして空の `for` ループを実装しています。
@@ -426,13 +424,13 @@ ctx.fillText('Canvas text', 50, 150);
 4. ここでのアイディアは、 `for` ループの中でキャンバス上に何かを描くことができ、それを毎回反復処理することで、何か面白いものを作成することができるというものです。以下のコードを `for` ループの中に追加してください。
 
    ```js
-   ctx.fillStyle = `rgba(${255-length},0,${255-length},0.9)`;
+   ctx.fillStyle = `rgba(${255 - length},0,${255 - length},0.9)`;
    ctx.beginPath();
-   ctx.moveTo(moveOffset,moveOffset);
-   ctx.lineTo(moveOffset+length,moveOffset);
-   const triHeight = length/2 * Math.tan(degToRad(60));
-   ctx.lineTo(moveOffset+(length/2),moveOffset+triHeight);
-   ctx.lineTo(moveOffset,moveOffset);
+   ctx.moveTo(moveOffset, moveOffset);
+   ctx.lineTo(moveOffset + length, moveOffset);
+   const triHeight = (length / 2) * Math.tan(degToRad(60));
+   ctx.lineTo(moveOffset + length / 2, moveOffset + triHeight);
+   ctx.lineTo(moveOffset, moveOffset);
    ctx.fill();
 
    length--;
@@ -458,7 +456,7 @@ ctx.fillText('Canvas text', 50, 150);
 この点については、ぜひこの例で遊んでみて、自分自身で作ってみてください。例えば、
 
 - 三角形の代わりに長方形や円弧を描画したり、画像を埋め込んだりする。
-- length` と `moveOffset` の値で遊んでみる。
+- length`と`moveOffset` の値で遊んでみる。
 - 上で記載したが使用しなかった `rand()` 関数を使用して乱数を導入する。
 
 > **メモ:** 完成したコードは、GitHub で [6_canvas_for_loop](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop) として利用することができます。
@@ -477,16 +475,16 @@ JavaScript で、関数を 1 秒間に数回繰り返し実行することがで
 
 ```js
 function loop() {
-   ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
-   ctx.fillRect(0, 0, width, height);
+  ctx.fillStyle = "rgba(0, 0, 0, 0.25)";
+  ctx.fillRect(0, 0, width, height);
 
-   for (const ball of balls) {
-     ball.draw();
-     ball.update();
-     ball.collisionDetect();
-   }
+  for (const ball of balls) {
+    ball.draw();
+    ball.update();
+    ball.collisionDetect();
+  }
 
-   requestAnimationFrame(loop);
+  requestAnimationFrame(loop);
 }
 
 loop();
@@ -516,14 +514,14 @@ loop();
 2. JavaScript の一番下に、以下の行を追加して、座標原点が再びキャンバスの中央に来るようにします。
 
    ```js
-   ctx.translate(width/2, height/2);
+   ctx.translate(width / 2, height / 2);
    ```
 
 3. では、新しい {{domxref("HTMLImageElement")}} オブジェクトを作成し、その [`src`](/ja/docs/Web/HTML/Element/img#src) に読み込ませたい画像を設定しましょう。そして、`onload` イベントハンドラーを追加して、画像を読み込んだら `draw()` 関数が起動するよう設定しましょう。
 
    ```js
    const image = new Image();
-   image.src = 'walk-right.png';
+   image.src = "walk-right.png";
    image.onload = draw;
    ```
 
@@ -543,21 +541,19 @@ loop();
 5. では、コードの一番下に空の `draw()` 関数を挿入して、いくつかのコードで埋められるようにしましょう。
 
    ```js
-   function draw() {
-
-   }
+   function draw() {}
    ```
 
 6. この節の残りのコードは `draw()` の中に記述します。まず、以下の行を追加します。これはキャンバスで各フレームを描画するための準備をするものです。長方形の左上隅を `-(width/2), -(height/2)` と指定しなければならないことに注意してください先ほど原点位置を `width/2, height/2` と指定したためです。
 
    ```js
-   ctx.fillRect(-(width/2), -(height/2), width, height);
+   ctx.fillRect(-(width / 2), -(height / 2), width, height);
    ```
 
 7. 次に、drawImage の引数 9 個版を使用して画像を描画します。従うことで以下が追加されます。
 
    ```js
-   ctx.drawImage(image, (sprite*102), 0, 102, 148, 0+posX, -74, 102, 148);
+   ctx.drawImage(image, sprite * 102, 0, 102, 148, 0 + posX, -74, 102, 148);
    ```
 
    見ての通りです。
@@ -571,13 +567,13 @@ loop();
 8. 今度は、描画するたびに `sprite` の値を変更します。まあ、とにかくいくつかの描画の後で。以下のブロックを `draw()` 関数の末尾に追加してください。
 
    ```js
-     if (posX % 13 === 0) {
-       if (sprite === 5) {
-         sprite = 0;
-       } else {
-         sprite++;
-       }
+   if (posX % 13 === 0) {
+     if (sprite === 5) {
+       sprite = 0;
+     } else {
+       sprite++;
      }
+   }
    ```
 
    ブロック全体を `if (posX % 13 === 0) { }` で囲んでいます。モジュロ演算子(`%`)（[剰余演算子](/ja/docs/Web/JavaScript/Reference/Operators/Remainder)とも呼ばれます）を使用して、 `posX` の値が余りなく 13 で正確に割り切れるかどうかを調べています。もしそうなら、 `sprite` を増加して次のスプライトに移動します（スプライト #5 が終わったら 0 に戻ります）。これは事実上、 13 フレームごとにしかスプライトを更新していないことを意味し、およそ 1 秒間に 5 フレーム程度です（`requestAnimationFrame()` では、可能であれば 1 秒間に 60 フレームまで呼び出されます）。フレームレートを意図的に遅くしているのは、作業するスプライトが 6 つしかないためで、 60 分の 1 秒ごとに 1 つずつ表示すると、キャラクターの移動が速くなりすぎてしまうからです。
@@ -587,13 +583,13 @@ loop();
 9. 次に、各フレームで `posX` 値を変更する方法を作業する必要があります。次のコードブロックを、前回のコードのすぐ下に追加してください。
 
    ```js
-     if (posX > width/2) {
-       let newStartPos = -((width/2) + 102);
-       posX = Math.ceil(newStartPos);
-       console.log(posX);
-     } else {
-       posX += 2;
-     }
+   if (posX > width / 2) {
+     let newStartPos = -(width / 2 + 102);
+     posX = Math.ceil(newStartPos);
+     console.log(posX);
+   } else {
+     posX += 2;
+   }
    ```
 
    別の `if...else` 文を使用して、 `posX` の値が `width/2` よりも大きくなったかどうか、つまりキャラクターが画面の右端から歩き出したかどうかを確認しています。もしそうなら、キャラクターが画面の左側の辺のすぐ左に来るように位置を計算します。
@@ -628,22 +624,22 @@ let curY;
 let pressed = false;
 
 // マウスポインターの座標を更新する
-document.addEventListener('mousemove', (e) => {
+document.addEventListener("mousemove", (e) => {
   curX = e.pageX;
   curY = e.pageY;
 });
 
-canvas.addEventListener('mousedown', () => pressed = true);
+canvas.addEventListener("mousedown", () => (pressed = true));
 
-canvas.addEventListener('mouseup', () => pressed = false);
+canvas.addEventListener("mouseup", () => (pressed = false));
 ```
 
 "Clear canvas" ボタンが押されたら、キャンバス全体を黒に戻す簡単な関数を実行します。これは、これまでと同じ方法です。
 
 ```js
-clearBtn.addEventListener('click', () => {
-  ctx.fillStyle = 'rgb(0,0,0)';
-  ctx.fillRect(0,0,width,height);
+clearBtn.addEventListener("click", () => {
+  ctx.fillStyle = "rgb(0,0,0)";
+  ctx.fillRect(0, 0, width, height);
 });
 ```
 
@@ -654,7 +650,14 @@ function draw() {
   if (pressed) {
     ctx.fillStyle = colorPicker.value;
     ctx.beginPath();
-    ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);
+    ctx.arc(
+      curX,
+      curY - 85,
+      sizePicker.value,
+      degToRad(0),
+      degToRad(360),
+      false,
+    );
     ctx.fill();
   }
 
@@ -696,7 +699,12 @@ WebGLライブラリーを使って何かを作成する簡単な例を見てみ
 5. 次に、シーンを見るための**カメラ**が必要です。 3D 画像の用語では、カメラは世界における視聴者の位置を表します。カメラを作成するには、以下の行を次に追加してください。
 
    ```js
-   const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+   const camera = new THREE.PerspectiveCamera(
+     75,
+     window.innerWidth / window.innerHeight,
+     0.1,
+     1000,
+   );
    camera.position.z = 5;
    ```
 
@@ -726,12 +734,12 @@ WebGLライブラリーを使って何かを作成する簡単な例を見てみ
 
    const loader = new THREE.TextureLoader();
 
-   loader.load('metal003.png', (texture) => {
+   loader.load("metal003.png", (texture) => {
      texture.wrapS = THREE.RepeatWrapping;
      texture.wrapT = THREE.RepeatWrapping;
      texture.repeat.set(2, 2);
 
-     const geometry = new THREE.BoxGeometry(2.4,2.4,2.4);
+     const geometry = new THREE.BoxGeometry(2.4, 2.4, 2.4);
      const material = new THREE.MeshLambertMaterial({ map: texture });
      cube = new THREE.Mesh(geometry, material);
      scene.add(cube);
@@ -750,10 +758,10 @@ WebGLライブラリーを使って何かを作成する簡単な例を見てみ
 8. `draw()` の定義に入る前に、シーンを少し盛り上げるために、ライトをいくつか追加します。以下、ブロックを追加していきます。
 
    ```js
-   const light = new THREE.AmbientLight('rgb(255,255,255)'); // soft white light
+   const light = new THREE.AmbientLight("rgb(255,255,255)"); // soft white light
    scene.add(light);
 
-   const spotLight = new THREE.SpotLight('rgb(255,255,255)');
+   const spotLight = new THREE.SpotLight("rgb(255,255,255)");
    spotLight.position.set(100, 1000, 1000);
    spotLight.castShadow = true;
    scene.add(spotLight);
diff --git a/files/ja/learn/javascript/client-side_web_apis/fetching_data/index.md b/files/ja/learn/javascript/client-side_web_apis/fetching_data/index.md
index a5d5cfb6ca55a8..1d8616af5904e0 100644
--- a/files/ja/learn/javascript/client-side_web_apis/fetching_data/index.md
+++ b/files/ja/learn/javascript/client-side_web_apis/fetching_data/index.md
@@ -74,10 +74,10 @@ l10n:
 {{htmlelement("script")}} 要素のすぐ内側に、以下のコードを追加してください。これは、 {{htmlelement("select")}} 要素と {{htmlelement("pre")}} 要素への参照を格納し、 `<select>` 要素にリスナーを追加して、ユーザーが新しい値を選択したときに、新しい値が引数として `updateDisplay()` という関数に渡されるようにするものです。
 
 ```js
-const verseChoose = document.querySelector('select');
-const poemDisplay = document.querySelector('pre');
+const verseChoose = document.querySelector("select");
+const poemDisplay = document.querySelector("pre");
 
-verseChoose.addEventListener('change', () => {
+verseChoose.addEventListener("change", () => {
   const verse = verseChoose.value;
   updateDisplay(verse);
 });
@@ -86,9 +86,7 @@ verseChoose.addEventListener('change', () => {
 `updateDisplay()` 関数を定義しましょう。まずはさっきのコードブロックの下に以下を書き足します。これは関数の空の箱です。
 
 ```js
-function updateDisplay(verse) {
-
-}
+function updateDisplay(verse) {}
 ```
 
 この関数は、後で必要になるので、読み込むテキストファイルを指し示す関連 URL を構築することから開始します。 {{htmlelement("select")}} 要素の値は、選択されている {{htmlelement("option")}} の中のテキストと常に同じです（value 属性で異なる値を指定しない限り）。対応する連のテキストファイルは "verse1.txt" で、 HTML ファイルと同じディレクトリーにあるので、ファイル名だけで十分です。
@@ -96,7 +94,7 @@ function updateDisplay(verse) {
 ただ、ウェブサーバーはたいてい大文字小文字を区別しますし、今回のファイル名にスペースが含まれていません。 "Verse 1" を "verse1.txt" に変換するためには、 V を小文字にして、スペースを取り除き、 .txt を末尾に追加しなければなりません。これは {{jsxref("String.replace", "replace()")}} と {{jsxref("String.toLowerCase", "toLowerCase()")}}、あと単なる[文字列の結合](/ja/docs/Learn/JavaScript/First_steps/Strings#文字列を連結する)で実現できます。以下のコードを `updateDisplay()` 関数の内側に追加してください。
 
 ```js
-verse = verse.replace(' ', '').toLowerCase();
+verse = verse.replace(" ", "").toLowerCase();
 const url = `${verse}.txt`;
 ```
 
@@ -119,10 +117,12 @@ fetch(url)
   })
   // response.text() が成功したら、そのテキストで `then()` ハンドラーが
   // 呼び出され、それを `poemDisplay` ボックスにコピーします。
-  .then((text) => poemDisplay.textContent = text)
+  .then((text) => (poemDisplay.textContent = text))
   // 起こりうるエラーをキャッチし、`poemDisplay` ボックスにメッセージを
   // 表示します。
-  .catch((error) => poemDisplay.textContent = `Could not fetch verse: ${error}`);
+  .catch(
+    (error) => (poemDisplay.textContent = `Could not fetch verse: ${error}`),
+  );
 ```
 
 ここでは、かなり多くのことを解説します。
@@ -140,8 +140,8 @@ fetch(url)
 この例の問題点として、最初に読み込んだときに詩が表示されないことが挙げられます。これを修正するには、コードの一番下（閉じられた `</script>` タグのすぐ上）に以下の 2 行を追加して、既定で 1 節を読み込み、 {{htmlelement("select") }} 要素が常に正しい値を示していることを確認します。
 
 ```js
-updateDisplay('Verse 1');
-verseChoose.value = 'Verse 1';
+updateDisplay("Verse 1");
+verseChoose.value = "Verse 1";
 ```
 
 #### 例はサーバーから提供すること
@@ -165,7 +165,7 @@ verseChoose.value = 'Verse 1';
 Fetch を使用できる最初のブロックは、 JavaScript で開始されたところにあります。
 
 ```js
-fetch('products.json')
+fetch("products.json")
   .then((response) => {
     if (!response.ok) {
       throw new Error(`HTTP error: ${response.status}`);
@@ -222,15 +222,14 @@ Blob を正常に受信したら、それを `showProduct()` 関数に渡して
 const request = new XMLHttpRequest();
 
 try {
-  request.open('GET', 'products.json');
+  request.open("GET", "products.json");
 
-  request.responseType = 'json';
+  request.responseType = "json";
 
-  request.addEventListener('load', () => initialize(request.response));
-  request.addEventListener('error', () => console.error('XHR error'));
+  request.addEventListener("load", () => initialize(request.response));
+  request.addEventListener("error", () => console.error("XHR error"));
 
   request.send();
-
 } catch (error) {
   console.error(`XHR error ${request.status}`);
 }
diff --git a/files/ja/learn/javascript/client-side_web_apis/introduction/index.md b/files/ja/learn/javascript/client-side_web_apis/introduction/index.md
index 856c0cfab3da5c..20e291249681d0 100644
--- a/files/ja/learn/javascript/client-side_web_apis/introduction/index.md
+++ b/files/ja/learn/javascript/client-side_web_apis/introduction/index.md
@@ -136,9 +136,9 @@ const audioCtx = new AudioContext();
 次に、 `<audio>` 、 `<button>` 、および `<input>` 要素への参照を格納する定数を作成し、 {{domxref("AudioContext.createMediaElementSource()")}} メソッドを使用して、音声のソースを表す `MediaElementAudioSourceNode` を作成します。`<audio>` 要素はここから再生されます。
 
 ```js
-const audioElement = document.querySelector('audio');
-const playBtn = document.querySelector('button');
-const volumeSlider = document.querySelector('.volume');
+const audioElement = document.querySelector("audio");
+const playBtn = document.querySelector("button");
+const volumeSlider = document.querySelector(".volume");
 
 const audioSource = audioCtx.createMediaElementSource(audioElement);
 ```
@@ -147,29 +147,29 @@ const audioSource = audioCtx.createMediaElementSource(audioElement);
 
 ```js
 // play/pause audio
-playBtn.addEventListener('click', () => {
+playBtn.addEventListener("click", () => {
   // check if context is in suspended state (autoplay policy)
-  if (audioCtx.state === 'suspended') {
-     audioCtx.resume();
+  if (audioCtx.state === "suspended") {
+    audioCtx.resume();
   }
 
   // if track is stopped, play it
-  if (playBtn.getAttribute('class') === 'paused') {
+  if (playBtn.getAttribute("class") === "paused") {
     audioElement.play();
-    playBtn.setAttribute('class', 'playing');
-    playBtn.textContent = 'Pause'
+    playBtn.setAttribute("class", "playing");
+    playBtn.textContent = "Pause";
     // if track is playing, stop it
-} else if (playBtn.getAttribute('class') === 'playing') {
+  } else if (playBtn.getAttribute("class") === "playing") {
     audioElement.pause();
-    playBtn.setAttribute('class', 'paused');
-    playBtn.textContent = 'Play';
+    playBtn.setAttribute("class", "paused");
+    playBtn.textContent = "Play";
   }
 });
 
 // if track ends
-audioElement.addEventListener('ended', () => {
-  playBtn.setAttribute('class', 'paused');
-  playBtn.textContent = 'Play'
+audioElement.addEventListener("ended", () => {
+  playBtn.setAttribute("class", "paused");
+  playBtn.textContent = "Play";
 });
 ```
 
@@ -181,7 +181,7 @@ audioElement.addEventListener('ended', () => {
 // volume
 const gainNode = audioCtx.createGain();
 
-volumeSlider.addEventListener('input', () => {
+volumeSlider.addEventListener("input", () => {
   gainNode.gain.value = volumeSlider.value;
 });
 ```
@@ -201,23 +201,23 @@ API を使用する場合、その API のエントリーポイント（入口
 Document Object Model (DOM) API もシンプルなエントリーポイントがあります。その機能は、例えば {{domxref("Document")}} オブジェクトや、何らかの形で影響を与えたい HTML 要素のインスタンスにぶら下がった状態で得られる傾向があります。
 
 ```js
-const em = document.createElement('em'); // 新しい em 要素を作成
-const para = document.querySelector('p'); // 既存の p 要素の参照
-em.textContent = 'Hello there!'; // em にテキストの内容を入れる
+const em = document.createElement("em"); // 新しい em 要素を作成
+const para = document.querySelector("p"); // 既存の p 要素の参照
+em.textContent = "Hello there!"; // em にテキストの内容を入れる
 para.appendChild(em); // 段落に em を入れる
 ```
 
 [キャンバス API](/ja/docs/Web/API/Canvas_API) も、操作するために使用するコンテキストオブジェクトの取得に頼っていますが、この用途では音声コンテキストではなくグラフィックコンテキストを使用します。このコンテキストオブジェクトは、描画する {{htmlelement("canvas")}} 要素への参照を取得し、その {{domxref("HTMLCanvasElement.getContext()")}} メソッドを呼び出すことによって作成されます。
 
 ```js
-const canvas = document.querySelector('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.querySelector("canvas");
+const ctx = canvas.getContext("2d");
 ```
 
 キャンバスに対して何らかの処理を行いたい場合は、コンテキストオブジェクト（{{domxref("CanvasRenderingContext2D")}} のインスタンス）のプロパティやメソッドを呼び出すことで実現できます。
 
 ```js
-Ball.prototype.draw = function() {
+Ball.prototype.draw = function () {
   ctx.beginPath();
   ctx.fillStyle = this.color;
   ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
@@ -237,29 +237,29 @@ Ball.prototype.draw = function() {
 
 ```js
 // play/pause audio
-playBtn.addEventListener('click', () => {
+playBtn.addEventListener("click", () => {
   // check if context is in suspended state (autoplay policy)
-  if (audioCtx.state === 'suspended') {
-     audioCtx.resume();
+  if (audioCtx.state === "suspended") {
+    audioCtx.resume();
   }
 
   // if track is stopped, play it
-  if (playBtn.getAttribute('class') === 'paused') {
+  if (playBtn.getAttribute("class") === "paused") {
     audioElement.play();
-    playBtn.setAttribute('class', 'playing');
-    playBtn.textContent = 'Pause'
+    playBtn.setAttribute("class", "playing");
+    playBtn.textContent = "Pause";
     // if track is playing, stop it
-} else if (playBtn.getAttribute('class') === 'playing') {
+  } else if (playBtn.getAttribute("class") === "playing") {
     audioElement.pause();
-    playBtn.setAttribute('class', 'paused');
-    playBtn.textContent = 'Play';
+    playBtn.setAttribute("class", "paused");
+    playBtn.textContent = "Play";
   }
 });
 
 // if track ends
-audioElement.addEventListener('ended', () => {
-  playBtn.setAttribute('class', 'paused');
-  playBtn.textContent = 'Play'
+audioElement.addEventListener("ended", () => {
+  playBtn.setAttribute("class", "paused");
+  playBtn.textContent = "Play";
 });
 ```
 
diff --git a/files/ja/learn/javascript/client-side_web_apis/manipulating_documents/index.md b/files/ja/learn/javascript/client-side_web_apis/manipulating_documents/index.md
index 411645150dbec1..d9d1e693c5b6ab 100644
--- a/files/ja/learn/javascript/client-side_web_apis/manipulating_documents/index.md
+++ b/files/ja/learn/javascript/client-side_web_apis/manipulating_documents/index.md
@@ -47,7 +47,7 @@ l10n:
 [dom-example.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/dom-example.html) にちょっとした例を作成しました（[ライブ実行](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example.html)もどうぞ）。ブラウザーから開いてみてください。これはとても簡素なページで、{{htmlelement("section")}} 要素の中に画像が一つと、一つのリンクを含む一つの段落があります。HTML のソースはこんな感じです。
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-US">
   <head>
     <meta charset="utf-8" />
@@ -94,19 +94,19 @@ DOM 操作の学習を始めるにあたり、まずは実践的な例から始
 3. DOM の中の要素を操作するため、まず DOM を選びだしてこれへの参照を変数に保存する必要があります。script 要素の中に、次の行を追加して下さい。
 
    ```js
-   const link = document.querySelector('a');
+   const link = document.querySelector("a");
    ```
 
 4. 要素への参照を変数に保存したので、これが備えているプロパティとメソッドを使って DOM の操作を始められます (利用できるプロパティとメソッドは、たとえば {{htmlelement("a")}} 要素であれば {{domxref("HTMLAnchorElement")}} インターフェース、さらにその汎化した親のインターフェース {{domxref("HTMLElement")}} や {{domxref("Node")}} — これは DOM の全てノードが相当します — で定義されています)。まずは、リンクの中のテキストを、{{domxref("Node.textContent")}} プロパティを更新する事で変更してみましょう。上で書いた行の下に、次の行を追加して下さい。
 
    ```js
-   link.textContent = 'Mozilla Developer Network';
+   link.textContent = "Mozilla Developer Network";
    ```
 
 5. クリックされたときに間違った場所に行かないよう、リンクが指す先の URL も変えておくべきでしょう。また下に、以下の行を追加して下さい。
 
    ```js
-   link.href = 'https://developer.mozilla.org';
+   link.href = "https://developer.mozilla.org";
    ```
 
 JavaScript でよくあることですが、要素を選択し、その参照を変数に格納する方法はたくさんあることに注意してください。{{domxref("Document.querySelector()")}} は、現代の手法として推奨されています。CSS のセレクターを使用して要素を選択することができるので便利です。上記の `querySelector()` 呼び出しは、文書内に最初に現れる {{htmlelement("a")}} 要素を選択します。もし、複数の要素を選択して何かをしたいのであれば、 {{domxref("Document.querySelectorAll()")}} を使用することができます。これはセレクターに一致する文書内のすべての要素を選択し、それらへの参照を[配列](/ja/docs/Learn/JavaScript/First_steps/Arrays)風のオブジェクトである {{domxref("NodeList")}} に格納します。
@@ -125,14 +125,14 @@ JavaScript でよくあることですが、要素を選択し、その参照を
 1. 現在のの例題に戻って、 {{htmlelement("section")}} 要素を掴むところから始めましょう。すでに書いてあるスクリプトの下に次のコードを追加して下さい（この先の他の行についても、同じようにしてください）。
 
    ```js
-   const sect = document.querySelector('section');
+   const sect = document.querySelector("section");
    ```
 
 2. {{domxref("Document.createElement()")}} を使って新しい段落を作成し、先ほどと同じようにテキストコンテンツを与えてみましょう。
 
    ```js
-   const para = document.createElement('p');
-   para.textContent = 'We hope you enjoyed the ride.';
+   const para = document.createElement("p");
+   para.textContent = "We hope you enjoyed the ride.";
    ```
 
 3. この新しい段落は、セクションの最後に {{domxref("Node.appendChild()")}} を使って追加することができます。
@@ -144,13 +144,15 @@ JavaScript でよくあることですが、要素を選択し、その参照を
 4. 最後に、この部分のために、リンクがある段落にテキストノードを追加して、文章をきれいにまとめましょう。まず、 {{domxref("Document.createTextNode()")}}を使って、テキストノードを作成します。
 
    ```js
-   const text = document.createTextNode(' — the premier source for web development knowledge.');
+   const text = document.createTextNode(
+     " — the premier source for web development knowledge.",
+   );
    ```
 
 5. ここで、リンクが含まれている段落への参照を取得し、そこにテキストノードを追加します。
 
    ```js
-   const linkPara = document.querySelector('p');
+   const linkPara = document.querySelector("p");
    linkPara.appendChild(text);
    ```
 
@@ -199,11 +201,11 @@ linkPara.parentNode.removeChild(linkPara);
 1. 例として、作成中の例題に以下の行を追加してみて下さい。
 
    ```js
-   para.style.color = 'white';
-   para.style.backgroundColor = 'black';
-   para.style.padding = '10px';
-   para.style.width = '250px';
-   para.style.textAlign = 'center';
+   para.style.color = "white";
+   para.style.backgroundColor = "black";
+   para.style.padding = "10px";
+   para.style.width = "250px";
+   para.style.textAlign = "center";
    ```
 
 2. ページを再読み込みすると、スタイルがその段落に適用されていることがわかります。その段落をブラウザーの[ページインスペクター/DOM インスペクター](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html)で見てみると、これらの行が確かに文書内のスタイルを追加していることがわかります。
@@ -237,7 +239,7 @@ linkPara.parentNode.removeChild(linkPara);
 3. 次に、一般的な HTML 操作に有用なメソッドである {{domxref("Element.setAttribute()")}} を紹介します。これは 2 つの引数、要素に設定したい属性、および設定する値を使用します。この例では、段落に highlight というクラス名を設定します。
 
    ```js
-   para.setAttribute('class', 'highlight');
+   para.setAttribute("class", "highlight");
    ```
 
 4. ページを更新すると、何も変化がないことがわかります。CSS は引き続き段落に適用されていますが、今回はインライン CSS スタイルではなく、CSS ルールによって選択されたクラスが与えられています。
diff --git a/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.md b/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.md
index b93914f8dcf1e4..87e4d2bd8e6ea8 100644
--- a/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.md
+++ b/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.md
@@ -49,7 +49,7 @@ l10n:
 ```js
 const audioCtx = new AudioContext();
 // …
-const audioElement = document.querySelector('audio');
+const audioElement = document.querySelector("audio");
 // …
 const audioSource = audioCtx.createMediaElementSource(audioElement);
 // etc.
@@ -69,10 +69,10 @@ const audioSource = audioCtx.createMediaElementSource(audioElement);
 そのライブラリーで利用可能なオブジェクトを使い始めることができます。例えば以下のようにします。
 
 ```js
-const map = L.mapquest.map('map', {
+const map = L.mapquest.map("map", {
   center: [53.480759, -2.242631],
-  layers: L.mapquest.tileLayer('map'),
-  zoom: 12
+  layers: L.mapquest.tileLayer("map"),
+  zoom: 12,
 });
 ```
 
@@ -91,7 +91,7 @@ const map = L.mapquest.map('map', {
 Mapquest API の例には、次のような行があります。
 
 ```js
-L.mapquest.key = 'YOUR-API-KEY-HERE';
+L.mapquest.key = "YOUR-API-KEY-HERE";
 ```
 
 この行では、アプリケーションで使用する API キーまたは開発者キーを指定します。アプリケーションの開発者は、キーを取得して API の機能へのアクセス許可を得るためにコードに含める必要があります。この例では、プレースホルダーを用意しました。
@@ -115,7 +115,7 @@ API の他の機能の使用方法を示すために、Mapquest の例にさら
 Mapquest API で表示できる地図には、さまざまな種類があります。 これを行うには、次の行を見つけます。
 
 ```js
-layers: L.mapquest.tileLayer('map')
+layers: L.mapquest.tileLayer("map");
 ```
 
 hybrid-style map にするために `'map'` を `'hybrid'` に変えてみてください。他にも様々な値があります。 [`tileLayer` のリファレンスページ](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-tile-layer/) には使える様々なオプションや情報が載っています。
@@ -131,7 +131,7 @@ map.addControl(L.mapquest.control());
 [`mapquest.control()`](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-control/) メソッドは、単純なフル機能のコントロールセットを作成するだけで、デフォルトでは右上隅に配置されます。 `position` プロパティを含むコントロールのパラメータとしてオプションオブジェクトを指定することで、位置を調整することができます。例えば、次のようにしてみてください。
 
 ```js
-  map.addControl(L.mapquest.control({ position: 'bottomright' }));
+map.addControl(L.mapquest.control({ position: "bottomright" }));
 ```
 
 他にも、[`mapquest.searchControl()`](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-search-control/) や [`mapquest.satelliteControl()`](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-satellite-control/) など、利用可能なコントロールの種類があり、中には非常に複雑で強力なものもあります。実際に遊んでみて、何ができるか見てみましょう。
@@ -143,15 +143,15 @@ map.addControl(L.mapquest.control());
 ```js
 L.marker([53.480759, -2.242631], {
   icon: L.mapquest.icons.marker({
-    primaryColor: '#22407F',
-    secondaryColor: '#3B5998',
+    primaryColor: "#22407F",
+    secondaryColor: "#3B5998",
     shadow: true,
-    size: 'md',
-    symbol: 'A'
-  })
+    size: "md",
+    symbol: "A",
+  }),
 })
-.bindPopup('This is Manchester!')
-.addTo(map);
+  .bindPopup("This is Manchester!")
+  .addTo(map);
 ```
 
 ご覧のように、最もシンプルな方法では、2 つの引数を取ります。マーカーを表示する座標を含む配列と、その時点で表示するアイコンを定義する `icon` プロパティを含むオプションオブジェクトです。
@@ -197,15 +197,15 @@ L.marker([53.480759, -2.242631], {
 1. 次の行を探します。
 
    ```js
-   const key = 'INSERT-YOUR-API-KEY-HERE';
+   const key = "INSERT-YOUR-API-KEY-HERE";
    ```
 
-    既存の API キーを、前のセクションで取得した実際の API キーに置き換えます。
+   既存の API キーを、前のセクションで取得した実際の API キーに置き換えます。
 
 2. JavaScript の `// Event listeners to control the functionality` コメントの下に、以下の行を追加してください。これは、フォームが送信されたとき（ボタンが押されたとき）に `submitSearch()` という関数を実行します。
 
    ```js
-   searchForm.addEventListener('submit', submitSearch);
+   searchForm.addEventListener("submit", submitSearch);
    ```
 
 3. 前の行の下に `submitSearch()` と `fetchResults()` 関数の定義を追加します。
@@ -223,13 +223,13 @@ L.marker([53.480759, -2.242631], {
      // Assemble the full URL
      let url = `${baseURL}?api-key=${key}&page=${pageNumber}&q=${searchTerm.value}&fq=document_type:("article")`;
 
-     if (startDate.value !== '') {
+     if (startDate.value !== "") {
        url = `${url}&begin_date=${startDate.value}`;
-     };
+     }
 
-     if (endDate.value !== '') {
+     if (endDate.value !== "") {
        url = `${url}&end_date=${endDate.value}`;
-     };
+     }
    }
    ```
 
@@ -281,30 +281,30 @@ function displayResults(json) {
 
   const articles = json.response.docs;
 
-  nav.style.display = articles.length === 10 ? 'block' : 'none';
+  nav.style.display = articles.length === 10 ? "block" : "none";
 
   if (articles.length === 0) {
-    const para = document.createElement('p');
-    para.textContent = 'No results returned.'
+    const para = document.createElement("p");
+    para.textContent = "No results returned.";
     section.appendChild(para);
   } else {
     for (const current of articles) {
-      const article = document.createElement('article');
-      const heading = document.createElement('h2');
-      const link = document.createElement('a');
-      const img = document.createElement('img');
-      const para1 = document.createElement('p');
-      const keywordPara = document.createElement('p');
-      keywordPara.classList.add('keywords');
+      const article = document.createElement("article");
+      const heading = document.createElement("h2");
+      const link = document.createElement("a");
+      const img = document.createElement("img");
+      const para1 = document.createElement("p");
+      const keywordPara = document.createElement("p");
+      keywordPara.classList.add("keywords");
 
       console.log(current);
 
       link.href = current.web_url;
       link.textContent = current.headline.main;
       para1.textContent = current.snippet;
-      keywordPara.textContent = 'Keywords: ';
+      keywordPara.textContent = "Keywords: ";
       for (const keyword of current.keywords) {
-        const span = document.createElement('span');
+        const span = document.createElement("span");
         span.textContent = `${keyword.value} `;
         keywordPara.appendChild(span);
       }
@@ -322,7 +322,7 @@ function displayResults(json) {
       section.appendChild(article);
     }
   }
-};
+}
 ```
 
 ここにはたくさんのコードがあります。
@@ -345,8 +345,8 @@ function displayResults(json) {
 1. 既存の [`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) コールの下に、関連するボタンがクリックされたときに `nextPage()` および `previousPage()` 関数が呼び出されるように、これら 2 つの新しいものを追加します。
 
    ```js
-   nextBtn.addEventListener('click', nextPage);
-   previousBtn.addEventListener('click', previousPage);
+   nextBtn.addEventListener("click", nextPage);
+   previousBtn.addEventListener("click", previousPage);
    ```
 
 2. 前回の追加の下に、2 つの関数を定義してみましょう — 今すぐこのコードを追加します。
@@ -355,7 +355,7 @@ function displayResults(json) {
    function nextPage(e) {
      pageNumber++;
      fetchResults(e);
-   };
+   }
 
    function previousPage(e) {
      if (pageNumber > 0) {
@@ -364,12 +364,12 @@ function displayResults(json) {
        return;
      }
      fetchResults(e);
-   };
+   }
    ```
 
-    最初の関数は単純で、変数 `pageNumber` をインクリメントしてから、次のページの結果を表示するために `fetchResults()` 関数を再度実行します。
+   最初の関数は単純で、変数 `pageNumber` をインクリメントしてから、次のページの結果を表示するために `fetchResults()` 関数を再度実行します。
 
-    2 番目の関数は逆の方法でほぼ正確に同じように動作しますが、`pageNumber` がすでに 0 ではないことを確認するという余分なステップを踏まなければなりません — もしフェッチリクエストがマイナスの `page` 引数で実行された場合、エラーを引き起こす可能性があります。もし `pageNumber` がすでに 0 であれば、処理能力を無駄にしないように、単に関数から [`return`](/ja/docs/Web/JavaScript/Reference/Statements/return) します（すでに最初のページにいるのであれば、同じ結果を再び読み込む必要はありません）。
+   2 番目の関数は逆の方法でほぼ正確に同じように動作しますが、`pageNumber` がすでに 0 ではないことを確認するという余分なステップを踏まなければなりません — もしフェッチリクエストがマイナスの `page` 引数で実行された場合、エラーを引き起こす可能性があります。もし `pageNumber` がすでに 0 であれば、処理能力を無駄にしないように、単に関数から [`return`](/ja/docs/Web/JavaScript/Reference/Statements/return) します（すでに最初のページにいるのであれば、同じ結果を再び読み込む必要はありません）。
 
 > **メモ:** 完成した [NYTimes API のサンプルコードは GitHub で見ることができます](https://github.com/mdn/learning-area/blob/main/javascript/apis/third-party-apis/nytimes/index.html) （[ライブ動作はこちら](https://mdn.github.io/learning-area/javascript/apis/third-party-apis/nytimes/)）。
 
diff --git a/files/ja/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md b/files/ja/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
index 555251a0c88d3b..20a0b4dbd29ee8 100644
--- a/files/ja/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
+++ b/files/ja/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
@@ -42,7 +42,10 @@ HTML にはリッチメディアを文書内に埋め込むための要素、 {{
   <source src="rabbit320.mp4" type="video/mp4" />
   <source src="rabbit320.webm" type="video/webm" />
   <p>
-    お使いのブラウザーは HTML 動画に対応していません。代わりに<a href="rabbit320.mp4">動画へのリンク</a>があります。
+    お使いのブラウザーは HTML 動画に対応していません。代わりに<a
+      href="rabbit320.mp4"
+      >動画へのリンク</a
+    >があります。
   </p>
 </video>
 ```
@@ -142,7 +145,8 @@ HTML のインデックスファイルを開いてください。多くの機能
 @font-face {
   font-family: "HeydingsControlsRegular";
   src: url("fonts/heydings_controls-webfont.eot");
-  src: url("fonts/heydings_controls-webfont.eot?#iefix") format("embedded-opentype"),
+  src:
+    url("fonts/heydings_controls-webfont.eot?#iefix") format("embedded-opentype"),
     url("fonts/heydings_controls-webfont.woff") format("woff"),
     url("fonts/heydings_controls-webfont.ttf") format("truetype");
   font-weight: normal;
@@ -212,17 +216,17 @@ button:before {
 2. このファイルの一番上に、以下のコードを挿入してください。
 
    ```js
-   const media = document.querySelector('video');
-   const controls = document.querySelector('.controls');
+   const media = document.querySelector("video");
+   const controls = document.querySelector(".controls");
 
-   const play = document.querySelector('.play');
-   const stop = document.querySelector('.stop');
-   const rwd = document.querySelector('.rwd');
-   const fwd = document.querySelector('.fwd');
+   const play = document.querySelector(".play");
+   const stop = document.querySelector(".stop");
+   const rwd = document.querySelector(".rwd");
+   const fwd = document.querySelector(".fwd");
 
-   const timerWrapper = document.querySelector('.timer');
-   const timer = document.querySelector('.timer span');
-   const timerBar = document.querySelector('.timer div');
+   const timerWrapper = document.querySelector(".timer");
+   const timer = document.querySelector(".timer span");
+   const timerBar = document.querySelector(".timer div");
    ```
 
    ここでは、操作したいすべてのオブジェクトへの参照を保持するための定数を作成しています。 3 つのグループを持っています。
@@ -234,11 +238,11 @@ button:before {
 3. 次に、コードの一番下に以下のものを挿入してください。
 
    ```js
-   media.removeAttribute('controls');
-   controls.style.visibility = 'visible';
+   media.removeAttribute("controls");
+   controls.style.visibility = "visible";
    ```
 
-  この 2 行は、既定のブラウザーコントロールを動画から削除し、カスタムコントロールを表示するようにします。
+この 2 行は、既定のブラウザーコントロールを動画から削除し、カスタムコントロールを表示するようにします。
 
 #### 動画の再生と一時停止
 
@@ -247,7 +251,7 @@ button:before {
 1. まず最初に、以下のコードをコードの一番下に追加し、再生ボタンがクリックされたときに `playPauseMedia()` 関数が呼び出されるようにします。
 
    ```js
-   play.addEventListener('click', playPauseMedia);
+   play.addEventListener("click", playPauseMedia);
    ```
 
 2. 次に、`playPauseMedia()` を定義するために、以下のことを、再びコードの一番下に追加してください。
@@ -255,10 +259,10 @@ button:before {
    ```js
    function playPauseMedia() {
      if (media.paused) {
-       play.setAttribute('data-icon','u');
+       play.setAttribute("data-icon", "u");
        media.play();
      } else {
-       play.setAttribute('data-icon','P');
+       play.setAttribute("data-icon", "P");
        media.pause();
      }
    }
@@ -273,8 +277,8 @@ button:before {
 1. 次に、動画の停止を処理する機能を追加しましょう。前回追加した行の下に、以下の [`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) 行を追加してください。
 
    ```js
-   stop.addEventListener('click', stopMedia);
-   media.addEventListener('ended', stopMedia);
+   stop.addEventListener("click", stopMedia);
+   media.addEventListener("ended", stopMedia);
    ```
 
    {{domxref("Element/click_event", "click")}} イベントは明らかです。停止ボタンがクリックされたときに `stopMedia()` 関数を実行して動画を停止させたいのです。しかし、再生が完了したときにも動画を停止したいのです。これは {{domxref("HTMLMediaElement/ended_event", "ended")}} イベントが発行されることによって示されるので、そのイベント発行時にも関数を実行するようリスナーを設定します。
@@ -285,11 +289,11 @@ button:before {
    function stopMedia() {
      media.pause();
      media.currentTime = 0;
-     play.setAttribute('data-icon','P');
+     play.setAttribute("data-icon", "P");
    }
    ```
 
-    `stop()` メソッドは HTMLMediaElement API にはありません。代わりに、動画を `pause()` して、その {{domxref("HTMLMediaElement.currentTime", "currentTime")}} プロパティを 0 に設定します。 `currentTime` に値 (秒単位) を設定すると、その位置にメディアがすぐにジャンプします。
+   `stop()` メソッドは HTMLMediaElement API にはありません。代わりに、動画を `pause()` して、その {{domxref("HTMLMediaElement.currentTime", "currentTime")}} プロパティを 0 に設定します。 `currentTime` に値 (秒単位) を設定すると、その位置にメディアがすぐにジャンプします。
 
    後は、表示されているアイコンを「再生」アイコンに設定するだけです。停止ボタンが押されたときに動画が一時停止していたか再生していたかに関係なく、その後再生できる状態にしたいのです。
 
@@ -300,8 +304,8 @@ button:before {
 1. まず、最初の行の下に、以下の 2 つの [`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) の行を追加してください。
 
    ```js
-   rwd.addEventListener('click', mediaBackward);
-   fwd.addEventListener('click', mediaForward);
+   rwd.addEventListener("click", mediaBackward);
+   fwd.addEventListener("click", mediaForward);
    ```
 
 2. 次に、イベントハンドラー関数について説明します。先ほどの関数の下に、次のコードを追加して `mediaBackward()` と `mediaForward()` を定義してください。
@@ -312,14 +316,14 @@ button:before {
 
    function mediaBackward() {
      clearInterval(intervalFwd);
-     fwd.classList.remove('active');
+     fwd.classList.remove("active");
 
-     if (rwd.classList.contains('active')) {
-       rwd.classList.remove('active');
+     if (rwd.classList.contains("active")) {
+       rwd.classList.remove("active");
        clearInterval(intervalRwd);
        media.play();
      } else {
-       rwd.classList.add('active');
+       rwd.classList.add("active");
        media.pause();
        intervalRwd = setInterval(windBackward, 200);
      }
@@ -327,14 +331,14 @@ button:before {
 
    function mediaForward() {
      clearInterval(intervalRwd);
-     rwd.classList.remove('active');
+     rwd.classList.remove("active");
 
-     if (fwd.classList.contains('active')) {
-       fwd.classList.remove('active');
+     if (fwd.classList.contains("active")) {
+       fwd.classList.remove("active");
        clearInterval(intervalFwd);
        media.play();
      } else {
-       fwd.classList.add('active');
+       fwd.classList.add("active");
        media.pause();
        intervalFwd = setInterval(windForward, 200);
      }
@@ -355,7 +359,7 @@ button:before {
    ```js
    function windBackward() {
      if (media.currentTime <= 3) {
-       rwd.classList.remove('active');
+       rwd.classList.remove("active");
        clearInterval(intervalRwd);
        stopMedia();
      } else {
@@ -365,7 +369,7 @@ button:before {
 
    function windForward() {
      if (media.currentTime >= media.duration - 3) {
-       fwd.classList.remove('active');
+       fwd.classList.remove("active");
        clearInterval(intervalFwd);
        stopMedia();
      } else {
@@ -386,7 +390,7 @@ button:before {
 他にも、以下の `addEventListener()` 行を追加してください。
 
 ```js
-media.addEventListener('timeupdate', setTime);
+media.addEventListener("timeupdate", setTime);
 ```
 
 次に、 `setTime()` 関数を定義します。ファイルの一番下に以下のように追加してください。
@@ -396,13 +400,14 @@ function setTime() {
   const minutes = Math.floor(media.currentTime / 60);
   const seconds = Math.floor(media.currentTime - minutes * 60);
 
-  const minuteValue = minutes.toString().padStart(2, '0');
-  const secondValue = seconds.toString().padStart(2, '0');
+  const minuteValue = minutes.toString().padStart(2, "0");
+  const secondValue = seconds.toString().padStart(2, "0");
 
   const mediaTime = `${minuteValue}:${secondValue}`;
   timer.textContent = mediaTime;
 
-  const barLength = timerWrapper.clientWidth * (media.currentTime/media.duration);
+  const barLength =
+    timerWrapper.clientWidth * (media.currentTime / media.duration);
   timerBar.style.width = `${barLength}px`;
 }
 ```
@@ -423,8 +428,8 @@ function setTime() {
 まず、`stopMedia()` 関数の中に以下の行を追加してください。どこでも構いません。
 
 ```js
-rwd.classList.remove('active');
-fwd.classList.remove('active');
+rwd.classList.remove("active");
+fwd.classList.remove("active");
 clearInterval(intervalRwd);
 clearInterval(intervalFwd);
 ```
@@ -446,9 +451,9 @@ clearInterval(intervalFwd);
 3. タイマーの内側の `<div>` 要素を真のシークバー/スクローラーにする方法はうまくいきそうですか。ヒントとして、要素の左右と上下の X と Y の値は [`getBoundingClientRect()`](/ja/docs/Web/API/Element/getBoundingClientRect) メソッドで、マウスクリックの座標は {{domxref("Document")}} オブジェクトで呼び出されるクリックイベントのオブジェクトで見つけることができます。例を挙げます。
 
    ```js
-   document.onclick = function(e) {
+   document.onclick = function (e) {
      console.log(e.x, e.y);
-   }
+   };
    ```
 
 ## 関連情報
diff --git a/files/ja/learn/javascript/first_steps/a_first_splash/index.md b/files/ja/learn/javascript/first_steps/a_first_splash/index.md
index d3bf1b8b0ae22b..625b2a6a24a070 100644
--- a/files/ja/learn/javascript/first_steps/a_first_splash/index.md
+++ b/files/ja/learn/javascript/first_steps/a_first_splash/index.md
@@ -153,21 +153,21 @@ JavaScript の理論、そしてそれを使ってできることについて学
 5. 入力された数字が正しいかどうかを調べる。
 6. 入力された数字が正しい場合...
 
-    1. 正解したお祝いのメッセージを表示する。
-    2. プレイヤーが次の予想を出来ないようにする。(ゲームがおかしくならないように)
-    3. プレイヤーが次のゲームを始められるようなコントロールを表示する。
+   1. 正解したお祝いのメッセージを表示する。
+   2. プレイヤーが次の予想を出来ないようにする。(ゲームがおかしくならないように)
+   3. プレイヤーが次のゲームを始められるようなコントロールを表示する。
 
 7. プレイヤーの予想が間違いで、予想回数の上限にはまだ達していない場合...
 
-    1. プレイヤーが間違っていることを表示する。
-    2. 次の予想を入力できるようにする。
-    3. 予想回数に 1 を加算する。
+   1. プレイヤーが間違っていることを表示する。
+   2. 次の予想を入力できるようにする。
+   3. 予想回数に 1 を加算する。
 
 8. プレイヤーの予想が間違いで、予想回数の上限に達した場合...
 
-    1. プレイヤーにゲームオーバーであることを伝える。
-    2. プレイヤーが次の予想を出来ないようにする。(ゲームがおかしくならないように)
-    3. プレイヤーが次のゲームを始められるようなコントロールを表示する。
+   1. プレイヤーにゲームオーバーであることを伝える。
+   2. プレイヤーが次の予想を出来ないようにする。(ゲームがおかしくならないように)
+   3. プレイヤーが次のゲームを始められるようなコントロールを表示する。
 
 9. ゲームがもう一度始まったら、画面とロジックが完全にリセットされるようにして、1.に戻る。
 
@@ -181,9 +181,7 @@ JavaScript の理論、そしてそれを使ってできることについて学
 
 ```html
 <script>
-
   // JavaScript をここに書きます
-
 </script>
 ```
 
@@ -194,12 +192,12 @@ JavaScript の理論、そしてそれを使ってできることについて学
 ```js
 let randomNumber = Math.floor(Math.random() * 100) + 1;
 
-const guesses = document.querySelector('.guesses');
-const lastResult = document.querySelector('.lastResult');
-const lowOrHi = document.querySelector('.lowOrHi');
+const guesses = document.querySelector(".guesses");
+const lastResult = document.querySelector(".lastResult");
+const lowOrHi = document.querySelector(".lowOrHi");
 
-const guessSubmit = document.querySelector('.guessSubmit');
-const guessField = document.querySelector('.guessField');
+const guessSubmit = document.querySelector(".guessSubmit");
+const guessField = document.querySelector(".guessField");
 
 let guessCount = 1;
 let resetButton;
@@ -225,8 +223,9 @@ let resetButton;
 - 次の 2 つの定数にはテキスト入力フォームおよび送信ボタンへの参照が保持され、後で予想の送信をコントロールする際に使用されます。
 
   ```html
-  <label for="guessField">予想を入力してください: </label><input type="text" id="guessField" class="guessField">
-  <input type="submit" value="予想を投稿" class="guessSubmit">
+  <label for="guessField">予想を入力してください: </label
+  ><input type="text" id="guessField" class="guessField" />
+  <input type="submit" value="予想を投稿" class="guessSubmit" />
   ```
 
 - 最後の 2 つの変数はプレイヤーが予想した回数を記録するため 1 を (プレイヤーが何回予想したかの回数を追跡します) 、そしてまだ存在していない(あとで追加する)リセットボタンへの参照を保持します。
@@ -239,7 +238,7 @@ let resetButton;
 
 ```js
 function checkGuess() {
-  alert('ここはプレースホルダです');
+  alert("ここはプレースホルダです");
 }
 ```
 
@@ -275,9 +274,9 @@ JavaScript で演算子を使用して値の確認をしたり、計算したり
 また、 `+` 演算子は 2 つの文字を繋げて一つにするときにも使います。(プログラミングでは文字列を*結合*すると言います。) 下の例も試してみてください。
 
 ```js
-let name = 'ビンゴさん';
+let name = "ビンゴさん";
 name;
-let hello = 'が、こんにちは！と言っています。';
+let hello = "が、こんにちは！と言っています。";
 hello;
 let greeting = name + hello;
 greeting;
@@ -286,13 +285,13 @@ greeting;
 累算[代入演算子](/ja/docs/Web/JavaScript/Reference/Operators/Assignment_Operators)と呼ばれるもっと短い書き方もあります。すでにある文字列に、さらに文字を追加した結果を返したい場合などに使います。例えば、
 
 ```js
-name += 'が、こんにちは！と言っています。';
+name += "が、こんにちは！と言っています。";
 ```
 
 のように書いたとき、次と同じです:
 
 ```js
-name = name + 'が、こんにちは！と言っています。';
+name = name + "が、こんにちは！と言っています。";
 ```
 
 true/false テスト（例えば条件内 - [below](#conditionals)参照）を実行しているとき、[比較演算子](/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators)を使用します。例えば：
@@ -363,30 +362,30 @@ true/false テスト（例えば条件内 - [below](#conditionals)参照）を
 function checkGuess() {
   let userGuess = Number(guessField.value);
   if (guessCount === 1) {
-    guesses.textContent = '前回の予想: ';
+    guesses.textContent = "前回の予想: ";
   }
-  guesses.textContent += userGuess + ' ';
+  guesses.textContent += userGuess + " ";
 
   if (userGuess === randomNumber) {
-    lastResult.textContent = 'おめでとう! 正解です!';
-    lastResult.style.backgroundColor = 'green';
-    lowOrHi.textContent = '';
+    lastResult.textContent = "おめでとう! 正解です!";
+    lastResult.style.backgroundColor = "green";
+    lowOrHi.textContent = "";
     setGameOver();
   } else if (guessCount === 10) {
-    lastResult.textContent = '!!!ゲームオーバー!!!';
+    lastResult.textContent = "!!!ゲームオーバー!!!";
     setGameOver();
   } else {
-    lastResult.textContent = '間違いです!';
-    lastResult.style.backgroundColor = 'red';
-    if(userGuess < randomNumber) {
-      lowOrHi.textContent='今の予想は小さすぎです!' ;
-    } else if(userGuess > randomNumber) {
-      lowOrHi.textContent = '今の予想は大きすぎです!';
+    lastResult.textContent = "間違いです!";
+    lastResult.style.backgroundColor = "red";
+    if (userGuess < randomNumber) {
+      lowOrHi.textContent = "今の予想は小さすぎです!";
+    } else if (userGuess > randomNumber) {
+      lowOrHi.textContent = "今の予想は大きすぎです!";
     }
   }
 
   guessCount++;
-  guessField.value = '';
+  guessField.value = "";
   guessField.focus();
 }
 ```
@@ -397,7 +396,7 @@ function checkGuess() {
 - 次に、初めて条件分岐を伴うコードブロックが出てきます (3 行目～ 5 行目)。条件分岐は、条件の判定結果が真 (true) であるかどうかによって、次に実行するコードが変わります。見た目が少しだけ関数に似ていますが、違うものです。条件分岐の最も単純な書き方は `if` キーワードから始まり、括弧が続き、中括弧が続きます。括弧の中には分岐する条件を書きます。条件が `true` となれば、中括弧の中にあるコードが実行されます。条件が `true` にならなければ、中括弧の次のコードまで移動します。今回の条件は `guessCount` 変数が `1` であるかどうかを判定しています。(つまり、プレイヤーの初回の予想かどうかを判定しているのです。)
 
   ```js
-  guessCount === 1
+  guessCount === 1;
   ```
 
   もしそうなら、`guesses` 段落 ({{htmlelement("p")}}要素) の内容を "`前回の予想:`" に変更します。違うなら、何もしません。
@@ -418,7 +417,7 @@ function checkGuess() {
 `checkGuess()` 関数の下に、以下の一文を加えましょう。
 
 ```js
-guessSubmit.addEventListener('click', checkGuess);
+guessSubmit.addEventListener("click", checkGuess);
 ```
 
 `guessSubmit` ボタンに対して、イベントリスナーを追加しました。これは発生したことを知りたいイベントの種類 (この場合は `click`)と、イベントが発生した場合に実行するコード (この場合は `checkGuess()`) の 2 つの入力値 (*引数*と言います) を取る関数です。({{domxref("EventTarget.addEventListener", "addEventListener()")}}の中では括弧を書く必要はありません。)
@@ -433,10 +432,10 @@ guessSubmit.addEventListener('click', checkGuess);
 function setGameOver() {
   guessField.disabled = true;
   guessSubmit.disabled = true;
-  resetButton = document.createElement('button');
-  resetButton.textContent = '新しいゲームを始める';
+  resetButton = document.createElement("button");
+  resetButton.textContent = "新しいゲームを始める";
   document.body.appendChild(resetButton);
-  resetButton.addEventListener('click', resetGame);
+  resetButton.addEventListener("click", resetGame);
 }
 ```
 
@@ -450,19 +449,19 @@ function setGameOver() {
 function resetGame() {
   guessCount = 1;
 
-  const resetParas = document.querySelectorAll('.resultParas p');
-  for (let i = 0 ; i < resetParas.length ; i++) {
-    resetParas[i].textContent = '';
+  const resetParas = document.querySelectorAll(".resultParas p");
+  for (let i = 0; i < resetParas.length; i++) {
+    resetParas[i].textContent = "";
   }
 
   resetButton.parentNode.removeChild(resetButton);
 
   guessField.disabled = false;
   guessSubmit.disabled = false;
-  guessField.value = '';
+  guessField.value = "";
   guessField.focus();
 
-  lastResult.style.backgroundColor = 'white';
+  lastResult.style.backgroundColor = "white";
 
   randomNumber = Math.floor(Math.random() * 100) + 1;
 }
@@ -488,7 +487,9 @@ function resetGame() {
 [ブラウザーの開発者ツールの JavaScript コンソール](/ja/docs/Learn/Common_questions/What_are_browser_developer_tools) をもう一度開いて次のコードを入力してみましょう。
 
 ```js
-for (let i = 1 ; i < 21 ; i++) { console.log(i) }
+for (let i = 1; i < 21; i++) {
+  console.log(i);
+}
 ```
 
 どうでしょうか。`1` から `20` の数字がコンソールに出力されましたね。これが繰り返しです。`for` ループには 3 つの入力値 (引数) が必要です。
@@ -500,9 +501,9 @@ for (let i = 1 ; i < 21 ; i++) { console.log(i) }
 さて、それでは数字当てゲームに登場したループを見てみましょう。`resetGame()` 関数に以下の記述がありますね。
 
 ```js
-const resetParas = document.querySelectorAll('.resultParas p');
-for (let i = 0 ; i < resetParas.length ; i++) {
-  resetParas[i].textContent = '';
+const resetParas = document.querySelectorAll(".resultParas p");
+for (let i = 0; i < resetParas.length; i++) {
+  resetParas[i].textContent = "";
 }
 ```
 
@@ -523,7 +524,7 @@ guessField.focus();
 この具体的なケースでは、HTML のテキスト入力フィールドを参照するために、最初に `guessField` 変数を作成しました。以下の行は最上部のあたりの変数定義で見つかります、
 
 ```js
-const guessField = document.querySelector('.guessField');
+const guessField = document.querySelector(".guessField");
 ```
 
 この参照を得るため、{{domxref("document")}} オブジェクトの{{domxref("document.querySelector", "querySelector()")}} メソッドを使用しています。`querySelector()` はある情報 (必要な要素を選択する [CSS セレクタ](/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors)) を受け取ります。
@@ -545,46 +546,46 @@ guessField.focus();
 3. `guessField` と入力してみてください。するとコンソールに {{htmlelement("input")}} 要素を含む変数が表示されます。また、気づいたと思いますが、コンソールは実行中の環境にある変数名を含んだオブジェクト名を自動的に補完しました!
 4. さらに下のように入力してみてください
 
-    ```js
-    guessField.value = 'Hello';
-    ```
+   ```js
+   guessField.value = "Hello";
+   ```
 
-    `value` プロパティは今のテキストフィールドに入力された値を表しています。コマンドを入力したら、テキストフィールドの値が変わりましたね！
+   `value` プロパティは今のテキストフィールドに入力された値を表しています。コマンドを入力したら、テキストフィールドの値が変わりましたね！
 
 5. さらに続けて `guesses` と入力して&#x20;
 
-    <kbd>Return</kbd>
+   <kbd>Return</kbd>
 
-    /
+   /
 
-    <kbd>Enter</kbd>
+   <kbd>Enter</kbd>
 
-    &#x20;を押します。{{htmlelement("p")}} 要素を含む変数がコンソールに表示されますね。
+   &#x20;を押します。{{htmlelement("p")}} 要素を含む変数がコンソールに表示されますね。
 
 6. そして次のコードを入力します
 
-    ```js
-    guesses.value
-    ```
+   ```js
+   guesses.value;
+   ```
 
-    コンソールには `undefined` (未定義) という文字が返ってきましたね。`value` というプロパティは {{htmlelement("p")}} 要素にはないためです。
+   コンソールには `undefined` (未定義) という文字が返ってきましたね。`value` というプロパティは {{htmlelement("p")}} 要素にはないためです。
 
 7. パラグラフ内のテキストを変えたい場合には、{{domxref("Node.textContent", "textContent")}} プロパティを使用する必要があります。こうしてみます
 
-    ```js
-    guesses.textContent = 'Where is my paragraph?';
-    ```
+   ```js
+   guesses.textContent = "Where is my paragraph?";
+   ```
 
 8. ちょっと遊んでみましょう。下のコードをひとつづつ入力してみてください。
 
-    ```js
-    guesses.style.backgroundColor = 'yellow';
-    guesses.style.fontSize = '200%';
-    guesses.style.padding = '10px';
-    guesses.style.boxShadow = '3px 3px 6px black';
-    ```
+   ```js
+   guesses.style.backgroundColor = "yellow";
+   guesses.style.fontSize = "200%";
+   guesses.style.padding = "10px";
+   guesses.style.boxShadow = "3px 3px 6px black";
+   ```
 
-    ページ内に存在するすべての要素は `style` プロパティを持っていて、そのオブジェクトを介して CSS のインラインスタイルで要素に適用されるすべてのプロパティにアクセスすることができます。これを使うことで、JavaScript から動的に要素の CSS のスタイルを設定できるのです。
+   ページ内に存在するすべての要素は `style` プロパティを持っていて、そのオブジェクトを介して CSS のインラインスタイルで要素に適用されるすべてのプロパティにアクセスすることができます。これを使うことで、JavaScript から動的に要素の CSS のスタイルを設定できるのです。
 
 ## ここで一息
 
diff --git a/files/ja/learn/javascript/first_steps/arrays/index.md b/files/ja/learn/javascript/first_steps/arrays/index.md
index 9306f9028f4348..c41584a76cbdcf 100644
--- a/files/ja/learn/javascript/first_steps/arrays/index.md
+++ b/files/ja/learn/javascript/first_steps/arrays/index.md
@@ -25,17 +25,17 @@ slug: Learn/JavaScript/First_steps/Arrays
 
 1. 買い物リストを配列に保持したいとき、次のようにします。下のコードをコンソールに入力してみましょう。
 
-    ```js
-    let shopping = ['パン', '牛乳', 'チーズ', 'ハム', '麺'];
-    shopping;
-    ```
+   ```js
+   let shopping = ["パン", "牛乳", "チーズ", "ハム", "麺"];
+   shopping;
+   ```
 
 2. この例では、配列の各項目は文字列ですが、配列には何でも格納することができることを頭に入れておきましょう。文字列、数値、オブジェクト、その他の変数、さらには別の配列ですら格納することができます。そして混ぜ合わせることも。すべて同じデータ型である必要はありません。
 
-    ```js
-    let sequence = [1, 1, 2, 3, 5, 8, 13];
-    let random = ['tree', 795, [0, 1, 2]];
-    ```
+   ```js
+   let sequence = [1, 1, 2, 3, 5, 8, 13];
+   let random = ["tree", 795, [0, 1, 2]];
+   ```
 
 3. いくつか配列を作ってみましょう。それから先に進みます。
 
@@ -45,26 +45,26 @@ slug: Learn/JavaScript/First_steps/Arrays
 
 1. 次のコードをコンソールに入力してください。
 
-    ```js
-    shopping[0];
-    // "パン"という値が戻ります
-    ```
+   ```js
+   shopping[0];
+   // "パン"という値が戻ります
+   ```
 
 2. そして、配列中の項目は単に新しい値を代入することで変更することが出来ます。
 
-    ```js
-    shopping[0] = 'タヒーニ';
-    shopping;
-    // ショッピングリストは[ "タヒーニ", "牛乳", "チーズ", "ハム", "麺" ]に変更されています。
-    ```
+   ```js
+   shopping[0] = "タヒーニ";
+   shopping;
+   // ショッピングリストは[ "タヒーニ", "牛乳", "チーズ", "ハム", "麺" ]に変更されています。
+   ```
 
-    > **メモ:** 前にも言いましたが、重要なことなのでもう一度言います。コンピューターは 0 から数を数えます！
+   > **メモ:** 前にも言いましたが、重要なことなのでもう一度言います。コンピューターは 0 から数を数えます！
 
 3. 配列の中に配列があるとき、その配列は多次元配列と呼ばれます。配列中の配列に含まれる項目には角括弧を繋げて書くことでアクセスすることができます。例えば、先ほどの例で出てきた `random` 変数に格納された配列の 3 番目の項目のさらに 3 番目の項目を取得するには以下のようにします。
 
-    ```js
-    random[2][2];
-    ```
+   ```js
+   random[2][2];
+   ```
 
 4. 移動する前に、配列の例をいくつか変更してみてください。遊んでみて、何が動いて何がそうでないかを見てください
 
@@ -104,97 +104,97 @@ for (let i = 0; i < sequence.length; i++) {
 
 1. それではどのように動くか試してみましょう。まずは文字列をコンソールに作ります。
 
-    ```js
-    let myData = '札幌,仙台,東京,名古屋,大阪,博多';
-    ```
+   ```js
+   let myData = "札幌,仙台,東京,名古屋,大阪,博多";
+   ```
 
 2. この文字列をカンマで区切ります。
 
-    ```js
-    let myArray = myData.split(',');
-    myArray;
-    ```
+   ```js
+   let myArray = myData.split(",");
+   myArray;
+   ```
 
 3. そして、できた配列の長さを確認して、その中身を見てみましょう。
 
-    ```js
-    myArray.length;
-    myArray[0]; // 配列の最初の項目
-    myArray[1]; // 配列の二番目の項目
-    myArray[myArray.length-1]; // 配列の最後の項目
-    ```
+   ```js
+   myArray.length;
+   myArray[0]; // 配列の最初の項目
+   myArray[1]; // 配列の二番目の項目
+   myArray[myArray.length - 1]; // 配列の最後の項目
+   ```
 
 4. {{jsxref("Array.prototype.join()","join()")}} メソッドを使うことで、逆のことができます。
 
-    ```js
-    let myNewString = myArray.join(',');
-    myNewString;
-    ```
+   ```js
+   let myNewString = myArray.join(",");
+   myNewString;
+   ```
 
 5. 配列を文字列にするもう一つの方法は、{{jsxref("Array.prototype.toString()","toString()")}} メソッドを使うことです。引数を取らない `toString()` は `join()` と比べ簡単でしょうが、制限があります。`join()` を使えば、他の区切り文字を指定することもできます (4. の例をカンマ以外の他の文字を指定して試してください)。
 
-    ```js
-    let dogNames = ['ポチ','ハチ','タロウ','モコ'];
-    dogNames.toString(); //ポチ,ハチ,タロウ,モコ
-    ```
+   ```js
+   let dogNames = ["ポチ", "ハチ", "タロウ", "モコ"];
+   dogNames.toString(); //ポチ,ハチ,タロウ,モコ
+   ```
 
 ### 項目の追加と削除
 
 まだ配列への項目の追加と削除をやっていませんでしたね。次はこれをやりましょう。先ほどの例にあった `myArray` 配列を使用します。先ほどの例をまだ実行していなければ、以下のコードをコンソールに入力して配列を作ってください。
 
 ```js
-let myArray = ['札幌', '仙台', '東京', '名古屋', '大阪', '博多'];
+let myArray = ["札幌", "仙台", "東京", "名古屋", "大阪", "博多"];
 ```
 
 まず、配列の最後に項目を追加したり、最後の項目を削除するには、それぞれ {{jsxref("Array.prototype.push()","push()")}} と {{jsxref("Array.prototype.pop()","pop()")}} を使います。
 
 1. 先に `push()` を使ってみます。配列の最後に項目を追加するには 1 つ以上の項目を引数に指定します。
 
-    ```js
-    myArray.push('横浜');
-    myArray;
-    myArray.push('神戸', '広島');
-    myArray;
-    ```
+   ```js
+   myArray.push("横浜");
+   myArray;
+   myArray.push("神戸", "広島");
+   myArray;
+   ```
 
 2. メソッドの呼び出しが終わると、新しい配列の長さが返ります。もし新しい配列の長さを変数に格納したければ、次のようにできます。
 
-    ```js
-    let newLength = myArray.push('京都');
-    myArray;
-    newLength;
-    ```
+   ```js
+   let newLength = myArray.push("京都");
+   myArray;
+   newLength;
+   ```
 
 3. 配列の最後の要素を削除するには `pop()` を呼び出すだけです。
 
-    ```js
-    myArray.pop();
-    ```
+   ```js
+   myArray.pop();
+   ```
 
 4. メソッドの呼び出しが終わると、削除された項目それ自体が返ります。
 
-    ```js
-    let removedItem = myArray.pop();
-    myArray;
-    removedItem;
-    ```
+   ```js
+   let removedItem = myArray.pop();
+   myArray;
+   removedItem;
+   ```
 
 {{jsxref("Array.prototype.unshift()","unshift()")}} と {{jsxref("Array.prototype.shift()","shift()")}} はそれぞれ `push()` や `pop()` と同様の動作ですが、配列の末尾ではなく先頭において動作します。
 
 1. まずは、`unshift()` を次のように実行します。
 
-    ```js
-    myArray.unshift('奈良');
-    myArray;
-    ```
+   ```js
+   myArray.unshift("奈良");
+   myArray;
+   ```
 
 2. 今度は `shift()` でやってみましょう！
 
-    ```js
-    let removedItem = myArray.shift();
-    myArray;
-    removedItem;
-    ```
+   ```js
+   let removedItem = myArray.shift();
+   myArray;
+   removedItem;
+   ```
 
 ## アクティブラーニング: 商品を印字しよう！
 
@@ -211,18 +211,17 @@ let myArray = ['札幌', '仙台', '東京', '名古屋', '大阪', '博多'];
 <h2>出力結果</h2>
 
 <div class="output" style="min-height: 150px;">
+  <ul></ul>
 
-<ul>
-
-</ul>
-
-<p></p>
-
+  <p></p>
 </div>
 
 <h2>コードエディター</h2>
 
-<p class="a11y-label">コードエディターから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p>
+<p class="a11y-label">
+  コードエディターから抜けるには Esc
+  キーを押して下さい(タブキーではタブ文字を挿入します)。
+</p>
 
 <textarea id="code" class="playable-code" style="height: 410px;width: 95%">
 const list = document.querySelector('.output ul');
@@ -254,15 +253,15 @@ totalBox.textContent = '合計: $' + total.toFixed(2);
 </textarea>
 
 <div class="playable-buttons">
-  <input id="reset" type="button" value="リセット">
-  <input id="solution" type="button" value="答えを見る">
+  <input id="reset" type="button" value="リセット" />
+  <input id="solution" type="button" value="答えを見る" />
 </div>
 ```
 
 ```js hidden
-const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
 let code = textarea.value;
 let userEntry = textarea.value;
 
@@ -270,41 +269,41 @@ function updateCode() {
   eval(textarea.value);
 }
 
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = jsSolution;
-  solution.value = 'Show solution';
+  solution.value = "Show solution";
   updateCode();
 });
 
-solution.addEventListener('click', function() {
-  if(solution.value === '答えを見る') {
+solution.addEventListener("click", function () {
+  if (solution.value === "答えを見る") {
     textarea.value = solutionEntry;
-    solution.value = '答えを隠す';
+    solution.value = "答えを隠す";
   } else {
     textarea.value = userEntry;
-    solution.value = '答えを見る';
+    solution.value = "答えを見る";
   }
   updateCode();
 });
 
-const jsSolution = 'const list = document.querySelector(\'.output ul\');\nconst totalBox = document.querySelector(\'.output p\');\nlet total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nlet products = [\'パンツ:6.99\',\n  \'靴下:5.99\',\n  \'T シャツ:14.99\',\n  \'ズボン:31.99\',\n  \'靴:23.99\'];\n\nfor(let i = 0; i < products.length; i++) {\n  let subArray = products[i].split(\':\');\n  let name = subArray[0];\n  let price = Number(subArray[1]);\n  total += price;\n  itemText = name + \' — $\' + price;\n\n  let listItem = document.createElement(\'li\');\n  listItem.textContent = itemText;\n  list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'合計: $\' + total.toFixed(2);';
+const jsSolution =
+  "const list = document.querySelector('.output ul');\nconst totalBox = document.querySelector('.output p');\nlet total = 0;\nlist.innerHTML = '';\ntotalBox.textContent = '';\n\nlet products = ['パンツ:6.99',\n  '靴下:5.99',\n  'T シャツ:14.99',\n  'ズボン:31.99',\n  '靴:23.99'];\n\nfor(let i = 0; i < products.length; i++) {\n  let subArray = products[i].split(':');\n  let name = subArray[0];\n  let price = Number(subArray[1]);\n  total += price;\n  itemText = name + ' — $' + price;\n\n  let listItem = document.createElement('li');\n  listItem.textContent = itemText;\n  list.appendChild(listItem);\n}\n\ntotalBox.textContent = '合計: $' + total.toFixed(2);";
 let solutionEntry = jsSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // タブキーでテキストエリアから抜けてしまうのを防ぎ、
 // 代わりにカーソル位置にタブ文字を挿入する
 
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
   if (e.keyCode === 9) {
     e.preventDefault();
-    insertAtCaret('\t');
+    insertAtCaret("\t");
   }
 
-
   if (e.keyCode === 27) {
     textarea.blur();
   }
@@ -313,8 +312,11 @@ textarea.onkeydown = function(e){
 function insertAtCaret(text) {
   const scrollPos = textarea.scrollTop;
   const caretPos = textarea.selectionStart;
-  const front = (textarea.value).substring(0, caretPos);
-  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  const front = textarea.value.substring(0, caretPos);
+  const back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
 
   textarea.value = front + text + back;
   caretPos = caretPos + text.length;
@@ -326,10 +328,10 @@ function insertAtCaret(text) {
 
 // ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する
 
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
   // ユーザーのコードが表示されているときのみ状態を保存し、
   // 答えのコードでユーザーコードが上書きされないようにする
-  if(solution.value === '答えを見る') {
+  if (solution.value === "答えを見る") {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
@@ -379,19 +381,17 @@ body {
 ```html hidden
 <h2>出力結果</h2>
 <div class="output" style="min-height: 150px;">
+  <input type="text" /><button>検索</button>
 
-<input type="text"><button>検索</button>
-
-<ul>
-
-</ul>
-
+  <ul></ul>
 </div>
 
 <h2>コードエディター</h2>
 
-<p class="a11y-label">コードエディターから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p>
-
+<p class="a11y-label">
+  コードエディターから抜けるには Esc
+  キーを押して下さい(タブキーではタブ文字を挿入します)。
+</p>
 
 <textarea id="code" class="playable-code" style="height: 370px; width: 95%">
 const list = document.querySelector('.output ul');
@@ -433,8 +433,8 @@ searchBtn.onclick = function() {
 </textarea>
 
 <div class="playable-buttons">
-  <input id="reset" type="button" value="リセット">
-  <input id="solution" type="button" value="答えを見る">
+  <input id="reset" type="button" value="リセット" />
+  <input id="solution" type="button" value="答えを見る" />
 </div>
 ```
 
@@ -461,9 +461,9 @@ body {
 ```
 
 ```js hidden
-const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
 let code = textarea.value;
 let userEntry = textarea.value;
 
@@ -471,38 +471,39 @@ function updateCode() {
   eval(textarea.value);
 }
 
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = jsSolution;
-  solution.value = 'Show solution';
+  solution.value = "Show solution";
   updateCode();
 });
 
-solution.addEventListener('click', function() {
-  if(solution.value === '答えを見る') {
+solution.addEventListener("click", function () {
+  if (solution.value === "答えを見る") {
     textarea.value = solutionEntry;
-    solution.value = '答えを隠す';
+    solution.value = "答えを隠す";
   } else {
     textarea.value = userEntry;
-    solution.value = '答えを見る';
+    solution.value = "答えを見る";
   }
   updateCode();
 });
 
-const jsSolution = 'const list = document.querySelector(\'.output ul\');\nconst searchInput = document.querySelector(\'.output input\');\nconst searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nlet myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = \'\';\n\n for(let i = 0; i < myHistory.length; i++) {\n itemText = myHistory[i];\n const listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length >= 5) {\n myHistory.pop();\n }\n\n searchInput.value = \'\';\n searchInput.focus();\n }\n}';
+const jsSolution =
+  "const list = document.querySelector('.output ul');\nconst searchInput = document.querySelector('.output input');\nconst searchBtn = document.querySelector('.output button');\n\nlist.innerHTML = '';\n\nlet myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== '') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = '';\n\n for(let i = 0; i < myHistory.length; i++) {\n itemText = myHistory[i];\n const listItem = document.createElement('li');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length >= 5) {\n myHistory.pop();\n }\n\n searchInput.value = '';\n searchInput.focus();\n }\n}";
 let solutionEntry = jsSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // タブキーでテキストエリアから抜けてしまうのを防ぎ、
 // 代わりにカーソル位置にタブ文字を挿入する
 
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
   if (e.keyCode === 9) {
     e.preventDefault();
-    insertAtCaret('\t');
+    insertAtCaret("\t");
   }
 
   if (e.keyCode === 27) {
@@ -513,8 +514,11 @@ textarea.onkeydown = function(e){
 function insertAtCaret(text) {
   const scrollPos = textarea.scrollTop;
   const caretPos = textarea.selectionStart;
-  const front = (textarea.value).substring(0, caretPos);
-  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  const front = textarea.value.substring(0, caretPos);
+  const back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
   textarea.value = front + text + back;
   caretPos = caretPos + text.length;
   textarea.selectionStart = caretPos;
@@ -525,10 +529,10 @@ function insertAtCaret(text) {
 
 // ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する
 
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
   // ユーザーのコードが表示されているときのみ状態を保存し、
   // 答えのコードでユーザーコードが上書きされないようにする
-  if(solution.value === '答えを見る') {
+  if (solution.value === "答えを見る") {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
diff --git a/files/ja/learn/javascript/first_steps/math/index.md b/files/ja/learn/javascript/first_steps/math/index.md
index d06dfeea3a9964..ba8ac8625437a2 100644
--- a/files/ja/learn/javascript/first_steps/math/index.md
+++ b/files/ja/learn/javascript/first_steps/math/index.md
@@ -43,22 +43,22 @@ slug: Learn/JavaScript/First_steps/Math
 
 1. まず、変数を 2 つ宣言して、それぞれ整数と浮動小数点数で初期化してみましょう。そして、変数の名前を入力して、期待通りに値が入っていることを確認してみましょう。
 
-    ```js
-    var myInt = 5;
-    var myFloat = 6.667;
-    myInt;
-    myFloat;
-    ```
+   ```js
+   var myInt = 5;
+   var myFloat = 6.667;
+   myInt;
+   myFloat;
+   ```
 
 2. 数値にはクォーテーションマークが不要です。次に進む前にもう少し変数の宣言と初期化をしてみてください。
 3. さて、それでは上で入力した 2 つの変数が同じデータ型であるか確認してみましょう。JavaScript では、{{jsxref("Operators/typeof", "typeof")}} という演算子を使用することで、データ型を確認することができます。次の 2 行を入力してみましょう。
 
-    ```js
-    typeof myInt;
-    typeof myFloat;
-    ```
+   ```js
+   typeof myInt;
+   typeof myFloat;
+   ```
 
-    どちらの変数についても `"number"` という文字が戻ってきましたね。もし、別々の数値型が存在しているとすれば、別々に処理しなければならないので、そう考えるととても簡単に思えますよね！
+   どちらの変数についても `"number"` という文字が戻ってきましたね。もし、別々の数値型が存在しているとすれば、別々に処理しなければならないので、そう考えるととても簡単に思えますよね！
 
 ### 便利な Number メソッド
 
@@ -80,7 +80,7 @@ twoDecimalPlaces;
 例えば、これらの命令をコンソールに入力してみてください。
 
 ```js
-let myNumber = '74';
+let myNumber = "74";
 myNumber + 3;
 ```
 
@@ -117,29 +117,29 @@ Number(myNumber) + 3;
 
 1. まずは次のような簡単な例を自分で試してみてください。
 
-    ```js
-    10 + 7
-    9 * 8
-    60 % 3
-    ```
+   ```js
+   10 + 7;
+   9 * 8;
+   60 % 3;
+   ```
 
 2. そして、変数を宣言して初期化し、数を変数に格納します。それから変数を使って計算してみましょう。変数は計算するにあたり、保持している値がそこにあるかのように使えます。例えば次の通り。
 
-    ```js
-    let num1 = 10;
-    let num2 = 50;
-    9 * num1;
-    num1 ** 3;
-    num2 / num1;
-    ```
+   ```js
+   let num1 = 10;
+   let num2 = 50;
+   9 * num1;
+   num1 ** 3;
+   num2 / num1;
+   ```
 
 3. それではさらに難しい計算式を入力してみましょう。
 
-    ```js
-    5 + 10 * 3;
-    num2 % 9 * num1;
-    num2 + num1 / 8 + 2;
-    ```
+   ```js
+   5 + 10 * 3;
+   (num2 % 9) * num1;
+   num2 + num1 / 8 + 2;
+   ```
 
 最後の例の中に予想した結果と違う答えがありませんでしたか。次の章でなぜそうなったかを説明してみましょう。
 
@@ -286,18 +286,18 @@ x *= y; // x は 12 になる
 ```
 
 ```js
-const btn = document.querySelector('button');
-const txt = document.querySelector('p');
+const btn = document.querySelector("button");
+const txt = document.querySelector("p");
 
-btn.addEventListener('click', updateBtn);
+btn.addEventListener("click", updateBtn);
 
 function updateBtn() {
-  if (btn.textContent === '起動する') {
-    btn.textContent = '停止する';
-    txt.textContent = 'マシンが起動しました！';
+  if (btn.textContent === "起動する") {
+    btn.textContent = "停止する";
+    txt.textContent = "マシンが起動しました！";
   } else {
-    btn.textContent = '起動する';
-    txt.textContent = 'マシンは停止中です。';
+    btn.textContent = "起動する";
+    txt.textContent = "マシンは停止中です。";
   }
 }
 ```
diff --git a/files/ja/learn/javascript/first_steps/silly_story_generator/index.md b/files/ja/learn/javascript/first_steps/silly_story_generator/index.md
index a80aece8abc507..68b7577b7b263d 100644
--- a/files/ja/learn/javascript/first_steps/silly_story_generator/index.md
+++ b/files/ja/learn/javascript/first_steps/silly_story_generator/index.md
@@ -49,18 +49,18 @@ HTML および CSS と少しのテキストと JavaScript 関数があります
 1. 先ほどのテキストファイル内の "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" という見出しの直後にあるコードをコピーして `main.js` の先頭に貼り付けます。これで "Enter custom name" テキストフィールド (`customName`) 、"Generate random story" ボタン (`randomize`) 、HTML の body の下のほうにある {{htmlelement("p")}} 要素 (`story`) への参照を保持することができます。さらに `randomValueFromArray()` という、引数として配列を取りその配列からランダムに 1 つの項目を戻り値として返す関数が使えるようになります。
 2. 次にテキストファイルの 2 番目のセクションを見てみましょう。"2. RAW TEXT STRINGS" という見出しのところです。このプログラムの入力となる文字列が書かれています。`main.js` の内部で使用できるように、これらの文字列を変数に保持してください。
 
-    1. 先頭の長い長い文字列を `storyText` という変数に格納します。
-    2. 3 つセットになっている最初の文字列の組を `insertX` という配列に格納します。
-    3. 2 組目の文字列を `insertY` という配列に格納します。
-    4. 3 組目の文字列を `insertZ` という配列に格納します。
+   1. 先頭の長い長い文字列を `storyText` という変数に格納します。
+   2. 3 つセットになっている最初の文字列の組を `insertX` という配列に格納します。
+   3. 2 組目の文字列を `insertY` という配列に格納します。
+   4. 3 組目の文字列を `insertZ` という配列に格納します。
 
 イベントハンドラーと未完成の関数の配置:
 
 1. テキストファイルに戻ります。
 2. "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" という見出しの直後にあるコードをコピーして `main.js` ファイルの最後に貼り付けます。これで、
 
-    - `randomize` 変数へのクリックイベントリスナーが追加され、その変数に紐づくボタンが押された場合に `result()` 関数が実行されるようになります。
-    - 部分的に実装されている `result()` 関数の定義が追加されます。この課題の中で、この関数の残りを実装し、正しく動作するようにします。
+   - `randomize` 変数へのクリックイベントリスナーが追加され、その変数に紐づくボタンが押された場合に `result()` 関数が実行されるようになります。
+   - 部分的に実装されている `result()` 関数の定義が追加されます。この課題の中で、この関数の残りを実装し、正しく動作するようにします。
 
 `result()` 関数の作成
 
@@ -70,10 +70,10 @@ HTML および CSS と少しのテキストと JavaScript 関数があります
 4. 最初の `if` ブロックで、`newStory` の文字列内で見つかる 'Bob' という文字列を `name` 変数の値で置換するため、別の文字列置換のメソッド呼び出し追加します。このブロック内では、「もし ( if ) `customName` テキストフィールドに何かが入力されていれば、Bob をその文字列で置き換える」ということを言っています。
 5. 次の `if` ブロックの中では、`uk` のラジオボタンが選択されているかどうかを調べています。もし選択されているのなら、重さと温度の単位をポンド・華氏から、ストーン・摂氏に変換したいと思います。そのために必要なことは...
 
-    1. ポンドからストーンへ変換する公式、および、華氏から摂氏へ変換する公式を調べます。
-    2. `weight` 変数が宣言されている行内の、300 を ポンドからストーンに変換した値で置き換えます。そして `' stone'` (ストーン) を `Math.round()` の結果に対して、その後ろに結合します。
-    3. `temperature` 変数が宣言されている行内の、94 を華氏から摂氏に変換した値で置き換えます。こちらには `' centigrade'` (摂氏～度) という文字を `Math.round()` の結果に対して、後ろに結合します。
-    4. 上記 2 つの変数の宣言の直後に、さらにもう 2 つ文字列を置換するコードを書いて、'94 farenheit' を `temperature` 変数の内容に、'300 pounds' を `weight` 変数の内容にそれぞれ置換します。
+   1. ポンドからストーンへ変換する公式、および、華氏から摂氏へ変換する公式を調べます。
+   2. `weight` 変数が宣言されている行内の、300 を ポンドからストーンに変換した値で置き換えます。そして `' stone'` (ストーン) を `Math.round()` の結果に対して、その後ろに結合します。
+   3. `temperature` 変数が宣言されている行内の、94 を華氏から摂氏に変換した値で置き換えます。こちらには `' centigrade'` (摂氏～度) という文字を `Math.round()` の結果に対して、後ろに結合します。
+   4. 上記 2 つの変数の宣言の直後に、さらにもう 2 つ文字列を置換するコードを書いて、'94 farenheit' を `temperature` 変数の内容に、'300 pounds' を `weight` 変数の内容にそれぞれ置換します。
 
 6. 最後に、関数の下から 2 行目にある、`story` 変数の `textContent` プロパティ(段落を参照している) を、`newStory` 変数の内容で置き換えます。
 
@@ -83,7 +83,7 @@ HTML および CSS と少しのテキストと JavaScript 関数があります
 - もし、JavaScript が HTML に適切に適用されているかどうかを知りたければ、JavaScript ファイルから一時的に全てのコードを削除して、確実に何かが起きるようなコードを追加して、JavaScript ファイルを保存して HTML ファイルを更新してみましょう。次の例は {{htmlelement("html")}} 要素の背景色を赤くするコードです。JavaScript が適切に HTML に適用されていれば、ブラウザーのウィンドウが真っ赤になることでしょう。
 
   ```js
-  document.querySelector('html').style.backgroundColor = 'red';
+  document.querySelector("html").style.backgroundColor = "red";
   ```
 
 - [Math.round()](/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/round) は JavaScript の組み込みメソッドで、計算結果を整数値に四捨五入します。
diff --git a/files/ja/learn/javascript/first_steps/strings/index.md b/files/ja/learn/javascript/first_steps/strings/index.md
index fc96fa677763eb..c0ebf081b422d6 100644
--- a/files/ja/learn/javascript/first_steps/strings/index.md
+++ b/files/ja/learn/javascript/first_steps/strings/index.md
@@ -39,11 +39,11 @@ l10n:
 1. 初めに、次の行を入力してみましょう。
 
    ```js
-   const string = '革命はテレビでは放送されない。';
+   const string = "革命はテレビでは放送されない。";
    console.log(string);
    ```
 
-    数値のところでやったのと同じように、変数を宣言して、値を入れて初期化しています。そして値を返しています。ただ違うのは、文字列が引用符で囲まれて書かれていることです。
+   数値のところでやったのと同じように、変数を宣言して、値を入れて初期化しています。そして値を返しています。ただ違うのは、文字列が引用符で囲まれて書かれていることです。
 
 2. もし引用符で囲わななかったり、どちらか一方を書き忘れたりすると、エラーになります。
 
@@ -68,7 +68,7 @@ l10n:
 
 1. JavaScript では、文字列を囲む引用符として、単一引用符と二重引用符を使用することができます。以下のどちらの例も正しく動きます。
 
-   ```js
+   ```js-nolint
    const sgl = '単一引用符';
    const dbl = "二重引用符";
    console.log(sgl);
@@ -102,7 +102,7 @@ l10n:
 
 先ほどのコード行を直すには、問題となっている引用符をエスケープする必要があります。文字のエスケープとは、その文字が、コードではなく、文字列の一部であるとブラウザーに認識させる書き方です。JavaScript ではバックスラッシュ ( \ \[環境によっては円マーク (￥)]) を文字の前におくことでエスケープすることができます。
 
-```js
+```js-nolint example-good
 const bigmouth = 'I\'ve got no right to take my place…';
 console.log(bigmouth);
 ```
diff --git a/files/ja/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md b/files/ja/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md
index c0693a8708026e..c44923c597fe1f 100644
--- a/files/ja/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md
+++ b/files/ja/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'スキルテスト: 配列'
+title: "スキルテスト: 配列"
 slug: Learn/JavaScript/First_steps/Test_your_skills:_Arrays
 l10n:
   sourceCommit: 4f6ba2f5a1615fe155292cac416c7ab6b9d711ec
@@ -86,7 +86,7 @@ l10n:
 1. 作品を、[CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), または [Glitch](https://glitch.com/). のような共有可能なオンラインエディターに置いてください。いちから自身でコードを記述することもできますし、上記のセクションでリンク付けされている準備済みファイルを利用するのもよいでしょう。
 2. [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn/250) で評価を希望したり、助けを求める投稿をしてください。（英語）投稿には以下のことを書きましょう。
 
-    - "Assessment wanted for Variables 1 skill test"のような説明的なタイトル
-    - これまで試したことの詳細、そして私たちに何をしてほしいか。例えば、行き詰まって助けが必要だとか、評価をしてほしいなど。
-    - 評価してほしかったり、助けが必要な作品へのリンク。共有可能なオンラインエディター（上記ステップ 1 で述べたもの）を使って。これは分かりやすくするためのよい手法です。 — コードが見えない状態で、コーディングの問題を抱えている人を助けることはとても難しいことです。
-    - 実際のタスクまたは評価ページのリンク。そうすれば、どの質問に助けが必要かがわかります。
+   - "Assessment wanted for Variables 1 skill test"のような説明的なタイトル
+   - これまで試したことの詳細、そして私たちに何をしてほしいか。例えば、行き詰まって助けが必要だとか、評価をしてほしいなど。
+   - 評価してほしかったり、助けが必要な作品へのリンク。共有可能なオンラインエディター（上記ステップ 1 で述べたもの）を使って。これは分かりやすくするためのよい手法です。 — コードが見えない状態で、コーディングの問題を抱えている人を助けることはとても難しいことです。
+   - 実際のタスクまたは評価ページのリンク。そうすれば、どの質問に助けが必要かがわかります。
diff --git a/files/ja/learn/javascript/first_steps/test_your_skills_colon__math/index.md b/files/ja/learn/javascript/first_steps/test_your_skills_colon__math/index.md
index f860e9b158ff44..e1021000f6ed3a 100644
--- a/files/ja/learn/javascript/first_steps/test_your_skills_colon__math/index.md
+++ b/files/ja/learn/javascript/first_steps/test_your_skills_colon__math/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'あなたのスキルをテストしよう: 数学'
+title: "あなたのスキルをテストしよう: 数学"
 slug: Learn/JavaScript/First_steps/Test_your_skills:_Math
 ---
 
@@ -63,7 +63,7 @@ slug: Learn/JavaScript/First_steps/Test_your_skills:_Math
 1. あなたの制作物を、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、または [Glitch](https://glitch.com/) のような共有可能なオンラインエディターに置いてください。いちから自身でコードを記述することもできますし、上記のセクションでリンク付けされている準備済みファイルを利用するのもよいでしょう。
 2. [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn) で、評価を希望したり、助けを求めるポストを投稿してください。ポストには以下を含みましょう:
 
-    - "Assessment wanted for Math 1 skill test" のような説明的なタイトル
-    - あなたがこれまで試したことの詳細、そしてあなたが私たちに何をしてほしいか。例えば、行き詰まって助けが必要だとか、評価をしてほしいなど。
-    - 評価してほしかったり、助けが必要な作成物へのリンク。共有可能なオンラインエディター（上記ステップ 1 で述べたもの）を使って。これは分かりやすくするためのよい実践方法でしょう — コードが見れない状態で、コーディング問題を抱えている人を助けることはとても難しいですよね。
-    - 実際のタスクまたは評価ページのリンク。そうすれば、あなたがどの質問に助けが必要かがわかります。
+   - "Assessment wanted for Math 1 skill test" のような説明的なタイトル
+   - あなたがこれまで試したことの詳細、そしてあなたが私たちに何をしてほしいか。例えば、行き詰まって助けが必要だとか、評価をしてほしいなど。
+   - 評価してほしかったり、助けが必要な作成物へのリンク。共有可能なオンラインエディター（上記ステップ 1 で述べたもの）を使って。これは分かりやすくするためのよい実践方法でしょう — コードが見れない状態で、コーディング問題を抱えている人を助けることはとても難しいですよね。
+   - 実際のタスクまたは評価ページのリンク。そうすれば、あなたがどの質問に助けが必要かがわかります。
diff --git a/files/ja/learn/javascript/first_steps/useful_string_methods/index.md b/files/ja/learn/javascript/first_steps/useful_string_methods/index.md
index c31b93f586d478..e6f97ec6b6ad3e 100644
--- a/files/ja/learn/javascript/first_steps/useful_string_methods/index.md
+++ b/files/ja/learn/javascript/first_steps/useful_string_methods/index.md
@@ -16,7 +16,7 @@ slug: Learn/JavaScript/First_steps/Useful_string_methods
 JavaScript ではほとんどのものはオブジェクトです。たとえば、次のように文字列を作った時も、
 
 ```js
-let string = 'This is my string';
+let string = "This is my string";
 ```
 
 この変数は文字列オブジェクトのインスタンスになり、大量のプロパティとメソッドが使用可能となります。{{jsxref("String")}} オブジェクトのページに行って、横にある一覧を眺めてみてください！
@@ -30,7 +30,7 @@ let string = 'This is my string';
 ただ {{jsxref("String.prototype.length", "length")}} プロパティを使用すればよいので、とても簡単です。次の行を入力してみましょう。
 
 ```js
-let browserType = 'mozilla';
+let browserType = "mozilla";
 browserType.length;
 ```
 
@@ -49,7 +49,7 @@ browserType[0];
 文字列の一番最後の文字を取得したいときは、先ほどの `length` プロパティと組み合わせて以下のようにします。
 
 ```js
-browserType[browserType.length-1];
+browserType[browserType.length - 1];
 ```
 
 "mozilla" の長さは 7 ですが、0 から始まるので、最後の文字の位置は 6 になります。よって `length-1` とする必要があるのです。
@@ -62,49 +62,49 @@ browserType[browserType.length-1];
 
 1. 以下を試してみましょう。
 
-    ```js
-    browserType.indexOf('zilla');
-    ```
+   ```js
+   browserType.indexOf("zilla");
+   ```
 
-    このコードは 2 を返します。なぜならば、"mozilla"という文字列中で、部分文字列"zilla"の開始位置が 2 (0、1、2 — つまり 3 文字目)であるからです。このようなコードは文字列を絞り込むときなどに使います。例えば、ウェブサイトのアドレスの一覧があったとき、その中から"mozilla"を含むものだけを表示したい場合などです。
+   このコードは 2 を返します。なぜならば、"mozilla"という文字列中で、部分文字列"zilla"の開始位置が 2 (0、1、2 — つまり 3 文字目)であるからです。このようなコードは文字列を絞り込むときなどに使います。例えば、ウェブサイトのアドレスの一覧があったとき、その中から"mozilla"を含むものだけを表示したい場合などです。
 
 2. 部分文字列が含まれてることを確認するもう一つの方法があり、こちらのほうが効果的な場合があります。
 
-    ```js
-    browserType.indexOf('vanilla');
-    ```
+   ```js
+   browserType.indexOf("vanilla");
+   ```
 
-    上記のコードは `-1` を返します。これは部分文字列 (この場合は 'vanilla') がメインの文字列の中に見つからなかった場合に返されます。
+   上記のコードは `-1` を返します。これは部分文字列 (この場合は 'vanilla') がメインの文字列の中に見つからなかった場合に返されます。
 
-    これを使って、部分文字列 'mozilla' を**含まない** (あるいは否定演算子 `!==` を使うなら**含む**) 文字列のすべてのインスタンスを見つけることができます。
+   これを使って、部分文字列 'mozilla' を**含まない** (あるいは否定演算子 `!==` を使うなら**含む**) 文字列のすべてのインスタンスを見つけることができます。
 
-    ```js
-    if(browserType.indexOf('mozilla') === -1) {
-      // もし部分文字列 'mozilla' が含まれていない場合は、
-      // 文字列で何かをします。
-    }
+   ```js
+   if (browserType.indexOf("mozilla") === -1) {
+     // もし部分文字列 'mozilla' が含まれていない場合は、
+     // 文字列で何かをします。
+   }
 
-    if(browserType.indexOf('mozilla') !== -1) {
-      // もし部分文字列 'mozilla' が含まれている場合は、
-      // 文字列で何かをします。
-    }
-    ```
+   if (browserType.indexOf("mozilla") !== -1) {
+     // もし部分文字列 'mozilla' が含まれている場合は、
+     // 文字列で何かをします。
+   }
+   ```
 
 3. 部分文字列がその文字列のどこから始まるかが分かっており、どこで終わっているかがわかれば、その部分文字列を {{jsxref("String.prototype.slice()", "slice()")}} メソッドを使用することで抽出することができます。
 
-    ```js
-    browserType.slice(0,3);
-    ```
+   ```js
+   browserType.slice(0, 3);
+   ```
 
-    このコードは "moz" という文字列を返します。最初の引数は抽出を始める最初の位置で、2 番目の引数が抽出する最後の文字の直後の位置です。つまり、この場合先頭から 4 番目の手前までの文字列が切り出されたということです。言い換えると、この場合は 2 番目の引数と同じ 3 文字が切り出されました。
+   このコードは "moz" という文字列を返します。最初の引数は抽出を始める最初の位置で、2 番目の引数が抽出する最後の文字の直後の位置です。つまり、この場合先頭から 4 番目の手前までの文字列が切り出されたということです。言い換えると、この場合は 2 番目の引数と同じ 3 文字が切り出されました。
 
 4. また、ある文字以降の文字列の残りの文字をすべて抽出したいとわかっている場合は、2 番目のパラメータを含める必要はありません！その代わり、文字列内の残りの文字を抽出したい文字の位置を含める必要があるだけです。次のようにしてみてください。
 
-    ```js
-    browserType.slice(2);
-    ```
+   ```js
+   browserType.slice(2);
+   ```
 
-    この例は "zilla" という文字列を返します。なぜなら、2 の位置にある文字は z であり、2 番目の引数を指定していないため、3 文字目から最後までが部分文字列として戻ったのです。
+   この例は "zilla" という文字列を返します。なぜなら、2 の位置にある文字は z であり、2 番目の引数を指定していないため、3 文字目から最後までが部分文字列として戻ったのです。
 
 > **メモ:** `slice()` の 2 番目の引数はオプション (任意指定) です。もし指定しなければ、元々の文字列の最後まで切り出しを行います。他にもオプションがありますので、さらに詳しく知りたければ{{jsxref("String.prototype.slice()", "slice()")}}のページで調べてみましょう。
 
@@ -115,7 +115,7 @@ String には{{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}と{{j
 それでは次の行を入力し、何が起きるか見てみましょう。
 
 ```js
-let radData = 'My NaMe Is MuD';
+let radData = "My NaMe Is MuD";
 radData.toLowerCase();
 radData.toUpperCase();
 ```
@@ -127,7 +127,7 @@ radData.toUpperCase();
 検索する文字列と、置き換える文字列の 2 つを引数に取ります。次の例を実行してみてください。
 
 ```js
-browserType.replace('moz','van');
+browserType.replace("moz", "van");
 ```
 
 これはコンソールで"vanilla"を返しますが、`browserType` の値は、"mozilla"のままです。プログラムで変数 `browserType` の値を実際に更新するには、演算の結果を変数に設定し直す必要があります。つまりそれ変数に設定されている部分文字列を自動的には更新してくれないのです。従って実際に変数の内容を更新するためには `browserType = browserType.replace('moz','van');` のように書きます。
@@ -150,15 +150,14 @@ browserType.replace('moz','van');
 <h2>出力結果</h2>
 
 <div class="output" style="min-height: 125px;">
-
-<ul>
-
-</ul>
-
+  <ul></ul>
 </div>
 
 <h2>コードエディタ</h2>
-<p class="a11y-label">コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p>
+<p class="a11y-label">
+  コードエディタから抜けるには Esc
+  キーを押して下さい(タブキーではタブ文字を挿入します)。
+</p>
 
 <textarea id="code" class="playable-code" style="height: 290px; width: 95%">
 const list = document.querySelector('.output ul');
@@ -181,8 +180,8 @@ for (let i = 0; i < greetings.length; i++) {
 </textarea>
 
 <div class="playable-buttons">
-  <input id="reset" type="button" value="リセット">
-  <input id="solution" type="button" value="答えを見る">
+  <input id="reset" type="button" value="リセット" />
+  <input id="solution" type="button" value="答えを見る" />
 </div>
 ```
 
@@ -209,9 +208,9 @@ body {
 ```
 
 ```js hidden
-const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
 let code = textarea.value;
 let userEntry = textarea.value;
 
@@ -219,55 +218,56 @@ function updateCode() {
   eval(textarea.value);
 }
 
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = jsSolution;
-  solution.value = '答えを見る';
+  solution.value = "答えを見る";
   updateCode();
 });
 
-solution.addEventListener('click', function() {
-  if(solution.value === '答えを見る') {
+solution.addEventListener("click", function () {
+  if (solution.value === "答えを見る") {
     textarea.value = solutionEntry;
-    solution.value = '答えを隠す';
+    solution.value = "答えを隠す";
   } else {
     textarea.value = userEntry;
-    solution.value = '答えを見る';
+    solution.value = "答えを見る";
   }
   updateCode();
 });
 
-const jsSolution = 'const list = document.querySelector(\'.output ul\');' +
-'\nlist.innerHTML = \'\';' +
-'\nlet greetings = [\'Happy Birthday!\',' +
-'\n                 \'Merry Christmas my love\',' +
-'\n                 \'A happy Christmas to all the family\',' +
-'\n                 \'You\\\'re all I want for Christmas\',' +
-'\n                 \'Get well soon\'];' +
-'\n' +
-'\nfor (let i = 0; i < greetings.length; i++) {' +
-'\n  let input = greetings[i];' +
-'\n  if (greetings[i].indexOf(\'Christmas\') !== -1) {' +
-'\n    let result = input;' +
-'\n    let listItem = document.createElement(\'li\');' +
-'\n    listItem.textContent = result;' +
-'\n    list.appendChild(listItem);' +
-'\n  }' +
-'\n}';
+const jsSolution =
+  "const list = document.querySelector('.output ul');" +
+  "\nlist.innerHTML = '';" +
+  "\nlet greetings = ['Happy Birthday!'," +
+  "\n                 'Merry Christmas my love'," +
+  "\n                 'A happy Christmas to all the family'," +
+  "\n                 'You\\'re all I want for Christmas'," +
+  "\n                 'Get well soon'];" +
+  "\n" +
+  "\nfor (let i = 0; i < greetings.length; i++) {" +
+  "\n  let input = greetings[i];" +
+  "\n  if (greetings[i].indexOf('Christmas') !== -1) {" +
+  "\n    let result = input;" +
+  "\n    let listItem = document.createElement('li');" +
+  "\n    listItem.textContent = result;" +
+  "\n    list.appendChild(listItem);" +
+  "\n  }" +
+  "\n}";
 
 let solutionEntry = jsSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // タブキーでテキストエリアから抜けてしまうのを防ぎ、
 // 代わりにカーソル位置にタブ文字を挿入する
 
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
   if (e.keyCode === 9) {
     e.preventDefault();
-    insertAtCaret('\t');
+    insertAtCaret("\t");
   }
 
   if (e.keyCode === 27) {
@@ -278,8 +278,11 @@ textarea.onkeydown = function(e){
 function insertAtCaret(text) {
   const scrollPos = textarea.scrollTop;
   const caretPos = textarea.selectionStart;
-  const front = (textarea.value).substring(0, caretPos);
-  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  const front = textarea.value.substring(0, caretPos);
+  const back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
 
   textarea.value = front + text + back;
   caretPos = caretPos + text.length;
@@ -291,10 +294,10 @@ function insertAtCaret(text) {
 
 // ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する
 
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
   // ユーザーのコードが表示されているときのみ状態を保存し、
   // 答えのコードでユーザーコードが上書きされないようにする
-  if(solution.value === '答えを見る') {
+  if (solution.value === "答えを見る") {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
@@ -321,15 +324,14 @@ textarea.onkeyup = function(){
 <h2>出力結果</h2>
 
 <div class="output" style="min-height: 125px;">
-
-<ul>
-
-</ul>
-
+  <ul></ul>
 </div>
 
 <h2>コードエディタ</h2>
-<p class="a11y-label">コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p>
+<p class="a11y-label">
+  コードエディタから抜けるには Esc
+  キーを押して下さい(タブキーではタブ文字を挿入します)。
+</p>
 
 <textarea id="code" class="playable-code" style="height: 250px; width: 95%">
 const list = document.querySelector('.output ul');
@@ -347,8 +349,8 @@ for(var i = 0; i < cities.length; i++) {
 </textarea>
 
 <div class="playable-buttons">
-  <input id="reset" type="button" value="リセット">
-  <input id="solution" type="button" value="答えを見る">
+  <input id="reset" type="button" value="リセット" />
+  <input id="solution" type="button" value="答えを見る" />
 </div>
 ```
 
@@ -375,9 +377,9 @@ body {
 ```
 
 ```js hidden
-const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
 let code = textarea.value;
 let userEntry = textarea.value;
 
@@ -385,53 +387,54 @@ function updateCode() {
   eval(textarea.value);
 }
 
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = jsSolution;
-  solution.value = '答えを見る';
+  solution.value = "答えを見る";
   updateCode();
 });
 
-solution.addEventListener('click', function() {
-  if(solution.value === '答えを見る') {
+solution.addEventListener("click", function () {
+  if (solution.value === "答えを見る") {
     textarea.value = solutionEntry;
-    solution.value = '答えを隠す';
+    solution.value = "答えを隠す";
   } else {
     textarea.value = userEntry;
-    solution.value = '答えを見る';
+    solution.value = "答えを見る";
   }
   updateCode();
 });
 
-const jsSolution = 'const list = document.querySelector(\'.output ul\');' +
-'\nlist.innerHTML = \'\';' +
-'\nlet cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];' +
-'\n' +
-'\nfor (let i = 0; i < cities.length; i++) {' +
-'\n  let input = cities[i];' +
-'\n  let lower = input.toLowerCase();' +
-'\n  let firstLetter = lower.slice(0,1);' +
-'\n  let capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());' +
-'\n  let result = capitalized;' +
-'\n  let listItem = document.createElement(\'li\');' +
-'\n  listItem.textContent = result;' +
-'\n  list.appendChild(listItem);' +
-'\n' +
-'\n}';
+const jsSolution =
+  "const list = document.querySelector('.output ul');" +
+  "\nlist.innerHTML = '';" +
+  "\nlet cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];" +
+  "\n" +
+  "\nfor (let i = 0; i < cities.length; i++) {" +
+  "\n  let input = cities[i];" +
+  "\n  let lower = input.toLowerCase();" +
+  "\n  let firstLetter = lower.slice(0,1);" +
+  "\n  let capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());" +
+  "\n  let result = capitalized;" +
+  "\n  let listItem = document.createElement('li');" +
+  "\n  listItem.textContent = result;" +
+  "\n  list.appendChild(listItem);" +
+  "\n" +
+  "\n}";
 
 let solutionEntry = jsSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // タブキーでテキストエリアから抜けてしまうのを防ぎ、
 // 代わりにカーソル位置にタブ文字を挿入する
 
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
   if (e.keyCode === 9) {
     e.preventDefault();
-    insertAtCaret('\t');
+    insertAtCaret("\t");
   }
 
   if (e.keyCode === 27) {
@@ -442,8 +445,11 @@ textarea.onkeydown = function(e){
 function insertAtCaret(text) {
   const scrollPos = textarea.scrollTop;
   const caretPos = textarea.selectionStart;
-  const front = (textarea.value).substring(0, caretPos);
-  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  const front = textarea.value.substring(0, caretPos);
+  const back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
 
   textarea.value = front + text + back;
   caretPos = caretPos + text.length;
@@ -455,10 +461,10 @@ function insertAtCaret(text) {
 
 // ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する
 
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
   // ユーザーのコードが表示されているときのみ状態を保存し、
   // 答えのコードでユーザーコードが上書きされないようにする
-  if(solution.value === '答えを見る') {
+  if (solution.value === "答えを見る") {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
@@ -496,15 +502,14 @@ MAN: Manchester Piccadilly
 <h2>出力結果</h2>
 
 <div class="output" style="min-height: 125px;">
-
-<ul>
-
-</ul>
-
+  <ul></ul>
 </div>
 
 <h2>コードエディタ</h2>
-<p class="a11y-label">コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p>
+<p class="a11y-label">
+  コードエディタから抜けるには Esc
+  キーを押して下さい(タブキーではタブ文字を挿入します)。
+</p>
 
 <textarea id="code" class="playable-code" style="height: 285px; width: 95%">
 const list = document.querySelector('.output ul');
@@ -527,8 +532,8 @@ for (var i = 0; i < stations.length; i++) {
 </textarea>
 
 <div class="playable-buttons">
-  <input id="reset" type="button" value="リセット">
-  <input id="solution" type="button" value="答えを見る">
+  <input id="reset" type="button" value="リセット" />
+  <input id="solution" type="button" value="答えを見る" />
 </div>
 ```
 
@@ -555,9 +560,9 @@ body {
 ```
 
 ```js hidden
-const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
 let code = textarea.value;
 let userEntry = textarea.value;
 
@@ -565,56 +570,57 @@ function updateCode() {
   eval(textarea.value);
 }
 
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = jsSolution;
-  solution.value = '答えを見る';
+  solution.value = "答えを見る";
   updateCode();
 });
 
-solution.addEventListener('click', function() {
-  if(solution.value === '答えを見る') {
+solution.addEventListener("click", function () {
+  if (solution.value === "答えを見る") {
     textarea.value = solutionEntry;
-    solution.value = '答えを隠す';
+    solution.value = "答えを隠す";
   } else {
     textarea.value = userEntry;
-    solution.value = '答えを見る';
+    solution.value = "答えを見る";
   }
   updateCode();
 });
 
-const jsSolution = 'const list = document.querySelector(\'.output ul\');' +
-'\nlist.innerHTML = \'\';' +
-'\nlet stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',' +
-'\n                \'GNF576746573fhdg4737dh4;Greenfield\',' +
-'\n                \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',' +
-'\n                \'SYB4f65hf75f736463;Stalybridge\',' +
-'\n                \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];' +
-'\n' +
-'\nfor (let i = 0; i < stations.length; i++) {' +
-'\n  let input = stations[i];' +
-'\n  let code = input.slice(0,3);' +
-'\n  let semiC = input.indexOf(\';\');' +
-'\n  let name = input.slice(semiC + 1);' +
-'\n  let result = code + \': \' + name;' +
-'\n  let listItem = document.createElement(\'li\');' +
-'\n  listItem.textContent = result;' +
-'\n  list.appendChild(listItem);' +
-'\n}';
+const jsSolution =
+  "const list = document.querySelector('.output ul');" +
+  "\nlist.innerHTML = '';" +
+  "\nlet stations = ['MAN675847583748sjt567654;Manchester Piccadilly'," +
+  "\n                'GNF576746573fhdg4737dh4;Greenfield'," +
+  "\n                'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street'," +
+  "\n                'SYB4f65hf75f736463;Stalybridge'," +
+  "\n                'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];" +
+  "\n" +
+  "\nfor (let i = 0; i < stations.length; i++) {" +
+  "\n  let input = stations[i];" +
+  "\n  let code = input.slice(0,3);" +
+  "\n  let semiC = input.indexOf(';');" +
+  "\n  let name = input.slice(semiC + 1);" +
+  "\n  let result = code + ': ' + name;" +
+  "\n  let listItem = document.createElement('li');" +
+  "\n  listItem.textContent = result;" +
+  "\n  list.appendChild(listItem);" +
+  "\n}";
 
 let solutionEntry = jsSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // タブキーでテキストエリアから抜けてしまうのを防ぎ、
 // 代わりにカーソル位置にタブ文字を挿入する
 
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
   if (e.keyCode === 9) {
     e.preventDefault();
-    insertAtCaret('\t');
+    insertAtCaret("\t");
   }
 
   if (e.keyCode === 27) {
@@ -625,8 +631,11 @@ textarea.onkeydown = function(e){
 function insertAtCaret(text) {
   const scrollPos = textarea.scrollTop;
   const caretPos = textarea.selectionStart;
-  const front = (textarea.value).substring(0, caretPos);
-  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  const front = textarea.value.substring(0, caretPos);
+  const back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
 
   textarea.value = front + text + back;
   caretPos = caretPos + text.length;
@@ -638,10 +647,10 @@ function insertAtCaret(text) {
 
 // ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する
 
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
   // ユーザーのコードが表示されているときのみ状態を保存し、
   // 答えのコードでユーザーコードが上書きされないようにする
-  if(solution.value === '答えを見る') {
+  if (solution.value === "答えを見る") {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
diff --git a/files/ja/learn/javascript/first_steps/variables/index.md b/files/ja/learn/javascript/first_steps/variables/index.md
index faab8c94f97a70..971c2ed81bc39d 100644
--- a/files/ja/learn/javascript/first_steps/variables/index.md
+++ b/files/ja/learn/javascript/first_steps/variables/index.md
@@ -43,14 +43,14 @@ l10n:
 ```
 
 ```js
-const buttonA = document.querySelector('#button_A');
-const headingA = document.querySelector('#heading_A');
+const buttonA = document.querySelector("#button_A");
+const headingA = document.querySelector("#heading_A");
 
 buttonA.onclick = () => {
-  const name = prompt('あなたの名前は何ですか？');
+  const name = prompt("あなたの名前は何ですか？");
   alert(`こんにちは、${name}さん、はじめまして！`);
   headingA.textContent = `${name}さん、ようこそ`;
-}
+};
 ```
 
 {{ EmbedLiveSample('Variable_example', '100%', 120) }}
@@ -67,13 +67,15 @@ buttonA.onclick = () => {
 ```
 
 ```js example-bad
-const buttonB = document.querySelector('#button_B');
-const headingB = document.querySelector('#heading_B');
+const buttonB = document.querySelector("#button_B");
+const headingB = document.querySelector("#heading_B");
 
 buttonB.onclick = () => {
-    alert(`こんにちは、${prompt('あなたの名前は何ですか？')}さん、はじめまして！`);
-    headingB.textContent = `${prompt('あなたの名前は何ですか？')}さん、ようこそ`;
-}
+  alert(
+    `こんにちは、${prompt("あなたの名前は何ですか？")}さん、はじめまして！`,
+  );
+  headingB.textContent = `${prompt("あなたの名前は何ですか？")}さん、ようこそ`;
+};
 ```
 
 {{ EmbedLiveSample('Without_a_variable', '100%', 120) }}
@@ -121,7 +123,7 @@ scoobyDoo;
 変数を宣言したら、値を入れて初期化できます。初期化するには、変数名に続けて等号記号 (`=`) を入力し、変数に入れたい値を渡します。例えば次のように。
 
 ```js
-myName = 'Chris';
+myName = "Chris";
 myAge = 37;
 ```
 
@@ -135,7 +137,7 @@ myAge;
 変数の宣言と初期化を一度にすることもできます。
 
 ```js
-let myDog = 'Rover';
+let myDog = "Rover";
 ```
 
 2 つの操作を別個の行で行うより早いので、おそらくほとんどの場合、この方法で書くでしょう。
@@ -156,7 +158,7 @@ JavaScript が最初に作成されたときには、これが変数を宣言す
 はじめに、変数を宣言して初期化する複数行の JavaScript プログラムを作成した場合、変数を初期化した後で実際に変数を `var` で宣言することができます。例えば次のようになります。
 
 ```js
-myName = 'Chris';
+myName = "Chris";
 
 function logName() {
   console.log(myName);
@@ -176,22 +178,22 @@ var myName;
 第二に、`var` を使用するとき、好きなだけ同じ変数を何度でも宣言することができます、しかし `let` ではできません。次の例は動作します。
 
 ```js
-var myName = 'Chris';
-var myName = 'Bob';
+var myName = "Chris";
+var myName = "Bob";
 ```
 
 しかし、次のようにすると 2 行目でエラーが発生します。
 
 ```js example-bad
-let myName = 'Chris';
-let myName = 'Bob';
+let myName = "Chris";
+let myName = "Bob";
 ```
 
 代わりにこれをしなければならないでしょう。
 
 ```js
-let myName = 'Chris';
-myName = 'Bob';
+let myName = "Chris";
+myName = "Bob";
 ```
 
 繰り返しますが、これは言語の賢明な決定です。変数を再宣言する必要はありません。それは物事をより混乱させるだけです。
@@ -215,7 +217,7 @@ myName = 'Bob';
 変数を初期化して値が入ったら、もう一度値を入れなおすことで、変数の値を変更することができます。次の行を入力してみてください。
 
 ```js
-myName = 'Bob';
+myName = "Bob";
 myAge = 40;
 ```
 
@@ -280,7 +282,7 @@ let myAge = 17;
 文字列とは文字が連なったもののことです。変数に文字列値を設定する場合、単一引用符 (`'`) または二重引用符 (`"`) で文字を囲みます。囲み忘れると、JavaScript はその文字を変数名として解釈しようとしてしまいます。
 
 ```js
-let dolphinGoodbye = 'So long and thanks for all the fish';
+let dolphinGoodbye = "So long and thanks for all the fish";
 ```
 
 ### 論理値
@@ -304,7 +306,7 @@ let test = 6 < 3;
 配列とは角括弧 (`[]`) にカンマで区切った複数の値を格納できるオブジェクトです。コンソールに以下のように入力してみましょう。
 
 ```js
-let myNameArray = ['Chris', 'Bob', 'Jim'];
+let myNameArray = ["Chris", "Bob", "Jim"];
 let myNumberArray = [10, 15, 40];
 ```
 
@@ -326,13 +328,13 @@ myNumberArray[2]; // 40 と表示されます
 次の行をコンソールに入力してみましょう。
 
 ```js
-let dog = { name : 'ポチ', breed : 'ダルメシアン' };
+let dog = { name: "ポチ", breed: "ダルメシアン" };
 ```
 
 オブジェクトに格納された情報を取得するには、以下のような書き方をします。
 
 ```js
-dog.name
+dog.name;
 ```
 
 とりあえずオブジェクトについて、今はここまでです。オブジェクトについてはもっと先のモジュールで紹介します。
@@ -344,13 +346,13 @@ JavaScript は他の言語と異なり、「動的型付け言語」という、
 たとえば、もし変数を宣言して、引用符で囲んだ値を渡すとします。すると、ブラウザーはこれを文字列として扱うでしょう。
 
 ```js
-let myString = 'Hello';
+let myString = "Hello";
 ```
 
 それが数字を含んでいたとしても、文字列になってしまうので、気を付けてください。
 
 ```js
-let myNumber = '500'; // oops, this is still a string
+let myNumber = "500"; // oops, this is still a string
 typeof myNumber;
 myNumber = 500; // much better — now this is a number
 typeof myNumber;
@@ -394,15 +396,15 @@ count = 2;
 JavaScript で定数は、常に同じ値に名前を付けなければなりませんが、名前を付けた値の内容は変更することができることに注意してください。これは、数値や論理値のような単純な型では有益な違いではありませんが、オブジェクトを考えてみてください。
 
 ```js
-const bird = { species : 'Kestrel'};
-console.log(bird.species);  // "Kestrel"
+const bird = { species: "Kestrel" };
+console.log(bird.species); // "Kestrel"
 ```
 
 オブジェクトの内容が変わっても、定数は同じオブジェクトを指しているので、`const` を使って宣言したオブジェクトのプロパティを更新したり、追加したり、削除したりすることができます。
 
 ```js
-bird.species = 'Striated Caracara';
-console.log(bird.species);  // "Striated Caracara"
+bird.species = "Striated Caracara";
+console.log(bird.species); // "Striated Caracara"
 ```
 
 ## いつ const を使い、いつ let を使うか
diff --git a/files/ja/learn/javascript/first_steps/what_is_javascript/index.md b/files/ja/learn/javascript/first_steps/what_is_javascript/index.md
index 36407e82c40527..60f4f4de36abfb 100644
--- a/files/ja/learn/javascript/first_steps/what_is_javascript/index.md
+++ b/files/ja/learn/javascript/first_steps/what_is_javascript/index.md
@@ -47,14 +47,14 @@ JavaScript はウェブページにて複雑な機能をできるようにする
 
 ```css
 p {
-  font-family: 'helvetica neue', helvetica, sans-serif;
+  font-family: "helvetica neue", helvetica, sans-serif;
   letter-spacing: 1px;
   text-transform: uppercase;
   text-align: center;
-  border: 2px solid rgba(0,0,200,0.6);
-  background: rgba(0,0,200,0.3);
-  color: rgba(0,0,200,0.6);
-  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+  border: 2px solid rgba(0, 0, 200, 0.6);
+  background: rgba(0, 0, 200, 0.3);
+  color: rgba(0, 0, 200, 0.6);
+  box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
   border-radius: 10px;
   padding: 3px 10px;
   display: inline-block;
@@ -67,12 +67,12 @@ p {
 最後に、JavaScript を加えて動的なふるまいを実装します:
 
 ```js
-const para = document.querySelector('p');
+const para = document.querySelector("p");
 
-para.addEventListener('click', updateName);
+para.addEventListener("click", updateName);
 
 function updateName() {
-  const name = prompt('名前を入力して下さい');
+  const name = prompt("名前を入力して下さい");
   para.textContent = `Player 1: ${name}`;
 }
 ```
@@ -147,12 +147,12 @@ JavaScript のごく一般的な用途は、(先ほど例示した) Document Obj
 例えば、最初の例で見た JavaScript のブロックに戻りましょう。
 
 ```js
-const para = document.querySelector('p');
+const para = document.querySelector("p");
 
-para.addEventListener('click', updateName);
+para.addEventListener("click", updateName);
 
 function updateName() {
-  const name = prompt('名前を入力して下さい');
+  const name = prompt("名前を入力して下さい");
   para.textContent = `Player 1: ${name}`;
 }
 ```
@@ -203,26 +203,24 @@ JavaScript は CSS と同じような方法で、HTML ページに適用する
 
    ```html
    <script>
-
      // JavaScript をここに書きます
-
    </script>
    ```
 
 4. それでは {{htmlelement("script")}} 要素内に JavaScript を書いて、もうちょっと面白いことをしてみましょう。「// JavaScript をここに書きます」と書いてあるすぐ下に、以下のコードを追加してください。
 
    ```js
-   document.addEventListener('DOMContentLoaded', () => {
+   document.addEventListener("DOMContentLoaded", () => {
      function createParagraph() {
-       const para = document.createElement('p');
-       para.textContent = 'ボタンが押されました!';
+       const para = document.createElement("p");
+       para.textContent = "ボタンが押されました!";
        document.body.appendChild(para);
      }
 
-     const buttons = document.querySelectorAll('button');
+     const buttons = document.querySelectorAll("button");
 
      for (const button of buttons) {
-       button.addEventListener('click', createParagraph);
+       button.addEventListener("click", createParagraph);
      }
    });
    ```
@@ -251,15 +249,15 @@ JavaScript は CSS と同じような方法で、HTML ページに適用する
 
    ```js
    function createParagraph() {
-     const para = document.createElement('p');
-     para.textContent = 'ボタンが押されました!';
+     const para = document.createElement("p");
+     para.textContent = "ボタンが押されました!";
      document.body.appendChild(para);
    }
 
-   const buttons = document.querySelectorAll('button');
+   const buttons = document.querySelectorAll("button");
 
    for (const button of buttons) {
-     button.addEventListener('click', createParagraph);
+     button.addEventListener("click", createParagraph);
    }
    ```
 
@@ -277,8 +275,8 @@ JavaScript は CSS と同じような方法で、HTML ページに適用する
 
 ```js example-bad
 function createParagraph() {
-  const para = document.createElement('p');
-  para.textContent = 'ボタンが押されました！';
+  const para = document.createElement("p");
+  para.textContent = "ボタンが押されました！";
   document.body.appendChild(para);
 }
 ```
@@ -303,10 +301,10 @@ HTML に JavaScript を含めるのではなく、純粋な JavaScript の構成
 このためのコードを以下に示します。
 
 ```js
-const buttons = document.querySelectorAll('button');
+const buttons = document.querySelectorAll("button");
 
 for (const button of buttons) {
-  button.addEventListener('click', createParagraph);
+  button.addEventListener("click", createParagraph);
 }
 ```
 
@@ -329,7 +327,7 @@ JavaScript を使用してページ上の要素（またはより正確には、
 内部の例では、コードの周りにこの構造を見ることができます。
 
 ```js
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener("DOMContentLoaded", () => {
   // …
 });
 ```
@@ -432,8 +430,8 @@ HTML や CSS と同様に、 JavaScript でもコード内にブラウザーが
 // 関数: HTML の body タグ内の一番下に新しい段落を追加します。
 
 function createParagraph() {
-  let para = document.createElement('p');
-  para.textContent = 'ボタンが押されました！';
+  let para = document.createElement("p");
+  para.textContent = "ボタンが押されました！";
   document.body.appendChild(para);
 }
 
@@ -444,10 +442,10 @@ function createParagraph() {
   どのボタンが押されても、 createParagraph() 関数が実行されるようにする。
 */
 
-const buttons = document.querySelectorAll('button');
+const buttons = document.querySelectorAll("button");
 
 for (const button of buttons) {
-  button.addEventListener('click', createParagraph);
+  button.addEventListener("click", createParagraph);
 }
 ```
 
diff --git a/files/ja/learn/javascript/first_steps/what_went_wrong/index.md b/files/ja/learn/javascript/first_steps/what_went_wrong/index.md
index 1d8aa41aee5899..fbe580f8676e9d 100644
--- a/files/ja/learn/javascript/first_steps/what_went_wrong/index.md
+++ b/files/ja/learn/javascript/first_steps/what_went_wrong/index.md
@@ -38,17 +38,17 @@ slug: Learn/JavaScript/First_steps/What_went_wrong
 1. `number-game-errors.html` ファイルを開いているタブを選択して、JavaScript コンソールを開いてください。以下のメッセージが表示されていますね。![](not-a-function.png)
 2. これは分かりやすいエラーです。ブラウザーからもいくつか情報が出ています (上のスクリーンショットは FireFox のものですが、他のブラウザーでも同様の情報が表示されるでしょう)。左から順に説明します。
 
-    - 赤色の 「x」 ボタンはエラーがあることを示しています。
-    - 「TypeError: guessSubmit.addeventListener is not a function」というエラーメッセージが、何が問題かを示しています。
-    - 「Learn More」 のリンクがエラー内容についてもっと詳細に説明する MDN のページを指しています。
-    - JavaScript のファイルの名前が出ています。このリンクをクリックすると、開発者ツールのデバッガータブで問題のあるファイルが開きます。ハイライトされているエラーの箇所が見えるでしょう。
-    - エラーがある行の行番号と、最初の文字が始まる番号が出ています。上の例では 86 行目の 3 文字目です。
+   - 赤色の 「x」 ボタンはエラーがあることを示しています。
+   - 「TypeError: guessSubmit.addeventListener is not a function」というエラーメッセージが、何が問題かを示しています。
+   - 「Learn More」 のリンクがエラー内容についてもっと詳細に説明する MDN のページを指しています。
+   - JavaScript のファイルの名前が出ています。このリンクをクリックすると、開発者ツールのデバッガータブで問題のあるファイルが開きます。ハイライトされているエラーの箇所が見えるでしょう。
+   - エラーがある行の行番号と、最初の文字が始まる番号が出ています。上の例では 86 行目の 3 文字目です。
 
 3. テキストエディターで 86 行目を見てみましょう。
 
-    ```js
-    guessSubmit.addeventListener('click', checkGuess);
-    ```
+   ```js
+   guessSubmit.addeventListener("click", checkGuess);
+   ```
 
 4. エラーでは、"guessSubmit.addeventListener is not a function" とあり、これは JavaScript インタープリターに呼び出している関数が認識されないという意味です。しばしば、このエラーメッセージは、スペルミスをしたということです。もし正しい綴りがわからなければ、MDN のサイトで使用している機能を調べてみてください。きっと見つかります。いつもはお好みの検索エンジンで「mdn _機能の名前_」と検索してみるのがよいでしょう。今回は代わりに [`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) のリンクを張っておきます。
 5. ページによると、関数の名前を間違えたみたいですね！JavaScript は大文字・小文字を区別しますので、ちょっとでも違うとエラーの原因になることを覚えておきましょう。それでは `addeventListener` を `addEventListener` に修正してエラーを直しましょう。
@@ -61,36 +61,36 @@ slug: Learn/JavaScript/First_steps/What_went_wrong
 2. 予想を入力して、予想を入力ボタンを押してみると、...別のエラーが起きています！![](variable-is-null.png)
 3. 今回のエラーを見ると、 78 行目で"TypeError: lowOrHi is null"が起きています。
 
-    > **メモ:** [`Null`](/ja/docs/Glossary/Null) は「何もない」ことや「値がない」ことを表す特別な値です。つまり `lowOrHi` が宣言されて初期化されているけれど、意味のある値ではない — つまり型も値もないということです。
+   > **メモ:** [`Null`](/ja/docs/Glossary/Null) は「何もない」ことや「値がない」ことを表す特別な値です。つまり `lowOrHi` が宣言されて初期化されているけれど、意味のある値ではない — つまり型も値もないということです。
 
-    > **メモ:** このエラーは関数内部 (`checkGuess() { ... }` ブロックの中) で発生したため、ページを読み込んだだけでは出てきませんでした。後に続く[関数の記事](/ja/docs/Learn/JavaScript/Building_blocks/Functions)を読み進めていけば分かりますが、内側の関数のスコープは外側の関数のスコープとは異なります。今回のケースでは、 86 行目の `checkGuess()` 関数が実行されるまで実行されず、エラーも発生していませんでした。
+   > **メモ:** このエラーは関数内部 (`checkGuess() { ... }` ブロックの中) で発生したため、ページを読み込んだだけでは出てきませんでした。後に続く[関数の記事](/ja/docs/Learn/JavaScript/Building_blocks/Functions)を読み進めていけば分かりますが、内側の関数のスコープは外側の関数のスコープとは異なります。今回のケースでは、 86 行目の `checkGuess()` 関数が実行されるまで実行されず、エラーも発生していませんでした。
 
 4. 78 行目を見てください。以下のコードが書かれています。
 
-    ```js
-    lowOrHi.textContent = '今の予想は大きすぎです!';
-    ```
+   ```js
+   lowOrHi.textContent = "今の予想は大きすぎです!";
+   ```
 
 5. この行は `lowOrHi` 定数の `textContent` プロパティに文字列を設定しようとしていますが、`lowOrHi` 定数に適切な値が設定されていないため上手く動きません。`lowOrHi` が使用されている箇所をコードのほかの部分から探してみましょう。最初に見つかるのは 48 行目でしょう。
 
-    ```js
-    const lowOrHi = document.querySelector('lowOrHi');
-    ```
+   ```js
+   const lowOrHi = document.querySelector("lowOrHi");
+   ```
 
 6. ここでは、HTML の要素を参照する変数を作ろうとしています。この行の後ろで、値が `null` になっているか確認するため以下のコードを直後の 49 行目に追加します。
 
-    ```js
-    console.log(lowOrHi);
-    ```
+   ```js
+   console.log(lowOrHi);
+   ```
 
-    > **メモ:** [`console.log()`](/ja/docs/Web/API/Console/log) は値をコンソールに出力する、デバッグするときにとても便利な関数です。これで 48 行目で `lowOrHi` にセットしたはずの値がコンソールに出力されるでしょう。
+   > **メモ:** [`console.log()`](/ja/docs/Web/API/Console/log) は値をコンソールに出力する、デバッグするときにとても便利な関数です。これで 48 行目で `lowOrHi` にセットしたはずの値がコンソールに出力されるでしょう。
 
 7. ファイルを保存して再度ブラウザーで読み込みます。そして `console.log()` の結果をコンソールで見てみましょう。 ![](console-log-output.png)わかりましたね。`lowOrHi` の値は `null` でした。これで問題が 48 行目にあることがわかりました。
 8. それでは何が問題となり得るか考えてみましょう。 48 行目では要素への参照を CSS セレクターを使用して取得する [`document.querySelector()`](/ja/docs/Web/API/Document/querySelector) メソッドが使用されています。ファイルの少し上のほうにある、問題となる{{htmlelement("p")}} 要素を見てみましょう。
 
-    ```js
-    <p class="lowOrHi"></p>
-    ```
+   ```js
+   <p class="lowOrHi"></p>
+   ```
 
 9. ここではクラスセレクターが必要です。クラスセレクターはドット (`.`) で始まりますが、 48 行目で `querySelector()` メソッドに渡された文字列にはドットがありません。これが問題でしょう！ 48 行目の `lowOrHi` を `.lowOrHi` に変更してみてください。
 10. ファイルを保存して再度読み込むと、`console.log()` の文は求めていた `<p>` 要素を表示しています。何とか次のエラーを潰すことができました！`console.log()` の行は削除してもいいですし、後で使うために残しておいても大丈夫です。
@@ -111,21 +111,21 @@ slug: Learn/JavaScript/First_steps/What_went_wrong
 
 1. `randomNumber` 変数にランダムな数値が最初にセットされる場所を検索してみましょう。ゲームの開始で推測するランダムな数字を保存しようとしているのは 44 行目のあたりです。
 
-    ```js
-    let randomNumber = Math.floor(Math.random()) + 1;
-    ```
+   ```js
+   let randomNumber = Math.floor(Math.random()) + 1;
+   ```
 
 2. そして、それぞれのゲームの合間に次のランダムな数字を設定しているのは 113 行目のあたりです。
 
-    ```js
-    randomNumber = Math.floor(Math.random()) + 1;
-    ```
+   ```js
+   randomNumber = Math.floor(Math.random()) + 1;
+   ```
 
 3. これらの行が問題となるかを確認するため、`console.log()` にもう一度登場してもらいましょう。先ほどのそれぞれの行の直下に以下のコードを追加します。
 
-    ```js
-    console.log(randomNumber);
-    ```
+   ```js
+   console.log(randomNumber);
+   ```
 
 4. 保存して再度読み込んで、何度かプレイしてみましょう。コンソールに出力される `randomNumber` の値が常に 1 であることに気づきます。
 
@@ -134,25 +134,25 @@ slug: Learn/JavaScript/First_steps/What_went_wrong
 これを直すには、この行が何をしているのか考えなければなりません。まず [`Math.random()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random) を呼んでいます。これは 0 から 1 までのランダムな実数値を生成します。例えば 0.5675493843 などです。
 
 ```js
-Math.random()
+Math.random();
 ```
 
 次に `Math.random()` の実行結果を [`Math.floor()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) に渡して、一番近い整数に切り捨てています。そしてその結果に 1 を加えます。
 
 ```js
-Math.floor(Math.random()) + 1
+Math.floor(Math.random()) + 1;
 ```
 
 0 から 1 のランダムな実数を切り捨てると、結果は常に 0 となり、それに 1 を加えることで常に 1 となります。ランダムな数を切り捨てる前に 100 を乗算しなければなりません。次のコードは 0 から 99 を返すでしょう。
 
 ```js
-Math.floor(Math.random()*100);
+Math.floor(Math.random() * 100);
 ```
 
 さらに 1 を加えることで、1 から 100 のランダムな数字を返してくれるようになります。
 
 ```js
-Math.floor(Math.random()*100) + 1;
+Math.floor(Math.random() * 100) + 1;
 ```
 
 先ほどの 2 行をそれぞれ修正してください。保存して再度読み込むと、思い通りに動くようになっているでしょう！
diff --git a/files/ja/learn/javascript/howto/index.md b/files/ja/learn/javascript/howto/index.md
index ac6bd189ab9d02..115512b7b5a150 100644
--- a/files/ja/learn/javascript/howto/index.md
+++ b/files/ja/learn/javascript/howto/index.md
@@ -42,8 +42,8 @@ JavaScript のコードが正しく動作しないので修正したい、とい
 
 ```js
 function myFunction() {
-  alert('This is my function.');
-};
+  alert("This is my function.");
+}
 ```
 
 上記のコードで定義した関数は、例えば以下のように呼び出さないかぎり何もしません。
@@ -78,9 +78,9 @@ var myNumber = 0;
 
 ```js
 var myObject = {
-  name : 'Chris',
-  age : 38
-}
+  name: "Chris",
+  age: 38,
+};
 ```
 
 ## 基本的な定義
diff --git a/files/ja/learn/javascript/objects/basics/index.md b/files/ja/learn/javascript/objects/basics/index.md
index ea4977f1d6e82b..5c3b63ebae099e 100644
--- a/files/ja/learn/javascript/objects/basics/index.md
+++ b/files/ja/learn/javascript/objects/basics/index.md
@@ -170,8 +170,8 @@ name.last;
 次のように[ドット記法](#ドット記法)を使用する代わりに、
 
 ```js
-person.age
-person.name.first
+person.age;
+person.name.first;
 ```
 
 角括弧を使用して次のようにすることができます。
diff --git a/files/ja/learn/javascript/objects/classes_in_javascript/index.md b/files/ja/learn/javascript/objects/classes_in_javascript/index.md
index 01f1e265b9995a..609db66cac03ef 100644
--- a/files/ja/learn/javascript/objects/classes_in_javascript/index.md
+++ b/files/ja/learn/javascript/objects/classes_in_javascript/index.md
@@ -40,7 +40,6 @@ l10n:
 
 ```js
 class Person {
-
   name;
 
   constructor(name) {
@@ -50,7 +49,6 @@ class Person {
   introduceSelf() {
     console.log(`Hi! I'm ${this.name}`);
   }
-
 }
 ```
 
@@ -74,7 +72,7 @@ class Person {
 上記のクラス宣言コードを指定された場合、次のように新しい `Person` インスタンスを作成して使用することができます。
 
 ```js
-const giles = new Person('Giles');
+const giles = new Person("Giles");
 
 giles.introduceSelf(); // Hi! I'm Giles
 ```
@@ -87,11 +85,9 @@ giles.introduceSelf(); // Hi! I'm Giles
 
 ```js
 class Animal {
-
   sleep() {
-    console.log('zzzzzzz');
+    console.log("zzzzzzz");
   }
-
 }
 
 const spot = new Animal();
@@ -105,7 +101,6 @@ spot.sleep(); // 'zzzzzzz'
 
 ```js
 class Professor extends Person {
-
   teaches;
 
   constructor(name, teaches) {
@@ -114,14 +109,15 @@ class Professor extends Person {
   }
 
   introduceSelf() {
-    console.log(`My name is ${this.name}, and I will be your ${this.teaches} professor.`);
+    console.log(
+      `My name is ${this.name}, and I will be your ${this.teaches} professor.`,
+    );
   }
 
   grade(paper) {
     const grade = Math.floor(Math.random() * (5 - 1) + 1);
     console.log(grade);
   }
-
 }
 ```
 
@@ -138,10 +134,10 @@ class Professor extends Person {
 この宣言により、これで教授を作成し、使用することができるようになりました。
 
 ```js
-const walsh = new Professor('Walsh', 'Psychology');
-walsh.introduceSelf();  // 'My name is Walsh, and I will be your Psychology professor'
+const walsh = new Professor("Walsh", "Psychology");
+walsh.introduceSelf(); // 'My name is Walsh, and I will be your Psychology professor'
 
-walsh.grade('my paper'); // some random grade
+walsh.grade("my paper"); // some random grade
 ```
 
 ## カプセル化
@@ -152,7 +148,6 @@ walsh.grade('my paper'); // some random grade
 
 ```js
 class Student extends Person {
-
   #year;
 
   constructor(name, year) {
@@ -160,7 +155,6 @@ class Student extends Person {
     this.#year = year;
   }
 
-
   introduceSelf() {
     console.log(`Hi! I'm ${this.name}, and I'm in year ${this.#year}.`);
   }
@@ -168,14 +162,13 @@ class Student extends Person {
   canStudyArchery() {
     return this.#year > 1;
   }
-
 }
 ```
 
 このクラス宣言では、`#year` は [プライベートデータプロパティ](/ja/docs/Web/JavaScript/Reference/Classes/Private_class_fields)です。`Student` オブジェクトを作成し、内部で `#year` を使用することができますが、オブジェクトの外のコードが `#year` にアクセスしようとすると、ブラウザはエラーを報告します。
 
 ```js
-const summers = new Student('Summers', 2);
+const summers = new Student("Summers", 2);
 
 summers.introduceSelf(); // Hi! I'm Summers, and I'm in year 2.
 summers.canStudyArchery(); // true
@@ -196,7 +189,7 @@ class Example {
   }
 
   #somePrivateMethod() {
-    console.log('You called me?');
+    console.log("You called me?");
   }
 }
 
diff --git a/files/ja/learn/javascript/objects/json/index.md b/files/ja/learn/javascript/objects/json/index.md
index a279c401b39d11..bda55eabf301d4 100644
--- a/files/ja/learn/javascript/objects/json/index.md
+++ b/files/ja/learn/javascript/objects/json/index.md
@@ -82,14 +82,14 @@ JSON 文字列はそれ自身をファイルとして格納することもでき
 この文字列を JavaScript プログラムへ読み込むと（例えば、変数 `superHeroes` へ代入すると）と、 [JavaScript オブジェクトの基本](/ja/docs/Learn/JavaScript/Objects/Basics)の記事で見たのと同様に、ドットや角括弧を使ってデータへアクセスすることができます。例えば次のようになります。
 
 ```js
-superHeroes.homeTown
-superHeroes['active']
+superHeroes.homeTown;
+superHeroes["active"];
 ```
 
 さらに深い階層のデータへアクセスする場合は、単純にプロパティ名や配列のインデックスを連結します。例えば、メンバーリスト中 2 番目のヒーローの 3 番目の能力を参照する場合は、以下のようにします。
 
 ```js
-superHeroes['members'][1]['powers'][2]
+superHeroes["members"][1]["powers"][2];
 ```
 
 1. まず、変数名 `superHeroes` を指定します。
@@ -144,17 +144,11 @@ superHeroes['members'][1]['powers'][2]
 まず、 [heroes.html](https://github.com/mdn/learning-area/blob/main/javascript/oojs/json/heroes.html) と [style.css](https://github.com/mdn/learning-area/blob/main/javascript/oojs/json/style.css) のコピーをローカルに作成してください。後者は例題ページをスタイリングするための CSS であり、前者は簡単な HTML です。加えて、{{HTMLElement("script")}} 要素で、この演習で書くJavaScriptコードを格納します。
 
 ```html
-<header>
+<header></header>
 
-</header>
+<section></section>
 
-<section>
-
-</section>
-
-<script>
-
-</script>
+<script></script>
 ```
 
 JSON データは GitHub の <https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json> で利用できます。
@@ -169,8 +163,8 @@ JSON データは GitHub の <https://mdn.github.io/learning-area/javascript/ooj
 
 ```js
 async function populate() {
-
-  const requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
+  const requestURL =
+    "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";
   const request = new Request(requestURL);
 
   const response = await fetch(request);
@@ -178,7 +172,6 @@ async function populate() {
 
   populateHeader(superHeroes);
   populateHeroes(superHeroes);
-
 }
 ```
 
@@ -202,12 +195,12 @@ JSON を取得するには、[フェッチ](/ja/docs/Web/API/Fetch_API)という
 
 ```js
 function populateHeader(obj) {
-  const header = document.querySelector('header');
-  const myH1 = document.createElement('h1');
+  const header = document.querySelector("header");
+  const myH1 = document.createElement("h1");
   myH1.textContent = obj.squadName;
   header.appendChild(myH1);
 
-  const myPara = document.createElement('p');
+  const myPara = document.createElement("p");
   myPara.textContent = `Hometown: ${obj.homeTown} // Formed: ${obj.formed}`;
   header.appendChild(myPara);
 }
@@ -221,25 +214,25 @@ function populateHeader(obj) {
 
 ```js
 function populateHeroes(obj) {
-  const section = document.querySelector('section');
+  const section = document.querySelector("section");
   const heroes = obj.members;
 
   for (const hero of heroes) {
-    const myArticle = document.createElement('article');
-    const myH2 = document.createElement('h2');
-    const myPara1 = document.createElement('p');
-    const myPara2 = document.createElement('p');
-    const myPara3 = document.createElement('p');
-    const myList = document.createElement('ul');
+    const myArticle = document.createElement("article");
+    const myH2 = document.createElement("h2");
+    const myPara1 = document.createElement("p");
+    const myPara2 = document.createElement("p");
+    const myPara3 = document.createElement("p");
+    const myList = document.createElement("ul");
 
     myH2.textContent = hero.name;
     myPara1.textContent = `Secret identity: ${hero.secretIdentity}`;
     myPara2.textContent = `Age: ${hero.age}`;
-    myPara3.textContent = 'Superpowers:';
+    myPara3.textContent = "Superpowers:";
 
     const superPowers = hero.powers;
     for (const power of superPowers) {
-      const listItem = document.createElement('li');
+      const listItem = document.createElement("li");
       listItem.textContent = power;
       myList.appendChild(listItem);
     }
@@ -296,8 +289,8 @@ populate();
 
 ```js
 async function populate() {
-
-  const requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
+  const requestURL =
+    "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";
   const request = new Request(requestURL);
 
   const response = await fetch(request);
@@ -306,17 +299,16 @@ async function populate() {
   const superHeroes = JSON.parse(superHeroesText);
   populateHeader(superHeroes);
   populateHeroes(superHeroes);
-
 }
 ```
 
-ご想像の通り、 `stringify()`  はまったく反対の向きに動作します。次のコードをブラウザーの JavaScript コンソールに一つずつ打ち込んでいって、実際に動かしてみて下さい。
+ご想像の通り、 `stringify()` はまったく反対の向きに動作します。次のコードをブラウザーの JavaScript コンソールに一つずつ打ち込んでいって、実際に動かしてみて下さい。
 
 ```js
 let myObj = { name: "Chris", age: 38 };
-myObj
+myObj;
 let myString = JSON.stringify(myObj);
-myString
+myString;
 ```
 
 ここでは、 JavaScript オブジェクトを作成してその中身を確認しています。次に `stringify()` を使って JSON 文字列に変換し、返値を新しい変数に保存し、その値も確認しています。
diff --git a/files/ja/learn/javascript/objects/object_building_practice/index.md b/files/ja/learn/javascript/objects/object_building_practice/index.md
index b3e41b991ddc5d..315fbe815d2bb6 100644
--- a/files/ja/learn/javascript/objects/object_building_practice/index.md
+++ b/files/ja/learn/javascript/objects/object_building_practice/index.md
@@ -204,7 +204,7 @@ while (balls.length < 25) {
     random(-7, 7),
     random(-7, 7),
     randomRGB(),
-    size
+    size,
   );
 
   balls.push(ball);
diff --git a/files/ja/learn/javascript/objects/test_your_skills_colon__object_basics/index.md b/files/ja/learn/javascript/objects/test_your_skills_colon__object_basics/index.md
index 3f190e2894fa12..4e6f0619aa7508 100644
--- a/files/ja/learn/javascript/objects/test_your_skills_colon__object_basics/index.md
+++ b/files/ja/learn/javascript/objects/test_your_skills_colon__object_basics/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'スキルテスト: オブジェクトの基本'
+title: "スキルテスト: オブジェクトの基本"
 slug: Learn/JavaScript/Objects/Test_your_skills:_Object_basics
 ---
 

From 1aefa75e07c6521d060f68a779366f7d51281f38 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 24 Jul 2023 22:13:53 +0900
Subject: [PATCH 07/13] =?UTF-8?q?2023/07/19=20=E6=99=82=E7=82=B9=E3=81=AE?=
 =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../element/transitioncancel_event/index.md   | 142 ++++++++++++------
 .../api/element/transitionend_event/index.md  | 142 +++++++++++++-----
 .../api/element/transitionrun_event/index.md  | 139 ++++++++++++-----
 .../element/transitionstart_event/index.md    | 135 +++++++++++------
 4 files changed, 394 insertions(+), 164 deletions(-)

diff --git a/files/ja/web/api/element/transitioncancel_event/index.md b/files/ja/web/api/element/transitioncancel_event/index.md
index 365c8145d15d2e..ff5e1b819fc7d3 100644
--- a/files/ja/web/api/element/transitioncancel_event/index.md
+++ b/files/ja/web/api/element/transitioncancel_event/index.md
@@ -1,59 +1,120 @@
 ---
-title: 'Document: transitioncancel イベント'
+title: "Element: transitioncancel イベント"
+short-title: transitioncancel
 slug: Web/API/Element/transitioncancel_event
 original_slug: Web/API/Document/transitioncancel_event
+l10n:
+  sourceCommit: 1b094710cd2816a6669ce616b6f56d0a5b25e6ad
 ---
 
-{{APIRef}}{{SeeCompatTable}}
-
-**`transitioncancel`** イベントは、 [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)がキャンセルされたときに発生します。
-
-詳しくは {{domxref("GlobalEventHandlers.ontransitioncancel")}} をご覧ください。
-
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">バブリング</th>
-      <td>あり</td>
-    </tr>
-    <tr>
-      <th scope="row">キャンセル</th>
-      <td>不可</td>
-    </tr>
-    <tr>
-      <th scope="row">インターフェイス</th>
-      <td>{{domxref("TransitionEvent")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">イベントハンドラープロパティ</th>
-      <td>
-        {{domxref("GlobalEventHandlers.ontransitioncancel")}}
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 [HTMLElement: transitioncancel イベント](/ja/docs/Web/API/HTMLElement/transitioncancel_event)を参照してください。
+{{APIRef}}
+
+**`transitioncancel`** イベントは、 [CSS トランジション](/ja/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)がキャンセルされたときに発生します。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("transitioncancel", (event) => {});
+
+ontransitioncancel = (event) => {};
+```
+
+## イベント型
+
+{{domxref("TransitionEvent")}} です。 {{domxref("Event")}} を継承しています。
+
+{{InheritanceDiagram("TransitionEvent")}}
+
+## イベントプロパティ
+
+_親である {{domxref("Event")}} から継承したプロパティもあります。_
+
+- {{domxref("TransitionEvent.propertyName")}} {{ReadOnlyInline}}
+  - : 文字列で、このトランジションに関連付けられた CSS プロパティの名前が入ります。
+- {{domxref("TransitionEvent.elapsedTime")}} {{ReadOnlyInline}}
+  - : float` で、このイベントが発行されたときにトランジションが実行されていた時間を秒単位で表します。この値は {{cssxref("transition-delay")}} プロパティの影響を受けません。
+- {{domxref("TransitionEvent.pseudoElement")}} {{ReadOnlyInline}}
+  - : 文字列で、アニメーションが実行する[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)の名前が入ります。トランジションが擬似要素上で実行されず、要素上で実行される場合は空文字列 (`''`) です。
 
 ## 例
 
-このコードは、リスナーに `transitioncancel` イベントを追加します。
+このコードはトランジションを定義している要素を取得し、`transitioncancel` イベントのリスナーを追加します。
 
 ```js
-document.addEventListener('transitioncancel', () => {
-  console.log('Transition canceled');
+const transition = document.querySelector(".transition");
+
+transition.addEventListener("transitioncancel", () => {
+  console.log("Transition canceled");
 });
 ```
 
-同様に、 {{domxref("GlobalEventHandlers.ontransitioncancel", "ontransitioncancel")}} プロパティを `addEventListener()` の代わりに使用した例です。
+同じことを、`ontransitioncancel` プロパティを `addEventListener()` の代わりに使用して行った例です。
 
 ```js
-document.ontransitioncancel = () => {
-  console.log('Transition canceled');
+const transition = document.querySelector(".transition");
+
+transition.ontransitioncancel = () => {
+  console.log("Transition canceled");
 };
 ```
 
-[このイベントのライブデモを参照してください。](/ja/docs/Web/API/HTMLElement/transitioncancel_event#Live_example)
+### ライブ例
+
+次の例では、単純な {{htmlelement("div")}} 要素に遅延を含むトランジションをスタイル設定しています。
+
+```html
+<div class="transition"></div>
+<div class="message"></div>
+```
+
+```css
+.transition {
+  width: 100px;
+  height: 100px;
+  background: rgba(255, 0, 0, 1);
+  transition-property: transform, background;
+  transition-duration: 2s;
+  transition-delay: 2s;
+}
+
+.transition:hover {
+  transform: rotate(90deg);
+  background: rgba(255, 0, 0, 0);
+}
+```
+
+これにいくらかの JavaScript を追加して、[`transitionstart`](/ja/docs/Web/API/Element/transitionstart_event)、[`transitionrun`](/ja/docs/Web/API/Element/transitionrun_event)、`transitioncancel`、[`transitionend`](/ja/docs/Web/API/Element/transitionend_event) の各イベントが発生すると実行されるようにします。この例では、トランジションをキャンセルするには、トランジションが終了する前にトランジション中のボックスに宛てたマウスを外してください。トランジション終了イベントを発生させるには、トランジションが終了するまでトランジションの上にマウスを当てたままにしてください。
+
+```js
+const message = document.querySelector(".message");
+const el = document.querySelector(".transition");
+
+el.addEventListener("transitionrun", () => {
+  message.textContent = "transitionrun が発生";
+});
+
+el.addEventListener("transitionstart", () => {
+  message.textContent = "transitionstart が発生";
+});
+
+el.addEventListener("transitioncancel", () => {
+  message.textContent = "transitioncancel が発生";
+});
+
+el.addEventListener("transitionend", () => {
+  message.textContent = "transitionend が発生";
+});
+```
+
+{{ EmbedLiveSample('Live_example', '100%', '150px') }}
+
+`transitioncancel` イベントは `transitionrun` イベントが発生した後、`transitionend` イベントが発生する前にトランジションがどちらかの方向に取り消された場合に発行されます。
+
+トランジションの遅延や継続時間がない場合、両方が 0s である場合、または両方とも宣言されていない場合、トランジションは発生せず、トランジションイベントは何も発行されません。
+
+`transitioncancel` イベントが発行された場合、`transitionend` イベントは発行されません。
 
 ## 仕様書
 
@@ -65,9 +126,6 @@ document.ontransitioncancel = () => {
 
 ## 関連情報
 
-- {{domxref("GlobalEventHandlers.ontransitioncancel")}} イベントハンドラー
 - {{domxref("TransitionEvent")}} インターフェイス
 - CSS プロパティ: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}
-- 関連イベント: {{domxref("Document/transitionrun_event", "transitionrun")}}, {{domxref("Document/transitionstart_event", "transitionstart")}}, {{domxref("Document/transitionend_event", "transitionend")}}
-- {{domxref("HTMLElement")}} を対象としたこのイベント: {{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}}
-- {{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/transitioncancel_event", "transitioncancel")}}
+- 関連イベント: {{domxref("Element/transitionrun_event", "transitionrun")}}, {{domxref("Element/transitionstart_event", "transitionstart")}}, {{domxref("Element/transitionend_event", "transitionend")}}
diff --git a/files/ja/web/api/element/transitionend_event/index.md b/files/ja/web/api/element/transitionend_event/index.md
index 7082260652abac..e98c72447d15fb 100644
--- a/files/ja/web/api/element/transitionend_event/index.md
+++ b/files/ja/web/api/element/transitionend_event/index.md
@@ -1,59 +1,124 @@
 ---
-title: 'Document: transitionend イベント'
+title: "Element: transitionend イベント"
+short-title: transitionend
 slug: Web/API/Element/transitionend_event
 original_slug: Web/API/Document/transitionend_event
+l10n:
+  sourceCommit: 1b094710cd2816a6669ce616b6f56d0a5b25e6ad
 ---
 
 {{APIRef}}
 
-**`transitionend`** イベントは、 [CSS トランジション](/ja/docs/CSS/Using_CSS_transitions)が完了したときに発生します。トランジションが完了前に削除された場合、例えば {{cssxref("transition-property")}} が削除されたり、 {{cssxref("display")}} が `none` に設定されたりした場合、イベントは生成されません。
-
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">バブリング</th>
-      <td>あり</td>
-    </tr>
-    <tr>
-      <th scope="row">キャンセル</th>
-      <td>可</td>
-    </tr>
-    <tr>
-      <th scope="row">インターフェイス</th>
-      <td>{{domxref("TransitionEvent")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">イベントハンドラープロパティ</th>
-      <td>
-        {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-`transitionend` イベントは二つの方向で発生します。 - トランジション終了の状態まで遷移し終わったときと、既定またはトランジションがない状態まで完全に戻ったときです。トランジションに待ち時間や実行時間がない場合、両方が 0 秒またはどちらも宣言されていなかった場合、トランジションは発生せず、トランジションイベントは発生しません。 `transitioncancel` イベントが発生すると、 `transitionend` イベントは発生しません。
-
-このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 [HTMLElement: transitionend イベント](/ja/docs/Web/API/HTMLElement/transitionend_event)を参照してください。
+**`transitionend`** イベントは、 [CSS トランジション](/ja/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)が完了したときに発生します。トランジションが完了前に削除された場合、例えば {{cssxref("transition-property")}} が削除されたり、 {{cssxref("display")}} が `none` に設定されたりした場合、イベントは生成されません。
+
+`transitionend` イベントは二つの方向で発生します。トランジション終了の状態まで遷移し終わったときと、既定またはトランジションがない状態まで完全に戻ったときです。トランジションに待ち時間や実行時間がない場合、両方が 0 秒またはどちらも宣言されていなかった場合、トランジションは発生せず、トランジションイベントは発生しません。 `transitioncancel` イベントが発生すると、 `transitionend` イベントは発生しません。
+
+このイベントはキャンセルできません。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("transitionend", (event) => {});
+
+ontransitionend = (event) => {};
+```
+
+## イベント型
+
+{{domxref("TransitionEvent")}} です。 {{domxref("Event")}} を継承しています。
+
+{{InheritanceDiagram("TransitionEvent")}}
+
+## イベントプロパティ
+
+_親である {{domxref("Event")}} から継承したプロパティもあります。_
+
+- {{domxref("TransitionEvent.propertyName")}} {{ReadOnlyInline}}
+  - : 文字列で、このトランジションに関連付けられた CSS プロパティの名前が入ります。
+- {{domxref("TransitionEvent.elapsedTime")}} {{ReadOnlyInline}}
+  - : float` で、このイベントが発行されたときにトランジションが実行されていた時間を秒単位で表します。この値は {{cssxref("transition-delay")}} プロパティの影響を受けません。
+- {{domxref("TransitionEvent.pseudoElement")}} {{ReadOnlyInline}}
+  - : 文字列で、アニメーションが実行する[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)の名前が入ります。トランジションが擬似要素上で実行されず、要素上で実行される場合は空文字列 (`''`) です。
 
 ## 例
 
-このコードはリスナーに `transitionend` イベントを追加します。
+このコードはトランジションを定義している要素を取得し、`transitionend` イベントのリスナーを追加します。
 
 ```js
-document.addEventListener('transitionend', () => {
-  console.log('Transition ended');
+const transition = document.querySelector(".transition");
+
+transition.addEventListener("transitionend", () => {
+  console.log("Transition ended");
 });
 ```
 
-同様に、 {{domxref("GlobalEventHandlers/ontransitioncancel", "ontransitionend")}} プロパティを `addEventListener()` の代わりに使用した例です。
+同じことを、`ontransitionend` を使用して行う例です。
 
 ```js
-document.ontransitionend = () => {
-  console.log('Transition ended');
+const transition = document.querySelector(".transition");
+
+transition.ontransitionend = () => {
+  console.log("Transition ended");
 };
 ```
 
-[このイベントのライブデモを参照してください。](/ja/docs/Web/API/HTMLElement/transitionend_event#Live_example)
+### ライブ例
+
+次の例では、単純な {{htmlelement("div")}} 要素に遅延を含むトランジションをスタイル設定しています。
+
+```html
+<div class="transition"></div>
+<div class="message"></div>
+```
+
+```css
+.transition {
+  width: 100px;
+  height: 100px;
+  background: rgba(255, 0, 0, 1);
+  transition-property: transform, background;
+  transition-duration: 2s;
+  transition-delay: 2s;
+}
+
+.transition:hover {
+  transform: rotate(90deg);
+  background: rgba(255, 0, 0, 0);
+}
+```
+
+これにいくらかの JavaScript を追加して、[`transitionstart`](/ja/docs/Web/API/Element/transitionstart_event)、[`transitionrun`](/ja/docs/Web/API/Element/transitionrun_event)、[`transitioncancel`](/ja/docs/Web/API/Element/transitioncancel_event)、`transitionend` の各イベントが発生すると実行されるようにします。この例では、トランジションをキャンセルするには、トランジションが終了する前にトランジション中のボックスに宛てたマウスを外してください。トランジション終了イベントを発生させるには、トランジションが終了するまでトランジションの上にマウスを当てたままにしてください。
+
+```js
+const message = document.querySelector(".message");
+const el = document.querySelector(".transition");
+
+el.addEventListener("transitionrun", () => {
+  message.textContent = "transitionrun が発生";
+});
+
+el.addEventListener("transitionstart", () => {
+  message.textContent = "transitionstart が発生";
+});
+
+el.addEventListener("transitioncancel", () => {
+  message.textContent = "transitioncancel が発生";
+});
+
+el.addEventListener("transitionend", () => {
+  message.textContent = "transitionend が発生";
+});
+```
+
+{{ EmbedLiveSample('Live_example', '100%', '150px') }}
+
+`transitionend` イベントは両方向に発生します。ボックスの回転が完了し、不透明度が方向に応じて 0 または 1 になったときです。
+
+トランジションの遅延や継続時間がない場合、両方が 0s である場合、または両方とも宣言されていない場合、トランジションは発生せず、トランジションイベントは何も発行されません。
+
+`transitioncancel` イベントが発行された場合、`transitionend` イベントは発行されません。
 
 ## 仕様書
 
@@ -65,9 +130,6 @@ document.ontransitionend = () => {
 
 ## 関連情報
 
-- {{domxref("GlobalEventHandlers.ontransitionend")}} イベントハンドラー
 - {{domxref("TransitionEvent")}} インターフェイス
 - CSS プロパティ: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}
-- 関連イベント: {{domxref("Document/transitionrun_event", "transitionrun")}}, {{domxref("Document/transitionstart_event", "transitionstart")}}, {{domxref("Document/transitioncancel_event", "transitioncancel")}}
-- {{domxref("HTMLElement")}} を対象としたこのイベント: {{domxref("HTMLElement/transitionend_event", "transitionend")}}
-- {{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/transitionend_event", "transitionend")}}
+- 関連イベント: {{domxref("Element/transitionrun_event", "transitionrun")}}, {{domxref("Element/transitionstart_event", "transitionstart")}}, {{domxref("Element/transitioncancel_event", "transitioncancel")}}
diff --git a/files/ja/web/api/element/transitionrun_event/index.md b/files/ja/web/api/element/transitionrun_event/index.md
index cbb7c0f7ae7c93..444d04a9c66fda 100644
--- a/files/ja/web/api/element/transitionrun_event/index.md
+++ b/files/ja/web/api/element/transitionrun_event/index.md
@@ -1,57 +1,119 @@
 ---
-title: 'Document: transitionrun イベント'
+title: "Element: transitionrun イベント"
+short-title: transitionrun
 slug: Web/API/Element/transitionrun_event
 original_slug: Web/API/Document/transitionrun_event
+l10n:
+  sourceCommit: 1b094710cd2816a6669ce616b6f56d0a5b25e6ad
 ---
 
-{{APIRef}}{{SeeCompatTable}}
-
-**`transitionrun`** イベントは、 [CSS トランジション](/ja/docs/CSS/Using_CSS_transitions)が最初に生成されたとき、すなわち {{cssxref("transition-delay")}} が始まる前に発生します。
-
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">バブリング</th>
-      <td>あり</td>
-    </tr>
-    <tr>
-      <th scope="row">キャンセル</th>
-      <td>不可</td>
-    </tr>
-    <tr>
-      <th scope="row">インターフェイス</th>
-      <td>{{domxref("TransitionEvent")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">イベントハンドラープロパティ</th>
-      <td>
-        {{domxref("GlobalEventHandlers/ontransitionrun", "ontransitionrun")}}
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 [HTMLElement: transitionrun イベント](/ja/docs/Web/API/HTMLElement/transitionrun_event)を参照してください。
+{{APIRef}}
+
+**`transitionrun`** イベントは、 [CSS トランジション](/ja/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)が最初に生成されたとき、すなわち {{cssxref("transition-delay")}} が始まる前に発生します。
+
+このイベントはキャンセルできません。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("transitionrun", (event) => {});
+
+ontransitionrun = (event) => {};
+```
+
+## イベント型
+
+{{domxref("TransitionEvent")}} です。 {{domxref("Event")}} を継承しています。
+
+{{InheritanceDiagram("TransitionEvent")}}
+
+## イベントプロパティ
+
+_親である {{domxref("Event")}} から継承したプロパティもあります。_
+
+- {{domxref("TransitionEvent.propertyName")}} {{ReadOnlyInline}}
+  - : 文字列で、このトランジションに関連付けられた CSS プロパティの名前が入ります。
+- {{domxref("TransitionEvent.elapsedTime")}} {{ReadOnlyInline}}
+  - : float` で、このイベントが発行されたときにトランジションが実行されていた時間を秒単位で表します。この値は {{cssxref("transition-delay")}} プロパティの影響を受けません。
+- {{domxref("TransitionEvent.pseudoElement")}} {{ReadOnlyInline}}
+  - : 文字列で、アニメーションが実行する[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)の名前が入ります。トランジションが擬似要素上で実行されず、要素上で実行される場合は空文字列 (`''`) です。
 
 ## 例
 
-次のコードは `transitionrun` イベントにリスナーを追加します。
+このコードは `transitionrun` イベントのリスナーを追加します。
 
 ```js
-document.addEventListener('transitionrun', () => {
-  console.log('Transition is running but hasn't necessarily started transitioning yet');
+el.addEventListener("transitionrun", () => {
+  console.log(
+    "トランジションは実行中ですが、まだトランジションは始まっていません。",
+  );
 });
 ```
 
-同じですが、 {{domxref("GlobalEventHandlers/ontransitionrun", "ontransitionrun")}} を `addEventListener()` の代わりに使用すると次のようになります。
+同じことを、`ontransitionrun` プロパティを `addEventListener()` の代わりに使用して行います。
 
 ```js
-document.ontransitionrun = () => {
-  console.log('Transition started running');
+el.ontransitionrun = () => {
+  console.log(
+    "トランジションの実行が開始され、トランジションの遅延時間が経過した時点でトランジションを開始します。",
+  );
 };
 ```
 
-[このイベントのライブデモを参照してください。](/ja/docs/Web/API/HTMLElement/transitionrun_event#Live_example)
+### ライブ例
+
+次の例では、単純な {{htmlelement("div")}} 要素に遅延を含むトランジションをスタイル設定しています。
+
+```html
+<div class="transition">ここにポインターを当ててください</div>
+<div class="message"></div>
+```
+
+```css
+.transition {
+  width: 100px;
+  height: 100px;
+  background: rgba(255, 0, 0, 1);
+  transition-property: transform, background;
+  transition-duration: 2s;
+  transition-delay: 1s;
+}
+
+.transition:hover {
+  transform: rotate(90deg);
+  background: rgba(255, 0, 0, 0);
+}
+```
+
+これにいくらかの JavaScript を追加して、{{domxref("Element/transitionstart_event", "transitionstart")}} および {{domxref("Element/transitionrun_event", "transitionrun")}} イベントが発生すると実行されるようにします。
+
+```js
+const el = document.querySelector(".transition");
+const message = document.querySelector(".message");
+
+el.addEventListener("transitionrun", () => {
+  message.textContent = "transitionrun が発生";
+});
+
+el.addEventListener("transitionstart", () => {
+  message.textContent = "transitionstart が発生";
+});
+
+el.addEventListener("transitionend", () => {
+  message.textContent = "transitionend が発生";
+});
+```
+
+{{ EmbedLiveSample('Live_example', '100%', '150px') }}
+
+違いは次の通りです。
+
+- `transitionrun` は、トランジションが作成されたとき（つまり、遅延が始まるとき）に発生します。
+- `transitionstart` は、実際のアニメーションが始まったとき（つまり、遅延が終わったとき）に発生します。
+
+`transitionrun` は、トランジションが遅延時間内にキャンセルされた場合でも発生します。トランジションの遅延がない場合や、transition-delay が負の場合は、`transitionrun` と `transitionstart` の両方が発生します。
 
 ## 仕様書
 
@@ -63,9 +125,6 @@ document.ontransitionrun = () => {
 
 ## 関連情報
 
-- {{domxref("GlobalEventHandlers.ontransitionrun")}} イベントハンドラー
 - {{domxref("TransitionEvent")}} インターフェイス
 - CSS プロパティ: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}
-- 関連イベント: {{domxref("Document/transitionend_event", "transitionend")}}, {{domxref("Document/transitionstart_event", "transitionstart")}}, {{domxref("Document/transitioncancel_event", "transitioncancel")}}
-- {{domxref("HTMLElement")}} を対象としたこのイベント: {{domxref("HTMLElement/transitionrun_event", "transitionrun")}}
-- {{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/transitionstart_run", "transitionrun")}}
+- 関連イベント: {{domxref("Element/transitionend_event", "transitionend")}}, {{domxref("Element/transitionstart_event", "transitionstart")}}, {{domxref("Element/transitioncancel_event", "transitioncancel")}}
diff --git a/files/ja/web/api/element/transitionstart_event/index.md b/files/ja/web/api/element/transitionstart_event/index.md
index 0f023fa69b8890..62638fd5bf89ce 100644
--- a/files/ja/web/api/element/transitionstart_event/index.md
+++ b/files/ja/web/api/element/transitionstart_event/index.md
@@ -1,59 +1,113 @@
 ---
-title: 'Document: transitionstart イベント'
+title: "Element: transitionstart イベント"
+short-title: transitionstart
 slug: Web/API/Element/transitionstart_event
 original_slug: Web/API/Document/transitionstart_event
+l10n:
+  sourceCommit: 1b094710cd2816a6669ce616b6f56d0a5b25e6ad
 ---
 
-{{APIRef}}{{SeeCompatTable}}
-
-**`transitionstart`** イベントは、 [CSS トランジション](/ja/docs/CSS/Using_CSS_transitions)が実際に始まったとき、すなわち {{cssxref("transition-delay")}} が終了した後に発生します。
-
-`transitionstart` と `transitionrun` の違いは、 `transitionrun` がトランジションが生成されたとき (すなわち、待ち時間の開始) に発生するのに対し、 `transitionstart` は実際にアニメーションが始まったとき (すなわち、待ち時間の終了) に発生することです。
-
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">バブリング</th>
-      <td>あり</td>
-    </tr>
-    <tr>
-      <th scope="row">キャンセル</th>
-      <td>不可</td>
-    </tr>
-    <tr>
-      <th scope="row">インターフェイス</th>
-      <td>{{domxref("TransitionEvent")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">イベントハンドラープロパティ</th>
-      <td>
-        {{domxref("GlobalEventHandlers.ontransitionstart")}}
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 [HTMLElement: transitionstart イベント](/ja/docs/Web/API/HTMLElement/transitionstart_event)を参照してください。
+{{APIRef}}
+
+**`transitionstart`** イベントは、 [CSS トランジション](/ja/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)が実際に始まったとき、すなわち {{cssxref("transition-delay")}} が終了した後に発生します。
+
+このイベントはキャンセルできません。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("transitionstart", (event) => {});
+
+ontransitionstart = (event) => {};
+```
+
+## イベント型
+
+{{domxref("TransitionEvent")}} です。 {{domxref("Event")}} を継承しています。
+
+{{InheritanceDiagram("TransitionEvent")}}
+
+## イベントプロパティ
+
+_親である {{domxref("Event")}} から継承したプロパティもあります。_
+
+- {{domxref("TransitionEvent.propertyName")}} {{ReadOnlyInline}}
+  - : 文字列で、このトランジションに関連付けられた CSS プロパティの名前が入ります。
+- {{domxref("TransitionEvent.elapsedTime")}} {{ReadOnlyInline}}
+  - : float` で、このイベントが発行されたときにトランジションが実行されていた時間を秒単位で表します。この値は {{cssxref("transition-delay")}} プロパティの影響を受けません。
+- {{domxref("TransitionEvent.pseudoElement")}} {{ReadOnlyInline}}
+  - : 文字列で、アニメーションが実行する[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)の名前が入ります。トランジションが擬似要素上で実行されず、要素上で実行される場合は空文字列 (`''`) です。
 
 ## 例
 
-次のコードは `transitionstart` イベントにリスナーを追加します。
+このコードは `transitionstart` イベントのリスナーを追加します。
 
 ```js
-document.addEventListener('transitionrun', () => {
-  console.log('Transition is running but hasn't necessarily started transitioning yet');
+element.addEventListener("transitionstart", () => {
+  console.log("トランジション開始");
 });
 ```
 
-同じですが、 {{domxref("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}} を `addEventListener()` の代わりに使用すると次のようになります。
+同じことを、`ontransitionstart` プロパティを `addEventListener()` の代わりに使用して行います。
 
 ```js
-document.ontransitionrun = () => {
-  console.log('Transition started running');
+element.ontransitionstart = () => {
+  console.log("トランジション開始");
 };
 ```
 
-[このイベントのライブデモを参照してください。](/ja/docs/Web/API/HTMLElement/transitionstart_event#Live_example)
+### ライブ例
+
+次の例では、単純な {{htmlelement("div")}} 要素に遅延を含むトランジションをスタイル設定しています。
+
+```html
+<div class="transition">ここにポインターを当ててください</div>
+<div class="message"></div>
+```
+
+```css
+.transition {
+  width: 100px;
+  height: 100px;
+  background: rgba(255, 0, 0, 1);
+  transition-property: transform, background;
+  transition-duration: 2s;
+  transition-delay: 1s;
+}
+
+.transition:hover {
+  transform: rotate(90deg);
+  background: rgba(255, 0, 0, 0);
+}
+```
+
+これにいくらかの JavaScript を追加して、{{domxref("Element/transitionstart_event", "transitionstart")}} および {{domxref("Element/transitionrun_event", "transitionrun")}} イベントが発生すると実行されるようにします。
+
+```js
+const transition = document.querySelector(".transition");
+const message = document.querySelector(".message");
+
+transition.addEventListener("transitionrun", () => {
+  message.textContent = "transitionrun が発生";
+});
+
+transition.addEventListener("transitionstart", () => {
+  message.textContent = "transitionstart が発生";
+});
+
+transition.addEventListener("transitionend", () => {
+  message.textContent = "transitionend が発生";
+});
+```
+
+{{ EmbedLiveSample('Live example', '100%', '170') }}
+
+違いは次の通りです。
+
+- `transitionrun` は、トランジションが作成されたとき（つまり、遅延が始まるとき）に発生します。
+- `transitionstart` は、実際のアニメーションが始まったとき（つまり、遅延が終わったとき）に発生します。
 
 ## 仕様書
 
@@ -65,9 +119,6 @@ document.ontransitionrun = () => {
 
 ## 関連情報
 
-- {{domxref("GlobalEventHandlers.ontransitionstart")}} イベントハンドラー
 - {{domxref("TransitionEvent")}} インターフェイス
 - CSS プロパティ: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}
-- 関連イベント: {{domxref("Document/transitionend_event", "transitionend")}}, {{domxref("Document/transitionrun_event", "transitionrun")}}, {{domxref("Document/transitioncancel_event", "transitioncancel")}}
-- {{domxref("HTMLElement")}} を対象としたこのイベント: {{domxref("HTMLElement/transitionstart_event", "transitionstart")}}
-- {{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/transitionstart_event", "transitionstart")}}
+- 関連イベント: {{domxref("Element/transitionend_event", "transitionend")}}, {{domxref("Element/transitionrun_event", "transitionrun")}}, {{domxref("Element/transitioncancel_event", "transitioncancel")}}

From 60c19b1e1cf344f2ccf2c72891f438e367da0b4b Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 25 Jul 2023 00:06:39 +0900
Subject: [PATCH 08/13] =?UTF-8?q?2023/04/07=20=E6=99=82=E7=82=B9=E3=81=AE?=
 =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/federatedcredential/protocol/index.md | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/files/ja/web/api/federatedcredential/protocol/index.md b/files/ja/web/api/federatedcredential/protocol/index.md
index 034220c759bb31..2e894d8e0395d8 100644
--- a/files/ja/web/api/federatedcredential/protocol/index.md
+++ b/files/ja/web/api/federatedcredential/protocol/index.md
@@ -1,21 +1,18 @@
 ---
-title: FederatedCredential.protocol
+title: "FederatedCredential: protocol プロパティ"
+short-title: protocol
 slug: Web/API/FederatedCredential/protocol
+l10n:
+  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
 ---
 
-{{SeeCompatTable}}{{APIRef("")}}{{securecontext_header}}
+{{SeeCompatTable}}{{APIRef("Credential Management API")}}{{securecontext_header}}
 
-**`protocol`** は {{domxref("FederatedCredential")}} インターフェイスのプロパティで、認証情報の連合アイデンティティプロトコルが入った読み取り専用の {{domxref("DOMString")}} を返します。このプロパティが {{jsxref("null")}} の場合、プロトコルは {{domxref("FederatedCredential.provider")}} プロパティから推測される可能性があります。
-
-## 構文
-
-```
-var protocol = FederatedCredential.protocol
-```
+**`protocol`** は {{domxref("FederatedCredential")}} インターフェイスのプロパティで、資格情報の連合アイデンティティプロトコルが入った読み取り専用の文字列を返します。このプロパティが [`null`](/ja/docs/Web/JavaScript/Reference/Operators/null) の場合、プロトコルは {{domxref("FederatedCredential.provider")}} プロパティから推測される可能性があります。
 
 ### 値
 
-認証情報の連合アイデンティティプロトコルが入った {{domxref("DOMString")}} です (例えば `openidconnect`)。
+資格情報の連合アイデンティティプロトコル（例えば `openidconnect`）が入った文字列です。
 
 ## 例
 
@@ -27,6 +24,6 @@ var protocol = FederatedCredential.protocol
 
 {{Specifications}}
 
-## ブラウザーの対応
+## ブラウザーの互換性
 
-{{Compat("api.FederatedCredential.protocol")}}
+{{Compat}}

From a4d5ab56b9417afd104a4b2c874623cccfc81365 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 25 Jul 2023 00:04:08 +0900
Subject: [PATCH 09/13] =?UTF-8?q?2023/04/07=20=E6=99=82=E7=82=B9=E3=81=AE?=
 =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?=
 =?UTF-8?q?=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../federatedcredential/index.md              | 34 +++++++++++++++++++
 .../api/federatedcredential/provider/index.md | 29 ++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 files/ja/web/api/federatedcredential/federatedcredential/index.md
 create mode 100644 files/ja/web/api/federatedcredential/provider/index.md

diff --git a/files/ja/web/api/federatedcredential/federatedcredential/index.md b/files/ja/web/api/federatedcredential/federatedcredential/index.md
new file mode 100644
index 00000000000000..3a843cbf6a4aba
--- /dev/null
+++ b/files/ja/web/api/federatedcredential/federatedcredential/index.md
@@ -0,0 +1,34 @@
+---
+title: "FederatedCredential: FederatedCredential() コンストラクター"
+short-title: FederatedCredential()
+slug: Web/API/FederatedCredential/FederatedCredential
+l10n:
+  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+---
+
+{{APIRef("Credential Management API")}}{{SeeCompatTable}}
+
+**`FederatedCredential()`** コンストラクターは、新しい {{domxref("FederatedCredential")}} オブジェクトを作成します。対応しているブラウザーでは、このクラスのインスタンスにグローバル {{domxref('fetch()')}} の `init` オブジェクトから受け取った `credential` を渡すことができます。
+
+## 構文
+
+```js-nolint
+new FederatedCredential(init)
+```
+
+### 引数
+
+- `init`
+
+  - : オプションは次の通りです。
+
+    - `provider`
+      - : 文字列で、資格情報プロバイダーを識別します。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/federatedcredential/provider/index.md b/files/ja/web/api/federatedcredential/provider/index.md
new file mode 100644
index 00000000000000..9dfda0b5cce5a9
--- /dev/null
+++ b/files/ja/web/api/federatedcredential/provider/index.md
@@ -0,0 +1,29 @@
+---
+title: "FederatedCredential: provider プロパティ"
+short-title: provider
+slug: Web/API/FederatedCredential/provider
+l10n:
+  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+---
+
+{{SeeCompatTable}}{{APIRef("Credential Management API")}}
+
+**`provider`** は {{domxref("FederatedCredential")}} インターフェイスのプロパティで、資格情報の連合アイデンティティプロバイダーの入った文字列を返します。
+
+## 値
+
+資格情報の連合アイデンティティプロバイダーの入った文字列です。
+
+## 例
+
+```js
+// TBD
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}

From 51156b3843bf6c64a339aa09f088bc415cd537ea Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 25 Jul 2023 00:13:25 +0900
Subject: [PATCH 10/13] =?UTF-8?q?2023/03/22=20=E6=99=82=E7=82=B9=E3=81=AE?=
 =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/federatedcredential/index.md | 37 +++++++++++--------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/files/ja/web/api/federatedcredential/index.md b/files/ja/web/api/federatedcredential/index.md
index e17677b92838b6..12ca9f238ca775 100644
--- a/files/ja/web/api/federatedcredential/index.md
+++ b/files/ja/web/api/federatedcredential/index.md
@@ -1,27 +1,33 @@
 ---
 title: FederatedCredential
 slug: Web/API/FederatedCredential
+l10n:
+  sourceCommit: 1ac70b362b94fc4d781b4cfbc7d0508eaf91b05c
 ---
 
 {{SeeCompatTable}}{{APIRef("Credential Management API")}}
 
-**`FederatedCredential`** は [Credential Management API](/ja/docs/Web/API/Credential_Management_API) のインターフェイスで、連合アイデンティティのプロバイダーからの認証情報についての情報を提供します。連合アイデンティティのプロバイダーは、ウェブサイトが正しくユーザーを認証し、そのための API を提供する主体です。連合アイデンティティプロバイダーの一例として、 [OpenID Connect](http://openid.net/developers/specs/) があります。
+**`FederatedCredential`** は[資格情報管理 API](/ja/docs/Web/API/Credential_Management_API) のインターフェイスで、連合アイデンティティプロバイダーからの資格情報についての情報を提供します。連合アイデンティティプロバイダーは、ウェブサイトが正しくユーザーを認証し、そのための API を提供する主体です。連合アイデンティティプロバイダーの一例として、 [OpenID Connect](https://openid.net/developers/specs/) があります。
+
+> **メモ:** [連合資格情報管理 API (FedCM)](/ja/docs/Web/API/FedCM_API) は、ブラウザーで ID フェデレーションを処理するためのより完全なソリューションを提供し、{{domxref("IdentityCredential")}} 型を使用します。
 
 対応しているブラウザーにおいては、このインターフェイスのインスタンスがグローバル {{domxref('fetch')}} の `init` オブジェクトの `credential` メンバーとして渡されることがあります。
 
+{{InheritanceDiagram}}
+
 ## コンストラクター
 
-- {{domxref("FederatedCredential.FederatedCredential()","FederatedCredential()")}}
+- {{domxref("FederatedCredential.FederatedCredential()","FederatedCredential()")}} {{Experimental_Inline}}
   - : 新しい `FederatedCredential` オブジェクトを生成します。
 
 ## プロパティ
 
-_祖先である {{domxref("Credential")}} からプロパティを継承しています。_
+_祖先である {{domxref("Credential")}} から継承したプロパティがあります。_
 
-- {{domxref("FederatedCredential.provider")}} {{readonlyInline}}
-  - : 認証情報の連合アイデンティティプロバイダーを含む {{domxref("USVString")}} です。
-- {{domxref("FederatedCredential.protocol")}} {{readonlyInline}}
-  - : 認証情報の連合アイデンティティプロトコルを含む {{domxref("DOMString")}} です。
+- {{domxref("FederatedCredential.provider")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+  - : 資格情報の連合アイデンティティプロバイダーの入った文字列を返します。
+- {{domxref("FederatedCredential.protocol")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+  - : 資格情報の連合アイデンティティプロトコルの入った文字列を返します。
 
 ### イベントハンドラー
 
@@ -34,16 +40,15 @@ _祖先である {{domxref("Credential")}} からプロパティを継承して
 ## 例
 
 ```js
-var cred = new FederatedCredential({
-  id: id,
-  name: name,
-  provider: 'https://account.google.com',
-  iconURL: iconUrl
+const cred = new FederatedCredential({
+  id,
+  name,
+  provider: "https://account.google.com",
+  iconURL,
 });
 
 // 格納
-navigator.credentials.store(cred)
-  .then(function() {
+navigator.credentials.store(cred).then(() => {
   // 他に何かをする
 });
 ```
@@ -52,6 +57,6 @@ navigator.credentials.store(cred)
 
 {{Specifications}}
 
-## ブラウザーの対応
+## ブラウザーの互換性
 
-{{Compat("api.FederatedCredential")}}
+{{Compat}}

From 11a19c13ff40f04efc1ba00a084a7c8aad5a0780 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 25 Jul 2023 01:10:18 +0900
Subject: [PATCH 11/13] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9=E3=81=AE?=
 =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ja/web/api/file/lastmodifieddate/index.md | 34 ++++++++-----------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/files/ja/web/api/file/lastmodifieddate/index.md b/files/ja/web/api/file/lastmodifieddate/index.md
index 56109631b9a527..e08cd135b6e1d0 100644
--- a/files/ja/web/api/file/lastmodifieddate/index.md
+++ b/files/ja/web/api/file/lastmodifieddate/index.md
@@ -1,19 +1,16 @@
 ---
-title: File.lastModifiedDate
+title: "File: lastModifiedDate プロパティ"
+short-title: lastModifiedDate
 slug: Web/API/File/lastModifiedDate
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
-{{APIRef("File API") }} {{deprecated_header}}
+{{APIRef("File API")}}{{Deprecated_Header}}{{Non-standard_Header}}
 
 **`File.lastModifiedDate`** 読み取り専用プロパティは、ファイルの最終更新日を返します。最終更新日がわからないファイルは、現在の日付を返します。
 
-## 構文
-
-```js
-var time = instanceOfFile.lastModifiedDate
-```
-
-### 値
+## 値
 
 [`Date`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date) オブジェクトで、ファイルが最後に変更された日時を表します。
 
@@ -21,19 +18,18 @@ var time = instanceOfFile.lastModifiedDate
 
 ```js
 // fileInput は HTMLInputElement である <input type="file" multiple id="myfileinput">
-var fileInput = document.getElementById("myfileinput");
-
-// files は (NodeList に似た) FileList オブジェクト
-var files = fileInput.files;
+const fileInput = document.getElementById("myfileinput");
 
-for (var i = 0; i < files.length; i++) {
-  alert(files[i].name + " の最終更新日は  " + files[i].lastModifiedDate);
+for (const file of fileInput.files) {
+  console.log(
+    `${file.name} の最終更新日は ${file.lastModifiedDate}`,
+  );
 }
 ```
 
 ## 時間の精度の低下
 
-タイミング攻撃やフィンガープリンティングに対する保護機能を提供するために、 `someFile.lastModifiedDate.getTime()` の精度がブラウザーの設定に応じて丸められることがあります。
+タイミング攻撃や[フィンガープリンティング](/ja/docs/Glossary/Fingerprinting)に対する保護機能を提供するために、 `someFile.lastModifiedDate.getTime()` の精度がブラウザーの設定に応じて丸められることがあります。
 
 Firefox では、`privacy.reduceTimerPrecision` 設定は既定で有効になっており、 Firefox 59 では既定で 20 us に設定されています。60 で 2 ms になります。
 
@@ -43,21 +39,21 @@ someFile.lastModifiedDate.getTime();
 // 1519211809934
 // 1519211810362
 // 1519211811670
-// ...
+// …
 
 // `privacy.resistFingerprinting` が有効な場合の時間の制度の低下
 someFile.lastModifiedDate.getTime();
 // 1519129853500
 // 1519129858900
 // 1519129864400
-// ...
+// …
 ```
 
 Firefox では、`privacy.resistFingerprinting` を有効にすることもできます。精度は 100ms か `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` のいずれか大きい方の値になります。
 
 ## 仕様書
 
-_File API 仕様の初期のドラフトにありますが、このプロパティは削除されており、現在は非標準です。代わりに{{domxref("File.lastModified")}} を使用してください。_
+_ファイル API 仕様の初期のドラフトにありますが、このプロパティは削除されており、現在は非標準です。代わりに{{domxref("File.lastModified")}} を使用してください。_
 
 ## ブラウザーの互換性
 

From ec318ee3571a390c9236f18fb288ec274c5b9ec3 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 25 Jul 2023 01:01:23 +0900
Subject: [PATCH 12/13] =?UTF-8?q?2023/04/07=20=E6=99=82=E7=82=B9=E3=81=AE?=
 =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/file/file/index.md           | 22 ++++---
 files/ja/web/api/file/lastmodified/index.md   | 66 ++++++++++++-------
 files/ja/web/api/file/name/index.md           | 52 +++++++--------
 files/ja/web/api/file/type/index.md           | 45 ++++++++-----
 .../web/api/file/webkitrelativepath/index.md  | 58 ++++++++--------
 5 files changed, 141 insertions(+), 102 deletions(-)

diff --git a/files/ja/web/api/file/file/index.md b/files/ja/web/api/file/file/index.md
index 1d4a772a83ad94..dbf09db9c208e3 100644
--- a/files/ja/web/api/file/file/index.md
+++ b/files/ja/web/api/file/file/index.md
@@ -1,6 +1,9 @@
 ---
-title: File()
+title: "File: File() コンストラクター"
+short-title: File()
 slug: Web/API/File/File
+l10n:
+  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
 ---
 
 {{APIRef("File")}}
@@ -9,27 +12,30 @@ slug: Web/API/File/File
 
 ## 構文
 
-```js
-new File(bits, name[, options]);
+```js-nolint
+new File(bits, name)
+new File(bits, name, options)
 ```
 
 ### 引数
 
 - `bits`
-  - : {{jsxref("Array")}}、{{jsxref("ArrayBuffer")}}、{{domxref("ArrayBufferView")}}、{{domxref("Blob")}}、{{domxref("USVString")}} の {{jsxref("Array")}} オブジェクト、またはそれらをあわせたものを {{domxref("File")}} 内に格納します。`USVString` オブジェクトは UTF-8 でエンコードされます。
+  - : [反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)オブジェクト、例えば {{jsxref("Array")}}、{{jsxref("ArrayBuffer")}}、{{jsxref("TypedArray")}}、{{jsxref("DataView")}}、{{domxref("Blob")}}、文字列、またはそのような要素を混合させたものを {{domxref("File")}} 内に格納します。なお、文字列は JavaScript の UTF-16 文字列ではなく、UTF-8 でエンコードされます。
 - `name`
-  - : {{domxref("USVString")}} で、ファイル名またはファイルへのパスを表します。
+  - : 文字列で、ファイル名またはファイルへのパスを表します。
 - `options` {{optional_inline}}
 
   - : ファイルのオプション属性を含むオプションオブジェクト。利用可能なオプションは以下の通りです。
 
-    - `type`: ファイルの中に入るコンテンツの MIME タイプを表す {{domxref("DOMString")}} です。既定値は `""` です。
-    - `lastModified`: UNIX 元期からのミリ秒単位で、ファイルが最後に更新された時刻を表す数値です。既定値は {{jsxref("Date.now()")}} です。
+    - `type`
+      - : ファイルの中に入るコンテンツの MIME タイプを表す文字列です。既定値は `""` です。
+    - `lastModified`
+      - : UNIX 元期からのミリ秒単位で、ファイルが最後に更新された時刻を表す数値です。既定値は {{jsxref("Date.now()")}} です。
 
 ## 例
 
 ```js
-var file = new File(["foo"], "foo.txt", {
+const file = new File(["foo"], "foo.txt", {
   type: "text/plain",
 });
 ```
diff --git a/files/ja/web/api/file/lastmodified/index.md b/files/ja/web/api/file/lastmodified/index.md
index 0cccd9560456dd..1960b12530ac1a 100644
--- a/files/ja/web/api/file/lastmodified/index.md
+++ b/files/ja/web/api/file/lastmodified/index.md
@@ -1,59 +1,75 @@
 ---
-title: File.lastModified
+title: "File: lastModified プロパティ"
+short-title: lastModified
 slug: Web/API/File/lastModified
+l10n:
+  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
 ---
 
 {{APIRef("File")}}
 
-**`File.lastModified`** は読み取り専用プロパティで、ファイルの最終更新日時を UNIX 元期 (1970 年 1 月 1 日の深夜 0 時) からのミリ秒数で返します。最終更新日時が分からないファイルは、現在の日時を返します。
+**`File.lastModified`** は読み取り専用プロパティで、ファイルの最終更新日時を UNIX 元期（1970 年 1 月 1 日の深夜 0 時）からのミリ秒数で返します。最終更新日時が分からないファイルは、現在の日時を返します。
 
-## 構文
+## 値
 
-```js
-const time = instanceOfFile.lastModified;
-```
-
-### 値
-
-UNIX 元気からのミリ秒数を表す数値です。
+UNIX 元期からのミリ秒数を表す数値です。
 
 ## 例
 
-### file 入力欄からの読み込み
+下記の例では、選んだファイルをループして、それぞれのファイルが過去 1 年以内に変更されたかどうかを出力します。
+
+### HTML
 
 ```html
-<input type="file" multiple id="fileInput">
+<input type="file" id="filepicker" name="fileList" multiple />
+<output id="output"></output>
 ```
 
+```css hidden
+output {
+  display: block;
+  white-space: pre-wrap;
+}
+```
+
+### JavaScript
+
 ```js
-const fileInput = document.querySelector('#fileInput');
-fileInput.addEventListener('change', (event) => {
-  // filesはFileList型オブジェクト (NodeListと似ている)
+const output = document.getElementById("output");
+const filepicker = document.getElementById("filepicker");
+
+filepicker.addEventListener("change", (event) => {
   const files = event.target.files;
+  const now = new Date();
+  output.textContent = "";
 
-  for (let file of files) {
+  for (const file of files) {
     const date = new Date(file.lastModified);
-    console.log(`${file.name} has a last modified date of ${date}`);
+    // ファイルが 1 年以上変更されていなければtrue
+    const stale = now.getTime() - file.lastModified > 31_536_000_000;
+    output.textContent += `${file.name} is ${
+      stale ? "stale" : "fresh"
+    } (${date}).\n`;
   }
 });
 ```
 
-以下の結果を試してみてください。
+### 結果
 
-{{ EmbedLiveSample('Reading_from_file_input', 300, 50) }}
+{{EmbedLiveSample('Examples')}}
 
 ### 動的に生成されるファイル
 
 ファイルが動的に生成された場合、最終更新日時は {{domxref("File.File()", "new File()")}} コンストラクター関数で指定することができます。ファイルが見つからない場合、 `lastModified` は `File` オブジェクトの作成時に {{jsxref("Date.now()")}} から現在の時刻を継承します。
 
 ```js
-const fileWithDate = new File([], 'file.bin', {
+const fileWithDate = new File([], "file.bin", {
   lastModified: new Date(2017, 1, 1),
 });
-console.log(fileWithDate.lastModified); //returns 1485903600000
+console.log(fileWithDate.lastModified); // returns 1485903600000
 
-const fileWithoutDate = new File([], 'file.bin');
-console.log(fileWithoutDate.lastModified); //returns current time
+const fileWithoutDate = new File([], "file.bin");
+console.log(fileWithoutDate.lastModified); // returns current time
 ```
 
 ## 時間の精度の低下
@@ -67,14 +83,14 @@ someFile.lastModified;
 // 1519211809934
 // 1519211810362
 // 1519211811670
-// ...
+// …
 
 // `privacy.resistFingerprinting` が有効な場合の時間の制度の低下
 someFile.lastModified;
 // 1519129853500
 // 1519129858900
 // 1519129864400
-// ...
+// …
 ```
 
 Firefox では、`privacy.resistFingerprinting` を有効にすることもできます。精度は 100ms か `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` のいずれか大きい方の値になります。
diff --git a/files/ja/web/api/file/name/index.md b/files/ja/web/api/file/name/index.md
index af9b9ff3a049bb..f6ad5518f74748 100644
--- a/files/ja/web/api/file/name/index.md
+++ b/files/ja/web/api/file/name/index.md
@@ -1,52 +1,52 @@
 ---
-title: File.name
+title: "File: name プロパティ"
+short-title: name
 slug: Web/API/File/name
+l10n:
+  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
 ---
 
 {{APIRef("File API")}}
 
 {{domxref("File")}} オブジェクトによって表されるファイルの名前を返します。セキュリティ上の理由から、パスはこのプロパティから除外されます。
 
-## 構文
-
-```js
-var name = file.name;
-```
-
 ## 値
 
 パスを除いたファイル名の入った文字列。 "My Resume.rtf" など。
 
 ## 例
 
-```html
-<input type="file" multiple onchange="processSelectedFiles(this)">
+### HTML
 
-<div id="output"></div>
+```html
+<input type="file" id="filepicker" multiple />
+<div>
+  <p>選択されたファイルのリスト:</p>
+  <ul id="output"></ul>
+</div>
 ```
 
+### JavaScript
+
 ```js
-const output = document.querySelector("#output");
-function processSelectedFiles(fileInput) {
-  let files = fileInput.files;
-  output.textContent = "選択されたファイルのリスト:";
+const output = document.getElementById("output");
+const filepicker = document.getElementById("filepicker");
 
-  for (let i = 0; i < files.length; i++) {
-    output.textContent += `\nファイル名: ${files[i].name}`;
-  }
-}
-```
+filepicker.addEventListener("change", (event) => {
+  const files = event.target.files;
+  output.textContent = "";
 
-```css hidden
-#output{
-  padding: 0.5em 0;
-  white-space: pre;
-}
+  for (const file of files) {
+    const li = document.createElement("li");
+    li.textContent = file.name;
+    output.appendChild(li);
+  }
+});
 ```
 
-#### 結果
+### 結果
 
-{{ EmbedLiveSample('Example', 300, 100) }}
+{{EmbedLiveSample('Examples')}}
 
 ## 仕様書
 
diff --git a/files/ja/web/api/file/type/index.md b/files/ja/web/api/file/type/index.md
index 1cd5a100c58ca9..050a4bc1ffb5ca 100644
--- a/files/ja/web/api/file/type/index.md
+++ b/files/ja/web/api/file/type/index.md
@@ -1,40 +1,55 @@
 ---
-title: File.type
+title: "File: type プロパティ"
+short-title: type
 slug: Web/API/File/type
+l10n:
+  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
 ---
 
 {{APIRef("File API")}}
 
 {{domxref("File")}} オブジェクトによって表されるファイルのメディアタイプ ([MIME](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types)) を返します。
 
-## 構文
-
-```js
-var name = file.type;
-```
-
 ## 値
 
 ファイルのタイプを示すメディアタイプ (MIME) を含む文字列。たとえば、 PNG 画像の場合は "image/png" です。
 
 ## 例
 
+### HTML
+
 ```html
-<input type="file" multiple onchange="showType(this)">
+<input type="file" id="filepicker" name="fileList" multiple />
+<output id="output"></output>
 ```
 
+```css hidden
+output {
+  display: block;
+  white-space: pre-wrap;
+}
+```
+
+### JavaScript
+
 ```js
-function showType(fileInput) {
-  var files = fileInput.files;
+const output = document.getElementById("output");
+const filepicker = document.getElementById("filepicker");
+
+filepicker.addEventListener("change", (event) => {
+  const files = event.target.files;
+  output.textContent = "";
 
-  for (var i = 0; i < files.length; i++) {
-    var name = files[i].name;
-    var type = files[i].type;
-    alert("Filename: " + name + " , Type: " + type);
+  for (const file of files) {
+    output.textContent += `${file.name}: ${file.type || "unknown"}\n`;
   }
-}
+});
 ```
 
+### 結果
+
+{{EmbedLiveSample('Examples')}}
+
 > **メモ:** 現在の実装に基づくと、ブラウザーは実際にファイルのバイトストリームを読み取ってメディアタイプを判断している訳ではありません。ファイルの拡張子に基づいて推測します。 PNG 画像ファイルを .txt に改名すると "_text/plain_" となり、"_image/png_" とはなりません。さらに `file.type` は一般的に、画像、 HTML 文書、音声、動画などの一般的なファイルタイプに対してのみ信頼できます。一般的ではないファイルの拡張子に対しては、空の文字列を返します。クライアントの構成 (Windows レジストリーなど) によっては、一般的なタイプの場合でも予期しない値が発生することがあります。**開発者は、このプロパティを唯一の検証方法として信頼しないことをお勧めします。**
 
 ## 仕様書
diff --git a/files/ja/web/api/file/webkitrelativepath/index.md b/files/ja/web/api/file/webkitrelativepath/index.md
index 8d7f2aa8230460..9086d006befbf2 100644
--- a/files/ja/web/api/file/webkitrelativepath/index.md
+++ b/files/ja/web/api/file/webkitrelativepath/index.md
@@ -1,64 +1,66 @@
 ---
-title: File.webkitRelativePath
+title: "File: webkitRelativePath プロパティ"
+short-title: webkitRelativePath
 slug: Web/API/File/webkitRelativePath
+l10n:
+  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
 ---
 
-{{APIRef("File API")}}{{non-standard_header}}
+{{APIRef("File API")}}
 
-**`File.webkitRelativePath`** は、 [`webkitdirectory`](/ja/docs/Web/HTML/Element/input#webkitdirectory) 属性が設定された {{HTMLElement("input")}} 要素でユーザーが選択したディレクトリーに対するファイルのパスを指定する {{domxref("USVString")}} を持つ読み取り専用のプロパティです。
+**`File.webkitRelativePath`** は、[`webkitdirectory`](/ja/docs/Web/HTML/Element/input#webkitdirectory) 属性が設定された {{HTMLElement("input")}} 要素で、ユーザーが選択したディレクトリーに対するファイルのパスを指定する文字列を持つ読み取り専用のプロパティです。
 
-## 構文
+## 値
 
-```js
-relativePath = File.webkitRelativePath
-```
-
-### 値
-
-ユーザーが選択した祖先ディレクトリーを基準にしたファイルのパスを含む {{domxref("USVString")}}。
+ユーザーが選択した祖先ディレクトリーを基準にしたファイルのパスを含む文字列。
 
 ## 例
 
 この例では、ユーザーが 1 つまたは複数のディレクトリーを選択することができるディレクトリーピッカーが表示されます。 {{domxref("HTMLElement/change_event", "change")}} イベントが発生すると、選択されたディレクトリ階層に含まれるすべてのファイルのリストが生成され、表示されます。
 
-### HTML コンテンツ
+### HTML
 
 ```html
 <input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
-<ul id="listing"></ul>
+<output id="output"></output>
 ```
 
-### JavaScript コンテンツ
+```css hidden
+output {
+  display: block;
+  white-space: pre-wrap;
+}
+```
+
+### JavaScript
 
 ```js
-document.getElementById("filepicker").addEventListener("change", function(event) {
-  let output = document.getElementById("listing");
-  let files = event.target.files;
-
-  for (let i=0; i<files.length; i++) {
-    let item = document.createElement("li");
-    item.innerHTML = files[i].webkitRelativePath;
-    output.appendChild(item);
-  };
-}, false);
+const output = document.getElementById("output");
+const filepicker = document.getElementById("filepicker");
+
+filepicker.addEventListener("change", (event) => {
+  const files = event.target.files;
+
+  for (const file of files) {
+    output.textContent += `${file.webkitRelativePath}\n`;
+  }
+});
 ```
 
 ### 結果
 
-{{ EmbedLiveSample('Example') }}
+{{EmbedLiveSample('Example')}}
 
 ## 仕様書
 
 {{Specifications}}
 
-この API には、公式の W3C または WHATWG 仕様はありません。
-
 ## ブラウザーの互換性
 
 {{Compat}}
 
 ## 関連情報
 
-- [File and Directory Entries API](/ja/docs/Web/API/File_and_Directory_Entries_API)
+- [ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API)
 - {{domxref("HTMLInputElement.webkitEntries")}}
 - {{domxref("HTMLInputElement.webkitdirectory")}}

From 6cb0f57a3455a84e625f852947f9caa9228a07d6 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 25 Jul 2023 01:26:30 +0900
Subject: [PATCH 13/13] =?UTF-8?q?2023/04/15=20=E6=99=82=E7=82=B9=E3=81=AE?=
 =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/file/index.md | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/files/ja/web/api/file/index.md b/files/ja/web/api/file/index.md
index ae4a60ac5c3919..fb09cd0a48ec84 100644
--- a/files/ja/web/api/file/index.md
+++ b/files/ja/web/api/file/index.md
@@ -1,15 +1,17 @@
 ---
 title: File
 slug: Web/API/File
+l10n:
+  sourceCommit: 2a09bee9b36fd9a53c1bce641297021bfe274a33
 ---
 
-{{APIRef}}
+{{APIRef("File API")}}
 
 **`File`** インターフェイスは、ファイルについての情報を提供したり、ウェブページ内の JavaScript からその内容にアクセスできるようにしたりします。
 
-`File` オブジェクトは通常、 {{HTMLElement("input")}} 要素を使用してファイルを選択した結果として返される {{DOMxRef("FileList")}} オブジェクト、ドラッグ＆ドロップ操作の {{DOMxRef("DataTransfer")}} オブジェクト、または {{DOMxRef("HTMLCanvasElement")}} 上の `mozGetAsFile()` API から取得します。
+`File` オブジェクトは通常、{{HTMLElement("input")}} 要素を使用してファイルを選択した結果として返される {{DOMxRef("FileList")}} オブジェクト、またはドラッグ＆ドロップ操作の {{DOMxRef("DataTransfer")}} オブジェクトから取得します。
 
-`File` オブジェクトは特別な種類の {{DOMxRef("Blob")}} オブジェクトであり、 Blob が利用できる場面ではどこでも利用できます。特に、{{DOMxRef("FileReader")}}、{{DOMxRef("URL.createObjectURL()")}}、{{DOMxRef("createImageBitmap()")}}、{{DOMxRef("XMLHttpRequest", "", "send()")}} は、`Blob` と `File` の両方を受け付けます。
+`File` オブジェクトは特別な種類の {{DOMxRef("Blob")}} オブジェクトであり、 Blob が利用できる場面ではどこでも利用できます。特に、{{DOMxRef("FileReader")}}、{{DOMxRef("URL.createObjectURL_static")}}、{{DOMxRef("createImageBitmap()")}}、{{DOMxRef("XMLHttpRequest", "", "send()")}} は、`Blob` と `File` の両方を受け付けます。
 
 詳しい情報や例は、[ウェブアプリケーションからのファイルの使用](/ja/docs/Web/API/File_API/Using_files_from_web_applications) を参照してください。
 
@@ -24,16 +26,16 @@ slug: Web/API/File
 
 - {{DOMxRef("File.prototype.lastModified")}} {{ReadOnlyInline}}
   - : ファイルの最終更新時刻を、 UNIX 元期 (1970 年 1 月 1 日深夜) からの経過ミリ秒数で返します。
-- {{DOMxRef("File.prototype.lastModifiedDate")}} {{Deprecated_Inline}} {{ReadOnlyInline}}
+- {{DOMxRef("File.prototype.lastModifiedDate")}} {{Deprecated_Inline}} {{ReadOnlyInline}} {{Non-standard_Inline}}
   - : `File` オブジェクトが参照しているファイルの最終更新時刻の {{JSxRef("Date")}} を返します。
-- {{DOMxRef("File.prototype.name")}}{{ReadOnlyInline}}
+- {{DOMxRef("File.prototype.name")}} {{ReadOnlyInline}}
   - : `File` オブジェクトが参照しているファイルの名前を返します。
-- {{DOMxRef("File.prototype.webkitRelativePath")}} {{Non-standard_Inline}} {{ReadOnlyInline}}
+- {{DOMxRef("File.prototype.webkitRelativePath")}} {{ReadOnlyInline}}
   - : {{DOMxRef("File")}} の URL の相対パスを返します。
 
 `File` は {{DOMxRef("Blob")}} を実装しているので、以下のようなプロパティも利用できます。
 
-- {{DOMxRef("File.prototype.size")}} {{ReadOnlyInline}}
+- {{DOMxRef("Blob.size")}} {{ReadOnlyInline}}
   - : ファイルのサイズをバイト単位で返します。
 - {{DOMxRef("File.prototype.type")}} {{ReadOnlyInline}}
   - : ファイルの [MIME](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types) タイプを返します。
@@ -47,7 +49,7 @@ _`File` インターフェイスはメソッドを定義せず、{{DOMxRef("Blob
 - {{DOMxRef("Blob.prototype.stream()")}}
   - : `File` を {{DOMxRef("ReadableStream")}} に変換し、`File` の内容を読み込めるようにします。
 - {{DOMxRef("Blob.prototype.text()")}}
-  - : `File` をストリームに変換し、最後まで読み込みます。これは、{{DOMxRef("USVString")}} (テキスト) で解決するプロミスを返します。
+  - : `File` をストリームに変換し、最後まで読み込みます。これは、文字列（テキスト）で解決するプロミスを返します。
 - {{DOMxRef("Blob.prototype.arrayBuffer()")}}
   - : `File` をストリームに変換し、最後まで読み込みます。 {{jsxref("ArrayBuffer")}} で解決するプロミスを返します。
 
@@ -63,4 +65,3 @@ _`File` インターフェイスはメソッドを定義せず、{{DOMxRef("Blob
 
 - [ウェブアプリケーションからのファイルの使用](/ja/docs/Web/API/File_API/Using_files_from_web_applications)
 - {{DOMxRef("FileReader")}}
-- [DOM の File API をクロームコードで使う](/ja/docs/Extensions/Using_the_DOM_File_API_in_chrome_code) (Firefox アドオンのような Gecko で実行される特権コード向け)