@@ -74,21 +74,21 @@ Or load via CDN:
74
74
75
75
In general, use CSS variables.
76
76
77
- | Name | Default | Description |
78
- | ---------------------------- | ------------ | --------------------------------------------- |
79
- | --jsonPaddingLeft | 1rem | Amount of left padding to apply at each depth |
80
- | --jsonBorderLeft | 1px dotted | Style applied to left border for each depth |
81
- | --jsonBracketColor | currentcolor | Color for brackets ` [ ` , ` { ` , ` } ` and ` ] ` |
82
- | --jsonBracketHoverBackground | #e5e7eb | Hover background for brackets |
83
- | --jsonSeparatorColor | currentcolor | Color for separators ` : ` and ` , ` |
84
- | --jsonKeyColor | currentcolor | Color for keys |
85
- | --jsonValColor | #9ca3af | Default color for values |
86
- | --jsonValStringColor | #059669 | Color for ` string ` values |
87
- | --jsonValNumberColor | #d97706 | Color for ` number ` values |
88
- | --jsonValBooleanColor | #2563eb | Color for ` boolean ` values |
89
-
90
- It's recommended to wrap the component to apply your own font family (a monospaced font is
91
- recommended) and also to apply custom CSS var overrides.
77
+ | Name | Default | Description |
78
+ | ------------------------------ | -- ------------ | --------------------------------------------- |
79
+ | ` --jsonPaddingLeft ` | ` 1rem ` | Amount of left padding to apply at each depth |
80
+ | ` --jsonBorderLeft ` | ` 1px dotted ` | Style applied to left border for each depth |
81
+ | ` --jsonBracketColor ` | ` currentcolor ` | Colour for brackets ` [ ` , ` { ` , ` } ` and ` ] ` |
82
+ | ` --jsonBracketHoverBackground ` | ` #e5e7eb ` | Hover background for brackets |
83
+ | ` --jsonSeparatorColor ` | ` currentcolor ` | Colour for separators ` : ` and ` , ` |
84
+ | ` --jsonKeyColor ` | ` currentcolor ` | Colour for keys |
85
+ | ` --jsonValColor ` | ` #9ca3af ` | Default colour for values |
86
+ | ` --jsonValStringColor ` | ` #059669 ` | Colour for ` string ` values |
87
+ | ` --jsonValNumberColor ` | ` #d97706 ` | Colour for ` number ` values |
88
+ | ` --jsonValBooleanColor ` | ` #2563eb ` | Colour for ` boolean ` values |
89
+
90
+ To apply your own font family (a monospaced font is recommended) or apply custom CSS var overrides,
91
+ try wrapping the component and applying these styles to the wrapper like so:
92
92
93
93
<!-- prettier-ignore -->
94
94
``` html
@@ -109,10 +109,10 @@ recommended) and also to apply custom CSS var overrides.
109
109
110
110
## Props
111
111
112
- | Name | Type | Default | Description |
113
- | ----- | ------ | --------- | -------------------------------- |
114
- | json | Object | undefined | Un-stringified object to display |
115
- | depth | Number | Infinity | Initial expansion depth |
112
+ | Name | Type | Default | Description |
113
+ | ------- | -------- | -- --------- | -------------------------------- |
114
+ | ` json ` | ` object ` | ` undefined ` | Un-stringified object to display |
115
+ | ` depth ` | ` number ` | ` Infinity ` | Initial expansion depth |
116
116
117
117
## Development
118
118
0 commit comments