docs: Prettify JSON output for default objects in docs (#16015)

tools/docs/config.ts

-import table from 'markdown-table';
+import stringify from 'json-stringify-pretty-compact';
 import { getOptions } from '../../lib/config/options';
 import { getCliName } from '../../lib/workers/global/config/parse/cli';
 import { getEnvName } from '../../lib/workers/global/config/parse/env';
@@ -6,6 +6,75 @@ import { readFile, updateFile } from '../utils';
 
 const options = getOptions();
 
+/**
+ * Merge string arrays one by one
+ * Example: let arr1 = ['a','b','c'], arr2 = ['1','2','3','4','5']
+ * merge(arr1,arr2) = ['a','1','b','2','c','3','4','5']
+ * @param array1
+ * @param array2
+ */
+function merge(array1: string[], array2: string[]): string[] {
+  const arr1 = [...array1];
+  const arr2 = [...array2];
+  const merged: string[] = [];
+
+  for (const str1 of arr1) {
+    merged.push(str1);
+    const str2 = arr2.pop();
+    if (str2 !== undefined) {
+      merged.push(str2);
+    }
+  }
+  return merged.concat(arr2);
+}
+
+function indent(
+  strings: TemplateStringsArray,
+  ...keys: (string | number | boolean)[]
+): string {
+  const indent = '  ';
+  const strs = [...strings];
+  let amount = 0;
+  // validate input
+  if (typeof keys[0] === 'number' && strings[0] === '') {
+    amount = keys.shift() as number;
+    strs.shift();
+  }
+  return indent.repeat(amount) + merge(strs, keys.map(String)).join('');
+}
+
+function buildHtmlTable(data: string[][]): string {
+  // skip empty tables
+  if (data.length < 2) {
+    return '';
+  }
+  let table = `<table>\n`;
+  for (const [i, row] of data.entries()) {
+    if (i === 0) {
+      table += indent`${1}<thead>\n`;
+    }
+
+    if (i === 1) {
+      table += indent`${1}</thead>\n` + indent`${1}<tbody>\n`;
+    }
+
+    table += indent`${2}<tr>\n`;
+    for (const col of row) {
+      if (i === 0) {
+        table += indent`${3}<th>${col}</th>\n`;
+        continue;
+      }
+      table +=
+        indent`${3}<td>${col}` +
+        (`${col}`.endsWith('\n') ? indent`${3}` : '') +
+        `</td>\n`;
+    }
+    table += indent`${2}</tr>\n`;
+  }
+  table += indent`${1}</tbody>\n</table>\n`;
+  return table;
+}
+
 function genTable(obj: [string, string][], type: string, def: any): string {
   const data = [['Name', 'Value']];
   const name = obj[0][1];
@@ -33,14 +102,14 @@ function genTable(obj: [string, string][], type: string, def: any): string {
         name !== 'prBody')
     ) {
       if (type === 'string' && el[0] === 'default') {
-        el[1] = `\`"${el[1]}"\``;
+        el[1] = `<code>"${el[1]}"</code>`;
       }
       if (
         (type === 'boolean' && el[0] === 'default') ||
         el[0] === 'cli' ||
         el[0] === 'env'
       ) {
-        el[1] = `\`${el[1]}\``;
+        el[1] = `<code>${el[1]}</code>`;
       }
       if (type === 'string' && el[0] === 'default' && el[1].length > 200) {
         el[1] = `[template]`;
@@ -51,7 +120,7 @@ function genTable(obj: [string, string][], type: string, def: any): string {
         if (Object.keys(el[1] ?? []).length === 0) {
           return;
         }
-        el[1] = `\`${JSON.stringify(el[1])}\``;
+        el[1] = `\n\`\`\`json\n${stringify(el[1], { indent: 2 })}\n\`\`\`\n`;
       }
       data.push(el);
     }
@@ -61,15 +130,15 @@ function genTable(obj: [string, string][], type: string, def: any): string {
     data.push(['default', '`[]`']);
   }
   if (type === 'string' && def === undefined) {
-    data.push(['default', '`null`']);
+    data.push(['default', '<code>null</code>']);
   }
   if (type === 'boolean' && def === undefined) {
-    data.push(['default', '`true`']);
+    data.push(['default', '<code>true</code>']);
   }
   if (type === 'boolean' && def === null) {
-    data.push(['default', '`null`']);
+    data.push(['default', '<code>null</code>']);
   }
-  return table(data);
+  return buildHtmlTable(data);
 }
 
 export async function generateConfig(dist: string, bot = false): Promise<void> {