style: run prettier on non-code fences (#21224)

files/en-us/learn/css/building_blocks/cascade_layers/index.md

@@ -10,6 +10,7 @@ tags:
   - source order
   - specificity
 ---
+
 {{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
 
 This lesson aims to introduce you to [cascade layers](/en-US/docs/Web/CSS/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/Cascade) and [CSS specificity](/en-US/docs/Web/CSS/Specificity).
@@ -47,12 +48,12 @@ To understand cascade layers, you must understand the CSS cascade well. The sect
 
 The C in CSS stands for "Cascading". It is the method by which styles cascade together. The user agent goes through several, very clearly-defined steps to determine the values that get assigned to every property for every element. We will briefly list these steps here and then dig deeper into step 4, cascade layers, which is what you came here to learn:
 
-  1. **Relevance:** Find all the declaration blocks with a selector match for each element.
-  2. **Importance:** Sort rules based on if they are normal or important. Important styles are those that have the [`!important`](/en-US/docs/Web/CSS/important) flag set.
-  3. **Origin:** Within each of the two importance buckets, sort rules by author, user, or user-agent origin.
-  4. **Layers:** Within each of the six origin importance bucket, sort by cascade layer. The layer order for normal declarations is from first layer created to last, followed by unlayered normal styles. This order is inverted for important styles, with unlayered important styles having the lowest precedence.
-  5. **Specificity:** For competing styles in the origin layer with precedence, sort declarations by [specificity](/en-US/docs/Web/CSS/Specificity).
-  6. **Proximity:** When two selectors in the origin layer with precedence have the same specificity, the property value from the last declared selector with the highest specificity wins.
+1. **Relevance:** Find all the declaration blocks with a selector match for each element.
+2. **Importance:** Sort rules based on if they are normal or important. Important styles are those that have the [`!important`](/en-US/docs/Web/CSS/important) flag set.
+3. **Origin:** Within each of the two importance buckets, sort rules by author, user, or user-agent origin.
+4. **Layers:** Within each of the six origin importance bucket, sort by cascade layer. The layer order for normal declarations is from first layer created to last, followed by unlayered normal styles. This order is inverted for important styles, with unlayered important styles having the lowest precedence.
+5. **Specificity:** For competing styles in the origin layer with precedence, sort declarations by [specificity](/en-US/docs/Web/CSS/Specificity).
+6. **Proximity:** When two selectors in the origin layer with precedence have the same specificity, the property value from the last declared selector with the highest specificity wins.
 
 For each step, only the declarations "still in the running" move on to "compete" in the next step. If only one declaration is in the running, it "wins", and the subsequent steps are moot.
 
@@ -163,11 +164,11 @@ Layers can be created using the block `@layer` at-rule. If an `@layer` at-rule i
 
 In the example below, we've used four block and one inline `@layer` at-rules. This CSS does the following in the order listed:
 
-1) Creates a named `layout` layer
-2) Creates an unnamed, anonymous layer
-3) Declares a list of three layers and creates only two new layers, `theme` and `utilities`, because `layout` already exists
-4) Adds additional styles to the already existing`layout` layer
-5) Creates a second unnamed, anonymous layer
+1. Creates a named `layout` layer
+2. Creates an unnamed, anonymous layer
+3. Declares a list of three layers and creates only two new layers, `theme` and `utilities`, because `layout` already exists
+4. Adds additional styles to the already existing`layout` layer
+5. Creates a second unnamed, anonymous layer
 
 ```css
 /* file: layers1.css */
@@ -261,8 +262,10 @@ You can import more than one CSS file into a single layer. The following declara
 You can import styles and create layers based on specific conditions using [media queries](​​/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) and [feature queries](/en-US/docs/Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries). The following imports a style sheet into an `international` layer only if the browser supports `display: ruby`, and the file being imported is dependent on the width of the screen.
 
 ```css
-@import url("ruby-narrow.css") layer(international) supports(display: ruby) and (width < 32rem);
-@import url("ruby-wide.css") layer(international) supports(display: ruby) and (width >= 32rem);
+@import url("ruby-narrow.css") layer(international) supports(display: ruby) and
+  (width < 32rem);
+@import url("ruby-wide.css") layer(international) supports(display: ruby) and
+  (width >= 32rem);
 ```
 
 > **Note:** There is no equivalent of the {{HTMLElement('link')}} method of linking stylesheets. Use `@import` to import a stylesheet into a layer when you can't use `@layer` within the stylesheet.

files/en-us/mozilla/add-ons/webextensions/manifest.json/externally_connectable/index.md

@@ -7,6 +7,7 @@ tags:
   - manifest.json
 browser-compat: webextensions.manifest.externally_connectable
 ---
+
 {{AddonSidebar}}
 
 <table class="fullwidth-table standard-table">

files/en-us/mozilla/firefox/experimental_features/index.md

@@ -2053,6 +2053,7 @@ The [`Clear-Site-Data`](/en-US/docs/Web/HTTP/Headers/Clear-Site-Data) HTTP respo
 ### CSP "script-src-elem" and "script-src-attr" directives
 
 The [`Content-Security-Policy`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) HTTP header directives [`script-src-elem`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src-elem) and [`script-src-attr`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src-attr) specify valid sources for JavaScript `<script>` elements, and for inline script event handlers like `onclick`, respectively ({{bug(1529337)}}).
+
 <table>
   <thead>
     <tr>

files/en-us/web/accessibility/aria/attributes/aria-keyshortcuts/index.md

@@ -87,7 +87,7 @@ The `aria-keyshortcuts` attribute is very similar to the [problematic](https://w
 
 ```html
 <p>
-  Press the 
+  Press the
   <strong><u>S</u></strong>tress reliever to relax!
 </p>
 <button accesskey="s">Stress reliever</button>

files/en-us/web/accessibility/aria/roles/suggestion_role/index.md

@@ -32,7 +32,7 @@ We could even provide an information box saying who made the suggestion and when
   Freida's pet is a
   <span role="suggestion" aria-details="comment-source">
     <span role="deletion">black Cat called Luna</span>
-    <span role="insertion">purple T. Rex called Tiny</span> 
+    <span role="insertion">purple T. Rex called Tiny</span>
   </span>.
 </p>
 

files/en-us/web/api/bytelengthqueuingstrategy/bytelengthqueuingstrategy/index.md

@@ -28,6 +28,7 @@ new ByteLengthQueuingStrategy(highWaterMark)
 An object with the following property:
 
 - `highWaterMark`
+
   - : The total number of bytes that can be contained in the internal queue before backpressure is applied.
 
     Unlike [`CountQueuingStrategy()`](/en-US/docs/Web/API/CountQueuingStrategy/CountQueuingStrategy) where the `highWaterMark` parameter specifies a simple count of the number of chunks, with `ByteLengthQueuingStrategy()`, the `highWaterMark` parameter specifies a number of _bytes_ — specifically, given a stream of chunks, how many bytes worth of those chunks (rather than a count of how many of those chunks) can be contained in the internal queue before backpressure is applied.

files/en-us/web/api/htmlcanvaselement/getcontext/index.md

@@ -36,6 +36,7 @@ getContext(contextType, contextAttributes)
 
   - : A string containing the context identifier defining the drawing
     context associated to the canvas. Possible values are:
+
     - `"2d"`, leading to the creation of a
       {{domxref("CanvasRenderingContext2D")}} object representing a two-dimensional
       rendering context.
@@ -62,9 +63,9 @@ getContext(contextType, contextAttributes)
     example:
 
     ```js
-    const gl = canvas.getContext('webgl', {
+    const gl = canvas.getContext("webgl", {
       antialias: false,
-      depth: false
+      depth: false,
     });
     ```
 
@@ -168,8 +169,8 @@ Given this {{HTMLElement("canvas")}} element:
 You can get a `2d` context of the canvas with the following code:
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 console.log(ctx); // CanvasRenderingContext2D { /* … */ }
 ```
 

files/en-us/web/api/htmltextareaelement/index.md

@@ -344,7 +344,7 @@ Make a textarea autogrow while typing:
 #### JavaScript
 
 ```js
-function autoGrow (oField) {
+function autoGrow(oField) {
   if (oField.scrollHeight > oField.clientHeight) {
     oField.style.height = `${oField.scrollHeight}px`;
   }
@@ -389,8 +389,8 @@ function insert(startTag, endTag) {
   const oldText = textArea.value;
 
   const prefix = oldText.substring(0, selectionStart);
-  const inserted = startTag +
-    oldText.substring(selectionStart, selectionEnd) + endTag;
+  const inserted =
+    startTag + oldText.substring(selectionStart, selectionEnd) + endTag;
   const suffix = oldText.substring(selectionEnd);
   textArea.value = `${prefix}${inserted}${suffix}`;
 
@@ -402,9 +402,9 @@ function insert(startTag, endTag) {
 }
 
 function insertURL() {
- const newURL = prompt("Enter the full URL for the link");
- if (newURL) {
-    insert(`<a href="${newURL}">`,"</a>");
+  const newURL = prompt("Enter the full URL for the link");
+  if (newURL) {
+    insert(`<a href="${newURL}">`, "</a>");
   } else {
     document.myForm.myTxtArea.focus();
   }
@@ -415,10 +415,10 @@ const em = document.querySelector("#format-em");
 const link = document.querySelector("#format-link");
 const code = document.querySelector("#format-code");
 
-strong.addEventListener("click", (e) => insert("<strong>","</strong>"));
-em.addEventListener("click", (e) => insert("<em>","</em>"));
+strong.addEventListener("click", (e) => insert("<strong>", "</strong>"));
+em.addEventListener("click", (e) => insert("<em>", "</em>"));
 link.addEventListener("click", (e) => insertURL());
-code.addEventListener("click", (e) => insert("\n<code>\n","\n</code>\n"));
+code.addEventListener("click", (e) => insert("\n<code>\n", "\n</code>\n"));
 ```
 
 #### CSS
@@ -447,7 +447,7 @@ HTML:
 
   <p>
     <textarea name="myTxtArea" rows="10" cols="50">
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. Praesent tristique commodo lorem quis fringilla. Sed ac tellus eros. Sed consectetur eleifend felis vitae luctus. Praesent sagittis, est eget bibendum tincidunt, ligula diam tincidunt augue, a fermentum odio velit eget mi. Phasellus mattis, elit id fringilla semper, orci magna cursus ligula, non venenatis lacus augue sit amet dui. Pellentesque lacinia odio id nisi pulvinar commodo tempus at odio. Ut consectetur eros porttitor nunc mollis ultrices. Aenean porttitor, purus sollicitudin viverra auctor, neque erat blandit sapien, sit amet tincidunt massa mi ac nibh. Proin nibh sem, bibendum ut placerat nec, cursus et lacus. Phasellus vel augue turpis. Nunc eu mauris eu leo blandit mollis interdum eget lorem. 
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. Praesent tristique commodo lorem quis fringilla. Sed ac tellus eros. Sed consectetur eleifend felis vitae luctus. Praesent sagittis, est eget bibendum tincidunt, ligula diam tincidunt augue, a fermentum odio velit eget mi. Phasellus mattis, elit id fringilla semper, orci magna cursus ligula, non venenatis lacus augue sit amet dui. Pellentesque lacinia odio id nisi pulvinar commodo tempus at odio. Ut consectetur eros porttitor nunc mollis ultrices. Aenean porttitor, purus sollicitudin viverra auctor, neque erat blandit sapien, sit amet tincidunt massa mi ac nibh. Proin nibh sem, bibendum ut placerat nec, cursus et lacus. Phasellus vel augue turpis. Nunc eu mauris eu leo blandit mollis interdum eget lorem.
     </textarea>
   </p>
 </form>
@@ -463,25 +463,43 @@ First, create a function that takes the text field and a key event as input and
 
 ```js
 function checkRows(oField, oKeyEvent) {
-  let nKey = (oKeyEvent || /* old IE */ window.event || /* check is not supported! */ { keyCode: 38 }).keyCode,
-
+  let nKey = (
+      oKeyEvent ||
+      /* old IE */ window.event || /* check is not supported! */ { keyCode: 38 }
+    ).keyCode,
     // put here the maximum number of characters per line:
     nCols = 30,
     // put here the maximum number of lines:
     nRows = 5,
-
-    nSelS = oField.selectionStart, nSelE = oField.selectionEnd,
-    sVal = oField.value, nLen = sVal.length,
-
+    nSelS = oField.selectionStart,
+    nSelE = oField.selectionEnd,
+    sVal = oField.value,
+    nLen = sVal.length,
     nBackward = nSelS >= nCols ? nSelS - nCols : 0,
-    nDeltaForw = sVal.substring(nBackward, nSelS).search(new RegExp(`\\n(?!.{0,${String(nCols - 2)}}\\n)`)) + 1,
+    nDeltaForw =
+      sVal
+        .substring(nBackward, nSelS)
+        .search(new RegExp(`\\n(?!.{0,${String(nCols - 2)}}\\n)`)) + 1,
     nRowStart = nBackward + nDeltaForw,
-    aReturns = (sVal.substring(0, nSelS) + sVal.substring(nSelE, sVal.length)).match(/\n/g),
+    aReturns = (
+      sVal.substring(0, nSelS) + sVal.substring(nSelE, sVal.length)
+    ).match(/\n/g),
     nRowEnd = nSelE + nRowStart + nCols - nSelS,
-    sRow = sVal.substring(nRowStart, nSelS) + sVal.substring(nSelE, nRowEnd > nLen ? nLen : nRowEnd),
-    bKeepCols = nKey === 13 || nLen + 1 < nCols || /\n/.test(sRow) || ((nRowStart === 0 || nDeltaForw > 0 || nKey > 0) && (sRow.length < nCols || (nKey > 0 && (nLen === nRowEnd || sVal.charAt(nRowEnd) === "\n"))));
-
-  return (nKey !== 13 || (aReturns ? aReturns.length + 1 : 1) < nRows) && ((nKey > 32 && nKey < 41) || bKeepCols);
+    sRow =
+      sVal.substring(nRowStart, nSelS) +
+      sVal.substring(nSelE, nRowEnd > nLen ? nLen : nRowEnd),
+    bKeepCols =
+      nKey === 13 ||
+      nLen + 1 < nCols ||
+      /\n/.test(sRow) ||
+      ((nRowStart === 0 || nDeltaForw > 0 || nKey > 0) &&
+        (sRow.length < nCols ||
+          (nKey > 0 && (nLen === nRowEnd || sVal.charAt(nRowEnd) === "\n"))));
+
+  return (
+    (nKey !== 13 || (aReturns ? aReturns.length + 1 : 1) < nRows) &&
+    ((nKey > 32 && nKey < 41) || bKeepCols)
+  );
 }
 ```
 

files/en-us/web/api/idledetector/index.md

@@ -32,8 +32,8 @@ This interface requires a secure context.
   - : Returns a string indicating whether the users has interacted with either the screen or the device since the call to `start()`.
 
   - : Returns either `"active"` to indicate that the user has interacted with the
-  device within the threshold provided to `start()` or `"idle"` if they have not.
-  This attribute returns `null` before `start()` is called.
+    device within the threshold provided to `start()` or `"idle"` if they have not.
+    This attribute returns `null` before `start()` is called.
 
 - {{domxref("IdleDetector.screenState")}} {{ReadOnlyInline}} {{Experimental_Inline}}
   - : Returns a string indicating whether the screen is locked, one of
@@ -70,15 +70,15 @@ requesting permission.
 const controller = new AbortController();
 const signal = controller.signal;
 
-startButton.addEventListener('click', async () => {
-  if (await IdleDetector.requestPermission() !== "granted") {
+startButton.addEventListener("click", async () => {
+  if ((await IdleDetector.requestPermission()) !== "granted") {
     console.error("Idle detection permission denied.");
     return;
   }
 
   try {
     const idleDetector = new IdleDetector();
-    idleDetector.addEventListener('change', () => {
+    idleDetector.addEventListener("change", () => {
       const userState = idleDetector.userState;
       const screenState = idleDetector.screenState;
       console.log(`Idle change: ${userState}, ${screenState}.`);
@@ -88,17 +88,17 @@ startButton.addEventListener('click', async () => {
       threshold: 60_000,
       signal,
     });
-    console.log('IdleDetector is active.');
+    console.log("IdleDetector is active.");
   } catch (err) {
     // Deal with initialization errors like permission denied,
     // running outside of top-level frame, etc.
     console.error(err.name, err.message);
   }
 });
 
-stopButton.addEventListener('click', () => {
+stopButton.addEventListener("click", () => {
   controller.abort();
-  console.log('IdleDetector is stopped.');
+  console.log("IdleDetector is stopped.");
 });
 ```
 

files/en-us/web/api/mouseevent/layery/index.md

@@ -103,7 +103,7 @@ An integer value in pixels for the y-coordinate of the mouse pointer, when the m
         <label for="parentId">Parent Element id: </label>
         <input type="text" name="parentId" size="7" /><br />
         <label for="pageXCoords">pageX: </label>
-        <input type="text" name="pageXCoords" size="7" /> 
+        <input type="text" name="pageXCoords" size="7" />
         <label for="pageYCoords">pageY: </label>
         <input type="text" name="pageYCoords" size="7" /><br />
         <label for="layerXCoords">layerX: </label>

files/en-us/web/api/node/selectstart_event/index.md

@@ -1,5 +1,5 @@
 ---
-title: 'Node: selectstart event'
+title: "Node: selectstart event"
 slug: Web/API/Node/selectstart_event
 page-type: web-api-event
 tags:
@@ -11,6 +11,7 @@ tags:
   - selectstart
 browser-compat: api.Node.selectstart_event
 ---
+
 {{APIRef}}
 
 The **`selectstart`** event of the [Selection API](/en-US/docs/Web/API/Selection) is fired when a user starts a new selection.
@@ -22,9 +23,9 @@ If the event is canceled, the selection is not changed.
 Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
 
 ```js
-addEventListener('selectstart', (event) => {});
+addEventListener("selectstart", (event) => {});
 
-onselectstart = (event) => { };
+onselectstart = (event) => {};
 ```
 
 ## Event type
@@ -35,13 +36,13 @@ A generic {{domxref("Event")}}.
 
 ```js
 // addEventListener version
-document.addEventListener('selectstart', () => {
-  console.log('Selection started');
+document.addEventListener("selectstart", () => {
+  console.log("Selection started");
 });
 
 // onselectstart version
 document.onselectstart = () => {
-  console.log('Selection changed.');
+  console.log("Selection changed.");
 };
 ```
 

files/en-us/web/api/svgtransformlist/index.md

@@ -373,7 +373,7 @@ In this example we create a function that will apply three different transformat
     objects
   </desc>
   <script type="application/ecmascript">
-    <![CDATA[ 
+    <![CDATA[
       function transformMe(evt) {
         // svg root element to access the createSVGTransform() function
         const svgroot = evt.target.parentNode;

files/en-us/web/api/webglrenderingcontext/buffersubdata/index.md

@@ -48,22 +48,17 @@ bufferSubData(target, dstByteOffset, srcData, srcOffset, length)
     the following values are available additionally:
 
     - `gl.COPY_READ_BUFFER`
-      - : Buffer for copying from one buffer object
-          to another.
+      - : Buffer for copying from one buffer object to another.
     - `gl.COPY_WRITE_BUFFER`
-      - : Buffer for copying from one buffer object
-          to another.
+      - : Buffer for copying from one buffer object to another.
     - `gl.TRANSFORM_FEEDBACK_BUFFER`
-      - : Buffer for transform feedback
-          operations.
+      - : Buffer for transform feedback operations.
     - `gl.UNIFORM_BUFFER`
       - : Buffer used for storing uniform blocks.
     - `gl.PIXEL_PACK_BUFFER`
-      - : Buffer used for pixel transfer
-          operations.
+      - : Buffer used for pixel transfer operations.
     - `gl.PIXEL_UNPACK_BUFFER`
-      - : Buffer used for pixel transfer
-          operations.
+      - : Buffer used for pixel transfer operations.
 
 - `dstByteOffset`
   - : A {{domxref("WebGL_API/Types", "GLintptr")}} specifying an offset in bytes where the data replacement
@@ -93,8 +88,8 @@ None ({{jsxref("undefined")}}).
 ### Using `bufferSubData`
 
 ```js
-const canvas = document.getElementById('canvas');
-const gl = canvas.getContext('webgl');
+const canvas = document.getElementById("canvas");
+const gl = canvas.getContext("webgl");
 const buffer = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
 gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW);