时间戳

首页 > 解决方案 > 如何在 html 中将 JSON 显示为代码以及 CSS 是什么？

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

问题描述

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

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

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

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

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

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

标签： htmlcss

解决方案

如果您要经常将代码放入页面中，我建议您使用 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 /代码

pre 元素处理间距，code 元素处理代码。他们一起为您提供您正在寻找的东西。

推荐阅读