https://images.hive.blog/0x0/https://images.hive.blog/DQmaKk93YGtmguvCbLrAWibHrxiKMFaWtukmHbSzzXez852/image.png

Hive supports a mixture of Markdown & HTML when creating posts.  This is fairly standard regardless of the front-end you choose to post from.  Only partial support of Markdown & HTML are supported.  This guide will cover 98% of the functionality you will need to make your posts look awesome.

This is an updated version of my previous [Markdown 101 guide](https://peakd.com/steemit/@themarkymark/markdown-101-how-to-make-kick-ass-posts-on-steemit).  

I have personally grown to love using Markdown as it allows me to write as I normally will but easily add formatting and style to my posts.  I also use Markdown for notes while developing.

I will cover some HTML elements in this guide as well as they relate to posting on Hive.

## Headers

Almost every post will benefit from headers, this allows you to visually break down posts into sections and avoids the initial information overload most long-form posts create.

Headers correspond directly to HTML H tags, typically H1, H2, H3, H6 tags to create similar sections in HTML content. Header tags have always had some influence on Search Engine Optimization (SEO) but more importantly on readability.

You want to use header tags to highlight keys sections of your posts and engage your audience. The most common header tag is the H1 which is simply a `#` in markdown. If you want to highlight a section of your post you would use the `#` pound sign at the start of a line.

## This is the most common header (##)

There are six headers available, each one is smaller than the last. To create a smaller header, just add # to your header.

* Header 1 #
* Header 2 ##
* Header 3 ###
* Header 4 #####
* Header 5 #####
* Header 6 ######

Headers do wonders for making your posts more readable and reduces reading fatigue.  In fact, I would go so far to say headers will increase how many people read your content by a rather significant margin.

Generally it is good practice to only use one main H1 (#) once in your document and use H2 (##) or H3 (###) for your other headers.  

You also want to make sure you have a space between the pound signs and your text.  It is also generally accepted under Markdown that your first line of text will follow immediately on the next line of a header although most Markdown parsers will accept a blank line.

---

## Emphasis

Emphasis are the "air quotes" of markdown and HTML.

<center>
https://images.hive.blog/0x0/https://steemitimages.com/DQmRhLXVeC247nwkPDAJrSCKjSpvswdPztGVAtpBDZ6o56H/giphy.gif
</center>

They are *important* for **highlighting** or "emphasizing" keywords. Think of when your mother and father would annunciate words when speaking to you.

Although there are two ways to do emphasis `*` and `_` I suggest only using the `*` syntax as that is the most popular and clearest. There are two emphasis options, bold and italics.

Use `**bold**` syntax to turns something **bold**.

<center>
https://images.hive.blog/0x0/https://steemitimages.com/DQmeK5p1Jr4mrwPx9Ce9VYbvVjHDd9hteT9Q6yVnpnMB2p5/giphy.gif
</center>

*Italics* is the same format but instead of two `*` you use one. `*this is italics*`.

Finally you have ~~strikethrough~~ that allows you to cross out text.  This can be used for removing old text but leaving it there for posterity sake.  It can also be used creatively.

You can do ~~strikethrough~~ by using `~~` before and after your text you want to `~~strikethrough~~`.

As a final note, you can embed ***italics* inside of bold** or *vice **versa***. This isn't used much but good to know.  Just combine them like this:

`***italics* inside of bold** or *vice **versa***`

---

## Horizontal lines

Horizontal lines can be created using `***`, `___`, or `---` but I suggest using `---` syntax for consistency.

---

Horizontal lines are good for breaking up sections inside of a header tag.  It doesn't always work and I find it works best for small sections using a horizontal line before and after like this section.

---

One thing you might notice when using horizontal lines, if you do not leave a new line you will get some weird formatting, typically unexpected H1 type header.  If you see headers where you don't expect them, check to see if you forgot to leave a new line on top/bottom of your horizontal rule.

I personally like to use horizontal lines between header sections as you can see I have done in this post.  You can also choose to use graphical headers by using images.

---

## Lists

There are two types of lists; **ordered list** and **unordered list**.  The most popular is the unordered list, which is typically referred to as *bullet points*.

#### Unordered List
To do an unordered list, you simply use `*` in front of your items.

###### Shopping List
* Eggs
* Thick Toast
* Cinnamon
* Powered Sugar
* Maple Syrup

This was created using the following syntax:

```
###### Shopping List
* Eggs
* Thick Toast
* Cinnamon
* Powered Sugar
* Maple Syrup
```

#### Ordered List
An ordered list is the same idea, just using numbers.

###### Creating French Toast
1. beat eggs
2. add cinnamon
3. dip toast
4. fry toast
5. cover with powered cinnamon & drown in maple syrup

```
###### Creating French Toast
1. beat eggs
2. add cinnamon
3. dip toast
4. fry toast
5. cover with powered cinnamon & drown in maple syrup
```

Like *emphasis* you can combine these with any combination

* Succeed on Hive
   1. add value
   2. post regularly
   3. engage audience

```
* Succeed on Hive
   1. add value
   2. post regularly
   3. engage audience
```

You can create sub items to your lists by using indents.

###### Making Toast

* Collect two slices of bread
	* Open Bag
	* Pull out two slices
	* Close bag
* Put bread in toaster
* Toast

```
###### Making Toast

* Collect two slices of bread
	* Open Bag
	* Pull out two slices
	* Close bag
* Put bread in toaster
* Toast
```


---

# Formatting

Markdown has some formatting but it lacks certain features that can be supplemented with HTML.  The most common are:

* Centering `<center> </center>`
* Line Break `</br>`
* Sub script `<sub></sub>`
* Paragraphs `<p></p>`

You can also center a header.

# <center> This is a centered H1 header </center> #

`# <center> This is a centered H1 header </center>`

You can also use `<table>` although for simple tables there is a special markdown syntax you should use instead.

---

## Linking

Linking is really easy and in most cases completely automatic. There is also a special link for usernames where you can just type in the username and Hive will automatically hyperlink to their profile page.  For example @themarkymark.

One thing I think confuses people with this feature is punctuation.  You can use commas, periods, and any other punctuation immediately after the username, and it will still be hyperlinked.

`For example @themarkymark.`

If you want to hyperlink something, but have a customized anchor text then you would use syntax similar to images but without the leading !.

[My profile Page](https://peakd.com/@themarkymark)

`[My profile Page](https://peakd.com/@themarkymark)`

One thing people get confused with is hyperlinking with images.

[![](https://steemitimages.com/DQmPkQhAQceC7aHr4Gy5GKv7LMoiy47P7PyaNCeZBHMpFke/white-bg-with-drop-shadow.gif)](https://hivesigner.com/sign/account-witness-vote?witness=themarkymark&approve=1)     

This image is hyperlinked to my witness voting page.

```
[![](https://i.imgur.com/50dD8mn.gif)](https://hivesigner.com/sign/account-witness-vote?witness=themarkymark&approve=1)    
```

It's kind of confusing syntax, but basically you put an image using ![]() syntax in the space where you would usually use the anchor text.

---


## Images
If you found this post, you most likely already know how to do images on Hive, but for the sake of completeness, I will cover them.  There are also a few tricks you can do I will show you.

`![ALT TEXT](IMAGE URL)`

Alt text is primarily an SEO feature but also is used for text-only browsers.  You can also center images by enclosing it with `<center>![ALT TEXT](IMAGE URL)</center>` tags.

**Have you ever wanted to pull images to the left or right of your text?**

<div class="pull-left">https://images.hive.blog/0x0/https://images.hive.blog/DQmNVx4k9XGFQYA7VPt8b9oitLQMaqp1JmAF8SMGhfK2ZXD/image.png</div> This is with the image on the left.

---

<div class="pull-right">https://images.hive.blog/0x0/https://images.hive.blog/DQmNVx4k9XGFQYA7VPt8b9oitLQMaqp1JmAF8SMGhfK2ZXD/image.png</div> This is with the image on the right.

---

```
<div class="pull-left">https://images.hive.blog/0x0/https://images.hive.blog/DQmNVx4k9XGFQYA7VPt8b9oitLQMaqp1JmAF8SMGhfK2ZXD/image.png</div> This is with the image on the left.

---

<div class="pull-right">https://images.hive.blog/0x0/https://images.hive.blog/DQmNVx4k9XGFQYA7VPt8b9oitLQMaqp1JmAF8SMGhfK2ZXD/image.png</div> This is with the image on the right.
```


---

# Code Formatting

If you are a programmer and want to highlight some awesome code you want to share, you can use the standard github syntax for code.   There are two ways to do this, lead a line with four spaces, or surround it with ``` ```.  Hive doesn't support syntax highlighting like Github does.

```
function test() {
 console.log("look ma’, no spaces");
}
```

``````
```
function test() {
 console.log("look ma’, no spaces");
}
```
``````

Whenever I specify commands to run in tutorials or code, I will use backticks to turn them into code blocks to make it easier to read and understand.

You can also use backticks to highlight preformatted text you don't want to be parsed and formatted.

---

## Quotes `Aka blockquotes`

This is really simple and most people probably already know this.

> Life is 10% what happens to you and 90% how you react to it.
<sub>Charles R. Swindoll</sub>

To create a blockquote, just need to add `>` to the start of the line. If you have multiple paragraphs you will need to use a `>` for each line or you get a new line without the blockquote and may run into formatting issues.  You may notice the name is a bit smaller, this is a subscript using `<sub></sub>` tags that work really nice for citation.  You will notice I do it for **source** for my images.  You can see them both in action here:

```
> Life is 10% what happens to you and 90% how you react to it.
<sub>Charles R. Swindoll</sub>
```

You can nest blockquotes like this.

> Hello
> > Hi

```
> Hello
> > Hi
```

I personally am not a big fan of blockquotes as they are rendered different depending on the front-end style and I usually use my own syntax to do quoting.

*“You must be the change you wish to see in the world.”*
<sub>Gandhi</sub>

```
*“You must be the change you wish to see in the world.”*
<sub>Gandhi</sub>
```

I basically use quotes in italics and do a sub text command on the next line.
I feel this looks better and is consistent.  YMMV.

Finally, if you have blank lines in your quotes, just use a > on the blank line as such.

> Michael says "Hello".
> 
> Bob responds, "Hi!".

```
> Michael says "Hello".
> 
> Bob responds, "Hi!".
```

---

## Tables

Creating simple tables is really easy with markdown and not a commonly seen feature.  A simple table looks like this:

First Header | Second Header
------------ | -------------
Content cell 1 | Content cell 2
Content column 1 | Content column 2

To create this table is as simple as:

```
First Header | Second Header
------------ | -------------
Content cell 1 | Content cell 2
Content column 1 | Content column 2
```

Tables can do wonders for making data more readable in posts and one of my favorite Markdown features.

---


# Inline Code Characters

A feature that came real handy in this article is the ability to show formatting syntax inline by using the ` (backtick) character to avoid triggering the formatting.  

This is not the standard apostrophe but the one under the ESC key that is shared with the tilde key `~`.  This will allow you to show special formatting syntax without triggering formatting.  I also use it to highly commands typically entered in terminal windows like on Linux.  For example:

`sudo apt update`

```
`sudo apt update`
```

---

<center>Securely chat with me on [Keybase](https://keybase.io/officialmarky)
<center>https://images.hive.blog/0x0/https://steemitimages.com/DQmcWxV1dpA1eAtw2ipwZiWZkydyVNU5LaLa2Ak1GUnbGmS/The-Marky-Mark.png</center>
# <center>  [Why you should vote me as witness](https://peakd.com/witness-category/@themarkymark/why-you-should-vote-for-themarkymark-as-witness)  </center> #

[![](https://steemitimages.com/DQmPkQhAQceC7aHr4Gy5GKv7LMoiy47P7PyaNCeZBHMpFke/white-bg-with-drop-shadow.gif)](https://hivesigner.com/sign/account-witness-vote?witness=themarkymark&approve=1)