From 04f42b2a0fd125778ab0bb5c12f6677bbfb937c1 Mon Sep 17 00:00:00 2001 From: Youssef Raafat Date: Fri, 17 Jan 2020 10:24:12 +0200 Subject: [PATCH] Improve Elements Page The new elements collection has a document for each element with the code required to generate that element. The element layout parse that code and displays both the parsed element and the code itself. --- _config.yml | 8 +- _elements/01-headers.html | 9 + _elements/02-emphasis.html | 7 + _elements/03-highlight.html | 6 + _elements/04-blockquotes.html | 9 + _elements/05-links.html | 4 + _elements/06-line-breaks.html | 9 + _elements/07-horizontal-rule.html | 10 + _elements/08-code.html | 9 + _elements/09-syntax-highlighting.html | 12 + _elements/10-github-gists.html | 7 + _elements/11-buttons.html | 15 + _elements/12-ordered-list.html | 10 + _elements/13-unordered-list.html | 6 + _elements/14-list-group.html | 10 + _elements/15-table-of-contents.html | 11 + _elements/16-images.html | 4 + _elements/17-figures.html | 6 + _elements/18-carousel.html | 10 + _elements/19-videos.html | 11 + _elements/20-tables.html | 8 + _layouts/element.html | 141 ++++++++ docs/elements.html | 27 ++ docs/elements.md | 490 -------------------------- 24 files changed, 348 insertions(+), 491 deletions(-) create mode 100644 _elements/01-headers.html create mode 100644 _elements/02-emphasis.html create mode 100644 _elements/03-highlight.html create mode 100644 _elements/04-blockquotes.html create mode 100644 _elements/05-links.html create mode 100644 _elements/06-line-breaks.html create mode 100644 _elements/07-horizontal-rule.html create mode 100644 _elements/08-code.html create mode 100644 _elements/09-syntax-highlighting.html create mode 100644 _elements/10-github-gists.html create mode 100644 _elements/11-buttons.html create mode 100644 _elements/12-ordered-list.html create mode 100644 _elements/13-unordered-list.html create mode 100644 _elements/14-list-group.html create mode 100644 _elements/15-table-of-contents.html create mode 100644 _elements/16-images.html create mode 100644 _elements/17-figures.html create mode 100644 _elements/18-carousel.html create mode 100644 _elements/19-videos.html create mode 100644 _elements/20-tables.html create mode 100644 _layouts/element.html create mode 100644 docs/elements.html delete mode 100644 docs/elements.md diff --git a/_config.yml b/_config.yml index a2287faa2..ca1755317 100644 --- a/_config.yml +++ b/_config.yml @@ -61,7 +61,8 @@ collections: projects: output: true permalink: /projects/:name - + elements: + output: true ### Defaults for collections ### defaults: @@ -70,6 +71,11 @@ defaults: type: "projects" values: layout: "page" + - scope: + path: "" + type: "elements" + values: + layout: "element" ### Exclude from processing ### diff --git a/_elements/01-headers.html b/_elements/01-headers.html new file mode 100644 index 000000000..936e172fa --- /dev/null +++ b/_elements/01-headers.html @@ -0,0 +1,9 @@ +--- +--- + +# H1 +## H2 +### H3 +#### H4 +##### H5 +###### H6 diff --git a/_elements/02-emphasis.html b/_elements/02-emphasis.html new file mode 100644 index 000000000..f565ad7ab --- /dev/null +++ b/_elements/02-emphasis.html @@ -0,0 +1,7 @@ +--- +--- + +Emphasis, aka italics, with *asterisks* or _underscores_. +Strong emphasis, aka bold, with **asterisks** or __underscores__. +Combined emphasis with **asterisks and _underscores_**. +Strikethrough uses two tildes. ~~Scratch this.~~ diff --git a/_elements/03-highlight.html b/_elements/03-highlight.html new file mode 100644 index 000000000..21d38055d --- /dev/null +++ b/_elements/03-highlight.html @@ -0,0 +1,6 @@ +--- +--- + +{% raw %} +{% include elements/highlight.html text="I am highlighted text." %} +{% endraw %} diff --git a/_elements/04-blockquotes.html b/_elements/04-blockquotes.html new file mode 100644 index 000000000..2ae143b31 --- /dev/null +++ b/_elements/04-blockquotes.html @@ -0,0 +1,9 @@ +--- +--- + +> Blockquotes are very handy in email to emulate reply text. +> This line is part of the same quote. + +Quote break. + +> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. diff --git a/_elements/05-links.html b/_elements/05-links.html new file mode 100644 index 000000000..e57f24d94 --- /dev/null +++ b/_elements/05-links.html @@ -0,0 +1,4 @@ +--- +--- + +[I'm a link](https://www.google.com) diff --git a/_elements/06-line-breaks.html b/_elements/06-line-breaks.html new file mode 100644 index 000000000..e0b2c4c80 --- /dev/null +++ b/_elements/06-line-breaks.html @@ -0,0 +1,9 @@ +--- +--- + +Here's a line for us to start with. + +This line is separated from the one above by two newlines, so it will be a *separate paragraph*. + +This line is also a separate paragraph, but... +This line is only separated by a single newline, so it's a separate line in the *same paragraph*. diff --git a/_elements/07-horizontal-rule.html b/_elements/07-horizontal-rule.html new file mode 100644 index 000000000..979f1eb2a --- /dev/null +++ b/_elements/07-horizontal-rule.html @@ -0,0 +1,10 @@ +--- +tips: + - Three or more Underscores, Hyphens or Asterisks... +--- + +___ + +--- + +*** diff --git a/_elements/08-code.html b/_elements/08-code.html new file mode 100644 index 000000000..0eccd6aad --- /dev/null +++ b/_elements/08-code.html @@ -0,0 +1,9 @@ +--- +--- + +Inline `code` has `back-ticks around` it. + +``` +s = "Code Block Test"; +print s; +``` diff --git a/_elements/09-syntax-highlighting.html b/_elements/09-syntax-highlighting.html new file mode 100644 index 000000000..728c31e92 --- /dev/null +++ b/_elements/09-syntax-highlighting.html @@ -0,0 +1,12 @@ +--- +--- + +```javascript +var s = "This is JavaScript syntax highlighting"; +alert(s); +``` + +```python +s = "But this is Python syntax highlighting" +print s +``` diff --git a/_elements/10-github-gists.html b/_elements/10-github-gists.html new file mode 100644 index 000000000..4fbca4521 --- /dev/null +++ b/_elements/10-github-gists.html @@ -0,0 +1,7 @@ +--- +tips: + - To include a **single file** just add the file name after the **gist ID**:
+ `{% gist 3c466b... Hello%20World.java %}` or `{% gist 3c466b... hello.py %}` +--- + +{% gist 3c466bc3c32c4ae5c9b36d1266b913d8 %} diff --git a/_elements/11-buttons.html b/_elements/11-buttons.html new file mode 100644 index 000000000..e9e584acf --- /dev/null +++ b/_elements/11-buttons.html @@ -0,0 +1,15 @@ +--- +tips: + - 'To **center** your buttons, surround it with the following HTML tag:
+ `

{% include ... %}

`' + - 'Know more about buttons from + [Bootstrap Buttons](https://getbootstrap.com/docs/4.1/components/buttons/)' +--- + +{% raw %} +{% include elements/button.html link="https://github.com" text="GitHub" style="primary" size="sm" %} +{% include elements/button.html link="https://github.com" text="GitHub" %} +{% include elements/button.html link="https://github.com" text="GitHub" style="outline-dark" size="lg" %} +{% include elements/button.html link="https://github.com" text="GitHub" block=true %} +{% endraw %} + diff --git a/_elements/12-ordered-list.html b/_elements/12-ordered-list.html new file mode 100644 index 000000000..6d8afb025 --- /dev/null +++ b/_elements/12-ordered-list.html @@ -0,0 +1,10 @@ +--- +--- + +1. First ordered list item +2. Another item + * Unordered sub-list. +1. Actual numbers don't matter, just that it's a number + 1. Ordered sub-list +4. And another item. + Some text that should be aligned with the above item. diff --git a/_elements/13-unordered-list.html b/_elements/13-unordered-list.html new file mode 100644 index 000000000..9f981dfc9 --- /dev/null +++ b/_elements/13-unordered-list.html @@ -0,0 +1,6 @@ +--- +--- + +* Unordered list can use asterisks +- Or minuses ++ Or pluses diff --git a/_elements/14-list-group.html b/_elements/14-list-group.html new file mode 100644 index 000000000..60c3fbf79 --- /dev/null +++ b/_elements/14-list-group.html @@ -0,0 +1,10 @@ +--- +--- + +{% raw %} +{% capture list_items %} +Google,https://www.google.com +GitHub,https://www.github.com +{% endcapture %} +{% include elements/list.html title="Websites" %} +{% endraw %} diff --git a/_elements/15-table-of-contents.html b/_elements/15-table-of-contents.html new file mode 100644 index 000000000..09f458bcc --- /dev/null +++ b/_elements/15-table-of-contents.html @@ -0,0 +1,11 @@ +--- +--- + +{% raw %} +{% capture list_items %} +Headers +Emphasis +List +{% endcapture %} +{% include elements/list.html title="Table of Contents" type="toc" %} +{% endraw %} diff --git a/_elements/16-images.html b/_elements/16-images.html new file mode 100644 index 000000000..aba157b37 --- /dev/null +++ b/_elements/16-images.html @@ -0,0 +1,4 @@ +--- +--- + +![alt text](https://bit.ly/2TOsM7B "Building Image") diff --git a/_elements/17-figures.html b/_elements/17-figures.html new file mode 100644 index 000000000..ade23a98c --- /dev/null +++ b/_elements/17-figures.html @@ -0,0 +1,6 @@ +--- +--- + +{% raw %} +{% include elements/figure.html image="https://bit.ly/2N69TKO" caption="The Ocean" %} +{% endraw %} diff --git a/_elements/18-carousel.html b/_elements/18-carousel.html new file mode 100644 index 000000000..2688e1c0d --- /dev/null +++ b/_elements/18-carousel.html @@ -0,0 +1,10 @@ +--- +--- + +{% raw %} +{% capture carousel_images %} +https://bit.ly/2BBbVhc +https://bit.ly/2DOtxXB +{% endcapture %} +{% include elements/carousel.html %} +{% endraw %} diff --git a/_elements/19-videos.html b/_elements/19-videos.html new file mode 100644 index 000000000..4d55028dc --- /dev/null +++ b/_elements/19-videos.html @@ -0,0 +1,11 @@ +--- +tips: + - '**How to get a YouTube video ID?**
+ The video ID is located in the URL of the video page, right after the `v=` URL parameter.
+ In this case, the URL of the video is: `https://www.youtube.com/watch?v=aZNbUITN-mA`.
+ Therefore, the ID of the video is `aZNbUITN-mA`.' +--- + +{% raw %} +{% include elements/video.html id="aZNbUITN-mA" %} +{% endraw %} diff --git a/_elements/20-tables.html b/_elements/20-tables.html new file mode 100644 index 000000000..084a1dc81 --- /dev/null +++ b/_elements/20-tables.html @@ -0,0 +1,8 @@ +--- +--- + +| Left | Center | Right | +| ------------- |:-------------:| -------:| +| col 3 is | right-aligned | $160000 | +| col 2 is | centered | $12 | +| **Use** | `Markdown` | $1 | diff --git a/_layouts/element.html b/_layouts/element.html new file mode 100644 index 000000000..7cbce0a61 --- /dev/null +++ b/_layouts/element.html @@ -0,0 +1,141 @@ +{% assign page_title = page.title | slice: 2, page.title.size %} +

{{ page_title }}

+ +{%- assign code = content | strip -%} + +{%- if code contains '{% ' -%} + + {%- assign code = code | newline_to_br | split: '
' -%} + + {%- assign start_capture = false -%} + {%- assign captured_text = '' -%} + {%- assign captured_var = '' -%} + {%- assign includes = '' | split: '' -%} + + {%- for line in code -%} + + {%- if line contains '{% endcapture' -%} + {%- assign start_capture = false -%} + {%- elsif start_capture == true -%} + {%- assign captured_text = captured_text | append: line -%} + {%- elsif line contains '{% capture' -%} + {%- assign temp = line | split: ' ' -%} + {%- assign captured_var = temp[2] -%} + {%- assign start_capture = true -%} + {%- elsif line contains '{% include' -%} + {%- assign includes = includes | push: line -%} + {%- endif -%} + + {%- endfor -%} + + {%- assign list_items = nil -%} + {%- assign carousel_images = nil -%} + + {%- case captured_var -%} + {%- when 'list_items' -%} + {%- assign list_items = captured_text -%} + {%- when 'carousel_images' -%} + {%- assign carousel_images = captured_text -%} + {%- endcase -%} + + {%- for include in includes -%} + + {%- assign incl = include | strip -%} + {%- assign incl = incl | remove: '{% include ' -%} + {%- assign incl = incl | remove: ' %' | remove: '}' -%} + {%- assign incl = incl | replace_first: ' ', '" ' -%} + {%- assign temp = incl | split: '" ' -%} + + {%- assign file = temp | first -%} + {%- assign params = temp | shift -%} + + {%- assign alt = nil -%} + {%- assign block = nil -%} + {%- assign caption = nil -%} + {%- assign id = nil -%} + {%- assign image = nil -%} + {%- assign link = nil -%} + {%- assign size = nil -%} + {%- assign style = nil -%} + {%- assign title = nil -%} + {%- assign text = nil -%} + {%- assign type = nil -%} + + {%- for param in params -%} + + {%- assign pair = param | split: '=' -%} + {%- assign key = pair[0] -%} + {%- assign value = pair[1] | remove: '"' -%} + + {%- case key -%} + {%- when 'alt' -%} + {%- assign alt = value -%} + {%- when 'block' -%} + {%- assign block = value -%} + {%- when 'caption' -%} + {%- assign caption = value -%} + {%- when 'id' -%} + {%- assign id = value -%} + {%- when 'image' -%} + {%- assign image = value -%} + {%- when 'link' -%} + {%- assign link = value -%} + {%- when 'size' -%} + {%- assign size = value -%} + {%- when 'style' -%} + {%- assign style = value -%} + {%- when 'title' -%} + {%- assign title = value -%} + {%- when 'text' -%} + {%- assign text = value -%} + {%- when 'type' -%} + {%- assign type = value -%} + {%- endcase -%} + + {%- endfor -%} + + + {%- include {{ file }} + alt=alt + block=block + caption=caption + id=id + image=image + link=link + size=size + style=style + title=title + text=text + type=type + -%} + + {%- endfor -%} + +{%- else -%} + {{ code | markdownify }} +{%- endif -%} + +
+ + View Code... + {%- highlight liquid -%} + {%- if code contains 'gist.github' -%} + {%- assign parts = code | split: '/' -%} + {%- assign id = parts[3] | split: '.' | first -%} + {%- assign gist = id | prepend: '{%- gist ' -%} + {%- assign gist = gist | append: ' %' -%} + {%- assign gist = gist | append: '}' -%} + {{ gist }} + {%- else -%} + {{ code }} + {%- endif -%} + {%- endhighlight -%} + + + {%- for tip in page.tips -%} +
+ {{ tip | markdownify }} +
+ {%- endfor -%} + +
diff --git a/docs/elements.html b/docs/elements.html new file mode 100644 index 000000000..0272b53f9 --- /dev/null +++ b/docs/elements.html @@ -0,0 +1,27 @@ +--- +layout: page +title: Elements +permalink: /elements/ +weight: 4 +--- + +

Elements

+ +{% assign list_items = "" %} +{% for element in site.elements %} + {% assign title = element.title | slice: 2, element.title.size %} + {%- capture list_items -%} + {{ list_items }} + {{ title }} + {%- endcapture -%} +{% endfor %} +{% include elements/list.html title="Table of Contents" type="toc" %} + +{% for element in site.elements %} + {{ element }} +{% endfor %} + + \ No newline at end of file diff --git a/docs/elements.md b/docs/elements.md deleted file mode 100644 index 5c92bd81b..000000000 --- a/docs/elements.md +++ /dev/null @@ -1,490 +0,0 @@ ---- -layout: page -title: Elements -permalink: /elements/ -weight: 4 ---- - -# **Elements** - -A demo of Markdown and HTML includes. - -{% capture list_items %} -Headers -Emphasis -Highlight -Lists -List Group -Links -Images -Figures -Carousel -Videos -Buttons -Gists -Code -Syntax Highlighting -Tables -Blockquotes -Inline HTML -Horizontal Rule -Line Breaks -{% endcapture %} - -{% include elements/list.html title="Table of Contents" type="toc" %} - -## Headers - -``` -# H1 -## H2 -### H3 -#### H4 -##### H5 -###### H6 -``` - -# H1 -## H2 -### H3 -#### H4 -##### H5 -###### H6 - - -## Emphasis - -``` -Emphasis, aka italics, with *asterisks* or _underscores_. - -Strong emphasis, aka bold, with **asterisks** or __underscores__. - -Combined emphasis with **asterisks and _underscores_**. - -Strikethrough uses two tildes. ~~Scratch this.~~ -``` - -Emphasis, aka italics, with *asterisks* or _underscores_. - -Strong emphasis, aka bold, with **asterisks** or __underscores__. - -Combined emphasis with **asterisks and _underscores_**. - -Strikethrough uses two tildes. ~~Scratch this.~~ - - -## Highlight - -``` -{% raw %}{% include elements/highlight.html text="I am highlighted text." %}{% endraw %} -``` -{% include elements/highlight.html text="I am highlighted text." %} - - -## Lists - -``` -1. First ordered list item -2. Another item - * Unordered sub-list. -1. Actual numbers don't matter, just that it's a number - 1. Ordered sub-list -4. And another item. - - Some text that should be aligned with the above item. - -* Unordered list can use asterisks -- Or minuses -+ Or pluses -``` - -1. First ordered list item -2. Another item - * Unordered sub-list. -1. Actual numbers don't matter, just that it's a number - 1. Ordered sub-list -4. And another item. - - Some text that should be aligned with the above item. - -* Unordered list can use asterisks -- Or minuses -+ Or pluses - -## List Group - -``` -{% raw %}- Basic List Group: - -{% capture list_items %} -Google,https://www.google.com -GitHub,https://www.google.com -{% endcapture %} - -{% include elements/list.html %} - - -- List Group with a Title: - -{% capture list_items %} -Google,https://www.google.com -GitHub,https://www.google.com -{% endcapture %} - -{% include elements/list.html title="Websites" %} - - -- List Group as Table of Contents (automatic linking to page headers): - -{% capture list_items %} -Headers -Emphasis -List -{% endcapture %} - -{% include elements/list.html title="Table of Contents" type="toc" %}{% endraw %} -``` - -- Basic List Group: -{% capture list_items %} -Google,https://www.google.com -GitHub,https://www.google.com -{% endcapture %} - -{% include elements/list.html %} - -- List Group with a Title: -{% capture list_items %} -Google,https://www.google.com -GitHub,https://www.google.com -{% endcapture %} - -{% include elements/list.html title="Websites" %} - -- List Group as Table of Contents (automatic linking to page headers): -{% capture list_items %} -Headers -Emphasis -Lists -{% endcapture %} - -{% include elements/list.html title="Table of Contents" type="toc" %} - - -## Links - -There are two ways to create links. - -``` -[I'm an inline-style link](https://www.google.com) -``` - -[I'm an inline-style link](https://www.google.com) - - -## Images - -``` -Here's our Image (hover to see the title text): - -![alt text](https://bit.ly/2TOsM7B "Building Image") -``` - -Here's our Image (hover to see the title text): - -![alt text](https://bit.ly/2TOsM7B "Building Image") - - -## Figures - -``` -{% raw %}{% include elements/figure.html image="https://bit.ly/2N69TKO" caption="The sea complains upon a thousand shores." %}{% endraw %} -``` - -{% include elements/figure.html image="https://bit.ly/2N69TKO" caption="The sea complains upon a thousand shores." %} - - -## Carousel - -``` -{% raw %}{% capture carousel_images %} -https://bit.ly/2BBbVhc -https://bit.ly/2DOtxXB -{% endcapture %} - -{% include elements/carousel.html %}{% endraw %} -``` - -{% capture carousel_images %} -https://bit.ly/2BBbVhc -https://bit.ly/2DOtxXB -{% endcapture %} - -{% include elements/carousel.html %} - - -## Videos - -``` -{% raw %}{% include elements/video.html id="aZNbUITN-mA" %}{% endraw %} -``` - -{% include elements/video.html id="aZNbUITN-mA" %} - -##### How to get a YouTube video ID from a youtube.com page URL? - -You may be watching the video or just happened to visit a link to a video. The video ID will be located in the URL of the video page, right after the `v=` URL parameter.
-In this case, the URL of the video is: `https://www.youtube.com/watch?v=aZNbUITN-mA`.
-Therefore, **the ID of the video is** `aZNbUITN-mA`. - - -## Buttons - -``` -{% raw %}Styles: -{% include elements/button.html link="https://github.com/" text="GitHub" %} -{% include elements/button.html link="https://github.com/" text="GitHub" style="primary" %} -{% include elements/button.html link="https://github.com/" text="GitHub" style="outline-dark" %} - -Sizes: -{% include elements/button.html link="https://github.com/" text="GitHub" size="sm" %} -{% include elements/button.html link="https://github.com/" text="GitHub" %} -{% include elements/button.html link="https://github.com/" text="GitHub" size="lg" %} - -Block: -{% include elements/button.html link="https://github.com/" text="GitHub" block=true %}{% endraw %} -``` - -##### Styles: -{% include elements/button.html link="https://github.com/" text="GitHub" %} -{% include elements/button.html link="https://github.com/" text="GitHub" style="primary" %} -{% include elements/button.html link="https://github.com/" text="GitHub" style="outline-dark" %} - -##### Sizes: -{% include elements/button.html link="https://github.com/" text="GitHub" size="sm" %} -{% include elements/button.html link="https://github.com/" text="GitHub" %} -{% include elements/button.html link="https://github.com/" text="GitHub" size="lg" %} - -##### Block: -{% include elements/button.html link="https://github.com/" text="GitHub" block=true %} - -##### How to center buttons? -Just surrond your buttons with `

` and `

`. - -

- {% include elements/button.html link="https://github.com/" text="GitHub" %} - {% include elements/button.html link="https://google.com/" text="Google" %} - {% include elements/button.html link="https://microsoft.com/" text="Microsoft" %} -

- -##### Know more about buttons -portfolYOU uses [Bootstrap Buttons](https://getbootstrap.com/docs/4.1/components/buttons/). - - -## Gists - -All you need to do is copy and paste the Gist's ID from the URL, and the filename if you need to include just a single file. - -``` -- Include all gist files: -{% raw %}{% gist 3c466bc3c32c4ae5c9b36d1266b913d8 %}{% endraw %} - -- Include a single gist file: -{% raw %}{% gist 3c466bc3c32c4ae5c9b36d1266b913d8 hello.py %}{% endraw %} - -- Include a single gist file with spaces in the filename: - Just replace the space in the filename with %20 -{% raw %}{% gist 3c466bc3c32c4ae5c9b36d1266b913d8 Hello%20World.java %}{% endraw %} -``` - -- Include all gist files: - -{% gist 3c466bc3c32c4ae5c9b36d1266b913d8 %} - -- Include a single gist file: - -{% gist 3c466bc3c32c4ae5c9b36d1266b913d8 hello.py %} - -- Include a single gist file with spaces in the filename: - Just replace the space in the filename with `%20` - -{% gist 3c466bc3c32c4ae5c9b36d1266b913d8 Hello%20World.java %} - - -## Code - -``` -Inline `code` has `back-ticks around` it. -``` - -Inline `code` has `back-ticks around` it. - -Blocks of code are fenced by lines with three back-ticks ```. - -``` -s = "Code Block Test"; -print s; -``` - - -## Syntax Highlighting - -
-```javascript
-var s = "JavaScript syntax highlighting";
-alert(s);
-```
- 
-```python
-s = "Python syntax highlighting"
-print s
-```
- 
-```
-No language indicated, so no syntax highlighting.
-```
-
- -```javascript -var s = "JavaScript syntax highlighting"; -alert(s); -``` - -```python -s = "Python syntax highlighting" -print s -``` - -``` -No language indicated, so no syntax highlighting. -``` - - -## Tables - -``` -Colons can be used to align columns. - -| Tables | Are | Cool | -| ------------- |:-------------:| -----:| -| col 3 is | right-aligned | $1600 | -| col 2 is | centered | $12 | -| zebra stripes | are neat | $1 | - -Markdown | Less | Pretty ---- | --- | --- -*Still* | `renders` | **nicely** -1 | 2 | 3 -``` - -Colons can be used to align columns. - -| Tables | Are | Cool | -| ------------- |:-------------:| -----:| -| col 3 is | right-aligned | $1600 | -| col 2 is | centered | $12 | -| zebra stripes | are neat | $1 | - -Markdown | Less | Pretty ---- | --- | --- -*Still* | `renders` | **nicely** -1 | 2 | 3 - - -## Blockquotes - -``` -> Blockquotes are very handy in email to emulate reply text. -> This line is part of the same quote. - -Quote break. - -> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. -``` - -> Blockquotes are very handy in email to emulate reply text. -> This line is part of the same quote. - -Quote break. - -> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. - - -## Inline HTML - -You can also use raw HTML in your Markdown, and it'll mostly work pretty well. - -``` -
-
Definition list
-
Is something people use sometimes.
- -
Markdown in HTML
-
Does *not* work **very** well. Use HTML tags.
-
-``` - -
-
Definition list
-
Is something people use sometimes.
- -
Markdown in HTML
-
Does *not* work **very** well. Use HTML tags.
-
- - -## Horizontal Rule - -``` -Three or more... - ---- - -Hyphens - -*** - -Asterisks - -___ - -Underscores -``` - -Three or more... - ---- - -Hyphens - -*** - -Asterisks - -___ - -Underscores - - -## Line Breaks - -``` -Here's a line for us to start with. - -This line is separated from the one above by two newlines, so it will be a *separate paragraph*. - -This line is also a separate paragraph, but... -This line is only separated by a single newline, so it's a separate line in the *same paragraph*. -``` - -Here's a line for us to start with. - -This line is separated from the one above by two newlines, so it will be a *separate paragraph*. - -This line is also begins a separate paragraph, but... -This line is only separated by a single newline, so it's a separate line in the *same paragraph*. - - \ No newline at end of file