Skip to content

Instantly share code, notes, and snippets.

@marydn
Created October 2, 2019 12:05
Show Gist options
  • Save marydn/0f6817b5d2e6a786eaf7d0c8cf19810f to your computer and use it in GitHub Desktop.
Save marydn/0f6817b5d2e6a786eaf7d0c8cf19810f to your computer and use it in GitHub Desktop.
Simple VueJS component that beautifies JSON objects
<template>
<code-printer>
{{ json }}
</code-printer>
</template>
<script>
import CodePrinter from './CodePrinter';
export default {
name: 'AnotherComponent',
components: { CodePrinter },
data() {
return {
json: [
{"categories":[],"created_at":"2016-05-01 10:51:41.584544","icon_url":"https://assets.chucknorris.host/img/avatar/chuck-norris.png","id":"bcIJ4gpzTdKzYk7syHs-NA","updated_at":"2017-12-29 19:52:23.239841","url":"https://api.chucknorris.io/jokes/bcIJ4gpzTdKzYk7syHs-NA","value":"Chuck Norris created facebook so that he can track everyone on the planet"},
{"categories":[],"created_at":"2016-05-01 10:51:41.584544","icon_url":"https://assets.chucknorris.host/img/avatar/chuck-norris.png","id":"bcIJ4gpzTdKzYk7syHs-NA","updated_at":"2017-12-29 19:52:23.239841","url":"https://api.chucknorris.io/jokes/bcIJ4gpzTdKzYk7syHs-NA","value":"Chuck Norris created facebook so that he can track everyone on the planet"},
{"categories":[],"created_at":"2016-05-01 10:51:41.584544","icon_url":"https://assets.chucknorris.host/img/avatar/chuck-norris.png","id":"bcIJ4gpzTdKzYk7syHs-NA","updated_at":"2017-12-29 19:52:23.239841","url":"https://api.chucknorris.io/jokes/bcIJ4gpzTdKzYk7syHs-NA","value":"Chuck Norris created facebook so that he can track everyone on the planet"},
{"categories":[],"created_at":"2016-05-01 10:51:41.584544","icon_url":"https://assets.chucknorris.host/img/avatar/chuck-norris.png","id":"bcIJ4gpzTdKzYk7syHs-NA","updated_at":"2017-12-29 19:52:23.239841","url":"https://api.chucknorris.io/jokes/bcIJ4gpzTdKzYk7syHs-NA","value":"Chuck Norris created facebook so that he can track everyone on the planet"},
{"categories":[],"created_at":"2016-05-01 10:51:41.584544","icon_url":"https://assets.chucknorris.host/img/avatar/chuck-norris.png","id":"bcIJ4gpzTdKzYk7syHs-NA","updated_at":"2017-12-29 19:52:23.239841","url":"https://api.chucknorris.io/jokes/bcIJ4gpzTdKzYk7syHs-NA","value":"Chuck Norris created facebook so that he can track everyone on the planet"}
]
};
}
};
</script>
<template>
<div class="beautifier">
<pre v-html="beautified"></pre>
</div>
</template>
<script>
export default {
name: 'CodePrinter',
computed: {
code() {
return this.$slots.default ? this.$slots.default[0].text.trim() : '';
},
beautified() {
return this.syntaxHighlight(this.code);
}
},
methods: {
syntaxHighlight(json) {
if (typeof json != 'string') {
json = JSON.stringify(json, undefined, 2);
}
json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
const regex = new RegExp(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g);
return json.replace(regex, function (match) {
let cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
}
}
</script>
<style lang="less">
.beautifier {
background-color: #fdf6e3;
border: 1px dashed #000000;
border-radius: 4px;
color: #333333;
height: 200px;
overflow-y: auto;
padding: 10px;
position: fixed;
right: 10px;
top: 10px;
width: 400px;
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment