docs: Enable pretty code formatter output (#17635)

nzakas · mdjermanovic · web-flow · commit b7ef2f34fe12 · 2023-10-11T23:59:44.000+02:00
* docs: Enable pretty code formatter output fixes #17505 * Add note about formatted output * Update templates/formatter-examples.md.ejs Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com> * Update templates/formatter-examples.md.ejs Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com> --------- Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>
diff --git a/templates/formatter-examples.md.ejs b/templates/formatter-examples.md.ejs
@@ -14,7 +14,7 @@ You can specify a formatter using the `--format` or `-f` flag in the CLI. For ex
 
 The built-in formatter options are:
 
-<% Object.keys(formatterResults).forEach(function(formatterName) { -%>
+<% Object.keys(formatterResults).forEach(formatterName => { -%>
 * [<%= formatterName %>](#<%= formatterName %>)
 <% }) -%>
 
@@ -56,19 +56,36 @@ npx eslint --format <Add formatter here> fullOfProblems.js
 ```
 
 ## Built-In Formatter Options
-<% Object.keys(formatterResults).forEach(function(formatterName) { -%>
+<% Object.keys(formatterResults).forEach(formatterName => { -%>
 
 ### <%= formatterName %>
 
 <%= formatterResults[formatterName].description %>
+<% if (formatterName !== "html") { -%>
+<%
+    let codeFormat = "text";
+    let output = formatterResults[formatterName].result;
+    let outputNote = "Example output:";
 
-Example output:
+    if (output.startsWith("\u003C?xml")) {
+        codeFormat = "xml";
+    }
 
-<% if (formatterName !== "html") { -%>
-```text
-<%- formatterResults[formatterName].result %>
+    if (formatterName.includes("json")) {
+        codeFormat = "json";
+        output = JSON.stringify(JSON.parse(output), null, 4);
+        outputNote = "Example output (formatted for easier reading):";
+    }
+%>
+<%= outputNote %>
+
+```<%= codeFormat %>
+<%- output %>
 ```
 <% } else {-%>
+
+Example output:
+
 <iframe src="html-formatter-example.html" width="100%" height="460px"></iframe>
 <% } -%>
 <% }) -%>
