フロントエンドがJSONを優雅に表示する方法

json.cnは私たちの開発過程で、JSON文字列をフォーマットするためによく使われているツールのウェブサイトです.では、自分で書いたフロントエンドインタフェースに同じスタイルの、フォーマットした後のJSON文字列をどのように表示しますか.
ネット上に流れているバージョンは効果があまりよくないことを示しているので、少し変更しました.
コードは次のとおりです.

<pre>{{syntaxHighlight(data)}}pre>

CSS

pre {padding: 5px; margin: 5px; }
    .string { color: #3ab54a; font-weight: bold;}
    .number { color: #25aae2; font-weight: bold;}
    .boolean { color: #f98280; font-weight: bold;}
    .null { color: magenta; font-weight: bold;}
    .key { color: #92278f;font-weight: bold; }

JS

syntaxHighlight(json) {
                if (typeof json !== 'string') {
                    json = JSON.stringify(json, undefined, 4);
                }
                json = json.replace(/&/g, '&').replace(/, ').replace(/>/g, '>');
                return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, 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';
                    }
                    if(cls == 'key') {
                        return '
    + cls + '">' + match + ' ';
                    } else {
                        return '+ cls + '">' + match + '';
                    }
                }).replace("}", "
}");
            },

参考資料
簡単な方法でjsonデータの可視化を実現