Markdown Tutorial + Steemit Blogging Tips

180119_Markdown Tutorial-01.png

Toolkit posts are designed to help new Steemians get acquainted with the ins and outs of Steemit. If you have requests on components or systems related to Steemit that you would like to see explained, please let us know in the comments below. [The graphics and text have been updated from our original Markdown post.]

180119_Markdown Tutorial-02.png

What is Markdown?

Markdown is the code language used in creating and editing Steemit blog posts. It allows you to customize text, emphasize elements and overall help you create amazing content without the headache of using HTML directly.

Within the Steemit interface, all blog post and comment boxes support the Markdown language. This gives you the flexibility to insert a wide range of formatting options from text headers to bullet points and charts. In this tutorial, we’re going to run through the basics to help you get acquainted with Markdown formatting.

180119_Markdown Tutorial-07.png

# Heading 1

## Heading 2

### Heading 3

Heading 1

Heading 2

Heading 3

180119_Markdown Tutorial-03.png

*italic* and **bold** and ***bold-italic***

italic and bold and bold-italic

<center>Example Text</center>

Example Text

180119_Markdown Tutorial-04.png

Your [linked text or image](http://steemit.com/).

Your linked text or image.

180119_Markdown Tutorial-06.png

Adding images to your post is as easy as dragging and dropping them from your computer desktop right into the Steemit text box. Images can only be uploaded one at a time and it will take a moment depending on the size of the file. Once images are successfully uploaded onto Steemit, a code will appear which you can move around your blog post to your liking.

Tip 1: Uploaded images may appear in a different location in the text than you originally dropped. (It all depends on where your cursor was located!)
Tip 2: If you are formatting images to be uploaded to Steemit and wish for them to span the whole post, we recommend making them at least 1000 pixels in width.

Here's an example of the image code that appears after the drag and drop process:

![Markdown-Example.jpeg](https://steemitimages.com/DQmQfwKGjY48BHUMYUhFcQ7YETRiKKp7apAZfLYK3csU7s9/180119_Markdown%20Tutorial-06.png)

180119_Markdown Tutorial-09.png

>This is a quote, someone said this!

This is a quote, someone said this!

180119_Markdown Tutorial-08.png

* Red
* Blue
* Yellow

Red
Blue
Yellow

Category A | Category B
--- | ---
Thing 1 | Thing 2

Category A	Category B
Thing 1	Thing 2

180119_Markdown Tutorial-05.png

E=MC<sup>2</sup>

E=MC²

Healthy plants need CO<sub>2</sub>

Healthy plants need CO₂

Exploring More Options

These Markdown tips should help you get started! A comprehensive list of options can also be found here Feel free to reach out to us in the comment section with any Markdown or formatting questions. If you're feeling adventurous, give a few of these Markdown tips a go with your comments below!

^{Thanks for reading! We hope you found this Steemit Markdown guide useful. Take a look at our full outline of resources below. If you have any questions please don’t hesitate to reach out in the comment section.}