sintaxHighlight.css

pre {
  background-color: #f6f8fa;
  padding: 10px;
  border-radius: 5px;
  overflow: auto;
}
.string {
  color: darkgray;
}
.number {
  color: darkorange;
}
.boolean {
  color: blue;
}
.null {
  color: magenta;
}
.key {
  color: green;
}

sintaxHighlight.html

<pre [innerHTML]="jsondata"></pre>

sintaxHighlight.ts

 syntaxHighlight (json: TypedJson) {
    const jsonString = JSON.stringify(json, undefined, 2);
    return jsonString.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
      .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|\d+)/g, (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>`;
      });
  }