|
|
|
@ -29,7 +29,7 @@ specific to a certain parser.
|
|
|
|
|
## HTML Elements
|
|
|
|
|
Markdown is a superset of HTML, so any HTML file is valid Markdown.
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
<!--This means we can use HTML elements in Markdown, such as the comment
|
|
|
|
|
element, and they won't be affected by a markdown parser. However, if you
|
|
|
|
|
create an HTML element in your markdown file, you cannot use markdown syntax
|
|
|
|
@ -41,7 +41,7 @@ within that element's contents.-->
|
|
|
|
|
You can create HTML elements `<h1>` through `<h6>` easily by prepending the
|
|
|
|
|
text you want to be in that element by a number of hashes (#).
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
# This is an <h1>
|
|
|
|
|
## This is an <h2>
|
|
|
|
|
### This is an <h3>
|
|
|
|
@ -51,7 +51,7 @@ text you want to be in that element by a number of hashes (#).
|
|
|
|
|
```
|
|
|
|
|
Markdown also provides us with two alternative ways of indicating h1 and h2.
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
This is an h1
|
|
|
|
|
=============
|
|
|
|
|
|
|
|
|
@ -63,7 +63,7 @@ This is an h2
|
|
|
|
|
|
|
|
|
|
Text can be easily styled as italic or bold using markdown.
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
*This text is in italics.*
|
|
|
|
|
_And so is this text._
|
|
|
|
|
|
|
|
|
@ -78,7 +78,7 @@ __And so is this text.__
|
|
|
|
|
In GitHub Flavored Markdown, which is used to render markdown files on
|
|
|
|
|
GitHub, we also have strikethrough:
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
~~This text is rendered with strikethrough.~~
|
|
|
|
|
```
|
|
|
|
|
## Paragraphs
|
|
|
|
@ -86,7 +86,7 @@ GitHub, we also have strikethrough:
|
|
|
|
|
Paragraphs are a one or multiple adjacent lines of text separated by one or
|
|
|
|
|
multiple blank lines.
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
This is a paragraph. I'm typing in a paragraph isn't this fun?
|
|
|
|
|
|
|
|
|
|
Now I'm in paragraph 2.
|
|
|
|
@ -99,7 +99,7 @@ I'm in paragraph three!
|
|
|
|
|
Should you ever want to insert an HTML `<br />` tag, you can end a paragraph
|
|
|
|
|
with two or more spaces and then begin a new paragraph.
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
I end with two spaces (highlight me to see them).
|
|
|
|
|
|
|
|
|
|
There's a <br /> above me!
|
|
|
|
@ -107,7 +107,7 @@ There's a <br /> above me!
|
|
|
|
|
|
|
|
|
|
Block quotes are easy and done with the > character.
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
> This is a block quote. You can either
|
|
|
|
|
> manually wrap your lines and put a `>` before every line or you can let your lines get really long and wrap on their own.
|
|
|
|
|
> It doesn't make a difference so long as they start with a `>`.
|
|
|
|
@ -121,7 +121,7 @@ Block quotes are easy and done with the > character.
|
|
|
|
|
## Lists
|
|
|
|
|
Unordered lists can be made using asterisks, pluses, or hyphens.
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
* Item
|
|
|
|
|
* Item
|
|
|
|
|
* Another item
|
|
|
|
@ -141,7 +141,7 @@ or
|
|
|
|
|
|
|
|
|
|
Ordered lists are done with a number followed by a period.
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
1. Item one
|
|
|
|
|
2. Item two
|
|
|
|
|
3. Item three
|
|
|
|
@ -150,7 +150,7 @@ Ordered lists are done with a number followed by a period.
|
|
|
|
|
You don't even have to label the items correctly and Markdown will still
|
|
|
|
|
render the numbers in order, but this may not be a good idea.
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
1. Item one
|
|
|
|
|
1. Item two
|
|
|
|
|
1. Item three
|
|
|
|
@ -159,7 +159,7 @@ render the numbers in order, but this may not be a good idea.
|
|
|
|
|
|
|
|
|
|
You can also use sublists
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
1. Item one
|
|
|
|
|
2. Item two
|
|
|
|
|
3. Item three
|
|
|
|
@ -170,7 +170,7 @@ You can also use sublists
|
|
|
|
|
|
|
|
|
|
There are even task lists. This creates HTML checkboxes.
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
Boxes below without the 'x' are unchecked HTML checkboxes.
|
|
|
|
|
- [ ] First task to complete.
|
|
|
|
|
- [ ] Second task that needs done
|
|
|
|
@ -183,7 +183,7 @@ This checkbox below will be a checked HTML checkbox.
|
|
|
|
|
You can indicate a code block (which uses the `<code>` element) by indenting
|
|
|
|
|
a line with four spaces or a tab.
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
This is code
|
|
|
|
|
So is this
|
|
|
|
|
```
|
|
|
|
@ -191,7 +191,7 @@ a line with four spaces or a tab.
|
|
|
|
|
You can also re-tab (or add an additional four spaces) for indentation
|
|
|
|
|
inside your code
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
my_array.each do |item|
|
|
|
|
|
puts item
|
|
|
|
|
end
|
|
|
|
@ -199,7 +199,7 @@ inside your code
|
|
|
|
|
|
|
|
|
|
Inline code can be created using the backtick character `
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
John didn't even know what the `go_to()` function did!
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
@ -220,7 +220,7 @@ highlighting of the language you specify after the \`\`\`
|
|
|
|
|
Horizontal rules (`<hr/>`) are easily added with three or more asterisks or
|
|
|
|
|
hyphens, with or without spaces.
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
***
|
|
|
|
|
---
|
|
|
|
|
- - -
|
|
|
|
@ -232,17 +232,17 @@ hyphens, with or without spaces.
|
|
|
|
|
One of the best things about markdown is how easy it is to make links. Put
|
|
|
|
|
the text to display in hard brackets [] followed by the url in parentheses ()
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
[Click me!](http://test.com/)
|
|
|
|
|
```
|
|
|
|
|
You can also add a link title using quotes inside the parentheses.
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
[Click me!](http://test.com/ "Link to Test.com")
|
|
|
|
|
```
|
|
|
|
|
Relative paths work too.
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
[Go to music](/music/).
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
@ -269,7 +269,7 @@ But it's not that commonly used.
|
|
|
|
|
## Images
|
|
|
|
|
Images are done the same way as links but with an exclamation point in front!
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
![This is the alt-attribute for my image](http://imgur.com/myimage.jpg "An optional title")
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
@ -281,20 +281,20 @@ And reference style works as expected.
|
|
|
|
|
## Miscellany
|
|
|
|
|
### Auto-links
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
<http://testwebsite.com/> is equivalent to
|
|
|
|
|
[http://testwebsite.com/](http://testwebsite.com/)
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Auto-links for emails
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
<foo@bar.com>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Escaping characters
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
I want to type *this text surrounded by asterisks* but I don't want it to be
|
|
|
|
|
in italics, so I do this: \*this text surrounded by asterisks\*.
|
|
|
|
|
```
|
|
|
|
@ -304,7 +304,7 @@ in italics, so I do this: \*this text surrounded by asterisks\*.
|
|
|
|
|
In GitHub Flavored Markdown, you can use a `<kbd>` tag to represent keyboard
|
|
|
|
|
keys.
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
Your computer crashed? Try sending a
|
|
|
|
|
<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd>
|
|
|
|
|
```
|
|
|
|
@ -313,7 +313,7 @@ Your computer crashed? Try sending a
|
|
|
|
|
Tables are only available in GitHub Flavored Markdown and are slightly
|
|
|
|
|
cumbersome, but if you really want it:
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
| Col1 | Col2 | Col3 |
|
|
|
|
|
| :----------- | :------: | ------------: |
|
|
|
|
|
| Left-aligned | Centered | Right-aligned |
|
|
|
|
@ -321,7 +321,7 @@ cumbersome, but if you really want it:
|
|
|
|
|
```
|
|
|
|
|
or, for the same results
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
```md
|
|
|
|
|
Col 1 | Col2 | Col3
|
|
|
|
|
:-- | :-: | --:
|
|
|
|
|
Ugh this is so ugly | make it | stop
|
|
|
|
|