Add Prettier to lint command

.github/workflows/markdown-lint.yml

@@ -7,6 +7,7 @@ on:
     paths:
       - .markdownlint-cli2.jsonc
       - .nvmrc
+      - .prettier*
       - package.json
       - yarn.lock
       - .github/workflows/markdown-lint.yml

.github/workflows/pr-check_markdownlint.yml

@@ -45,3 +45,8 @@ jobs:
           yarn markdownlint-cli2 ${files_to_lint}
           echo "Linting front-matter"
           node scripts/front-matter_linter.js ${files_to_lint}
+
+      - name: Prettier markdown files
+        run: |
+          files_to_lint="${{ env.DIFF_DOCUMENTS }}"
+          yarn prettier -c ${files_to_lint}

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

@@ -64,10 +64,11 @@ Several different security measures could cause a {{domxref("Document.requestSto
 5. Sandboxed {{htmlelement("iframe")}}s cannot be granted storage access by default for security reasons. The API therefore also adds the `allow-storage-access-by-user-activation` [sandbox token](/en-US/docs/Web/HTML/Element/iframe#sandbox). The embedding website needs to add this to allow storage access requests to be successful, along with `allow-scripts` and `allow-same-origin` to allow it to execute a script to call the API and execute it in an origin that can have cookies:
 
    ```html
-   <iframe sandbox="allow-storage-access-by-user-activation
+   <iframe
+     sandbox="allow-storage-access-by-user-activation
                    allow-scripts
                    allow-same-origin">
-    …
+     …
    </iframe>
    ```
 

files/en-us/web/api/storage_access_api/using/index.md

@@ -19,7 +19,8 @@ In the example below, we show how an embedded cross-site {{htmlelement("iframe")
 First of all, if the `<iframe>` is sandboxed, the embedding website needs to add the `allow-storage-access-by-user-activation` [sandbox token](/en-US/docs/Web/HTML/Element/iframe#sandbox) to allow Storage Access API requests to be successful, along with `allow-scripts` and `allow-same-origin` to allow it to execute a script to call the API and execute it in an origin that can have cookies:
 
 ```html
-<iframe sandbox="allow-storage-access-by-user-activation
+<iframe
+  sandbox="allow-storage-access-by-user-activation
                  allow-scripts
                  allow-same-origin">
   …
@@ -31,12 +32,7 @@ First of all, if the `<iframe>` is sandboxed, the embedding website needs to add
 Now on to the code executed inside the embedded document. In this code:
 
 1. We first use feature detection (`if (document.hasStorageAccess === null) {}`) to check whether the API is supported. If not, we run our code that accesses cookies anyway, and hope that it works. It should be coded defensively to deal with such eventualities anyway.
-2. If the API is supported, we call `document.hasStorageAccess()`.
-   3. If that call returns `true`, it means this {{htmlelement("iframe")}} has already obtained access, and we can run our code that accesses cookies right away.
-   4. If that call returns `false`, we then call {{domxref("Permissions.query()")}} to check whether permission to access unpartitioned cookies has already been granted (i.e. to another same-site embed).
-      5. If the permission state is `"granted"`, we immediately call `document.requestStorageAccess()`. This call will automatically resolve, saving the user some time, then we can run our code that accesses cookies.
-      6. If the permission state is `"prompt"`, we call `document.requestStorageAccess()` after user interaction. This call may trigger a prompt to the user. If this call resolves, then we can run our code that accesses cookies.
-      7. If the permission state is `"denied"`, the user has denied our requests to access unpartitioned cookies, and our code cannot make use of them.
+2. If the API is supported, we call `document.hasStorageAccess()`. 3. If that call returns `true`, it means this {{htmlelement("iframe")}} has already obtained access, and we can run our code that accesses cookies right away. 4. If that call returns `false`, we then call {{domxref("Permissions.query()")}} to check whether permission to access unpartitioned cookies has already been granted (i.e. to another same-site embed). 5. If the permission state is `"granted"`, we immediately call `document.requestStorageAccess()`. This call will automatically resolve, saving the user some time, then we can run our code that accesses cookies. 6. If the permission state is `"prompt"`, we call `document.requestStorageAccess()` after user interaction. This call may trigger a prompt to the user. If this call resolves, then we can run our code that accesses cookies. 7. If the permission state is `"denied"`, the user has denied our requests to access unpartitioned cookies, and our code cannot make use of them.
 
 ```js
 function doThingsWithCookies() {
@@ -56,7 +52,9 @@ async function handleCookieAccess() {
     } else {
       // Check whether unpartitioned cookie access has been granted
       // to another same-site embed
-      const permission = await navigator.permissions.query({ name: "storage-access" });
+      const permission = await navigator.permissions.query({
+        name: "storage-access",
+      });
 
       if (permission.state === "granted") {
         // If so, you can just call requestStorageAccess() without a user interaction,
@@ -69,11 +67,11 @@ async function handleCookieAccess() {
           try {
             await document.requestStorageAccess();
             doThingsWithCookies();
-          } catch(err) {
+          } catch (err) {
             // If there is an error obtaining storage access.
             console.error(`Error obtaining storage access: ${err}.
                           Please sign in.`);
-          };
+          }
         });
       } else if (permission.state === "denied") {
         // User has denied unpartitioned cookie access, so we'll

files/en-us/web/api/webtransportreceivestream/getstats/index.md

@@ -36,7 +36,7 @@ The returned object has the following properties:
   - : A {{domxref("DOMHighResTimeStamp")}} indicating the timestamp at which the statistics were gathered, relative to Jan 1, 1970, UTC.
 - `bytesReceived`
   - : A positive integer indicating the number of bytes received by this stream, up to the first missing byte.
-     The number does not include any network overhead, and can only increase.
+    The number does not include any network overhead, and can only increase.
 - `bytesRead`
   - : A positive integer indicating the number of bytes the application has read from this `WebTransportReceiveStream` stream.
     This number can only increase, and is always less than or equal to `bytesReceived`.

files/en-us/web/css/@counter-style/symbols/index.md

@@ -29,7 +29,7 @@ A symbol can be a string, image, or identifier. It is used within the {{cssxref(
 
 ```css
 symbols: A B C D E;
-symbols: "\24B6" "\24B7" "\24B8"D E;
+symbols: "\24B6""\24B7""\24B8"D E;
 symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
 symbols: url("one.svg") url("two.svg") url("three.svg");
 symbols: indic-numbers;
@@ -68,7 +68,7 @@ While a space between quoted symbols is not required, it makes the CSS more legi
 ```css
 @counter-style symbols-example {
   system: fixed;
-  symbols: A "1" "\24B7" D E;
+  symbols: A "1" "\24B7"D E;
 }
 
 .list {

files/en-us/web/css/css_scroll_snap/basic_concepts/index.md

@@ -18,7 +18,7 @@ You can then define scroll snapping on the scroll container by using the followi
 
 - {{cssxref("scroll-snap-type")}}: Using this property, you can define whether or not the scrollable viewport can be snapped to, whether snapping is required or optional, and the axis on which the snapping should occur.
 - {{cssxref("scroll-snap-align")}}: This property is set on every child of the scroll container and you can use it to define each child's snap position or lack thereof. (Using the {{cssxref("scroll-snap-stop")}} property, you can ensure that a child is snapped to during scrolling and not passed over. You can also set several {{cssxref("scroll-margin")}} properties on child elements that are snapped to during scrolling to create an outset from the defined box.)
-Optional {{cssxref("scroll-padding")}} properties can be set on the scroll container to create a snapping offset.
+  Optional {{cssxref("scroll-padding")}} properties can be set on the scroll container to create a snapping offset.
 
 The example below demonstrates scroll snapping along the vertical axis, which is defined by `scroll-snap-type`. Additionally, `scroll-snap-align` applies on all the children of the `<section>` element, dictating the point where the scrolling of each child should stop.