Making Your Posts Better With Markdown and HTML

in #markdown7 years ago (edited)

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

Sort:  

Great! Very helpful - resteemed and upvoted!

Thanks. I appreciate the resteem!

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

Thank you. I appreciate the comment.

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

I am happy it was helpful :)

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.

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

I appreciate the kind words. Thank you!

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

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

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

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

It can make things stand out. Go for it!

Need to save this right now, thank you

I hope it helps ;)

This is a useful Steemit formating tutorial!

I know you know that, I'm just naming my bookmark, heh.

Hahah Thank you. That's what it's here for 😉 I'm going to try make revised versions of posts I have done in the past for you newer Steemians. A lot to sift through and a lot has changed.

Steem on!

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

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

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

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.

maybe I misinterpreted @emanuel.tanasa's question.

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

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