REST API経由でマークダウンを送信し、フロントエンドでレンダリングする方法（React）

Question

そこで、Markdown ファイルを変換し、Rest API 経由で送信して、フロントエンドでレンダリングしてみました。問題は、改行やその他のコンテンツを元に変換しようとすると失われることです。

元のマークダウンを保持した方法でレンダリングするにはどうすればよいですか?

これを行う標準的な方法はありますか?

json.stringify 経由でマークダウンを変換し、API 経由で送信して、マークダウンに変換し直そうとしましたが、元のように動作しなくなりました。

Answer 1

次のように

 タグにすべてを追加できます



   これは
   いくつかのコード
   アジソン:
   {
     キー: 値
   }




<pre> タグでは、テキストはスペースと改行を保持するため、HTML ソース コードに記述されたとおりに表示されます。 

Answer 2

元のファイルを文字列として送信することも、これがオプションでない場合は、この関数を使用してオブジェクトをフォーマットすることもできます:

const オブジェクト = {a:[15,3457,15,"afbsv",[4,34,36],{
  l: "dsfvszd",
  qwe: 238475463、
  iuggbsf: ["AEfs",],
  afafwwa:{afafwafaw:{r:"4"}}
}]}

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

関数の形式 (オブジェクト) {
結果 = "";
ProcessObject(オブジェクト, 2);
  
関数 processObject(オブジェクト、深さ、isObjectValue = false、TrailingComma = "") {
if (配列 . isArray (オブジェクト)) {
結果 = `${isObjectValue ? " " : "
" " ".repeat( Depth - 2)}[`;

for (let i = 0; i < object.length; i ) {
const 要素 = オブジェクト[i]、
TrailingComma = i 1 === object.length ? "": ",";
        
スイッチ (要素タイプ) {
ケース「オブジェクト」:
processObject(要素、深さ 2、false、TrailingComma);
休む;
ケース「文字列」:
結果 = `< object.length; i++) {
const 元素 = 对象[i],
TrailingComma = i + 1 === object.length ？ “”：“，”；
        
switch（元素类型）{
案例“对象”：
processObject(元素, 深度 + 2, false, TrailingComma);
休息;
案例“字符串”：
结果 += `
${" ".repeat(length)}"${element}"${trailingComma}`;
休む;
事件番号」:
結果 = `
${" ".repeat( Depth) 要素}${trailingComma}`;
休む;
}
}

結果 = `
${" ".repeat( Depth - 2)}]${trailingComma}`;
} 他の {
結果 = `${isObjectValue ? " " : "
" " ".repeat( Depth - 2)}{`;
      
keyIndex = 0 とします。
keyCount = Object.keys(object).length;
for (オブジェクト内のキー) {
定数値 = オブジェクト[キー]、
末尾のカンマ = keyIndex === keyCount ? "": ",";
スイッチ(値型) {
ケース「オブジェクト」:
結果 = `
${" ".repeat(length)}"${key}":`;
processObject(値、深さ2、true、TrailingComma);
休む;
ケース「文字列」:
結果 = `
${" ".repeat( Depth)}"${key}": "${value}"${trailingComma}`;
休む;
事件番号」:
結果 = `
${" ".repeat(length)}"${key}": ${value}${trailingComma}`;
休む;
}
}

結果 = `
${" ".repeat(length - 2)}}${trailingComma}`;
}
}
  
結果を返します。
}