将 github 文件数据渲染到 div答案

【问题标题】：Rendering github file data to div将 github 文件数据渲染到 div
【发布时间】：2020-12-13 11:20:38
【问题描述】：

需要帮助。我从 Github 存储库中获取了一个文件的内容。现在我想在一个 div 元素中显示文件的内容，就像在文件中显示一样；缩进应该是一样的。目前，整个文件显示在一行中。

async function call() {
  let url = "https://api.github.com/repos/KushRohra/PythonProjects/contents/Basic_DSA_Codes/1. Two Number Sum.py";
  let response = await fetch(url);
  data = await response.json();
  s = atob(data.content)
  console.log(s);
  document.getElementById("code").innerHTML = s;
}
call();

&lt;div id="code"&gt;&lt;/div&gt;

【问题讨论】：

标签： javascript html api flask

【解决方案1】：

您可以将所有换行符替换为<br>，并将所有空格替换为对应数量的&nbsp;：

async function call() {
  let url = "https://api.github.com/repos/KushRohra/PythonProjects/contents/Basic_DSA_Codes/1. Two Number Sum.py";
  let response = await fetch(url);
  data = await response.json();
  s = atob(data.content)
  console.log(s);
  document.getElementById("code").innerHTML = s.replace(/\n/g, '<br>').replace(/\s/g, '&nbsp;')
}
call();

&lt;div id="code"&gt;&lt;/div&gt;

【讨论】：