Question

我想在API参考指南中显示API的响应和请求模式。在模式中，我想在“代码”标签中显示JSON并设置正确的样式

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

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

上面提到的代码应按以下方式显示。

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

有关我的问题的其他详细信息可以从以下笔中获取 https://codepen.io/chaikishu/pen/XogomL

Answer 1

如果您要经常在页面中放置代码，建议您使用JS库来处理。我使用Prism.js https://prismjs.com/，该库处理大量语言，并提供了现成的语法突出显示功能。

无论您决定做什么，仅单独使用pre在语义上都是不正确的。您需要这样的pre和代码：

<pre><code>{ “username”: ”user” }</code></pre>

查看每个的规格： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code

pre元素处理间距，code元素处理代码。它们共同为您提供所需的东西。

Answer 2

我已经了解到，当您深深嵌套在HTML文档中时（如您在codepen中提到的那样，您在HTML <code>标记中将JSON代码缩进的问题。

这是您的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);
  }

我有这个解决了你的问题。

如何在html中将JSON显示为Code？CSS是什么？

2 个答案: