hmt
/
bk2018.2


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
							<html>
  <head>
    <script defer src="dist/demo/index.js"></script>
    <style type="text/css">
    body {
      max-width: 800px;
      margin: 20px auto;
      font-family: sans-serif;
    }
    .gh {
      text-align: right;
    }
    .result  h3 + div {
      border: 1px solid lightgray;
      border-radius: 5px;
      padding: 10px;
    }
    h1 code {
      font-size: 2em;
    }
    pre {
      font-size: 1.5rem;
      background: #efefef;
      padding: 1em;
    }
    textarea {
      font-family: monospace;
    }
    </style>
  </head>
  <body>
    <div class="intro">
      <div class="gh">
        <iframe
          src="http://ghbtns.com/github-btn.html?user=mohsen1&repo=json-formatter-js&type=watch&size=large&count=true"
          frameborder="0"
          width="170"
          height="30"
          scrolling="0">
        </iframe>
        <iframe
          src="http://ghbtns.com/github-btn.html?user=mohsen1&repo=json-formatter-js&type=fork&size=large&count=true"
          frameborder="0"
          width="170"
          height="30"
          scrolling="0">
        </iframe>
      </div>
      <h1><code>JSONFormatter</code></h1>
      <p>
        Render JSON objects in HTML with a <b>collapsible</b> navigation.
      </p>
      <p><b><a href="https://github.com/mohsen1/json-formatter-js">JSON Formatter project on GitHub</a></b></p>
    </div>
    <h2>Usage</h2>
    <div class="usage">
      <p>Simple usage in ES6</p>
      <pre>
import JSONFormatter from 'json-formatter-js'

const myJSON = {ans: 42};

const formatter = new JSONFormatter(myJSON);

document.body.appendChild(formatter.render());
      </pre>
    </div>
    <h2>Playground</h2>
    <div class="playground">
      <p>Updating the JSON value in this textarea renders a new formatter on the right.</p>
      <table>
        <tr>
          <td>
            <textarea id="live" name="" id="" cols="30" rows="10">{"foo": 42}</textarea>
          </td>
          <td>
            <div id="live-result"></div>
          </td>
        </tr>
        <tr>
          <p>
            <input type="checkbox" id="hoverPreviewEnabled">
            <label for="hoverPreviewEnabled"><code>hoverPreviewEnabled</code></label>
          </p>
        </tr>
      </table>
    </div>
    <h2>Examples</h2>
    <div class="result"></div>
  </body>
</html>