如何解码Github API返回的文件内容并在HTML textarea中格式化显示

刚好之前对接Github API时也踩过这个坑，给你整理两个关键点的解决方法：

Github API返回的content字段是Base64编码的（主要是为了处理二进制文件和特殊字符），解码分两种场景：

终端直接处理 #

如果是在Linux/macOS终端里，你可以把curl的结果通过管道结合jq（提取content字段）和base64命令直接解码：

# 替换成你的仓库和文件路径
curl -s https://api.github.com/repos/octocat/Hello-World/contents/README.md | jq -r '.content' | base64 -d

• jq -r '.content'：用jq工具提取出原始的content字符串（-r参数确保输出不带引号）
• base64 -d：对提取出的Base64内容进行解码

如果没有安装jq，也可以用sed/awk做简单提取，但jq是最方便的。

代码中处理（以JavaScript为例） #

如果是在前端或者Node.js里处理，需要先去掉content里的换行符（Github会给Base64内容加换行方便阅读），再用Base64解码函数：

// 假设你已经通过fetch/axios拿到了API响应
fetch('https://api.github.com/repos/octocat/Hello-World/contents/README.md')
  .then(res => res.json())
  .then(data => {
    // 去掉Base64内容里的换行符，再解码
    const decodedContent = atob(data.content.replace(/\n/g, ''));
    console.log(decodedContent); // 这里就是原始的文件内容
  });

其他语言也有对应的Base64解码方法，比如Python用base64.b64decode()，Java用Base64.getDecoder().decode()，核心都是先处理掉换行再解码。

textarea天生就支持保留换行、缩进这些格式，关键是不要转义原始内容，直接赋值给textarea的value属性：

<textarea id="codeDisplay" rows="15" cols="80"></textarea>

<script>
// 接上上面的解码逻辑
fetch('https://api.github.com/repos/octocat/Hello-World/contents/README.md')
  .then(res => res.json())
  .then(data => {
    const decodedContent = atob(data.content.replace(/\n/g, ''));
    const textarea = document.getElementById('codeDisplay');
    // 直接赋值给value，不要用innerHTML！
    textarea.value = decodedContent;
  });
</script>

需要注意的坑：

• 不要把解码后的内容用innerHTML插入textarea，textarea的内容是通过value控制的，innerHTML会导致格式丢失
• 如果你的后端返回内容时不小心把换行转成了<br>，要先转回来（把<br>替换成\n），否则格式会乱

内容的提问来源于stack exchange，提问作者jj008