Beautify Your Posts: The Ultimate Markdown Cheat Sheet + Some HTML

in #steem6 years ago (edited)

This will probably come handy to you once you write your posts. It is the most complete cheat sheet I've found on Steemit. I hope it helps you!

Headings


There are several sizes of headings you can use. (Six, to be exact)
# Biggest
## Bigger
### Big
#### Small
##### Smaller
###### Smallest

You can also use:
Biggest
====
or
Big
---

Live preview:

Biggest

Bigger

Big

Small

Smaller
Smallest

Spacing


This one is tricky, one line break between sentences won't start a new line, two instead, will!

    I love markdown
    but it's a bit tricky

will result:

I love markdown but it's a bit tricky

but,

    I love markdown

    but it's a bit tricky

will result:

I love markdown
but it's a bit tricky

Text Decorations


We can use text decorations to make text bold, italics or strokethrough.
This issue is very **serious**, // bold text 
I've read it on the *New York Times* // Italics
 ~~but it's not relevant~~ // Strikethrough
<center> I'm centered </center>

This issue is very serious, I've read it on the New York Times but it's not relevant

I'm centered

Linking


There are few simple ways to add a link to your post:
URLs and URLs in angle brackets will automatically get turned into links. 
https://www.itamar.rocks or <https://www.itamar.rocks> 

[I'm a simple link](https://www.itamar.rocks)

[Hover me!](https://www.itamar.rocks "Hello!!!!")

There are few simple ways to add a link to your post:
URLs and URLs in angle brackets will automatically get turned into links.
https://www.itamar.rocks or https://www.itamar.rocks

I'm a simple link

Hover me!

Lists


Lists are simple! It's like 1-2-3 (for a numbered list!)

1. This markdown tutorial is the best
2. The first item on the list is true
3. Hello!
  1. This markdown tutorial is the best
  2. The first item on the list is true
  3. Hello!

Bullets are easy too!

* I can use asterisk
+ or a plus
-  or a minus!
  • I can use asterisk
  • or a plus
  • or a minus!

Even sublists

You have to indent 4 spaces to create a sub-list. Easy, huh?

1. I'm his parent
    1. I'm the first child
    2. I'm the second child
2. I don't know them.
  1. I'm his parent
    1. I'm the first child
    2. I'm the second child
  2. I don't know them.

Images


Adding an image is quite trivial,

https://kirkstrobeck.github.io/whatismarkdown.com/img/markdown.png

Align images

Let's say I want the text to be aside of the picture, EASY!

<div class="pull-right">
https://kirkstrobeck.github.io/whatismarkdown.com/img/markdown.png

 text text text text
</div>
text text text text text text text text 


more text more text more text more

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

more text more text more text more text more text more text more text more text more text

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 |

There must be at least 3 dashes separating each header cell.
The outer pipes (|) are optional, and you don't need to make the 
raw Markdown line up prettily. You can also use inline Markdown.

Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3

Colons can be used to align columns.

TablesAreCool
col 3 isright-aligned$1600
col 2 iscentered$12
zebra stripesare neat$1

There must be at least 3 dashes separating each header cell.
The outer pipes (|) are optional, and you don't need to make the
raw Markdown line up prettily. You can also use inline Markdown.

MarkdownLessPretty
Stillrendersnicely
123

Quotes


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

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.

Horizontal Lines


<hr/>

---

***
___





Code Blocks


An inline `code` looks like this
and a multiline code looks like this 
(without the \)
\```
loll
lo
\```

An inline code looks like this
and a multiline code looks like this

loll
lo

License and credits

This tutorial was adaped and influenced by Adam Pritchard and is licensed under the CC-BY license. And is also an extension of this of @anomadsoul post

Sort:  

Ooooh helpful! Thank you! Have a 100% upvote and a resteem!

Thanks! :D

איזה חמודה את

That will surely come in handy! :)

I'm glad! Thank you :)

I really needed to know this! I will resteem to save it for me : )

Thanks for the resteem! I'm glad it helps :)

thank you! very helpful

מושקע

תודה רבה!

וואו ממש חזק ויעיל

תודה! :)

מעולה אחי, תודה רבה.
?יש דרך להדביק את הכתב בעברית לימין

<div class="pull-right">אני בצד ימין</div>
מקווה שזה עובד
מצאתי
<div class="pull-right">
מצאתי
</div>

The @OriginalWorks bot has determined this post by @doriitamar to be original material and upvoted(1.5%) it!

ezgif.com-resize.gif

To call @OriginalWorks, simply reply to any post with @originalworks or !originalworks in your message!

great post thank you for that man, I wonder if there's a way to save it somewhere.

Hey, you can use my IFTTT Tutorial to save posts to Pocket, or Evernote.

thanks yo !
Tell me I tried to put a image in my introduce my self post it shows it in the post it self but it doesn’t show a thumbnail photo ... do you know how to solve it ?

I don't know. I guess it takes the first picture that comes in..

פשוט מעולה! הרבה יותר מובן מהמדריך הרשמי
מצביע ועוקב.

תודה רבה!

Thanks, very helpful.

Thanks! :)

Your Post Has Been Featured on @Resteemable!
Feature any Steemit post using resteemit.com!
How It Works:
1. Take Any Steemit URL
2. Erase https://
3. Type re
Get Featured Instantly – Featured Posts are voted every 2.4hrs
Join the Curation Team Here

good job carry on @doriitamar

Thanks for the appreciation :)

Awesome -- will be super helpful

Thank you for this. Makes it easier for me.