Kitchen sink Markdown styling
Jan 2nd, 2012
I created this document to make sure any new web project that uses *Markdown* formatted input has complete coverage when it comes to styling the CSS for all the document's elements.
This document is a more or less complete example of all the Markdown Extra syntax to test if proper CSS styling is applied. <!--more-->I am going to add a a lot of ipsumForage McSweeney's fanny pack, gluten-free 90's food truck lo-fi church-key craft beer pop-up vinyl scenester kitsch. Bitters whatever vinyl shabby chic, single-origin coffee McSweeney's sustainable messenger bag trust fund hashtag letterpress viral small batch. Vice mumblecore Portland selvage irony, twee flannel VHS DIY stumptown quinoa Tumblr semiotics tofu. Schlitz whatever single-origin coffee narwhal, butcher Odd Future tofu cliche bitters Austin McSweeney's four loko. Flexitarian Etsy hashtag art party brunch roof party. Selvage tofu pickled kale chips, ethical Portland cornhole. Wayfarers flannel seitan, scenester Portland tote bag chillwave keffiyeh mixtape cray sriracha.
### Let's start out with header styling. First, the string of octothorpes:
# H1 Header
## H2 Header
### H3 Header
#### H4 Header
##### H5 header
###### H6 header
### Now, the Sextet string of 'equal' or dashes for header levels one and two
H1 Header
======
H2 Header
------
### Now a simple blockquote using the greater-than > symbol
> This is a multi-line blockquote with each line started by the > symbol
> The symbol is followed by a space and then the content is added
> This is the third line in the block quote
> I am out of things to say, so Thundercats
### Now a simple lazy method where only the first line has the > symbol:
> This is the first line of the lazy method with hard returns between
the lines and it should, in theory, display properly. If not, then Wolf
lomo quinoa direct trade American Apparel, wayfarers Echo Park
typewriter forage blog Thundercats cornhole +1. Squid typewriter
Bushwick locavore narwhal.
### Now for a tricky bit of block-quotery - nested blockquotes
> This is the first level of blockquotery - same as before
> (blank line)
> > This is a second level of blockquote inside the first
> > Another line of the second level
> > > A third level - notice the spaces between the symbols!
> > Back to the second level
> And finally back to the first level
### Now some embedded markdown in a blockquote
> ## This is a header.
>
>> 1. This is the first list item.
>> 2. This is the second list item.
>
> Here's some example code:
>
>>> ```return shell_exec("echo $input | $markdown_script");```
### Basic unordered lists with asterisks:
* List item 1
* List item 2
* List item 3
#### Now with pluses
+ List item 1
+ List item 2
+ List item 3
#### And with dashes
- List item 1
- List item 3
- List item 4
#### And ordered lists with ordinal numbers
1. A first item
2. A second item
3. A third item
#### And with letters:
a. A first item
b. A second item
c. A third item
### Here is a list acid test - multiple paragraph list items:
1. This is a list item 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. Donec sit amet nisl. Aliquam semper ipsum
sit amet velit.
2. Suspendisse id sem consectetuer libero luctus adipiscing.
### A code block inside a list:
* A list item with a code block:
<code goes here>
### Speaking of code blocks here is one using the 5 space rule:
#include<stdio.h>
int main(){
prints("Hello, world\n");
return 1;
}
### Some horizontal rules
Four asterisks:
****
four dashes:
----
four underscores:
____
html ```<hr class="slender">```
<hr class="slender">
### Basic span elements such as links
This is a paragraph with a [link](http://www.google.com) Austin Pinterest Pitchfork XOXO tote bag yr, wolf flexitarian keffiyeh craft beer.
### Example of id links for footnotes and links within the page
This is the regular garbage with a [link][id1]. And this is an example of a link defined elsewhere in the document, in this instance to the [daring fireball] website.
I get 10 times more traffic from [Google] [1] than from
[Yahoo] [2] or [MSN] [3].
### Punctuation
A paragraph using *single asterisks*, _single underscores_, **double asterisks**, and __double underscores__
### Code spans
This is a sentence in which I am going to embed some html ```<a href="#">blah</a>``` code using 3 backticks
### Lazy linking
This is a sentence in which I surround a link with the < and > tags and it automagically makes a link, for example: <http://google.com>
### Backslash escapes
Markdown should escape the following characters if preceded by a backslash:
* \\ backslash
* \` backtick
* \* asterisk
* \_ underscore
* \{\} curly braces (a backslash in front of each!)
* \[\] square brackets
* \(\) parentheses
* \# octothorpe
* \+ plus sign
* \- minus sign
* \. dot
* \! exclamation mark
These would normally be used if the characters are needed in the middle of some other Markdown formatted entity
### Markdown Extra, well, extras:
#### Inline HTML
This:
<blockquote markdown="1">
This is *true* markdown text.
</blockquote>
Produces this:
<blockquote markdown="1">
This is *true markdown text.
</blockquote>
#### Special attributes for headers
Use fenced style `## Header 2 ## {#header2}` to make this work
## Header 2 ## {#header2}
And now a [link back to header2](#header2)
#### Fenced code blocks with tildes and backticks
Note that the same number of characters should fence the block
three tildes:
~~~
#include<stdio.h>
int main(){
prints("Hello, world\n");
return 1;
}
~~~
three backticks:
#include<stdio.h>
int main(){
prints("Hello, world\n");
return 1;
}
### Tables
First Header | Second Header
---------------------|------------------------
Content A | Content B
Content C | Content D
Produces this:
First Header | Second Header
---------------------|------------------------
Content A | Content B
Content C | Content D
Using starting and ending 'pipes' in conjunction with a colon to align one column:
| First Header | Second Header |
| ---------------------|------------------------:|
| Item 1 | $1600 |
| Item C | $12 |
| Item J | $3 |
Produces this:
| First Header | Second Header |
| ---------------------|------------------------:|
| Item 1 | $1600 |
| Content C | $12 |
| Item J | $3 |
#### Definition Lists
Apple
: Pomaceous fruit of plants of the genus Malus in
the family Rosaceae.
Orange
: The fruit of an evergreen tree of the genus Citrus.
produces this:
Apple
: Pomaceous fruit of plants of the genus Malus in
the family Rosaceae.
Orange
: The fruit of an evergreen tree of the genus Citrus.
#### Footnotes
Probably the most useful Markdown Extra feature, the footnote[^1] allows you to easily make footnotes in the document.
[^1]: And define them elsewhere
#### Mathjax
##### Equations
The Markdown parser being used by this Jekyll theme is Kramdown, which contains some built-in [Mathjax](//www.mathjax.org) support. Both inline and block-level mathematical figures can be added to the content.
For instance, the following inline sequence:
*When $$ a \ne 0 $$, there are two solutions to $$ ax^2 + bx + c = 0 $$*
is written by enclosing a Mathjax expression within *a matching pair of double dollar signs: ```$$```*:
```When $$ a \ne 0 $$, there are two solutions to $$ ax^2 + bx + c = 0 $$```
Similarly, this block-level Mathjax expression:
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
is written by enclosing the expression within a pair of ```$$``` with an empty line above and below:
```$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$```
You can get pretty fancy, for instance, the wave equation's nabla is no big thing:
$$ \frac{\partial^2 y}{\partial t^2}= c^2\nabla^2u $$
All of the standard <span class="latex">L<sup>a</sup>T<sub>e</sub>X</span> equation markup is available to use inside these block tags.
Please note that the block-level Mathjax expressions *must* be on their own line, separated from content above and below the block by a blank line for the Kramdown parser and the Mathjax javascript to play nicely with one another.
The Mathjax integration is tricky, and some things such as the inline matrix notation simply do not work well unless allowances are made for using the notation for a small matrix. Bottom line: If you are using this to document mathematics, be super careful to isolate your <span class="latex">L<sup>a</sup>T<sub>e</sub>X</span> blocks by blank lines!
[id1]: This is example of a footnote from a link above
[daring fireball]: http://daringfireball.net/
[1]: http://google.com/ "Google"
[2]: http://search.yahoo.com/ "Yahoo Search"
[3]: http://search.msn.com/ "MSN Search"