Using highlight.js
xxxxxxxxxx<html lang="en"><head> <meta charset="UTF-8" /> <title>highlight.js</title> <script src="//d3js.org/d3.v4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/default.min.css" rel="stylesheet" /> <script>hljs.initHighlightingOnLoad();</script> <style> #code1{ width: 300px;} </style></head><body> <div class="container"> <pre><code class="javascript" id="code1"> </code> </pre> </div> <script type="text/javascript"> var data = [{ "id": 1, "name": "A", "size": 3 }, { "id": 2, "name": "B", "size": 8 }, { "id": 3, "name": "C", "size": 2 }, { "id": 4, "name": "D", "size": 5 }, { "id": 5, "name": "E", "size": 4 } ]; d3.select("#code1").html(JSON.stringify(data, false, 2)); </script></body></html> https://d3js.org/d3.v4.min.js
https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js