Add JSON text renderer (#1086)

* Add JsonText widget to render highlighted JSON

Closes #1051
This commit is contained in:
Patrik Svensson
2022-12-31 19:17:15 +01:00
committed by GitHub
parent 3e6e0990c5
commit 54be64ec84
48 changed files with 1634 additions and 21 deletions

View File

@ -0,0 +1,3 @@
{"version": 2, "width": 62, "height": 20, "title": "json (plain)", "env": {"TERM": "Spectre.Console"}}
[0, "o", "\u001B[37m\u250C\u2500Some JSON in a panel\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u001B[0m\r\n\u001B[37m\u2502\u001B[0m \u001B[37m{\u001B[0m \u001B[37m\u2502\u001B[0m\r\n\u001B[37m\u2502\u001B[0m \u001B[34m\u0022hello\u0022\u001B[0m\u001B[37m:\u001B[0m \u001B[32m32\u001B[0m\u001B[37m,\u001B[0m \u001B[37m\u2502\u001B[0m\r\n\u001B[37m\u2502\u001B[0m \u001B[34m\u0022world\u0022\u001B[0m\u001B[37m:\u001B[0m \u001B[37m{\u001B[0m \u001B[37m\u2502\u001B[0m\r\n\u001B[37m\u2502\u001B[0m \u001B[34m\u0022foo\u0022\u001B[0m\u001B[37m:\u001B[0m \u001B[32m21\u001B[0m\u001B[37m,\u001B[0m \u001B[37m\u2502\u001B[0m\r\n\u001B[37m\u2502\u001B[0m \u001B[34m\u0022bar\u0022\u001B[0m\u001B[37m:\u001B[0m \u001B[32m255\u001B[0m\u001B[37m,\u001B[0m \u001B[37m\u2502\u001B[0m\r\n\u001B[37m\u2502\u001B[0m \u001B[34m\u0022baz\u0022\u001B[0m\u001B[37m:\u001B[0m \u001B[37m[\u001B[0m \u001B[37m\u2502\u001B[0m\r\n\u001B[37m\u2502\u001B[0m \u001B[32m0.32\u001B[0m\u001B[37m,\u001B[0m \u001B[37m\u2502\u001B[0m\r\n\u001B[37m\u2502\u001B[0m \u001B[32m0.33e-32\u001B[0m\u001B[37m,\u001B[0m \u001B[37m\u2502\u001B[0m\r\n\u001B[37m\u2502\u001B[0m \u001B[32m0.42e32\u001B[0m\u001B[37m,\u001B[0m \u001B[37m\u2502\u001B[0m\r\n\u001B[37m\u2502\u001B[0m \u001B[32m0.55e\u002B32\u001B[0m\u001B[37m,\u001B[0m \u001B[37m\u2502\u001B[0m\r\n\u001B[37m\u2502\u001B[0m \u001B[37m{\u001B[0m \u001B[37m\u2502\u001B[0m\r\n\u001B[37m\u2502\u001B[0m \u001B[34m\u0022hello\u0022\u001B[0m\u001B[37m:\u001B[0m \u001B[31m\u0022world\u0022\u001B[0m\u001B[37m,\u001B[0m \u001B[37m\u2502\u001B[0m\r\n\u001B[37m\u2502\u001B[0m \u001B[34m\u0022lol\u0022\u001B[0m\u001B[37m:\u001B[0m \u001B[37mnull\u001B[0m \u001B[37m\u2502\u001B[0m\r\n\u001B[37m\u2502\u001B[0m \u001B[37m}\u001B[0m \u001B[37m\u2502\u001B[0m\r\n\u001B[37m\u2502\u001B[0m \u001B[37m]\u001B[0m \u001B[37m\u2502\u001B[0m\r\n\u001B[37m\u2502\u001B[0m \u001B[37m}\u001B[0m \u001B[37m\u2502\u001B[0m\r\n\u001B[37m\u2502\u001B[0m \u001B[37m}\u001B[0m \u001B[37m\u2502\u001B[0m\r\n\u001B[37m\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u001B[0m\r\n"]

View File

@ -0,0 +1,3 @@
{"version": 2, "width": 62, "height": 20, "title": "json (rich)", "env": {"TERM": "Spectre.Console"}}
[0, "o", "\u001B[38;5;11m\u256D\u2500Some JSON in a panel\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256E\u001B[0m\r\n\u001B[38;5;11m\u2502\u001B[0m \u001B[38;5;8m{\u001B[0m \u001B[38;5;11m\u2502\u001B[0m\r\n\u001B[38;5;11m\u2502\u001B[0m \u001B[38;5;12m\u0022hello\u0022\u001B[0m\u001B[38;5;11m:\u001B[0m \u001B[38;5;2m32\u001B[0m\u001B[38;5;8m,\u001B[0m \u001B[38;5;11m\u2502\u001B[0m\r\n\u001B[38;5;11m\u2502\u001B[0m \u001B[38;5;12m\u0022world\u0022\u001B[0m\u001B[38;5;11m:\u001B[0m \u001B[38;5;8m{\u001B[0m \u001B[38;5;11m\u2502\u001B[0m\r\n\u001B[38;5;11m\u2502\u001B[0m \u001B[38;5;12m\u0022foo\u0022\u001B[0m\u001B[38;5;11m:\u001B[0m \u001B[38;5;2m21\u001B[0m\u001B[38;5;8m,\u001B[0m \u001B[38;5;11m\u2502\u001B[0m\r\n\u001B[38;5;11m\u2502\u001B[0m \u001B[38;5;12m\u0022bar\u0022\u001B[0m\u001B[38;5;11m:\u001B[0m \u001B[38;5;2m255\u001B[0m\u001B[38;5;8m,\u001B[0m \u001B[38;5;11m\u2502\u001B[0m\r\n\u001B[38;5;11m\u2502\u001B[0m \u001B[38;5;12m\u0022baz\u0022\u001B[0m\u001B[38;5;11m:\u001B[0m \u001B[38;5;8m[\u001B[0m \u001B[38;5;11m\u2502\u001B[0m\r\n\u001B[38;5;11m\u2502\u001B[0m \u001B[38;5;2m0.32\u001B[0m\u001B[38;5;8m,\u001B[0m \u001B[38;5;11m\u2502\u001B[0m\r\n\u001B[38;5;11m\u2502\u001B[0m \u001B[38;5;2m0.33e-32\u001B[0m\u001B[38;5;8m,\u001B[0m \u001B[38;5;11m\u2502\u001B[0m\r\n\u001B[38;5;11m\u2502\u001B[0m \u001B[38;5;2m0.42e32\u001B[0m\u001B[38;5;8m,\u001B[0m \u001B[38;5;11m\u2502\u001B[0m\r\n\u001B[38;5;11m\u2502\u001B[0m \u001B[38;5;2m0.55e\u002B32\u001B[0m\u001B[38;5;8m,\u001B[0m \u001B[38;5;11m\u2502\u001B[0m\r\n\u001B[38;5;11m\u2502\u001B[0m \u001B[38;5;8m{\u001B[0m \u001B[38;5;11m\u2502\u001B[0m\r\n\u001B[38;5;11m\u2502\u001B[0m \u001B[38;5;12m\u0022hello\u0022\u001B[0m\u001B[38;5;11m:\u001B[0m \u001B[38;5;9m\u0022world\u0022\u001B[0m\u001B[38;5;8m,\u001B[0m \u001B[38;5;11m\u2502\u001B[0m\r\n\u001B[38;5;11m\u2502\u001B[0m \u001B[38;5;12m\u0022lol\u0022\u001B[0m\u001B[38;5;11m:\u001B[0m \u001B[38;5;8mnull\u001B[0m \u001B[38;5;11m\u2502\u001B[0m\r\n\u001B[38;5;11m\u2502\u001B[0m \u001B[38;5;8m}\u001B[0m \u001B[38;5;11m\u2502\u001B[0m\r\n\u001B[38;5;11m\u2502\u001B[0m \u001B[38;5;8m]\u001B[0m \u001B[38;5;11m\u2502\u001B[0m\r\n\u001B[38;5;11m\u2502\u001B[0m \u001B[38;5;8m}\u001B[0m \u001B[38;5;11m\u2502\u001B[0m\r\n\u001B[38;5;11m\u2502\u001B[0m \u001B[38;5;8m}\u001B[0m \u001B[38;5;11m\u2502\u001B[0m\r\n\u001B[38;5;11m\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256F\u001B[0m\r\n"]

View File

@ -0,0 +1,69 @@
Title: JSON
Order: 70
Description: "Use *ImageSharp* to parse images and render them as Ascii art to the console."
Reference: T:Spectre.Console.Json.JsonText
---
To add JSON superpowers to
your console application to render JSON text, you will need to install
the [Spectre.Console.Json](https://www.nuget.org/packages/Spectre.Console.Json) NuGet package.
```text
> dotnet add package Spectre.Console.Json
```
## Loading images
Once you've added the `Spectre.Console.Json` NuGet package,
you can start rendering JSON to the console.
```csharp
using Spectre.Console.Json;
var json = new JsonText(
"""
{
"hello": 32,
"world": {
"foo": 21,
"bar": 255,
"baz": [
0.32, 0.33e-32,
0.42e32, 0.55e+32,
{
"hello": "world",
"lol": null
}
]
}
}
""");
AnsiConsole.Write(
new Panel(json)
.Header("Some JSON in a panel")
.Collapse()
.RoundedBorder()
.BorderColor(Color.Yellow));
```
### Result
<?# AsciiCast cast="json" /?>
## Styling
All the different JSON parts can be customized to have unique styles.
```csharp
AnsiConsole.Write(
new JsonText(json)
.BracesColor(Color.Red)
.BracketColor(Color.Green)
.ColonColor(Color.Blue)
.CommaColor(Color.Red)
.StringColor(Color.Green)
.NumberColor(Color.Blue)
.BooleanColor(Color.Red)
.NullColor(Color.Green));
```