webdev

Markdown Cheatsheet 101

I’ve been using markdown quite a lot both for the book I wrote and for other projects. It’s a great format and the best part (IMHO) is that you can learn most of it in 10min. Here is a list of the main ‘building blocks’ you will want to use:

Headers

# H1
## H2
### H3
#### H4
##### H5
###### H6

Links

To create links just follow this pattern:

[google.com](https://www.google.com)

Images

For images, you can just add ! before the ‘link’ element we’ve just saw above.


![alt text](https://bla-bla-example.com/icon48.png "Title For Image") 

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

Lists

Just use numbers or *

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

Code and Syntax Highlighting

```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```
 
```python
s = "Python syntax highlighting"
print s
```
 
```
No language indicated, so no syntax highlighting. 
But let's throw in a <b>tag</b>.
```

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 |


Horizontal Rule

Three or more:
--- Hyphens
*** Asterisks
___ Underscores

Youtube videos

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="480" height="360" border="1" /> </a>

See it all in action on GitHub in this little web game README.md

Peramida logo

Be strong and write something nice.

Standard

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s