From 660cafa2eb31558572427bd532bcf113797df957 Mon Sep 17 00:00:00 2001 From: Piotr Kaminski Date: Thu, 23 Aug 2018 23:48:05 -0700 Subject: [PATCH 1/2] Regenerate GitHub CSS with code snippet styles included. --- github-markdown.css | 203 +++++++++++++++++++++++++++++++------------- 1 file changed, 146 insertions(+), 57 deletions(-) diff --git a/github-markdown.css b/github-markdown.css index c5f9777..8faa6ef 100644 --- a/github-markdown.css +++ b/github-markdown.css @@ -1,14 +1,9 @@ -@font-face { - font-family: octicons-link; - src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==) format('woff'); -} - .markdown-body { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 1.5; color: #24292e; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; font-size: 16px; line-height: 1.5; word-wrap: break-word; @@ -138,10 +133,8 @@ color: #032f62; } -.markdown-body .octicon { - display: inline-block; - vertical-align: text-top; - fill: currentColor; +.markdown-body .placeholder-box { + border: 1px solid #959da5; } .markdown-body a { @@ -323,25 +316,63 @@ } .markdown-body code { - font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace; font-size: 12px; } .markdown-body pre { margin-top: 0; margin-bottom: 0; - font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace; font-size: 12px; } -.markdown-body .octicon { - vertical-align: text-bottom; +.markdown-body .border { + border: 1px #e1e4e8 solid !important; +} + +.markdown-body .border-bottom { + border-bottom: 1px #e1e4e8 solid !important; +} + +.markdown-body .border-0 { + border: 0 !important; +} + +.markdown-body .rounded-1 { + border-radius: 3px !important; +} + +.markdown-body .bg-white { + background-color: #fff !important; +} + +.markdown-body .bg-gray-light { + background-color: #fafbfc !important; +} + +.markdown-body .text-gray-light { + color: #6a737d !important; +} + +.markdown-body .mb-0 { + margin-bottom: 0 !important; +} + +.markdown-body .my-2 { + margin-top: 8px !important; + margin-bottom: 8px !important; } .markdown-body .pl-0 { padding-left: 0 !important; } +.markdown-body .py-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + .markdown-body .pl-1 { padding-left: 4px !important; } @@ -350,10 +381,20 @@ padding-left: 8px !important; } +.markdown-body .py-2 { + padding-top: 8px !important; + padding-bottom: 8px !important; +} + .markdown-body .pl-3 { padding-left: 16px !important; } +.markdown-body .px-3 { + padding-right: 16px !important; + padding-left: 16px !important; +} + .markdown-body .pl-4 { padding-left: 24px !important; } @@ -366,6 +407,18 @@ padding-left: 40px !important; } +.markdown-body .f6 { + font-size: 12px !important; +} + +.markdown-body .lh-condensed { + line-height: 1.25 !important; +} + +.markdown-body .text-bold { + font-weight: 600 !important; +} + .markdown-body::before { display: table; content: ""; @@ -390,17 +443,6 @@ text-decoration: none; } -.markdown-body .anchor { - float: left; - padding-right: 4px; - margin-left: -20px; - line-height: 1; -} - -.markdown-body .anchor:focus { - outline: none; -} - .markdown-body p, .markdown-body blockquote, .markdown-body ul, @@ -413,7 +455,7 @@ } .markdown-body hr { - height: 0.25em; + height: .25em; padding: 0; margin: 24px 0; background-color: #e1e4e8; @@ -460,35 +502,6 @@ line-height: 1.25; } -.markdown-body h1 .octicon-link, -.markdown-body h2 .octicon-link, -.markdown-body h3 .octicon-link, -.markdown-body h4 .octicon-link, -.markdown-body h5 .octicon-link, -.markdown-body h6 .octicon-link { - color: #1b1f23; - vertical-align: middle; - visibility: hidden; -} - -.markdown-body h1:hover .anchor, -.markdown-body h2:hover .anchor, -.markdown-body h3:hover .anchor, -.markdown-body h4:hover .anchor, -.markdown-body h5:hover .anchor, -.markdown-body h6:hover .anchor { - text-decoration: none; -} - -.markdown-body h1:hover .anchor .octicon-link, -.markdown-body h2:hover .anchor .octicon-link, -.markdown-body h3:hover .anchor .octicon-link, -.markdown-body h4:hover .anchor .octicon-link, -.markdown-body h5:hover .anchor .octicon-link, -.markdown-body h6:hover .anchor .octicon-link { - visibility: visible; -} - .markdown-body h1 { padding-bottom: 0.3em; font-size: 2em; @@ -540,7 +553,7 @@ } .markdown-body li+li { - margin-top: 0.25em; + margin-top: .25em; } .markdown-body dl { @@ -652,15 +665,82 @@ border: 0; } +.markdown-body .commit-tease-sha { + display: inline-block; + font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace; + font-size: 90%; + color: #444d56; +} + .markdown-body .full-commit .btn-outline:not(:disabled):hover { color: #005cc5; border-color: #005cc5; } +.markdown-body .blob-wrapper { + overflow-x: auto; + overflow-y: hidden; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} + +.markdown-body .blob-wrapper-embedded { + max-height: 240px; + overflow-y: auto; +} + +.markdown-body .blob-num { + width: 1%; + min-width: 50px; + padding-right: 10px; + padding-left: 10px; + font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace; + font-size: 12px; + line-height: 20px; + color: rgba(27,31,35,0.3); + text-align: right; + white-space: nowrap; + vertical-align: top; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.markdown-body .blob-num:hover { + color: rgba(27,31,35,0.6); +} + +.markdown-body .blob-num::before { + content: attr(data-line-number); +} + +.markdown-body .blob-code { + position: relative; + padding-right: 10px; + padding-left: 10px; + line-height: 20px; + vertical-align: top; +} + +.markdown-body .blob-code-inner { + overflow: visible; + font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace; + font-size: 12px; + color: #24292e; + word-wrap: normal; + white-space: pre; +} + +.markdown-body .blob-code-inner::before { + content: " "; +} + .markdown-body kbd { display: inline-block; padding: 3px 5px; - font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + font: 11px "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace; line-height: 10px; color: #444d56; vertical-align: middle; @@ -677,6 +757,15 @@ border-color: #0366d6; } +.markdown-body .new-label-color-input:invalid { + color: #cb2431; +} + +.markdown-body .tab-size[data-tab-size="8"] { + -moz-tab-size: 8; + tab-size: 8; +} + .markdown-body .task-list-item { list-style-type: none; } From 911bd604b374d23e0049f42f2b1e43e560a5a58b Mon Sep 17 00:00:00 2001 From: Piotr Kaminski Date: Mon, 27 Aug 2018 01:05:09 -0700 Subject: [PATCH 2/2] Update stylesheet with latest output along with demo page. --- github-markdown.css | 64 +- index.html | 1514 +++++++++++++++++-------------------------- 2 files changed, 645 insertions(+), 933 deletions(-) diff --git a/github-markdown.css b/github-markdown.css index 8faa6ef..2322ddf 100644 --- a/github-markdown.css +++ b/github-markdown.css @@ -133,10 +133,6 @@ color: #032f62; } -.markdown-body .placeholder-box { - border: 1px solid #959da5; -} - .markdown-body a { background-color: transparent; } @@ -672,11 +668,6 @@ color: #444d56; } -.markdown-body .full-commit .btn-outline:not(:disabled):hover { - color: #005cc5; - border-color: #005cc5; -} - .markdown-body .blob-wrapper { overflow-x: auto; overflow-y: hidden; @@ -757,8 +748,39 @@ border-color: #0366d6; } -.markdown-body .new-label-color-input:invalid { - color: #cb2431; +.markdown-body .tab-size[data-tab-size="1"] { + -moz-tab-size: 1; + tab-size: 1; +} + +.markdown-body .tab-size[data-tab-size="2"] { + -moz-tab-size: 2; + tab-size: 2; +} + +.markdown-body .tab-size[data-tab-size="3"] { + -moz-tab-size: 3; + tab-size: 3; +} + +.markdown-body .tab-size[data-tab-size="4"] { + -moz-tab-size: 4; + tab-size: 4; +} + +.markdown-body .tab-size[data-tab-size="5"] { + -moz-tab-size: 5; + tab-size: 5; +} + +.markdown-body .tab-size[data-tab-size="6"] { + -moz-tab-size: 6; + tab-size: 6; +} + +.markdown-body .tab-size[data-tab-size="7"] { + -moz-tab-size: 7; + tab-size: 7; } .markdown-body .tab-size[data-tab-size="8"] { @@ -766,6 +788,26 @@ tab-size: 8; } +.markdown-body .tab-size[data-tab-size="9"] { + -moz-tab-size: 9; + tab-size: 9; +} + +.markdown-body .tab-size[data-tab-size="10"] { + -moz-tab-size: 10; + tab-size: 10; +} + +.markdown-body .tab-size[data-tab-size="11"] { + -moz-tab-size: 11; + tab-size: 11; +} + +.markdown-body .tab-size[data-tab-size="12"] { + -moz-tab-size: 12; + tab-size: 12; +} + .markdown-body .task-list-item { list-style-type: none; } diff --git a/index.html b/index.html index 83e82d8..36e954e 100644 --- a/index.html +++ b/index.html @@ -17,12 +17,72 @@
-

GitHub Markdown CSS demo

- -

- -

Headers

- +

GitHub Markdown fixture

+

My fixtures

+

Left-aligned image

+

+

Right-aligned image

+

+

Code snippet

+

+
+

+ generate-github-markdown-css/index.js +

+

+ Lines 25 to 28 + in + 6d6a328 +

+
+
+ + + + + + + + + + + + + + + + + + + + + +
const getRenderedFixture = () => got(fixtureURL).then(response => {
const $ = cheerio.load(response.body);
return $('.markdown-body').parent().html();
});
+
+
+

+
+
+

Borrowed from https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

+
+

This is intended as a quick reference and showcase. For more complete info, see John Gruber's original spec and the Github-flavored Markdown info page.

+

Note that there is also a Cheatsheet specific to Markdown Here if that's what you're looking for.

+

PLEASE DO NOT EDIT THIS PAGE! You can play around with Markdown on our live demo page.

+
Table of Contents
+

Headers
+Emphasis
+Lists
+Links
+Images
+Code and Syntax Highlighting
+Tables
+Blockquotes
+Inline HTML
+Horizontal Rule
+Line Breaks
+Youtube videos

+ +## Headers 
# H1
 ## H2
 ### H3
@@ -38,29 +98,17 @@ 
H1

-
-
H2

-
-
H3

-
-
H4

-
-
H5

-
-
H6

-
+
H1

+
H2

+
H3

+
H4

+
H5

+
H6

 
Alternatively, for H1 and H2, an underline-ish style:

-
-
Alt-H1

-
-
Alt-H2

-
-

-
-
Emphasis

-
+
Alt-H1

+
Alt-H2

+
+## Emphasis
 
Emphasis, aka italics, with *asterisks* or _underscores_.
 
 Strong emphasis, aka bold, with **asterisks** or __underscores__.
@@ -69,21 +117,13 @@ 

-
-
Lists

-
+
+## Lists
 
(In this example, leading and trailing spaces are shown with with dots: ⋅)

-
 
1. First ordered list item
 2. Another item
 ⋅⋅* Unordered sub-list.
@@ -101,146 +141,144 @@ 
Inline HTML

-
+
Inline HTML

 
To reboot your computer, press ctrl+alt+del.

-
-

-
-
Links

-
+
+## Links
 
There are two ways to create links.

-
 
[I'm an inline-style link](https://www.google.com)
 
 [I'm an inline-style link with title](https://www.google.com "Google's Homepage")
@@ -259,25 +297,15 @@ 

-
-
I'm an inline-style link

-
-
I'm an inline-style link with title

-
-
I'm a reference-style link

-
-
I'm a relative reference to a repository file

-
-
You can use numbers for reference-style link definitions

-
-
Or leave it empty and use the link text itself

-
+
I'm an inline-style link

+
I'm an inline-style link with title

+
I'm a reference-style link

+
I'm a relative reference to a repository file

+
You can use numbers for reference-style link definitions

+
Or leave it empty and use the link text itself

 
Some text to show that the reference links can follow later.

-
-

-
-
Images

-
+
+## Images
 
Here's our logo (hover to see the title text):
 
 Inline-style:
@@ -288,28 +316,18 @@ 

-
 
Here's our logo (hover to see the title text):

-
-
Inline-style:
+
Inline-style:

 alt text

-
-
Reference-style:
+
Reference-style:

 alt text

-
-

-
-
Code and Syntax Highlighting

-
-
Code blocks are part of the Markdown spec, but syntax highlighting isn't. However, many renderers -- like Github's and Markdown Here -- support syntax highlighting. Which languages are supported and how those language names should be written will vary from renderer to renderer. Markdown Here supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); to see the complete list, and how to write the language names, see the highlight.js demo page.

-
+
+## Code and Syntax Highlighting
+
Code blocks are part of the Markdown spec, but syntax highlighting isn't. However, many renderers -- like Github's and Markdown Here -- support syntax highlighting. Which languages are supported and how those language names should be written will vary from renderer to renderer. Markdown Here supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); to see the complete list, and how to write the language names, see the highlight.js demo page.

 
Inline `code` has `back-ticks around` it.
 

-
 
Inline code has back-ticks around it.

-
 
Blocks of code are either fenced by lines with three back-ticks ```, or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting.

-
 
```javascript
 var s = "JavaScript syntax highlighting";
 alert(s);
@@ -325,23 +343,16 @@ 

-
 
var s = "JavaScript syntax highlighting";
-alert(s);

-
+alert(s);
s = "Python syntax highlighting"
-print s
- +print s 
No language indicated, so no syntax highlighting in Markdown Here (varies on Github).
 But let's throw in a <b>tag</b>.
- -

- -

Tables

- + +## Tables

Tables aren't part of the core Markdown spec, but they are part of GFM and Markdown Here supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application.

- 
Colons can be used to align columns.
 
 | Tables        | Are           | Cool  |
@@ -357,16 +368,16 @@
-

Colons can be used to align columns.

- - +
+ - + + @@ -381,18 +392,17 @@

zebra stripes

- -
Tables Are Cool
col 3 is right-alignedare neat
- +

The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.

- - +
+ - + + @@ -402,13 +412,9 @@

1

- -
Markdown Less Pretty
Still renders2 3
 - -

- -

Blockquotes

- + + +## Blockquotes 
> Blockquotes are very handy in email to emulate reply text.
 > This line is part of the same quote.
 
@@ -416,45 +422,34 @@
-
-

Blockquotes are very handy in email to emulate reply text. +

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

- + +## Inline HTML

You can also use raw HTML in your Markdown, and it'll mostly work pretty well.

- 
<dl>
-    <dt>Definition list</dt>
-    <dd>Is something people use sometimes.</dd>
+  <dt>Definition list</dt>
+  <dd>Is something people use sometimes.</dd>
 
-    <dt>Markdown in HTML</dt>
-    <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
+  <dt>Markdown in HTML</dt>
+  <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
 </dl>
-
-
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.
+
<dt>Markdown in HTML</dt>
+<dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
+
- -

- -

Horizontal Rule

- + +## Horizontal Rule 
Three or more...
 
 ---
@@ -469,29 +464,17 @@
-

Three or more...

-
-

Hyphens

-
-

Asterisks

-
-

Underscores

- -

- -

Line Breaks

- + +## Line Breaks

My basic recommendation for learning how line breaks work is to experiment and discover -- hit <Enter> once (i.e., insert one newline), then hit it twice (i.e., insert two newlines), see what happens. You'll soon learn to get what you want. "Markdown Toggle" is your friend.

-

Here are some things to try out:

- 
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*.
@@ -499,400 +482,351 @@
-

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 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.

-

(Technical note: Markdown Here uses GFM line breaks, so there's no need to use MD's two-space line breaks.)

- -

- -

Youtube videos

- + +## Youtube videos

They can't be added directly but you can add an image with a link to the video like this:

- 
<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
 " target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg"
 alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>
-

Or, in pure Markdown, but losing the image sizing and border:

- 
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)
-

Referencing a bug by #bugID in your git commit links it to the slip. For example #1.

- -

Task List

- -
    -
  • foo - -
      -
    • foo
      • -
    • foo
      • -
    • -
  • foo
    • +

    Task List

    +
      +
    • foo +
        +
      • foo
        • +
      • foo
      - -

      [test]: http://google.com/ "Google"

      - -

      A heading

      - -

      Just a note, I've found that I can't test my markdown parser vs others. -For example, both markdown.js and showdown code blocks in lists wrong. They're -also completely [inconsistent][test] with regards to paragraphs in list items.

      - +
      • +
    • foo
      • +
    +

    A heading

    +

    Just a note, I've found that I can't test my markdown parser vs others.
    +For example, both markdown.js and showdown code blocks in lists wrong. They're
    +also completely     inconsistent with regards to paragraphs in list items.

    A link. Not anymore.

    - -

    This will make me fail the test because -markdown.js doesnt acknowledge arbitrary html blocks =/

    - +This will make me fail the test because +markdown.js doesnt acknowledge arbitrary html blocks =/
      -

    • List Item 1

      • -

    • List Item 2

      - +
    • +

      List Item 1

      +
      • +
    • +

      List Item 2

        -
      • New List Item 1 +
      • New List Item 1
        Hi, this is a list item.
        • -
      • New List Item 2 -Another item - Code goes here. - Lots of it...
        • -
      • New List Item 3 +
      • New List Item 2
        +Another item
        +Code goes here.
        +Lots of it...
        • +
      • New List Item 3
        The last item
        • -
      • -

    • List Item 3 -The final item.

      • -

    • List Item 4 -The real final item.

    - + +
  • +

    List Item 3
    +The final item.

    +
    • +
  • +

    List Item 4
    +The real final item.

    +
    • +

Paragraph.

-
  • bq Item 1
  • bq Item 2 -
    • New bq Item 1
      • -
    • New bq Item 2 +
    • New bq Item 2
      Text here
      • -
    • +
+
-
-
-

Another blockquote! -I really need to get -more creative with -mockup text.. +

Another blockquote!
+I really need to get
+more creative with
+mockup text..
markdown.js breaks here again

- -

Another Heading

- -

Hello world. Here is a link. -And an image alt.

- +

Another Heading

+

Hello world. Here is a link.
+And an image alt.

Code goes here.
 Lots of it...
-

A list within a blockquote:

-
  • asterisk 1
  • asterisk 2
  • asterisk 3
- -

This is strong and em.

- -

So is this word.

- -

This is strong and em.

- -

So is this word.

- -

Unordered

- +

This is strong and em.

+

So is this word.

+

This is strong and em.

+

So is this word.

+

Unordered

Asterisks tight:

-
    -
  • asterisk 1
    • -
  • asterisk 2
    • -
  • asterisk 3
    • +
  • asterisk 1
    • +
  • asterisk 2
    • +
  • asterisk 3
-

Asterisks loose:

-
    -

  • asterisk 1

    • -

  • asterisk 2

    • -

  • asterisk 3

    • +
  • +

    asterisk 1

    +
    • +
  • +

    asterisk 2

    +
    • +
  • +

    asterisk 3

    +
-
-

Pluses tight:

-
    -
  • Plus 1
    • -
  • Plus 2
    • -
  • Plus 3
    • +
  • Plus 1
    • +
  • Plus 2
    • +
  • Plus 3
-

Pluses loose:

-
    -

  • Plus 1

    • -

  • Plus 2

    • -

  • Plus 3

    • +
  • +

    Plus 1

    +
    • +
  • +

    Plus 2

    +
    • +
  • +

    Plus 3

    +
-
-

Minuses tight:

-
    -
  • Minus 1
    • -
  • Minus 2
    • -
  • Minus 3
    • +
  • Minus 1
    • +
  • Minus 2
    • +
  • Minus 3
-

Minuses loose:

-
    -

  • Minus 1

    • -

  • Minus 2

    • -

  • Minus 3

    • +
  • +

    Minus 1

    +
    • +
  • +

    Minus 2

    +
    • +
  • +

    Minus 3

    +
- -

Ordered

- +

Ordered

Tight:

-
    -
  1. First
    2. -
  2. Second
    3. -
  3. Third
    4. +
  4. First
    5. +
  5. Second
    6. +
  6. Third
-

and:

-
  1. One
  2. Two
  3. Three
-

Loose using tabs:

-
    -

  1. First

    2. -

  2. Second

    3. -

  3. Third

    4. +
  4. +

    First

    +
    5. +
  5. +

    Second

    +
    6. +
  6. +

    Third

    +
-

and using spaces:

-
    -

  1. One

    2. -

  2. Two

    3. -

  3. Three

    4. +
  4. +

    One

    +
    5. +
  5. +

    Two

    +
    6. +
  6. +

    Three

    +
-

Multiple paragraphs:

-
    -

  1. Item 1, graf one.

    - -

    Item 2. graf two. The quick brown fox jumped over the lazy dog's -back.

    2. -

  2. Item 2.

    3. -

  3. Item 3.

    4. +
  4. +

    Item 1, graf one.

    +

    Item 2. graf two. The quick brown fox jumped over the lazy dog's
    +back.

    +
    5. +
  5. +

    Item 2.

    +
    6. +
  6. +

    Item 3.

    +
- -

Nested

- +

Nested

    -
  • Tab - +
  • Tab
      -
    • Tab - +
    • Tab
        -
      • Tab
        • -
      • -
    • +
  • Tab
    • +
+ + + -

Here's another:

-
  1. First
  2. Second: -
    • Fee
    • Fie
    • Foe
      • -
    3. + +
  3. Third
-

Same thing but with paragraphs:

-
    -

  1. First

    2. -

  2. Second:

    - +
  3. +

    First

    +
    4. +
  4. +

    Second:

    • Fee
    • Fie
    • Foe
      • -
    5. -

  5. Third

    6. + + +
  6. +

    Third

    +
-

This was an error in Markdown 1.0.1:

-
    -

  • this

    - +
  • +

    this

      -
    • sub
      • +
    • sub
    - -

    that

    • +

    that

    +
-

foo

-

bar

-

foo

- -

Markdown: Syntax

- +

Markdown: Syntax

- + +
  • Block Elements
    • -
  • Span Elements - +
  • Paragraphs and Line Breaks
    • +
  • Headers
    • +
  • Blockquotes
    • +
  • Lists
    • +
  • Code Blocks
    • +
  • Horizontal Rules
    • + + +
  • Span Elements
    • -
  • Miscellaneous - +
  • Links
    • +
  • Emphasis
    • +
  • Code
    • +
  • Images
    • + + +
  • Miscellaneous
    • +
  • Backslash Escapes
    • +
  • Automatic Links
    • - -

    Note: This document is itself written using Markdown; you -can [see the source for it by adding '.text' to the URL][src].

    - -

    [src]: /projects/markdown/syntax.text

    - + + +

    Note: This document is itself written using Markdown; you
    +can see the source for it by adding '.text' to the URL.

    - -

    Overview

    - -

    Philosophy

    - +

    Overview

    +

    Philosophy

    Markdown is intended to be as easy-to-read and easy-to-write as is feasible.

    - -

    Readability, however, is emphasized above all else. A Markdown-formatted -document should be publishable as-is, as plain text, without looking -like it's been marked up with tags or formatting instructions. While -Markdown's syntax has been influenced by several existing text-to-HTML -filters -- including Setext, [atx] [2], [Textile] [3], [reStructuredText] [4], -[Grutatext] [5], and [EtText] [6] -- the single biggest source of +

    Readability, however, is emphasized above all else. A Markdown-formatted
    +document should be publishable as-is, as plain text, without looking
    +like it's been marked up with tags or formatting instructions. While
    +Markdown's syntax has been influenced by several existing text-to-HTML
    +filters -- including [Setext] 1, [atx] 2, [Textile] 3, [reStructuredText] 4,
    +[Grutatext] 5, and [EtText] 6 -- the single biggest source of
    inspiration for Markdown's syntax is the format of plain text email.

    - -

    1: http://docutils.sourceforge.net/mirror/setext.html - [2]: http://www.aaronsw.com/2002/atx/ - [3]: http://textism.com/tools/textile/ - [4]: http://docutils.sourceforge.net/rst.html - [5]: http://www.triptico.com/software/grutatxt.html - [6]: http://ettext.taint.org/doc/

    - -

    To this end, Markdown's syntax is comprised entirely of punctuation -characters, which punctuation characters have been carefully chosen so -as to look like what they mean. E.g., asterisks around a word actually -look like *emphasis*. Markdown lists look like, well, lists. Even -blockquotes look like quoted passages of text, assuming you've ever +

    To this end, Markdown's syntax is comprised entirely of punctuation
    +characters, which punctuation characters have been carefully chosen so
    +as to look like what they mean. E.g., asterisks around a word actually
    +look like *emphasis*. Markdown lists look like, well, lists. Even
    +blockquotes look like quoted passages of text, assuming you've ever
    used email.

    - -

    Inline HTML

    - -

    Markdown's syntax is intended for one purpose: to be used as a +

    Inline HTML

    +

    Markdown's syntax is intended for one purpose: to be used as a
    format for writing for the web.

    - -

    Markdown is not a replacement for HTML, or even close to it. Its -syntax is very small, corresponding only to a very small subset of -HTML tags. The idea is not to create a syntax that makes it easier -to insert HTML tags. In my opinion, HTML tags are already easy to -insert. The idea for Markdown is to make it easy to read, write, and -edit prose. HTML is a publishing format; Markdown is a writing -format. Thus, Markdown's formatting syntax only addresses issues that +

    Markdown is not a replacement for HTML, or even close to it. Its
    +syntax is very small, corresponding only to a very small subset of
    +HTML tags. The idea is not to create a syntax that makes it easier
    +to insert HTML tags. In my opinion, HTML tags are already easy to
    +insert. The idea for Markdown is to make it easy to read, write, and
    +edit prose. HTML is a publishing format; Markdown is a writing
    +format. Thus, Markdown's formatting syntax only addresses issues that
    can be conveyed in plain text.

    - -

    For any markup that is not covered by Markdown's syntax, you simply -use HTML itself. There's no need to preface it or delimit it to -indicate that you're switching from Markdown to HTML; you just use +

    For any markup that is not covered by Markdown's syntax, you simply
    +use HTML itself. There's no need to preface it or delimit it to
    +indicate that you're switching from Markdown to HTML; you just use
    the tags.

    - -

    The only restrictions are that block-level HTML elements -- e.g. <div>, -<table>, <pre>, <p>, etc. -- must be separated from surrounding -content by blank lines, and the start and end tags of the block should -not be indented with tabs or spaces. Markdown is smart enough not +

    The only restrictions are that block-level HTML elements -- e.g. <div>,
    +<table>, <pre>, <p>, etc. -- must be separated from surrounding
    +content by blank lines, and the start and end tags of the block should
    +not be indented with tabs or spaces. Markdown is smart enough not
    to add extra (unwanted) <p> tags around HTML block-level tags.

    -

    For example, to add an HTML table to a Markdown article:

    - 
    This is a regular paragraph.
 
 <table>
@@ -903,156 +837,112 @@
    - -

    Note that Markdown formatting syntax is not processed within block-level -HTML tags. E.g., you can't use Markdown-style *emphasis* inside an +

    Note that Markdown formatting syntax is not processed within block-level
    +HTML tags. E.g., you can't use Markdown-style *emphasis* inside an
    HTML block.

    - -

    Span-level HTML tags -- e.g. <span>, <cite>, or <del> -- can be -used anywhere in a Markdown paragraph, list item, or header. If you -want, you can even use HTML tags instead of Markdown formatting; e.g. if -you'd prefer to use HTML <a> or <img> tags instead of Markdown's +

    Span-level HTML tags -- e.g. <span>, <cite>, or <del> -- can be
    +used anywhere in a Markdown paragraph, list item, or header. If you
    +want, you can even use HTML tags instead of Markdown formatting; e.g. if
    +you'd prefer to use HTML <a> or <img> tags instead of Markdown's
    link or image syntax, go right ahead.

    - -

    Unlike block-level HTML tags, Markdown syntax is processed within +

    Unlike block-level HTML tags, Markdown syntax is processed within
    span-level tags.

    - -

    Automatic Escaping for Special Characters

    - -

    In HTML, there are two characters that demand special treatment: < -and &. Left angle brackets are used to start tags; ampersands are -used to denote HTML entities. If you want to use them as literal -characters, you must escape them as entities, e.g. &lt;, and +

    Automatic Escaping for Special Characters

    +

    In HTML, there are two characters that demand special treatment: <
    +and &. Left angle brackets are used to start tags; ampersands are
    +used to denote HTML entities. If you want to use them as literal
    +characters, you must escape them as entities, e.g. &lt;, and
    &amp;.

    - -

    Ampersands in particular are bedeviling for web writers. If you want to -write about 'AT&T', you need to write 'AT&amp;T'. You even need to +

    Ampersands in particular are bedeviling for web writers. If you want to
    +write about 'AT&T', you need to write 'AT&amp;T'. You even need to
    escape ampersands within URLs. Thus, if you want to link to:

    - 
    http://images.google.com/images?num=30&q=larry+bird
    -

    you need to encode the URL as:

    - 
    http://images.google.com/images?num=30&amp;q=larry+bird
    - -

    in your anchor tag href attribute. Needless to say, this is easy to -forget, and is probably the single most common source of HTML validation +

    in your anchor tag href attribute. Needless to say, this is easy to
    +forget, and is probably the single most common source of HTML validation
    errors in otherwise well-marked-up web sites.

    - -

    Markdown allows you to use these characters naturally, taking care of -all the necessary escaping for you. If you use an ampersand as part of -an HTML entity, it remains unchanged; otherwise it will be translated +

    Markdown allows you to use these characters naturally, taking care of
    +all the necessary escaping for you. If you use an ampersand as part of
    +an HTML entity, it remains unchanged; otherwise it will be translated
    into &amp;.

    -

    So, if you want to include a copyright symbol in your article, you can write:

    - 
    &copy;
    -

    and Markdown will leave it alone. But if you write:

    - 
    AT&T
    -

    Markdown will translate it to:

    - 
    AT&amp;T
    - -

    Similarly, because Markdown supports inline HTML, if you use -angle brackets as delimiters for HTML tags, Markdown will treat them as +

    Similarly, because Markdown supports inline HTML, if you use
    +angle brackets as delimiters for HTML tags, Markdown will treat them as
    such. But if you write:

    - 
    4 < 5
    -

    Markdown will translate it to:

    - 
    4 &lt; 5
    - -

    However, inside Markdown code spans and blocks, angle brackets and -ampersands are always encoded automatically. This makes it easy to use -Markdown to write about HTML code. (As opposed to raw HTML, which is a -terrible format for writing about HTML syntax, because every single < +

    However, inside Markdown code spans and blocks, angle brackets and
    +ampersands are always encoded automatically. This makes it easy to use
    +Markdown to write about HTML code. (As opposed to raw HTML, which is a
    +terrible format for writing about HTML syntax, because every single <
    and & in your example code needs to be escaped.)

    -
    - -

    Block Elements

    - -

    Paragraphs and Line Breaks

    - -

    A paragraph is simply one or more consecutive lines of text, separated -by one or more blank lines. (A blank line is any line that looks like a -blank line -- a line containing nothing but spaces or tabs is considered +

    Block Elements

    +

    Paragraphs and Line Breaks

    +

    A paragraph is simply one or more consecutive lines of text, separated
    +by one or more blank lines. (A blank line is any line that looks like a
    +blank line -- a line containing nothing but spaces or tabs is considered
    blank.) Normal paragraphs should not be intended with spaces or tabs.

    - -

    The implication of the "one or more consecutive lines of text" rule is -that Markdown supports "hard-wrapped" text paragraphs. This differs -significantly from most other text-to-HTML formatters (including Movable -Type's "Convert Line Breaks" option) which translate every line break +

    The implication of the "one or more consecutive lines of text" rule is
    +that Markdown supports "hard-wrapped" text paragraphs. This differs
    +significantly from most other text-to-HTML formatters (including Movable
    +Type's "Convert Line Breaks" option) which translate every line break
    character in a paragraph into a <br /> tag.

    - -

    When you do want to insert a <br /> break tag using Markdown, you +

    When you do want to insert a <br /> break tag using Markdown, you
    end a line with two or more spaces, then type return.

    - -

    Yes, this takes a tad more effort to create a <br />, but a simplistic -"every line break is a <br />" rule wouldn't work for Markdown. -Markdown's email-style [blockquoting][bq] and multi-paragraph [list items][l] +

    Yes, this takes a tad more effort to create a <br />, but a simplistic
    +"every line break is a <br />" rule wouldn't work for Markdown.
    +Markdown's email-style blockquoting and multi-paragraph list items
    work best -- and look better -- when you format them with hard breaks.

    - -

    [bq]: #blockquote - [l]: #list

    - -

    Headers

    - -

    Markdown supports two styles of headers, Setext and [atx] [2].

    - -

    Setext-style headers are "underlined" using equal signs (for first-level +

    Headers

    +

    Markdown supports two styles of headers, [Setext] 1 and [atx] 2.

    +

    Setext-style headers are "underlined" using equal signs (for first-level
    headers) and dashes (for second-level headers). For example:

    - 
    This is an H1
 =============
 
 This is an H2
 -------------
    -

    Any number of underlining ='s or -'s will work.

    - -

    Atx-style headers use 1-6 hash characters at the start of the line, +

    Atx-style headers use 1-6 hash characters at the start of the line,
    corresponding to header levels 1-6. For example:

    - 
    # This is an H1
 
 ## This is an H2
 
 ###### This is an H6
    - -

    Optionally, you may "close" atx-style headers. This is purely -cosmetic -- you can use this if you think it looks better. The -closing hashes don't even need to match the number of hashes -used to open the header. (The number of opening hashes +

    Optionally, you may "close" atx-style headers. This is purely
    +cosmetic -- you can use this if you think it looks better. The
    +closing hashes don't even need to match the number of hashes
    +used to open the header. (The number of opening hashes
    determines the header level.) :

    - 
    # This is an H1 #
 
 ## This is an H2 ##
 
 ### This is an H3 ######
    - -

    Blockquotes

    - -

    Markdown uses email-style > characters for blockquoting. If you're -familiar with quoting passages of text in an email message, then you -know how to create a blockquote in Markdown. It looks best if you hard +

    Blockquotes

    +

    Markdown uses email-style > characters for blockquoting. If you're
    +familiar with quoting passages of text in an email message, then you
    +know how to create a blockquote in Markdown. It looks best if you hard
    wrap the text and put a > before every line:

    - 
    > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
 > consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
 > Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
@@ -1060,10 +950,8 @@
    - -

    Any decent text editor should make email-style quoting easy. For -example, with BBEdit, you can make a selection and choose Increase +

    Any decent text editor should make email-style quoting easy. For
    +example, with BBEdit, you can make a selection and choose Increase
    Quote Level from the Text menu.

    - -

    Lists

    - +

    Lists

    Markdown supports ordered (numbered) and unordered (bulleted) lists.

    - -

    Unordered lists use asterisks, pluses, and hyphens -- interchangably +

    Unordered lists use asterisks, pluses, and hyphens -- interchangably
    -- as list markers:

    - 
    *   Red
 *   Green
 *   Blue
    -

    is equivalent to:

    - 
    +   Red
 +   Green
 +   Blue
    -

    and:

    - 
    -   Red
 -   Green
 -   Blue
    -

    Ordered lists use numbers followed by periods:

    - 
    1.  Bird
 2.  McHale
 3.  Parish
    - -

    It's important to note that the actual numbers you use to mark the -list have no effect on the HTML output Markdown produces. The HTML +

    It's important to note that the actual numbers you use to mark the
    +list have no effect on the HTML output Markdown produces. The HTML
    Markdown produces from the above list is:

    - 
    <ol>
 <li>Bird</li>
 <li>McHale</li>
 <li>Parish</li>
 </ol>
    -

    If you instead wrote the list in Markdown like this:

    - 
    1.  Bird
 1.  McHale
 1.  Parish
    -

    or even:

    - 
    3. Bird
 1. McHale
 8. Parish
    - -

    you'd get the exact same HTML output. The point is, if you want to, -you can use ordinal numbers in your ordered Markdown lists, so that -the numbers in your source match the numbers in your published HTML. +

    you'd get the exact same HTML output. The point is, if you want to,
    +you can use ordinal numbers in your ordered Markdown lists, so that
    +the numbers in your source match the numbers in your published HTML.
    But if you want to be lazy, you don't have to.

    - -

    If you do use lazy list numbering, however, you should still start the -list with the number 1. At some point in the future, Markdown may support +

    If you do use lazy list numbering, however, you should still start the
    +list with the number 1. At some point in the future, Markdown may support
    starting ordered lists at an arbitrary number.

    - -

    List markers typically start at the left margin, but may be indented by -up to three spaces. List markers must be followed by one or more spaces +

    List markers typically start at the left margin, but may be indented by
    +up to three spaces. List markers must be followed by one or more spaces
    or a tab.

    -

    To make lists look nice, you can wrap items with hanging indents:

    - 
    *   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
     Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
     viverra nec, fringilla in, laoreet vitae, risus.
 *   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
     Suspendisse id sem consectetuer libero luctus adipiscing.
    -

    But if you want to be lazy, you don't have to:

    - 
    *   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
 viverra nec, fringilla in, laoreet vitae, risus.
 *   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
 Suspendisse id sem consectetuer libero luctus adipiscing.
    - -

    If list items are separated by blank lines, Markdown will wrap the +

    If list items are separated by blank lines, Markdown will wrap the
    items in <p> tags in the HTML output. For example, this input:

    - 
    *   Bird
 *   Magic
    -

    will turn into:

    - 
    <ul>
 <li>Bird</li>
 <li>Magic</li>
 </ul>
    -

    But this:

    - 
    *   Bird
 
 *   Magic
    -

    will turn into:

    - 
    <ul>
 <li><p>Bird</p></li>
 <li><p>Magic</p></li>
 </ul>
    - -

    List items may consist of multiple paragraphs. Each subsequent -paragraph in a list item must be intended by either 4 spaces +

    List items may consist of multiple paragraphs. Each subsequent
    +paragraph in a list item must be intended by either 4 spaces
    or one tab:

    - 
    1.  This is a list item with two paragraphs. Lorem ipsum dolor
     sit amet, consectetuer adipiscing elit. Aliquam hendrerit
     mi posuere lectus.
@@ -1232,11 +1082,9 @@ 
    Code Blocks
    
-
-
    Pre-formatted code blocks are used for writing about programming or
-markup source code. Rather than forming normal paragraphs, the lines
-of a code block are interpreted literally. Markdown wraps a code block
+
    Code Blocks
    
+
    Pre-formatted code blocks are used for writing about programming or
    
+markup source code. Rather than forming normal paragraphs, the lines
    
+of a code block are interpreted literally. Markdown wraps a code block
    
 in both <pre> and <code> tags.
    
-
-
    To produce a code block in Markdown, simply indent every line of the
+
    To produce a code block in Markdown, simply indent every line of the
    
 block by at least 4 spaces or 1 tab. For example, given this input:
    
-
 
    This is a normal paragraph:
 
     This is a code block.
 
    
-
 
    Markdown will generate:
    
-
 
    <p>This is a normal paragraph:</p>
 
 <pre><code>This is a code block.
 </code></pre>
 
    
-
-
    One level of indentation -- 4 spaces or 1 tab -- is removed from each
+
    One level of indentation -- 4 spaces or 1 tab -- is removed from each
    
 line of the code block. For example, this:
    
-
 
    Here is an example of AppleScript:
 
     tell application "Foo"
         beep
     end tell
 
    
-
 
    will turn into:
    
-
 
    <p>Here is an example of AppleScript:</p>
 
 <pre><code>tell application "Foo"
@@ -1317,40 +1147,31 @@ 
    
-
-
    A code block continues until it reaches a line that is not indented
+
    A code block continues until it reaches a line that is not indented
    
 (or the end of the article).
    
-
-
    Within a code block, ampersands (&) and angle brackets (< and >)
-are automatically converted into HTML entities. This makes it very
-easy to include example HTML source code using Markdown -- just paste
-it and indent it, and Markdown will handle the hassle of encoding the
+
    Within a code block, ampersands (&) and angle brackets (< and >)
    
+are automatically converted into HTML entities. This makes it very
    
+easy to include example HTML source code using Markdown -- just paste
    
+it and indent it, and Markdown will handle the hassle of encoding the
    
 ampersands and angle brackets. For example, this:
    
-
 
        <div class="footer">
         &copy; 2004 Foo Corporation
     </div>
 
    
-
 
    will turn into:
    
-
 
    <pre><code>&lt;div class="footer"&gt;
     &amp;copy; 2004 Foo Corporation
 &lt;/div&gt;
 </code></pre>
 
    
-
-
    Regular Markdown syntax is not processed within code blocks. E.g.,
-asterisks are just literal asterisks within a code block. This means
+
    Regular Markdown syntax is not processed within code blocks. E.g.,
    
+asterisks are just literal asterisks within a code block. This means
    
 it's also easy to use Markdown to write about Markdown's own syntax.
    
-
-
    Horizontal Rules
    
-
-
    You can produce a horizontal rule tag (<hr />) by placing three or
-more hyphens, asterisks, or underscores on a line by themselves. If you
-wish, you may use spaces between the hyphens or asterisks. Each of the
+
    Horizontal Rules
    
+
    You can produce a horizontal rule tag (<hr />) by placing three or
    
+more hyphens, asterisks, or underscores on a line by themselves. If you
    
+wish, you may use spaces between the hyphens or asterisks. Each of the
    
 following lines will produce a horizontal rule:
    
-
 
    * * *
 
 ***
@@ -1363,125 +1184,87 @@ 
    
-
 
    
-
-
    Span Elements
    
-
-
    Links
    
-
+
    Span Elements
    
+
    Links
    
 
    Markdown supports two style of links: inline and reference.
    
-
 
    In both styles, the link text is delimited by [square brackets].
    
-
-
    To create an inline link, use a set of regular parentheses immediately
-after the link text's closing square bracket. Inside the parentheses,
-put the URL where you want the link to point, along with an optional
+
    To create an inline link, use a set of regular parentheses immediately
    
+after the link text's closing square bracket. Inside the parentheses,
    
+put the URL where you want the link to point, along with an optional
    
 title for the link, surrounded in quotes. For example:
    
-
 
    This is [an example](http://example.com/ "Title") inline link.
 
 [This link](http://example.net/) has no title attribute.
 
    
-
 
    Will produce:
    
-
 
    <p>This is <a href="http://example.com/" title="Title">
 an example</a> inline link.</p>
 
 <p><a href="http://example.net/">This link</a> has no
 title attribute.</p>
 
    
-
-
    If you're referring to a local resource on the same server, you can
+
    If you're referring to a local resource on the same server, you can
    
 use relative paths:
    
-
 
    See my [About](/about/) page for details.
 
    
-
-
    Reference-style links use a second set of square brackets, inside
+
    Reference-style links use a second set of square brackets, inside
    
 which you place a label of your choosing to identify the link:
    
-
 
    This is [an example][id] reference-style link.
 
    
-
 
    You can optionally use a space to separate the sets of brackets:
    
-
 
    This is [an example] [id] reference-style link.
 
    
-
-
    Then, anywhere in the document, you define your link label like this,
+
    Then, anywhere in the document, you define your link label like this,
    
 on a line by itself:
    
-
 
    [id]: http://example.com/  "Optional Title Here"
 
    
-
 
    That is:
    
-
 
      
-
    •   Square brackets containing the link identifier (optionally
+
    • Square brackets containing the link identifier (optionally
      
 indented from the left margin using up to three spaces);
      • 
-
    •   followed by a colon;
      • 
-
    •   followed by one or more spaces (or tabs);
      • 
-
    •   followed by the URL for the link;
      • 
-
    •   optionally followed by a title attribute for the link, enclosed
+
    • followed by a colon;
      • 
+
    • followed by one or more spaces (or tabs);
      • 
+
    • followed by the URL for the link;
      • 
+
    • optionally followed by a title attribute for the link, enclosed
      
 in double or single quotes.
      • 
 
    
-
 
    The link URL may, optionally, be surrounded by angle brackets:
    
-
 
    [id]: <http://example.com/>  "Optional Title Here"
 
    
-
-
    You can put the title attribute on the next line and use extra spaces
+
    You can put the title attribute on the next line and use extra spaces
    
 or tabs for padding, which tends to look better with longer URLs:
    
-
 
    [id]: http://example.com/longish/path/to/resource/here
     "Optional Title Here"
 
    
-
-
    Link definitions are only used for creating links during Markdown
+
    Link definitions are only used for creating links during Markdown
    
 processing, and are stripped from your document in the HTML output.
    
-
 
    Link definition names may constist of letters, numbers, spaces, and punctuation -- but they are not case sensitive. E.g. these two links:
    
-
 
    [link text][a]
 [link text][A]
 
    
-
 
    are equivalent.
    
-
-
    The implicit link name shortcut allows you to omit the name of the
-link, in which case the link text itself is used as the name.
-Just use an empty set of square brackets -- e.g., to link the word
+
    The implicit link name shortcut allows you to omit the name of the
    
+link, in which case the link text itself is used as the name.
    
+Just use an empty set of square brackets -- e.g., to link the word
    
 "Google" to the google.com web site, you could simply write:
    
-
 
    [Google][]
 
    
-
 
    And then define the link:
    
-
 
    [Google]: http://google.com/
 
    
-
-
    Because link names may contain spaces, this shortcut even works for
+
    Because link names may contain spaces, this shortcut even works for
    
 multiple words in the link text:
    
-
 
    Visit [Daring Fireball][] for more information.
 
    
-
 
    And then define the link:
    
-
 
    [Daring Fireball]: http://daringfireball.net/
 
    
-
-
    Link definitions can be placed anywhere in your Markdown document. I
-tend to put them immediately after each paragraph in which they're
-used, but if you want, you can put them all at the end of your
+
    Link definitions can be placed anywhere in your Markdown document. I
    
+tend to put them immediately after each paragraph in which they're
    
+used, but if you want, you can put them all at the end of your
    
 document, sort of like footnotes.
    
-
 
    Here's an example of reference links in action:
    
-
 
    I get 10 times more traffic from [Google] [1] than from
 [Yahoo] [2] or [MSN] [3].
 
@@ -1489,9 +1272,7 @@ 
    
-
 
    Using the implicit link name shortcut, you could instead write:
    
-
 
    I get 10 times more traffic from [Google][] than from
 [Yahoo][] or [MSN][].
 
@@ -1499,44 +1280,35 @@ 
    
-
 
    Both of the above examples will produce the following HTML output:
    
-
 
    <p>I get 10 times more traffic from <a href="http://google.com/"
 title="Google">Google</a> than from
 <a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a>
 or <a href="http://search.msn.com/" title="MSN Search">MSN</a>.</p>
 
    
-
-
    For comparison, here is the same paragraph written using
+
    For comparison, here is the same paragraph written using
    
 Markdown's inline link style:
    
-
 
    I get 10 times more traffic from [Google](http://google.com/ "Google")
 than from [Yahoo](http://search.yahoo.com/ "Yahoo Search") or
 [MSN](http://search.msn.com/ "MSN Search").
 
    
-
-
    The point of reference-style links is not that they're easier to
-write. The point is that with reference-style links, your document
-source is vastly more readable. Compare the above examples: using
-reference-style links, the paragraph itself is only 81 characters
-long; with inline-style links, it's 176 characters; and as raw HTML,
-it's 234 characters. In the raw HTML, there's more markup than there
+
    The point of reference-style links is not that they're easier to
    
+write. The point is that with reference-style links, your document
    
+source is vastly more readable. Compare the above examples: using
    
+reference-style links, the paragraph itself is only 81 characters
    
+long; with inline-style links, it's 176 characters; and as raw HTML,
    
+it's 234 characters. In the raw HTML, there's more markup than there
    
 is text.
    
-
-
    With Markdown's reference-style links, a source document much more
-closely resembles the final output, as rendered in a browser. By
-allowing you to move the markup-related metadata out of the paragraph,
-you can add links without interrupting the narrative flow of your
+
    With Markdown's reference-style links, a source document much more
    
+closely resembles the final output, as rendered in a browser. By
    
+allowing you to move the markup-related metadata out of the paragraph,
    
+you can add links without interrupting the narrative flow of your
    
 prose.
    
-
-
    Emphasis
    
-
-
    Markdown treats asterisks (*) and underscores (_) as indicators of
-emphasis. Text wrapped with one * or _ will be wrapped with an
-HTML <em> tag; double *'s or _'s will be wrapped with an HTML
+
    Emphasis
    
+
    Markdown treats asterisks (*) and underscores (_) as indicators of
    
+emphasis. Text wrapped with one * or _ will be wrapped with an
    
+HTML <em> tag; double *'s or _'s will be wrapped with an HTML
    
 <strong> tag. E.g., this input:
    
-
 
    *single asterisks*
 
 _single underscores_
@@ -1545,9 +1317,7 @@ 
    Code
    
-
-
    To indicate a span of code, wrap it with backtick quotes (`).
-Unlike a pre-formatted code block, a code span indicates code within a
+
    Code
    
+
    To indicate a span of code, wrap it with backtick quotes (`).
    
+Unlike a pre-formatted code block, a code span indicates code within a
    
 normal paragraph. For example:
    
-
 
    Use the `printf()` function.
 
    
-
 
    will produce:
    
-
 
    <p>Use the <code>printf()</code> function.</p>
 
    
-
-
    To include a literal backtick character within a code span, you can use
+
    To include a literal backtick character within a code span, you can use
    
 multiple backticks as the opening and closing delimiters:
    
-
 
    ``There is a literal backtick (`) here.``
 
    
-
 
    which will produce this:
    
-
 
    <p><code>There is a literal backtick (`) here.</code></p>
 
    
-
-
    The backtick delimiters surrounding a code span may include spaces --
-one after the opening, one before the closing. This allows you to place
+
    The backtick delimiters surrounding a code span may include spaces --
    
+one after the opening, one before the closing. This allows you to place
    
 literal backtick characters at the beginning or end of a code span:
    
-
 
    A single backtick in a code span: `` ` ``
 
 A backtick-delimited string in a code span: `` `foo` ``
 
    
-
 
    will produce:
    
-
 
    <p>A single backtick in a code span: <code>`</code></p>
 
 <p>A backtick-delimited string in a code span: <code>`foo`</code></p>
 
    
-
-
    With a code span, ampersands and angle brackets are encoded as HTML
-entities automatically, which makes it easy to include example HTML
+
    With a code span, ampersands and angle brackets are encoded as HTML
    
+entities automatically, which makes it easy to include example HTML
    
 tags. Markdown will turn this:
    
-
 
    Please don't use any `<blink>` tags.
 
    
-
 
    into:
    
-
 
    <p>Please don't use any <code>&lt;blink&gt;</code> tags.</p>
 
    
-
 
    You can write this:
    
-
 
    `&#8212;` is the decimal-encoded equivalent of `&mdash;`.
 
    
-
 
    to produce:
    
-
 
    <p><code>&amp;#8212;</code> is the decimal-encoded
 equivalent of <code>&amp;mdash;</code>.</p>
 
    
-
-
    Images
    
-
-
    Admittedly, it's fairly difficult to devise a "natural" syntax for
+
    Images
    
+
    Admittedly, it's fairly difficult to devise a "natural" syntax for
    
 placing images into a plain text document format.
    
-
-
    Markdown uses an image syntax that is intended to resemble the syntax
+
    Markdown uses an image syntax that is intended to resemble the syntax
    
 for links, allowing for two styles: inline and reference.
    
-
 
    Inline image syntax looks like this:
    
-
 
    ![Alt text](/path/to/img.jpg)
 
 ![Alt text](/path/to/img.jpg "Optional title")
 
    
-
 
    That is:
    
-
 
      
-
    •   An exclamation mark: !;
      • 
-
    •   followed by a set of square brackets, containing the alt
+
    • An exclamation mark: !;
      • 
+
    • followed by a set of square brackets, containing the alt
      
 attribute text for the image;
      • 
-
    •   followed by a set of parentheses, containing the URL or path to
-the image, and an optional title attribute enclosed in double
+
    • followed by a set of parentheses, containing the URL or path to
      
+the image, and an optional title attribute enclosed in double
      
 or single quotes.
      • 
 
    
-
 
    Reference-style image syntax looks like this:
    
-
 
    ![Alt text][id]
 
    
-
-
    Where "id" is the name of a defined image reference. Image references
+
    Where "id" is the name of a defined image reference. Image references
    
 are defined using syntax identical to link references:
    
-
 
    [id]: url/to/image  "Optional title attribute"
 
    
-
-
    As of this writing, Markdown has no syntax for specifying the
-dimensions of an image; if this is important to you, you can simply
+
    As of this writing, Markdown has no syntax for specifying the
    
+dimensions of an image; if this is important to you, you can simply
    
 use regular HTML <img> tags.
    
-
 
    
-
-
    Miscellaneous
    
-
-
    Automatic Links
    
-
+
    Miscellaneous
    
+
    Automatic Links
    
 
    Markdown supports a shortcut style for creating "automatic" links for URLs and email addresses: simply surround the URL or email address with angle brackets. What this means is that if you want to show the actual text of a URL or email address, and also have it be a clickable link, you can do this:
    
-
 
    <http://example.com/>
 
    
-
 
    Markdown will turn this into:
    
-
 
    <a href="http://example.com/">http://example.com/</a>
 
    
-
-
    Automatic links for email addresses work similarly, except that
-Markdown will also perform a bit of randomized decimal and hex
-entity-encoding to help obscure your address from address-harvesting
+
    Automatic links for email addresses work similarly, except that
    
+Markdown will also perform a bit of randomized decimal and hex
    
+entity-encoding to help obscure your address from address-harvesting
    
 spambots. For example, Markdown will turn this:
    
-
 
    <address@example.com>
 
    
-
 
    into something like this:
    
-
 
    <a href="&#x6D;&#x61;i&#x6C;&#x74;&#x6F;:&#x61;&#x64;&#x64;&#x72;&#x65;
 &#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;
 &#109;">&#x61;&#x64;&#x64;&#x72;&#x65;&#115;&#115;&#64;&#101;&#120;&#x61;
 &#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;</a>
 
    
-
 
    which will render in a browser as a clickable link to "address@example.com".
    
-
-
    (This sort of entity-encoding trick will indeed fool many, if not
-most, address-harvesting bots, but it definitely won't fool all of
-them. It's better than nothing, but an address published in this way
+
    (This sort of entity-encoding trick will indeed fool many, if not
    
+most, address-harvesting bots, but it definitely won't fool all of
    
+them. It's better than nothing, but an address published in this way
    
 will probably eventually start receiving spam.)
    
-
-
    Backslash Escapes
    
-
-
    Markdown allows you to use backslash escapes to generate literal
-characters which would otherwise have special meaning in Markdown's
-formatting syntax. For example, if you wanted to surround a word with
-literal asterisks (instead of an HTML <em> tag), you can backslashes
+
    Backslash Escapes
    
+
    Markdown allows you to use backslash escapes to generate literal
    
+characters which would otherwise have special meaning in Markdown's
    
+formatting syntax. For example, if you wanted to surround a word with
    
+literal asterisks (instead of an HTML <em> tag), you can backslashes
    
 before the asterisks, like this:
    
-
 
    \*literal asterisks\*
 
    
-
 
    Markdown provides backslash escapes for the following characters:
    
-
 
    \   backslash
 `   backtick
 *   asterisk
@@ -1740,104 +1453,61 @@ 
    bar.
    
-
+
    Foo [bar](/url/ "Title with "quotes" inside").
    
 
    [bar]: /url/ "Title with "quotes" inside"
    
-
-
    This is the [simple case].
    
-
-
    [simple case]: /simple
    
-
-
    This one has a [line
-break].
    
-
-
    This one has a [line
-break] with a line-ending space.
    
-
-
    [line break]: /foo
    
-
-
    [this] [that] and the [other]
    
-
-
    [this]: /this
-[that]: /that
-[other]: /other
    
-
+
    This is the simple case.
    
+
    This one has a line
    
+break    .
    
+
    This one has a line
    
+break     with a line-ending space.
    
+
    this that and the other
    
 
    Here's a simple block:
    
-
 
    
-    foo
+  foo
 
    
-
 
    This should be a code block, though:
    
-
 
    <div>
-    foo
+  foo
 </div>
 
    
-
 
    As should this:
    
-
 
    <div>foo</div>
 
    
-
 
    Now, nested:
    
-
 
    
+  
    
     
    
-        
    
-            foo
-        
    
+      foo
     
    
+  
    
 
    
-
 
    This should just be an HTML comment:
    
 
-
-
 
    Multiline:
    
 
-
-
 
    Code block:
    
-
 
    <!-- Comment -->
 
    
-
 
    Just plain comment, with trailing spaces on the line:
    
 
-
-
 
    Code:
    
-
 
    <hr />
 
    
-
 
    Hr's:
    
-
 
    
-
 
    
-
 
    
-
 
    
-
 
    
-
 
    
-
 
    
-
 
    
-
 
    
 
 
    var gulp = require('gulp');