console.log如何输出到页面上

<!-- script -->
<script>
    (function () {
      var logger = document.getElementById('cnblogs_post_body');
      console.log = function (message) {
        logger.innerHTML += `<div style="font-family: 'mono-font' !important;margin:15px auto;box-shadow:5px 5px 10px #333;background-color: #000000;color: #42b983;padding:10px 20px;width:fit-content;white-space:normal;margin: 5px ;border-radius: 10px;">${message}</div>`
      }

      console.success = function (message) {
        if (typeof message == 'object') {
          logger.innerHTML += `<div style="background-color: #f0f9eb;color: #67C23A;padding:0px 20px;width:fit-content;white-space:normal;margin: 5px ;border-radius: 10px;">
                <pre style="background-color: transparent  !important; "><code style="font-family: 'mono-font' !important;background-color: transparent  !important;color: #67C23A !important;">${(JSON && JSON.stringify ? JSON.stringify(message, null, 2) : message)}</code></pre>
                </div>` ;
        } else {
          logger.innerHTML += `<div style="background-color: #f0f9eb;color: #67C23A;padding:0px 20px;width:fit-content;white-space:normal;margin: 5px ;border-radius:10px;">
                <pre style="background-color: transparent  !important;"><code style="font-family: 'mono-font' !important;background-color: transparent  !important;color: #67C23A !important;">${(message)}</code></pre>
                </div>` ;
        }
      }

      console.error = function (message) {
        if (typeof message == 'object') {
          logger.innerHTML += `<div style="background-color: #fef0f0;color: #F56C6C;padding:0px 20px;width:fit-content;white-space:normal;margin: 5px ;border-radius: 10px;">
               <pre style="background-color: transparent  !important;"><code style="font-family: 'mono-font' !important;background-color: transparent  !important;color: #F56C6C !important;">${(JSON && JSON.stringify ? JSON.stringify(message, null, 2) : message)}</code></pre>
                </div>` ;
        } else {
          logger.innerHTML += `<div style="background-color: #fef0f0;color: #F56C6C;padding:0px 20px;width:fit-content;white-space:normal;margin: 5px ;border-radius: 10px;">
                <pre style="background-color: transparent  !important;"><code style="font-family: 'mono-font' !important;background-color: transparent  !important;color: #F56C6C !important;">${(message)}</code></pre>
                </div>` ;
        }
      }

      console.warning = function (message) {
        if (typeof message == 'object') {
          logger.innerHTML += `<div style="background-color: #fdf6ec;color: #E6A23C;padding:0px 20px;width:fit-content;white-space:normal;margin: 5px ;border-radius: 10px;">
                <pre style="background-color: transparent  !important;"><code style="font-family: 'mono-font' !important;background-color: transparent  !important;color: #E6A23C !important;">${(JSON && JSON.stringify ? JSON.stringify(message, null, 2) : message)}</code></pre>
                </div>` ;
        } else {
          logger.innerHTML += `<div style="background-color: #fdf6ec;color: #E6A23C;padding:0px 20px;width:fit-content;white-space:normal;margin: 5px ;border-radius: 10px;">
                <pre style="background-color: transparent  !important;"><code style="font-family: 'mono-font' !important;background-color: transparent  !important;color: #E6A23C !important;">${(message)}</code></pre>
                </div>` ;
        }
      }

      console.info = function (message) {
        if (typeof message == 'object') {
          logger.innerHTML += `<div style="background-color: #f4f4f5;color: #909399;padding:0px 20px;width:fit-content;white-space:normal;margin: 5px ;border-radius: 10px;">
                <div style="background-color: transparent  !important;"><div style="font-family: 'mono-font' !important;background-color: transparent  !important;color: #909399 !important;">${(JSON && JSON.stringify ? JSON.stringify(message, null, 2) : message)}</div></div>
                </div>` ;
        } else {
          logger.innerHTML += `<div style="background-color: #f4f4f5;color: #909399;padding:0px 20px;width:fit-content;white-space:normal;margin: 5px ;border-radius: 10px;">
                <div style="background-color: transparent  !important;"><div style="font-family: 'mono-font' !important;background-color: transparent  !important;color: #909399 !important;">${(message)}</div></div>
                </div>` ;
        }
      }

    })();
  </script>

<!-- script after -->
<script>
 console.log(navigator.userAgent)
 console.log('Hello World!!!');
 console.info('hello world~');
 console.warning('hello world~');
 console.success('hello world~');
 console.error('hello world~');
var json = JSON.stringify(JSON.parse(`[
    {
        "name": "iPhone 2G",
        "identifier": "iPhone1,1",
        "boards": [
            {
                "boardconfig": "m68ap",
                "platform": "s5l8900x",
                "cpid": 35072,
                "bdid": 0
            }
        ],
        "boardconfig": "m68ap",
        "platform": "s5l8900x",
        "cpid": 35072,
        "bdid": 0
    },
    {
        "name": "iPhone 3G",
        "identifier": "iPhone1,2",
        "boards": [
            {
                "boardconfig": "n82ap",
                "platform": "s5l8900x",
                "cpid": 35072,
                "bdid": 4
            }
        ],
        "boardconfig": "n82ap",
        "platform": "s5l8900x",
        "cpid": 35072,
        "bdid": 4
    }
]
`),null,4) ;
console.success(json);
console.log(json);
console.info( '\n'+ navigator.userAgent+'\n');
let fib = function(n) {
    if(n <= 2) {
        return 1
    }
    return fib(n-2) + fib(n-1)
}
let num = fib(10);
console.error(num)
console.log(num)
</script>