html - 如何在 html 中将 JSON 显示为代码以及什么是 CSS？

Question

我想在 API 引用指南中显示 API 的响应和请求模式。在该模式中，我想在“代码”标签中显示 JSON 并设置适当的样式

我已经尝试并使用了“pre”标签并将其包围起来。带有“空白”属性的样式。问题是“它按原样显示(字面意思是 html 代码编辑器中存在的用于缩进的长空格。当我们在非常嵌套的 html 元素中使用这个'代码'标签时，它是有问题的)在 html“代码”中使用预包装

{"用户名":"user","password":"12345"}

上面提到的代码应该显示如下。

{
    "username":"user",
    "password":"12345"
}

我的问题的更多细节可以从以下笔中获得 https://codepen.io/chaikishu/pen/XogomL

Answer 1

我了解到您在 HTML 中缩进 JSON 代码的问题 <code>深度嵌套在 HTML 文档中时标记(就像您在 codepen 中提到的那样)。

这是您的 HTML 代码

 <div>
   <div><!-- Some Code --></div>
   <div>
     <div><!-- Some Code --></div>
     <div>
       <div><!-- Some Code --></div>
       <div>
         <div class="code">
           <pre>
            <code>
              {
                  "email": "string",
                  "password": "string"
              }
            </code>
            </pre>
         </div>
     </div>
   </div>
 </div>

渲染后

              {
                  "email": "string",
                  "password": "string"
              }

因此，可以通过以下方式向代码中添加一些 javascript 来解决此问题。注意:仅当所有代码标签都具有 JSON 时才使用。否则，您必须根据所需的输出进行修改。

  var all_codes = document.getElementsByTagName('code').length;

  for(var i=0;i<all_codes;i++){
      var code_json = document.getElementsByTagName('code')[i].innerHTML;
      console.log(code_json);
      document.getElementsByTagName('code')[i].innerHTML = JSON.stringify(JSON.parse(code_json),null,5);
  }

我有这个可以解决你的问题。