JS中格式化JSON数据并高亮

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

好，开整。

1. 下载HighLight.js包
2. 导入到项目
   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>

3. 格式化代码并高亮

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() // 高亮

至此，结束。
效果图：