| 123456789101112131415161718192021222324252627282930313233343536373839 |
- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
- <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
- <style>
- .highlight {
- padding: 20px;
- background-color: #f8f9fa;
- }
- </style>
- <table class="table table-responsive">
- {{#list}}
- <tr id="{{id}}">
- <td>{{id}}</td>
- <td>{{key}}</td>
- <td>{{type}}</td>
- <td>{{format}}</td>
- <td>{{created_at}}</td>
- </tr>
- {{/list}}
- </table>
- <pre>
- <code id="canvas" class="language-json"></code>
- </pre>
- <script>
- // https://highlightjs.org/download/
- // https://www.tutorialspoint.com/how-to-format-json-string-in-javascript
- $('tr').on('click', function (e) {
- let id = $(this).attr('id');
- fetch("/cache/" + id)
- .then(response => response.json())
- .then(function (data) {
- $('#canvas').html(JSON.stringify(data, null, 4));
- hljs.highlightAll();
- });
- });
- </script>
|