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

Posted 2023-03-05

【中文标题】如何在 html 中将 JSON 显示为代码以及 CSS 是啥？

【英文标题】：How to show JSON as Code in html and what are CSS?如何在 html 中将 JSON 显示为代码以及 CSS 是什么？

【发布时间】：2019-05-24 04:27:55

【问题描述】：

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

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

"username":"user","password":"12345"

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

    "username":"user",
    "password":"12345"

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

【问题讨论】：

您能否提供一些代码，以便我们能够更好地为您提供帮助（HTML、CSS 和其他可能相关的内容）？非常感谢您。

请检查这些可能有帮助的方法：taniarascia.com/adding-syntax-highlighting-to-code-snippets

How can I pretty-print JSON using javascript?的可能重复

Display JSON as HTML的可能重复

【参考方案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);
  

我已经解决了你的问题。

【讨论】：

如果您在任何 JSON 代码中出现错误，例如缺少引号、冒号或逗号，那么您的格式将不会被浏览器呈现，并且您会在控制台中收到错误

【参考方案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 元素处理代码。它们一起为您提供您正在寻找的东西。

【讨论】：

我想要我在问题中提到的带有整洁空格的演示代码。如果可能的话，你能举个例子吗？

试试我上面提供给你的代码，但添加你的空格。 pre 标记应处理您添加的任何间距。

我不知道为什么认为这是一个荒谬的答案？我已经为您提供了格式化代码的正确方法以及您可以使用的库的建议，以防您经常这样做。至于间距，这真的取决于你。您在代码中放置的任何间距都将呈现为这样。我的回答有什么不正确的地方吗？我正在努力帮助你。

就这么简单：codepen.io/vaughndtaylor/pen/vvZWwX 使用 Prism.js 的目的，正如我所说的，可以为您碰巧使用的任何语言获得语法高亮。但是，如果您不需要它，请不要使用它。我只是给你选择。

首先，对不起！我对那个问题感到沮丧。在那一刻，我已经越过了我的冷静。是的，正如你所说的那样工作。但是当我深度嵌套 <code> 元素时，它也会渲染代码元素之前存在的空间