Simple VueJS component that beautifies JSON objects

AnotherComponent.vue

<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>

CodePrinter.vue

<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>