Last active
September 7, 2021 15:24
-
-
Save keithws/6b5333dd09753c26d8cec19414fca2fc to your computer and use it in GitHub Desktop.
code to pretty-print JSON responses in the browser
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * load the JSON Beautify source | |
| * and let client cache it for 24 hours | |
| */ | |
| (function () { | |
| var now, script, today, url; | |
| url = "https://gist.githubusercontent.com/keithws/6b5333dd09753c26d8cec19414fca2fc/raw/9ae2d49d89b523f1522280eb940456ac49d48f43/json-beautify.js"; | |
| now = Date.now(); | |
| today = now - now % 24 * 60 * 60 * 1000; | |
| script = document.createElement("script"); | |
| script.src = url + "?d=" + today; | |
| document.body.appendChild(script); | |
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * code to beautify (or pretty-print) JSON responses in the browser | |
| * syntax highlighting is done with prism.js | |
| * (optional) specify tabs or spaces | |
| * (optional) use any prism.js theme | |
| */ | |
| (function () { | |
| "use strict"; | |
| var space, theme, text, value, code, pre, childNodes, i, l, cdn, link, fragment, script; | |
| // user configurable space used for indenting | |
| space = "\t"; | |
| // user configurable theme from prism.js | |
| theme = "coy"; | |
| text = document.body.textContent; | |
| value = JSON.parse(text); | |
| // create code element with standard class name | |
| code = document.createElement("code"); | |
| code.className = "language-json"; | |
| code.textContent = JSON.stringify(value, null, space); | |
| // create containing pre element | |
| pre = document.createElement("pre"); | |
| pre.appendChild(code); | |
| // remove all child nodes of the body | |
| childNodes = document.body.childNodes; | |
| for (i = 0, l = childNodes.length; i < l; i += 1) { | |
| document.body.removeChild(childNodes.item(i)); | |
| } | |
| // append new child node | |
| document.body.appendChild(pre); | |
| // inject prsim.js scripts and styles for syntax highlighting | |
| cdn = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0"; | |
| // inject base css | |
| link = document.createElement("link"); | |
| link.href = cdn + "/themes/prism.min.css"; | |
| link.rel = "stylesheet"; | |
| document.head.appendChild(link); | |
| if (theme) { | |
| // inject theme css | |
| link = document.createElement("link"); | |
| link.href = cdn + "/themes/prism-" + theme + ".min.css"; | |
| link.rel = "stylesheet"; | |
| document.head.appendChild(link); | |
| } | |
| // use fragment to inject both script tags at the same time | |
| fragment = document.createDocumentFragment(); | |
| // inject prism.js main script | |
| script = document.createElement("script"); | |
| script.src = cdn + "/prism.min.js"; | |
| script.async = false; | |
| fragment.appendChild(script); | |
| // inject prism.js JSON language defination | |
| script = document.createElement("script"); | |
| script.src = cdn + "/components/prism-json.min.js"; | |
| script.async = false; | |
| fragment.appendChild(script); | |
| document.body.appendChild(fragment); | |
| // create global object with properties to provide access | |
| // to the original text and the parsed value | |
| window.JSONBeautifier = { | |
| "text": text, | |
| "value": value | |
| }; | |
| /* eslint-disable no-console */ | |
| console.log({ | |
| "JSONBeautifier": window.JSONBeautifier | |
| }); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment