JS中格式化JSON数据并高亮

最新推荐文章于 2025-10-25 06:46:29 发布

原创最新推荐文章于 2025-10-25 06:46:29 发布 · 3.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#json #html #javascript

html5 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用JSON.stringify方法格式化JSON数据，并利用HighLight.js插件实现代码高亮，包括下载、导入包、引入CSS和JS文件、添加预格式化标签以及调用初始化方法。

格式化JSON数据可以直接用JSON.stringify(JSON.parse(jsonStr),null,2)，代码高亮使用的是HighLight.js插件。

好，开整。

下载HighLight.js包
导入到项目
1. 将/highlight/styles/monokai-sublime.css和/highlight/highlight.pack.js引入到html文件
2. html内添加<pre class="hljs"><code id="code"></code></pre>标签

添加<pre class="hljs"><code id="code"></code></pre>标签的原因是为了让highlight解析高亮

<link rel="stylesheet" href="/highlight/styles/monokai-sublime.css">
...
<pre class="hljs"><code id="code"></code></pre>
...
<script src="/highlight/highlight.pack.js"></script>

格式化代码并高亮

const jsonStr = [{"name":"JSON","address":"北京市西城区","age":25},{"name":"JSON","address":"北京市西城区","age":25},...]

let jsonCode = JSON.stringify(JSON.parse(jsonStr),null,2) // 设置tab为两个空格
$('#code').html(jsonCode) // 给 id="code" 的标签赋值

hljs.initHighlightingOnLoad() // 高亮