docs: format JSON examples and replace <docs-code> with fenced code blocks

Replaced <docs-code language="json" for improved
readability and consistency across documentation.

Author: MeAkib

adev/src/content/ecosystem/service-workers/config.md

@@ -368,13 +368,12 @@ If the field is omitted, it defaults to:
 
 This optional property enables you to configure how the service worker handles navigation requests:
 
-<docs-code language="json">
+```json
 
 {
-"navigationRequestStrategy": "freshness"
+  "navigationRequestStrategy": "freshness"
 }
-
-</docs-code>
+```
 
 | Possible values | Details                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | :-------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

adev/src/content/guide/tailwind.md

@@ -57,13 +57,14 @@ Next, open a terminal in your Angular project's root directory and run the follo
 Next, add a `.postcssrc.json` file in the file root of the project.
 Add the `@tailwindcss/postcss` plugin into your PostCSS configuration.
 
-<docs-code language="json" header=".postcssrc.json">
+```json {header: '.postcssrc.json'}
+
 {
   "plugins": {
     "@tailwindcss/postcss": {}
   }
 }
-</docs-code>
+```
 
 ### 4. Import Tailwind CSS
 

adev/src/content/reference/extended-diagnostics/overview.md

@@ -40,23 +40,19 @@ Each diagnostic can be configured as either:
 
 Check severity can be configured as an [Angular compiler option](reference/configs/angular-compiler-options):
 
-<docs-code language="json">
+```json
+
 {
   "angularCompilerOptions": {
     "extendedDiagnostics": {
-      // The categories to use for specific diagnostics.
       "checks": {
-        // Maps check name to its category.
         "invalidBananaInBox": "suppress"
       },
-
-      // The category to use for any diagnostics not listed in `checks` above.
       "defaultCategory": "error"
     }
-
-}
+  }
 }
-</docs-code>
+```
 
 The `checks` field maps the name of individual diagnostics to their associated category.
 See [Diagnostics](#diagnostics) for a complete list of extended diagnostics and the name to use for configuring them.

adev/src/content/reference/versions.md

@@ -120,7 +120,8 @@ relative to the current workspace or module specifier \(Example: `zone.js`\).
 
 If you create a TypeScript file, make sure to include it in the `files` property of your `tsconfig` file.
 
-<docs-code language="json">
+```json
+
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
@@ -132,7 +133,7 @@ If you create a TypeScript file, make sure to include it in the `files` property
   ]
   ...
 }
-</docs-code>
+```
 
 ## Polyfills for non-CLI users
 

adev/src/content/tools/cli/cli-builder.md

@@ -104,22 +104,21 @@ a `source` and a `destination`, each of which are a string.
 
 You can provide the following schema for type validation of these values.
 
-<docs-code header="src/schema.json" language="json">
+```json {header: "schema.json"}
 
 {
-"$schema": "http://json-schema.org/schema",
-"type": "object",
-"properties": {
-"source": {
-"type": "string"
-},
-"destination": {
-"type": "string"
-}
-}
+  "$schema": "http://json-schema.org/schema",
+  "type": "object",
+  "properties": {
+    "source": {
+      "type": "string"
+    },
+    "destination": {
+      "type": "string"
+    }
+  }
 }
-
-</docs-code>
+```
 
 HELPFUL: This is a minimal example, but the use of a schema for validation can be very powerful.
 For more information, see the [JSON schemas website](http://json-schema.org).
@@ -128,36 +127,33 @@ To link our builder implementation with its schema and name, you need to create
 
 Create a file named `builders.json` that looks like this:
 
-<docs-code header="builders.json" language="json">
+```json {header: "builders.json"}
 
 {
-"builders": {
-"copy": {
-"implementation": "./dist/my-builder.js",
-"schema": "./src/schema.json",
-"description": "Copies a file."
-}
-}
+  "builders": {
+    "copy": {
+      "implementation": "./dist/my-builder.js",
+      "schema": "./src/schema.json",
+      "description": "Copies a file."
+    }
+  }
 }
-
-</docs-code>
+```
 
 In the `package.json` file, add a `builders` key that tells the Architect tool where to find our builder definition file.
 
-<docs-code header="package.json" language="json">
-
+```json {header: "package.json"}
 {
-"name": "@example/copy-file",
-"version": "1.0.0",
-"description": "Builder for copying files",
-"builders": "builders.json",
-"dependencies": {
-"@angular-devkit/architect": "~0.1200.0",
-"@angular-devkit/core": "^12.0.0"
-}
+  "name": "@example/copy-file",
+  "version": "1.0.0",
+  "description": "Builder for copying files",
+  "builders": "builders.json",
+  "dependencies": {
+    "@angular-devkit/architect": "~0.1200.0",
+    "@angular-devkit/core": "^12.0.0"
+  }
 }
-
-</docs-code>
+```
 
 The official name of our builder is now `@example/copy-file:copy`.
 The first part of this is the package name and the second part is the builder name as specified in the `builders.json` file.
@@ -177,41 +173,37 @@ Architect in the Angular CLI uses the target definition to resolve input options
 The `angular.json` file has a section for each project, and the "architect" section of each project configures targets for builders used by CLI commands such as 'build', 'test', and 'serve'.
 By default, for example, the `ng build` command runs the builder `@angular-devkit/build-angular:browser` to perform the build task, and passes in default option values as specified for the `build` target in `angular.json`.
 
-<docs-code header="angular.json" language="json">
-
-…
-
-"myApp": {
-…
-"architect": {
-"build": {
-"builder": "@angular-devkit/build-angular:browser",
-"options": {
-"outputPath": "dist/myApp",
-"index": "src/index.html",
-…
-},
-"configurations": {
-"production": {
-"fileReplacements": [
+```json {header: "angular.json"}
 {
-"replace": "src/environments/environment.ts",
-"with": "src/environments/environment.prod.ts"
-}
-],
-"optimization": true,
-"outputHashing": "all",
-…
-}
-}
-},
-…
-}
+  "myApp": {
+    "...": "...",
+    "architect": {
+      "build": {
+        "builder": "@angular-devkit/build-angular:browser",
+        "options": {
+          "outputPath": "dist/myApp",
+          "index": "src/index.html",
+          "...": "..."
+        },
+        "configurations": {
+          "production": {
+            "fileReplacements": [
+              {
+                "replace": "src/environments/environment.ts",
+                "with": "src/environments/environment.prod.ts"
+              }
+            ],
+            "optimization": true,
+            "outputHashing": "all",
+            "...": "..."
+          }
+        }
+      },
+      "...": "..."
+    }
+  }
 }
-
-…
-
-</docs-code>
+```
 
 The command passes the builder the set of default options specified in the "options" section.
 If you pass the `--configuration=production` flag, it uses the override values specified in the `production` configuration.
@@ -271,36 +263,33 @@ npm install @example/copy-file
 
 If you create a new project with `ng new builder-test`, the generated `angular.json` file looks something like this, with only default builder configurations.
 
-<docs-code header="angular.json" language="json">
-
+```json {header: "angular.json"}
 {
-"projects": {
-"builder-test": {
-"architect": {
-"build": {
-"builder": "@angular-devkit/build-angular:browser",
-"options": {
-// more options...
-"outputPath": "dist/builder-test",
-"index": "src/index.html",
-"main": "src/main.ts",
-"polyfills": "src/polyfills.ts",
-"tsConfig": "src/tsconfig.app.json"
-},
-"configurations": {
-"production": {
-// more options...
-"optimization": true,
-"aot": true,
-"buildOptimizer": true
-}
-}
-}
-}
-}
-}
+  "projects": {
+    "builder-test": {
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/builder-test",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json"
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "aot": true,
+              "buildOptimizer": true
+            }
+          }
+        }
+      }
+    }
+  }
 }
-</docs-code>
+```
 
 ### Adding a target