65 lines
2.3 KiB
HTML
65 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta charset="utf-8" />
|
|
|
|
<link rel="stylesheet" href="../assets/css/tools/r11form.css">
|
|
<link rel="stylesheet" href="../assets/css/highlight.css">
|
|
<script src="../assets/scripts/common/hljs.min.js"></script>
|
|
<script src="../assets/scripts/tools/jsonFormatter.js"></script>
|
|
<script src="../assets/scripts/tools/highlight.js"></script>
|
|
<script>hljs.highlightAll();</script>
|
|
</head>
|
|
|
|
<body onload="init()">
|
|
<div class="container">
|
|
<div id="tool" class="tool rwd-expandable">
|
|
<div class="tool-context">
|
|
<div class="headline">
|
|
<h1>Online JSON Formatter</h1>
|
|
</div>
|
|
|
|
<div class="display-space-between">
|
|
<div>
|
|
<b><span id="processInfo"></span></b><br>
|
|
<b>Insert your JSON:</b>
|
|
</div>
|
|
|
|
<div>
|
|
<button class="action-button active" id="clearXMLButton" style="padding: 3px 10px;"
|
|
onclick="clearJsonData()">Clear</button>
|
|
<button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px;"
|
|
onclick="insertDefaultJson()">Insert default JSON</button>
|
|
</div>
|
|
</div>
|
|
<pre>
|
|
<code class="hightlight-json json-block bordered-field" id="jsonBlock" contenteditable="True">{"enter": "your", "json": "here"}</code>
|
|
</pre>
|
|
|
|
<button style="margin-top: 20px"
|
|
class="max-width block-label action-button active"
|
|
onclick="formatAndValidateJson('processInfo')"
|
|
>Prettify JSON</button>
|
|
|
|
<button class="max-width block-label action-button active"
|
|
onclick="minimizeJson('processInfo')"
|
|
>Minimize JSON</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tooltip-window rwd-hideable">
|
|
<h2>What is this?</h2>
|
|
<p>This tool has 2 main functions:
|
|
<ul>
|
|
<li><strong>Prettify JSON</strong> to make it human-readable (add indentation etc.)</li>
|
|
<li><strong>Minimize JSON</strong> to make it more compact (exactly opposite to above)</li>
|
|
</ul>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|