Add markdown & style reference examples and generator

styles/README.md

@@ -118,6 +118,9 @@ Style:
 }
 ```
 
+Output:
+![Heading Example](https://github.com/charmbracelet/gold/raw/master/styles/examples/heading.png)
+
 ## text
 
 The `text` element represents a block of text.
@@ -218,6 +221,9 @@ Style:
 }
 ```
 
+Output:
+![List Example](https://github.com/charmbracelet/gold/raw/master/styles/examples/list.png)
+
 ## enumeration
 
 The `enumeration` element represents an item in ordered lists.
@@ -257,6 +263,9 @@ Style:
 }
 ```
 
+Output:
+![Enumeration Example](https://github.com/charmbracelet/gold/raw/master/styles/examples/enumeration.png)
+
 ## link
 
 The `link` element represents a link.
@@ -298,6 +307,9 @@ Style:
 }
 ```
 
+Output:
+![Link Example](https://github.com/charmbracelet/gold/raw/master/styles/examples/link.png)
+
 ## link_text
 
 The `link_text` element represents the text associated with a link.
@@ -371,6 +383,9 @@ Style:
 }
 ```
 
+Output:
+![Image Example](https://github.com/charmbracelet/gold/raw/master/styles/examples/image.png)
+
 ## image_text
 
 The `image_text` element represents the text associated with an image.
@@ -435,6 +450,9 @@ Style:
 }
 ```
 
+Output:
+![Code Example](https://github.com/charmbracelet/gold/raw/master/styles/examples/code.png)
+
 ## code_block
 
 The `code_block` element represents a block of code.
@@ -463,6 +481,9 @@ Style:
 }
 ```
 
+Output:
+![Code Block Example](https://github.com/charmbracelet/gold/raw/master/styles/examples/code_block.png)
+
 ## table
 
 The `table` element represents a table of data.
@@ -497,6 +518,9 @@ Style:
 }
 ```
 
+Output:
+![Table Example](https://github.com/charmbracelet/gold/raw/master/styles/examples/table.png)
+
 ## emph
 
 The `emph` element represents an emphasized text.
@@ -535,6 +559,9 @@ Style:
 }
 ```
 
+Output:
+![Emph Example](https://github.com/charmbracelet/gold/raw/master/styles/examples/emph.png)
+
 ## strong
 
 The `strong` element represents important text.
@@ -573,6 +600,9 @@ Style:
 }
 ```
 
+Output:
+![Strong Example](https://github.com/charmbracelet/gold/raw/master/styles/examples/strong.png)
+
 ## hr
 
 The `hr` element represents a horizontal rule.
@@ -611,6 +641,9 @@ Style:
 }
 ```
 
+Output:
+![hr Example](https://github.com/charmbracelet/gold/raw/master/styles/examples/hr.png)
+
 ## block_quote
 ## del
 ## softbreak

styles/examples/code.md

@@ -0,0 +1 @@
+This is a `code`.

styles/examples/code.style

@@ -0,0 +1,5 @@
+{
+    "code": {
+        "color": "200"
+    }
+}

styles/examples/code_block.md

@@ -0,0 +1,3 @@
+```
+This is a code block.
+```

styles/examples/code_block.style

@@ -0,0 +1,7 @@
+{
+    "code_block": {
+        "margin": 4,
+        "color": "200",
+        "theme": "solarized-dark"
+    }
+}

styles/examples/document.style

@@ -0,0 +1,8 @@
+{
+    "document": {
+        "indent": 2,
+        "background_color": "234",
+        "prefix": "\n",
+        "suffix": "\n"
+    }
+}

styles/examples/emph.md

@@ -0,0 +1 @@
+This text is *emphasized*.

styles/examples/emph.style

@@ -0,0 +1,5 @@
+{
+    "emph": {
+        "italic": true
+    }
+}

styles/examples/enumeration.md

@@ -0,0 +1,2 @@
+1. First Item
+2. Second Item

styles/examples/enumeration.style

@@ -0,0 +1,10 @@
+{
+    "list": {
+        "margin": 4,
+        "color": "15",
+        "background_color": "52"
+    },
+    "enumeration": {
+        "prefix": ". "
+    }
+}

styles/examples/heading.md

@@ -0,0 +1,5 @@
+# h1
+
+## h2
+
+### h3

styles/examples/heading.style

@@ -0,0 +1,17 @@
+{
+    "heading": {
+        "margin": 4,
+        "color": "15",
+        "background_color": "57"
+    },
+    "h1": {
+        "prefix": "=> ",
+        "suffix": " <=",
+        "margin": 2,
+        "bold": true,
+        "background_color": "69"
+    },
+    "h2": {
+        "prefix": "# "
+    }
+}

styles/examples/hr.md

@@ -0,0 +1 @@
+---

styles/examples/hr.style

@@ -0,0 +1,5 @@
+{
+    "hr": {
+        "prefix": "---"
+    }
+}

styles/examples/image.md

@@ -0,0 +1 @@
+![Image](https://charm.sh/logo.png).

styles/examples/image.style

@@ -0,0 +1,10 @@
+{
+    "image": {
+        "color": "123",
+        "prefix": "[Image: ",
+        "suffix": "]"
+    },
+    "image_text": {
+        "color": "8"
+    }
+}

styles/examples/link.md

@@ -0,0 +1 @@
+This is a [link](https://charm.sh).

styles/examples/link.style

@@ -0,0 +1,12 @@
+{
+    "link": {
+        "color": "123",
+        "underline": true,
+        "prefix": "(",
+        "suffix": ")"
+    },
+    "link_text": {
+        "color": "123",
+        "bold": true
+    }
+}

styles/examples/list.md

@@ -0,0 +1,2 @@
+- First Item
+    - Nested List Item

styles/examples/list.style

@@ -0,0 +1,10 @@
+{
+    "list": {
+        "margin": 4,
+        "color": "15",
+        "background_color": "52"
+    },
+    "item": {
+        "prefix": "• "
+    }
+}

styles/examples/paragraph.style

@@ -0,0 +1,7 @@
+{
+    "paragraph": {
+        "margin": 4,
+        "color": "15",
+        "background_color": "235"
+    }
+}

styles/examples/strong.md

@@ -0,0 +1 @@
+This text is **strong**.

styles/examples/strong.style

@@ -0,0 +1,5 @@
+{
+    "strong": {
+        "bold": true
+    }
+}

styles/examples/table.md

@@ -0,0 +1,4 @@
+| Label  | Value |
+| ------ | ----- |
+| First  | foo   |
+| Second | bar   |

styles/examples/table.style

@@ -0,0 +1,5 @@
+{
+    "table": {
+        "margin": 4
+    }
+}

styles/examples/text.style

@@ -0,0 +1,7 @@
+{
+    "text": {
+        "bold": true,
+        "color": "15",
+        "background_color": "57"
+    }
+}