feat(ci): Add Reviewdog for Prettier formatting

.github/workflows/reviewdog.yml

@@ -0,0 +1,46 @@
+name: reviewdog
+
+on:
+  - pull_request
+
+jobs:
+  prettier:
+    # do not run on forks
+    if: github.repository == 'mdn/content'
+    name: prettier
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Get changed files
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BASE_SHA: ${{ github.event.pull_request.base.sha }}
+          HEAD_SHA: ${{ github.event.pull_request.head.sha }}
+        run: |
+          # Use the GitHub API to get the list of changed files
+          # documenation: https://docs.github.com/rest/commits/commits#compare-two-commits
+          DIFF_DOCUMENTS=$(gh api repos/{owner}/{repo}/compare/${{ env.BASE_SHA }}...${{ env.HEAD_SHA }} \
+            --jq '.files | .[] | select(.status|IN("added", "modified", "renamed", "copied", "changed")) | .filename')
+          echo "DIFF_DOCUMENTS=${DIFF_DOCUMENTS}" >> $GITHUB_ENV
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install all yarn packages
+        run: yarn --frozen-lockfile
+        env:
+          # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Perform linting
+        run: yarn prettier --ignore-unknown --write "${{ env.DIFF_DOCUMENTS }}"
+
+      - name: Submit suggestion
+        uses: reviewdog/action-suggester@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          tool_name: prettier

CONTRIBUTING.md

@@ -223,7 +223,7 @@ To ensure that all MDN documents follow the same formatting, we use both [Pretti
 
 If you have a [local checkout](#forking-and-cloning-the-repository) of the repository and have [installed the dependencies](#preparing-the-project), or you are using [github.dev](https://github.dev), a pre-commit hook will be installed which automatically runs while making a commit. To save some headache and improve your work flow while authoring, you may wish to [configure your editor to automatically run Prettier](https://prettier.io/docs/en/editors.html). Alternatively, you may run `yarn fix:md` in the command line to manually format all Markdown files.
 
-> **Note:** Automatically formatting changes does not work for pull requests opened using the GitHub Web UI as described in the ["Simple changes" section](#simple-changes). This may result in failed status checks on pull requests. If you're not sure about how to fix this, [get in touch with us](/en-US/docs/MDN/Community/Communication_channels) for help.
+> **Note:** An automatic review bot will submit a review with code suggestions if modified files don't match Prettier formatting. This was primarily implemented for contributors using the GitHub Web UI as described in the ["Simple changes" section](#simple-changes).
 
 ### Adding a new document
 

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

@@ -279,7 +279,7 @@ If you nest a block `@layer` at-rule inside another block `@layer` at-rule, with
 
 Let's look at the following example:
 
-```
+```css
 @import url("components-lib.css") layer(components);
 @import url("narrowtheme.css") layer(components.narrow);
 ```