格式化JSON数据可以直接用
JSON.stringify(JSON.parse(jsonStr),null,2)
,代码高亮使用的是HighLight.js
插件。
好,开整。
- 下载
HighLight.js
包 - 导入到项目
- 将
/highlight/styles/monokai-sublime.css
和/highlight/highlight.pack.js
引入到html文件 - 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() // 高亮
至此,结束。
效果图: