From 9d63f7125d747a8f77b0215c4c1df6576826e813 Mon Sep 17 00:00:00 2001 From: Christian Muehlhaeuser Date: Sat, 7 Dec 2019 08:11:08 +0100 Subject: [PATCH] Add markdown examples to style reference --- styles/README.md | 193 +++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 188 insertions(+), 5 deletions(-) diff --git a/styles/README.md b/styles/README.md index 421b7f7..a8a419a 100644 --- a/styles/README.md +++ b/styles/README.md @@ -17,6 +17,8 @@ The `document` element represents the markdown's body. ### Example +Style: + ``` "document": { "indent": 2, @@ -43,6 +45,8 @@ The `paragraph` element represents a paragraph in the document. ### Example +Style: + ``` "paragraph": { "margin": 4, @@ -83,6 +87,18 @@ from the `heading` element. ### Example +Markdown: + +``` +# h1 + +## h2 + +### h3 +``` + +Style: + ``` "heading": { "prefix": "\n", @@ -126,6 +142,8 @@ The `text` element represents a block of text. ### Example +Style: + ``` "text": { "bold": true, @@ -151,6 +169,15 @@ The `list` element represents a list in the document. ### Example +Markdown: + +``` +- First Item + - Nested List Item +``` + +Style: + ``` "list": { "margin": 4, @@ -183,6 +210,8 @@ The `item` element represents an item in lists. ### Example +Style: + ``` "item": { "prefix": "• " @@ -213,6 +242,15 @@ The `enumeration` element represents an item in ordered lists. ### Example +Markdown: + +``` +1. First Item +2. Second Item +``` + +Style: + ``` "enumeration": { "prefix": ". " @@ -243,6 +281,14 @@ The `link` element represents a link. ### Example +Markdown: + +``` +This is a [link](https://charm.sh). +``` + +Style: + ``` "link": { "color": "123", @@ -276,6 +322,8 @@ The `link_text` element represents the text associated with a link. ### Example +Style: + ``` "link_text": { "color": "123", @@ -307,6 +355,14 @@ The `image` element represents an image. ### Example +Markdown: + +``` +![Image](https://charm.sh/logo.png). +``` + +Style: + ``` "image": { "color": "123", @@ -339,12 +395,46 @@ The `image_text` element represents the text associated with an image. ### Example +Style: + ``` "image_text": { "color": "8" } ``` +## code + +The `code` element represents an inline code segment. + +### Attributes + +| Attribute | Value | Description | +| ---------------- | ------ | ---------------------------------------------- | +| prefix | string | Printed before the code | +| suffix | string | Printed after the code | +| color | color | Defines the default text color for codes | +| background_color | color | Defines the default background color for codes | +| bold | bool | Increases text intensity | +| faint | bool | Decreases text intensity | +| italic | bool | Prints the text in italic | +| crossed_out | bool | Enables strikethrough as text decoration | +| underline | bool | Enables underline as text decoration | +| overlined | bool | Enables overline as text decoration | +| blink | bool | Enables blinking text | +| conceal | bool | Conceals / hides the text | +| inverse | bool | Swaps fore- & background colors | + +### Example + +Style: + +``` +"code": { + "color": "200" +} +``` + ## code_block The `code_block` element represents a block of code. @@ -363,6 +453,8 @@ The `code_block` element represents a block of code. ### Example +Style: + ``` "code_block": { "margin": 4, @@ -388,12 +480,99 @@ The `table` element represents a table of data. ### Example +Markdown: + +``` +| Label | Value | +| ------ | ----- | +| First | foo | +| Second | bar | +``` + +Style: + ``` "table": { "margin": 4 } ``` +## emph + +The `emph` element represents an emphasized text. + +### Attributes + +| Attribute | Value | Description | +| ---------------- | ------ | ------------------------------------------------- | +| prefix | string | Printed before the text | +| suffix | string | Printed after the text | +| color | color | Defines the default text color for the text | +| background_color | color | Defines the default background color for the text | +| bold | bool | Increases text intensity | +| faint | bool | Decreases text intensity | +| italic | bool | Prints the text in italic | +| crossed_out | bool | Enables strikethrough as text decoration | +| underline | bool | Enables underline as text decoration | +| overlined | bool | Enables overline as text decoration | +| blink | bool | Enables blinking text | +| conceal | bool | Conceals / hides the text | +| inverse | bool | Swaps fore- & background colors | + +### Example + +Markdown: + +``` +This text is *emphasized*. +``` + +Style: + +``` +"emph": { + "italic": true +} +``` + +## strong + +The `strong` element represents important text. + +### Attributes + +| Attribute | Value | Description | +| ---------------- | ------ | ------------------------------------------------- | +| prefix | string | Printed before the text | +| suffix | string | Printed after the text | +| color | color | Defines the default text color for the text | +| background_color | color | Defines the default background color for the text | +| bold | bool | Increases text intensity | +| faint | bool | Decreases text intensity | +| italic | bool | Prints the text in italic | +| crossed_out | bool | Enables strikethrough as text decoration | +| underline | bool | Enables underline as text decoration | +| overlined | bool | Enables overline as text decoration | +| blink | bool | Enables blinking text | +| conceal | bool | Conceals / hides the text | +| inverse | bool | Swaps fore- & background colors | + +### Example + +Markdown: + +``` +This text is **strong**. +``` + +Style: + +``` +"strong": { + "bold": true +} +``` + ## hr The `hr` element represents a horizontal rule. @@ -418,19 +597,23 @@ The `hr` element represents a horizontal rule. ### Example +Markdown: + +``` +--- +``` + +Style: + ``` "hr": { "prefix": "---" } ``` - ## block_quote -## emph -## strong ## del -## html_block ## softbreak ## hardbreak -## code +## html_block ## html_span