Making Your Posts Better With Markdown and HTML

23 days ago
65 in markdown

Ever wonder how some post's presentation is well formatted and how you could do it similar?

If you take a little time to learn Markdown and HTML, you'll be able to have a post stand out more than usual. Let's take a look at the Mardown Cheat Sheet but do it Steemit style! Not all the methods work but I will share with you ones that currently do on here.

Headers

Code:
# STEEMIT!
## STEEMIT!
### STEEMIT!
#### STEEMIT!
##### STEEMIT!
###### STEEMIT!


Result:

STEEMIT!

STEEMIT!

STEEMIT!

STEEMIT!

STEEMIT!
STEEMIT!



To add the underline or a spacer for your page, you can use:

Code:
# STEEMIT!

---


Result:

STEEMIT!


Emphasis

Emphasis, or italics, is STEEMIT!

Strong emphasis, or bold, is STEEMIT!

Combined emphasis with STEEMIT!

Strikethrough uses two tildes. STEEMIT!

There are couple different ways to do this.

Code:
*STEEMIT!* or _STEEMIT!_.

**STEEMIT!** or __STEEMIT!__.

***STEEMIT!*** or **_STEEMIT!_**.

~~STEEMIT!~~


Result:

STEEMIT! or STEEMIT!.

STEEMIT! or STEEMIT!.

STEEMIT! or STEEMIT!.

STEEMIT!

Lists

Here's where it can start getting a little more advanced and not everything on the Markdown Cheat Sheet works the same here.

Here is what is known to work.

Code:
1. Actual numbers don't matter, just that it's a number
1. It will come out to the next number
4. And another item.
You can have properly indented paragraphs within list items. 
<br>
To have a line break without a paragraph, you will need to use a little Html `<br>`although the spacing is a bit larger than normal. If you know a different way that works on here, let me know!
Note that this line is separate but within the same paragraph.

* Bullet list can use asterisks
- Or minuses
+ Or pluses


Result:
  1. Actual numbers don't matter, just that it's a number
  2. It will come out to the next number
  3. And another item.
    You can have properly indented paragraphs within list items.


    To have a line break without a paragraph, you will need to use a little Html <br> although the spacing is a bit larger than normal. If you know a different way that works on here, let me know!
    Note that this line is separate but within the same paragraph.
  • Bullet list can use asterisks
  • Or minuses
  • Or pluses

Links

Code:
[STEEMIT!](https://www.steemit.com)

URLs and URLs in angle brackets will automatically get turned into links. 
http://www.steemit.com or <http://www.steemit.com> and sometimes 
example.com (but not on Github, for example).


Result:

STEEMIT!

URLs and URLs in angle brackets will automatically get turned into links.
http://www.steemit.com or http://www.steemit.com and sometimes just
steemit.com (but not on Github, for example).

Code and Code Blocks

Code:
I love `STEEMIT!` because it is `AWESOME!`
Result:

I love STEEMIT! because it is AWESOME!

I was unable to figure out a way to show the Code Block properly so I had to upload an image to show the example. You need to have ``` at the beginning and end of your code.

Code:

codeblock.png

Result:
This is how you do a Code Block on STEEMIT!

If you are a Coder, you most likely know how to do this already!

3.times {print "STEEM! "}

Tables

In order to center with text in a column, you will have to use HTML to do this unless there is another markdown way that works on here. If there is, please let me know!

Code:
Colons can be used to align columns.

| Tables        | <center>Are</center> | Cool  |
| ------------- |-------------| -----:|
| column 3 is      | <center>right-aligned</center> | $1600 |
| column 2 is      | <center>centered</center>      |   $12 |
| zebra stripes | <center>are neat</center>      |    $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
--- | --- | ---
*Steemit* | `is` | **AWESOME!**
1 | 2 | 3


Result:

Colons can be used to align columns.

Tables
Are
Cool
column 3 is
right-aligned
$1600
column 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.

MarkdownLessPretty
SteemitisAWESOME!
123

Blockquotes

Code:
> You can use this when quoting from an article.

> You can have a line break or add another bracket
>
> to continue within the same blockquote


Result:

You can use this when quoting from an article.

You can have a line break or add another bracket

to continue within the same blockquote

Align Image, Text

This method uses HTML to align images and text.

Code:
<div class="pull-right"><img src="https://steemit.com/images/favicons/favicon-196x196.png"></div>

You can enter your text after the `<div>` code to have it appear to the left of the image. This can help shorten the amount of time having to scroll through and reading a post. Some readers do appreciate the formatting of your post. I know I do and I enjoy formatting my posts using this method. This also can give a better presentation to add a little extra to your post. 

The text will automatically wrap around when your text is long enough and depending on the size of the image you use. If you 


Result:

You can enter your text after the <div> code to have it appear to the left of the image. This can help shorten the amount of time having to scroll through a post. Some readers do appreciate the formatting of your post. I know I do and I enjoy formatting my posts using this method. This also can give a better presentation to add a little extra to your post.

The text will automatically wrap around when your paragraph is long enough and depending on the size of the image you use.

I borrowed this method from @krnel from his post on aligning images. You can check out his post for different ways on how to do it.
https://steemit.com/steemit-help/@krnel/how-to-align-images-in-steemit-posts-left-right-and-center

Image Sources:1,2

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  trending
45
  ·  23 days ago

Great! Very helpful - resteemed and upvoted!

·
65
  ·  23 days ago

Thanks. I appreciate the resteem!

56
  ·  23 days ago

This is the post I was looking for! Great tutorial on how to use the markdown. You are my hero 😎

·
65
  ·  23 days ago

Thank you. I appreciate the comment.

48
  ·  23 days ago

Thanks. I can just connect to everything just said. Very helpful! :)

·
65
  ·  23 days ago

I am happy it was helpful :)

65
  ·  21 days ago

Hi @bitcoinparadise, I just stopped back to let you know your post was one of my favourite reads and I included it in my Steemit Ramble. You can read what I wrote about your post here.

51
  ·  23 days ago

This an Awesome Post @bitcoinparadise "Thanks For Sharing" this Info your the Best!!!!

·
65
  ·  23 days ago

I appreciate the kind words. Thank you!

47
  ·  23 days ago

Need to save this right now, thank you

·
65
  ·  23 days ago

I hope it helps ;)

52
  ·  23 days ago

Great overview @bitcoinparadise. I'll have to bookmark this one so I don't lose it. Still no way underline?

·
65
  ·  23 days ago

Not that I know of, unfortunately. If you find out a way, let me know!

Thanks for the comment :)

41
  ·  23 days ago

I've used ' link descriptive text ' and it works fine.

·
65
  ·  23 days ago

Well, I believe if you move your mouse over the link with that, you're supposed to see a descriptive text box.

Untitled.png

I don't think that currently works on here.

61
  ·  23 days ago

Thanx for doing this! I've been wondering how to align those pictures to the right as the text flows on the left. I'll give it a shot and see what happens.

44
  ·  23 days ago

Thanks for sharing, I need to use more Align Image &Text markdown !

·
65
  ·  23 days ago

It can make things stand out. Go for it!

60
  ·  23 days ago

that definately helps man!

65
  ·  23 days ago

great post @bitcoinparadise ... good idea to bring together what works on Steemit as a reference

·
65
  ·  23 days ago

Thank you @shadowspub. Just trying to help out the new users ;)

·
·
65
  ·  19 days ago

I'd say you are doing a good job of doing so :)

48
  ·  23 days ago

Outstanding post.. Def worth a try.. #codenoob over here.

8
  ·  23 days ago

Here's where it can start getting a little more advanced and not everything on the Markdown Cheat Sheet works the same here.

·
65
  ·  23 days ago

Yes if you read my post I stated that not everything on the Markdown Cheat Sheet Works on here...

60
  ·  23 days ago

Nice, I didn't know about the tables yet. Thank you for sharing.

66
  ·  23 days ago

This post has been ranked within the top 50 most undervalued posts in the second half of Jul 27. We estimate that this post is undervalued by $13.80 as compared to a scenario in which every voter had an equal say.

See the full rankings and details in The Daily Tribune: Jul 27 - Part II. You can also read about some of our methodology, data analysis and technical details in our initial post.

If you are the author and would prefer not to receive these comments, simply reply "Stop" to this comment.

51
  ·  23 days ago

Hi @bitcoinparadise I hope you're doing good! This is a bit off topic, about minnowsupport and exchanges. I put notes in your direct message in SteemChat if that's okay. (I shortened this message since it's off topic.) No rush! Thanks for all your support!

·
65
  ·  22 days ago

Hello @karrencarrens, I've been really busy but doing great! I hope you are doing well. I don't really go on Steemit.chat. You are welcome to contact me on Discord on SteemSpeak, FTGU, or Steemit 101

·
·
51
  ·  22 days ago

Perfect! I think I figured out the answer to my questions. I'm excited about joining you guys on discord!

·
·
·
65
  ·  22 days ago

Great! I hope to see you there! If you need a little guide for Discord, you might want to check out this post from @sykochika.
https://steemit.com/steem-help/@sykochica/answering-common-questions-can-i-voice-chat-with-steemians-learn-how-and-where-to-discord

47
  ·  22 days ago

Thanks, I needed this.

44
  ·  23 days ago

Good article @bitcoinparadise. The only way to center the text is by using HTML?

·
65
  ·  23 days ago

Thank you. As far as I know, yes...

·
·
51
  ·  23 days ago

THANK YOU FOR THIS POST!! I've already asked some others how to wrap text around images, and now I finally have it.

btw: for centering stuff you can also simply do this:

Looks like this:

insert stuff you want centered then

·
·
·
65
  ·  23 days ago

Great to hear :)

Yes, I mentioned how to center in the part with the tables, I figured I didn't really need to go over it on its own.

·
·
·
·
51
  ·  23 days ago

maybe I misinterpreted @emanuel.tanasa's question.

·
·
·
·
·
65
  ·  23 days ago

Oh! I thought you were saying that part to me. Didn't realize you were relating that part to @emanuel.tanasa. Thanks for showing him the example :P

·
·
·
·
·
44
  ·  23 days ago

Thank you for the example @fitzgibbon . You understood well.

63
  ·  21 days ago

yes, great information, thanks for sharing

48
  ·  19 days ago

ty, i found a few of these by accident... nice ! (-:

51
  ·  18 days ago

Thanks so much!!! I really appreciate that.