Convert markdown page to one big example

[simurai]

This is a left-over from #917. It shows the markdown content (that got manually converted to HTML) as a live example.

Before	After
Rendered by Doctocat	Single live example

• Benefit: It should be more accurate to test changes since it uses Primer CSS's .markdown-body styling instead of Doctocat (Primer Components).
• Downside: Harder to update the HTML. The "source" also needs to be kept in sync.

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/primer/primer-css/jic7tls0s
✅ Preview: https://primer-css-git-markdown-table-refactor-2.primer.now.sh

[emilybrick]

I need to catch up on some context but aside from the benefits listed in the description, how come there's now a border around the markdown content?

The other difference i notice is a missing TOC

^ I'm fine getting rid of this sticky TOC if that's intended.

[simurai]

I need to catch up on some context

The difference is that before we were testing markdown styling by just writing the markdown "as if it was the content". And therefore Primer Components did the styling. This PR convertes the markdown to HTML and then wrapps it in a "live example" by adding these 3 backticks ```html live.

Before:

# Header 1

After

```html live
<h1>Header 1</h1>
```

Now since it's a "live example", Primer CSS and the .markdown-body styles are getting used. There shouldn't be a big difference, but good to catch any bugs or so.

how come there's now a border around the markdown content?

This is just the normal border that is shown around "live examples". It might look a bit odd since the markdown example is huge and you need to scroll a long time to reach the "code". Smaller ones look like this:

The other difference i notice is a missing TOC
I'm fine getting rid of this sticky TOC if that's intended.

Yeah, the TOC wasn't really useful since the headers are only there to test how headers render, but not to navigate between different sections like on normal pages.

[emilybrick]

👍