fc-json-viewer

Display themed syntax highlighted JSON.

⚠️⚠️ This component is deprecated and might be unstable. please use fc-highlight. ⚠️⚠️

Usage

<script>
  import '@forter/json-viewer';
</script>

<fc-json-viewer>
   {"foo": "foo", "bar": 10, "baz": null, "biff": false}
</fc-json-viewer>

Properties

| Property | Attribute | Type | Description | |-------------|-------------|-------|--------------------------------------------------| | object | object | any | object to display. example: {"ori": { "goldi": 1, "gilad":2 } } | | whitelist | whitelist | any | list of keys to show. example: ["foo"] |

Slots

| Name | Description | |------|--------------------------------------------------| | | markup of JSON to prettify. example: {"foo": "foo", "bar": 10, "baz": null, "biff": false} |

CSS Custom Properties

| Property | Description | |----------------------------------|--------------------------------------------------| | --fc-json-viewer-boolean-color | boolean color. example: var(--yellow-9), default: var(--cyan-9) | | --fc-json-viewer-key-color | key color. example: var(--yellow-9), default: var(--orange-9) | | --fc-json-viewer-null-color | null color. example: var(--yellow-9), default: var(--red-9) | | --fc-json-viewer-number-color | number color. example: var(--yellow-9), default: var(--green-9) | | --fc-json-viewer-string-color | string color. example: var(--yellow-9), default: var(--cyan-9) |