Making Your Posts Better With Markdown and HTML

View this thread on: d.buzz | hive.blog | peakd.com | ecency.com
·@bitcoinparadise·
0.000 HBD
Making Your Posts Better With Markdown and HTML
https://wpshout.com/media/2017/04/1200px-Markdown-mark.svg1_.png

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

<center><img src="https://m.popkey.co/7bbdd3/oGyk8_s-200x150.gif?c=popkey-web&p=nike&i=nikealphamenace&l=search&f=.gif" /></center>

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 **<a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">Mardown Cheat Sheet</a>**  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!
```
<br>
###### Result:
# STEEMIT!
## STEEMIT!
### STEEMIT!
#### STEEMIT!
##### STEEMIT!
###### STEEMIT!
<br>
To add the underline or a spacer for your page, you can use:

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

---
```
<br>
###### 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!~~
```
<br>
###### 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
```
<br>
###### Result:
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

# 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).
```
<br>
###### Result:
[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 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](https://steemitimages.com/DQmVV4FzB6MpPB7sZVtz3nmdkoXsoYiToTapYPJDqh2s97x/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
```
<br>
###### Result:
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

# 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
```
<br>
###### 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 
```
<br>
###### Result:
<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 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:<a href="https://www.google.com/search?biw=1511&bih=708&tbm=isch&sa=1&q=markdown&oq=markdown&gs_l=psy-ab.3..0i67k1l2j0l2.150550.158577.0.158860.30.18.3.0.0.0.415.2626.0j8j3j1j1.13.0....0...1.1.64.psy-ab..15.14.2191.0..0i24k1.XCYk1_joYxQ#imgrc=ojVg4zX_dW2DRM:">1</a>,<a href="http://popkey.co/search/you%20can%20do%20it">2</a>
👍 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,