So senden Sie Markdown über die REST-API und rendern ihn im Frontend (React)

Question

Also habe ich versucht, die Markdown-Datei zu konvertieren, sie über die Rest-API zu senden und sie dann im Frontend zu rendern. Das Problem besteht darin, dass Zeilenumbrüche und andere Inhalte verloren gehen, wenn versucht wird, sie zurückzukonvertieren.

Wie rendert man es so, dass der ursprüngliche Abschlag erhalten bleibt?

Gibt es dafür eine Standardmethode?

Ich habe versucht, Markdown über json.stringify zu konvertieren, habe es per API gesendet und versucht, es wieder in Markdown zu konvertieren, aber es funktioniert nicht mehr wie zuvor.

Answer 1

可以添加中的所有内容

 tag as following



   This is 
   some code
   A json:
   {
     key: value
   }




在 <pre> 标记中，文本保留空格和换行符，因此它将完全按照 HTML 源代码中写入的方式显示。

Answer 2

您可以将原始文件作为字符串发送，或者如果这不是一个选项，您可以使用此函数格式化对象：

const object = {a:[15,3457,15,"afbsv",[4,34,36],{
  l: "dsfvszd",
  qwe: 238475463,
  iuggbsf: ["AEfs",],
  afafwwa:{afafwafaw:{r:"4"}}
}]}

document.write(`
${format(object)}
`);

函数格式（对象）{
让结果=“”；
进程对象（对象，2）；
  
函数 processObject(对象, 深度, isObjectValue = false, TrailingComma = "") {
if ( 数组 . isArray ( 对象 )) {
结果 += `${isObjectValue ? " " : "
" + " ".repeat(深度 - 2)}[`;

for (让 i = 0; i < object.length; i++) {
const 元素 = 对象[i],
TrailingComma = i + 1 === object.length ？ “”：“，”；
        
switch（元素类型）{
案例“对象”：
processObject(元素, 深度 + 2, false, TrailingComma);
休息;
案例“字符串”：
结果 += `
${" ".repeat(深度)}"${element}"${trailingComma}`;
休息;
案件编号”：
结果 += `
${" ".repeat(深度) + 元素}${trailingComma}`;
休息;
}
}

结果 += `
${" ".repeat(深度 - 2)}]${trailingComma}`;
} 别的 {
结果 += `${isObjectValue ? " " : "
" + " ".repeat(深度 - 2)}{`;
      
让 keyIndex = 0,
keyCount = Object.keys(object).length;
for（对象中的键）{
常量值 = 对象[键],
尾随逗号 = ++keyIndex === keyCount ？ “”：“，”；
switch（值类型）{
案例“对象”：
结果 += `
${" ".repeat(深度)}"${key}":`;
processObject(值, 深度 + 2, true, TrailingComma);
休息;
案例“字符串”：
结果 += `
${" ".repeat(深度)}"${key}": "${value}"${trailingComma}`;
休息;
案件编号”：
结果+= `
${" ".repeat(深度)}"${key}": ${value}${trailingComma}`;
休息;
}
}

结果 += `
${" ".repeat(深度 - 2)}}${trailingComma}`;
}
}
  
返回结果；
}