小月夕在业务中遇到一个需要,需要把来自后端的一个对象转化为md格式并进行渲染。
首先尝试了直接把对象转为json,然后前后分别拼接上```json ```即可.
但是效果如下
{"err_status":0,"principal":null,"_id":"5eaac83927e3e77ecc7e6a68","ip":"::ffff:127.0.0.1","type":"POST","err_type":"TypeError","err_msg":"TypeError: articles.aggregate(...).populate is not a function\n\t at module.exports (C:\\Users\\w\\Desktop\\blog\\blog-api\\router\\routers\\article\\getAllArticle.js:23:12)\n\t at C:\\Users\\w\\Desktop\\blog\\blog-api\\router\\routers\\article\\index.js:30:34\n\t at Layer.handle [as handle_request] (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\layer.js:95:5)\n\t at next (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\route.js:137:13)\n\t at Route.dispatch (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\route.js:112:3)\n\t at Layer.handle [as handle_request] (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\layer.js:95:5)\n\t at C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:281:22\n\t at Function.process_params (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:335:12)\n\t at next (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:275:10)\n\t at Function.handle (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:174:3)\n\t at router (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:47:12)\n\t at Layer.handle [as handle_request] (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\layer.js:95:5)\n\t at trim_prefix (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:317:13)\n\t at C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:284:7\n\t at Function.process_params (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:335:12)\n\t at Immediate.next (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:275:10)","req_data":{"body":{"className":"前端"},"query":{}},"err_file":"C:\\Users\\w\\Desktop\\blog\\blog-api\\router\\routers\\article\\getAllArticle.js","date":"2020-04-30 20:44:41","__v":0}
渲染结果并不会将json跳行和格式化(就连CSDN都无法自动格式化,可想而知这是需要自己实现的)。
然后我尝试直接对逗号后面加上换行(效果如下)
{"err_status":0,
"principal":null,
"_id":"5eaac83927e3e77ecc7e6a68",
"ip":"::ffff:127.0.0.1",
"type":"POST",
"err_type":"TypeError",
"err_msg":"TypeError: articles.aggregate(...).populate is not a function\n\t at module.exports (C:\\Users\\w\\Desktop\\blog\\blog-api\\router\\routers\\article\\getAllArticle.js:23:12)\n\t at C:\\Users\\w\\Desktop\\blog\\blog-api\\router\\routers\\article\\index.js:30:34\n\t at Layer.handle [as handle_request] (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\layer.js:95:5)\n\t at next (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\route.js:137:13)\n\t at Route.dispatch (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\route.js:112:3)\n\t at Layer.handle [as handle_request] (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\layer.js:95:5)\n\t at C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:281:22\n\t at Function.process_params (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:335:12)\n\t at next (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:275:10)\n\t at Function.handle (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:174:3)\n\t at router (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:47:12)\n\t at Layer.handle [as handle_request] (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\layer.js:95:5)\n\t at trim_prefix (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:317:13)\n\t at C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:284:7\n\t at Function.process_params (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:335:12)\n\t at Immediate.next (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:275:10)",
"req_data":{"body":{"className":"前端"},
"query":{}},
"err_file":"C:\\Users\\w\\Desktop\\blog\\blog-api\\router\\routers\\article\\getAllArticle.js",
"date":"2020-04-30 20:44:41",
"__v":0}
后面尝试了各种replace规则效果都不佳
迫不得已只能自己封装一个生成字符串的规则(当时使用的是vue开发,所以并没有对方法进行兼容ie10-的打算),代码如下
function ObjToRetractJsonStr(obj, num) {
if(!num){//是否第一层
num = 1;
}
let t = ""
for(let k in obj){
if(obj[k] !== null && typeof obj[k] === "object"){
t += `${"\t".repeat(num)}"${k}": ${ObjToRetractJsonStr(obj[k],num+1)},\n`
}else {
t += `${"\t".repeat(num)}"${k}": ${typeof obj[k] === "string"?"\""+obj[k]+"\"":obj[k]},\n`
}
}
//}或者]结束符缩进
if(Array.isArray(obj)){
//数组采用[]包裹
return `[\n${t}${"\t".repeat(num-1)}]`
}
return `{\n${t}${"\t".repeat(num-1)}}`
}
//生成md语法的json代码块
text = "```json\n"+ObjToRetractJsonStr(this.resData)+"\n```"
效果如下
{
"err_status": 0,
"principal": null,
"_id": "5eaac83927e3e77ecc7e6a68",
"ip": "::ffff:127.0.0.1",
"type": "POST",
"err_type": "TypeError",
"err_msg": "TypeError: articles.aggregate(...).populate is not a function
at module.exports (C:\Users\w\Desktop\blog\blog-api\router\routers\article\getAllArticle.js:23:12)
at C:\Users\w\Desktop\blog\blog-api\router\routers\article\index.js:30:34
at Layer.handle [as handle_request] (C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\route.js:137:13)
at Route.dispatch (C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request] (C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\layer.js:95:5)
at C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\index.js:281:22
at Function.process_params (C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\index.js:335:12)
at next (C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\index.js:275:10)
at Function.handle (C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\index.js:174:3)
at router (C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\index.js:47:12)
at Layer.handle [as handle_request] (C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\index.js:317:13)
at C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\index.js:284:7
at Function.process_params (C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\index.js:335:12)
at Immediate.next (C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\index.js:275:10)",
"req_data": {
"body": {
"className": "前端",
},
"query": {
},
},
"err_file": "C:\Users\w\Desktop\blog\blog-api\router\routers\article\getAllArticle.js",
"date": "2020-04-30 20:44:41",
"__v": 0,
}
达到要求(内容跳行不会json高亮,如果想高亮不跳行即可)
IE兼容方案推荐
(一个天上飞的理论而已,由于小月夕当时时间并不是很充裕,就无法亮出具体代码了)
可以尝试借鉴栈计算算式的原理,对未格式化的json传进行一个关键符合拆分后进行栈操作,记录一下当前数据的深度并在其中加入对应数量的缩进和换行符即可。