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

Question

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

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

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

上述代码应显示如下方式。

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

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

Answer 1

我了解您在 HTML 文档中深度嵌套时在 HTML <code> 标记中突出 JSON 代码的问题（就像您在 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);
  }

我已经解决了你的问题。

Answer 2

如果您要经常将代码放入页面，我建议您使用 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 元素处理代码。它们一起为您提供您正在寻找的东西。