Add documentation for tables

Also moves "Colors" and "Styles" sections to appendix.
This commit is contained in:
Patrik Svensson
2020-09-08 18:04:24 +02:00
committed by Patrik Svensson
parent 3e9796849b
commit 003e15686f
6 changed files with 174 additions and 50 deletions

View File

@ -1,21 +1,19 @@
Title: Markup
Order: 3
Hidden: False
Order: 2
---
In `Spectre.Console` there's a class called `Markup` that
allows you to output rich text to the console.
# Syntax
Console markup uses a syntax inspired by bbcode. If you write the style (see Styles)
in square brackets, e.g. `[bold red]`, that style will apply until it is closed with a `[/]`.
```csharp
AnsiConsole.Render(new Markup("[bold yellow]Hello[/] [red]World![/]"));
```
Which should output something similar to the image below. Note that the
actual appearance might vary depending on your terminal.
![](/spectre.console/assets/images/helloworld.png)
The `Markup` class implements `IRenderable` which means that you
can use this in tables, grids, and panels. Most classes that support
rendering of `IRenderable` also have overloads for rendering rich text.
@ -58,47 +56,8 @@ You can set the background color in markup by prefixing the color with
# Colors
For a list of colors, see the [Colors](xref:colors) section.
For a list of colors, see the [Colors](xref:colors) appendix section.
# Styles
Note that what styles that can be used is defined by the system or your terminal software, and may not appear as they should.
<table class="table">
<tr>
<td><code>bold</code></td>
<td>Bold text</td>
</tr>
<tr>
<td><code>dim</code></td>
<td>Dim or faint text</td>
</tr>
<tr>
<td><code>italic</code></td>
<td>Italic text</td>
</tr>
<tr>
<td><code>underline</code></td>
<td>Underlined text</td>
</tr>
<tr>
<td><code>invert</code></td>
<td>Swaps the foreground and background colors</td>
</tr>
<tr>
<td><code>conceal</code></td>
<td>Hides the text</td>
</tr>
<tr>
<td><code>slowblink</code></td>
<td>Makes text blink slowly</td>
</tr>
<tr>
<td><code>rapidblink</code></td>
<td>Makes text blink</td>
</tr>
<tr>
<td><code>strikethrough</code></td>
<td>Shows text with a horizontal line through the center</td>
</tr>
</table>
For a list of styles, see the [Styles](xref:styles) appendix section.