Markdown Tutorial + Steemit Blogging Tips

in #tutorial7 years ago (edited)

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 ACategory B
Thing 1Thing 2


180119_Markdown Tutorial-05.png

E=MC<sup>2</sup>

E=MC2

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

Healthy plants need CO2


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.

Blockchain
Basics
Markdown
Basics-2
Wallet
171005_Masterpost_Icons-01.png171005_Masterpost_Icons-02.png171005_Masterpost_Icons-03.png171005_Masterpost_Icons-04.png171005_Masterpost_Icons-05.png
Payouts
Witnesses
NoNo's
Curation
Reputation
171005_Masterpost_Icons-09.png171005_Masterpost_Icons-06.png171005_Masterpost_Icons-07.png171005_Masterpost_Icons-08.png171019_Masterpost_Icons-12.png

Check out the Steemit FAQ page to learn more!


Help us spread the word. Follow our Twitter and YouTube Channel!


sndbox_footer.gif

Sort:  

A Steemit specific - you can use the <div class="pull-right></div> and <div class="pull-left></div> to push photos to one side of the screen or another.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Nice, so what if you want to reduce a photo size in a post?

I didn't know this one off the top of my head. If you use steemitimages to host the image, you can add a https://steemitimages.com/{height}x{width} to the start of the url.
To make this sequence of images:

<div>
https://steemitimages.com/0x0/https://steemitimages.com/DQmZBhZLPhqKiHZmLW2tFupUXCtM9dPP4mh85DtLGSwxrrm/171005_Masterpost_Icons-01.png
https://steemitimages.com/100x100/https://steemitimages.com/DQmZBhZLPhqKiHZmLW2tFupUXCtM9dPP4mh85DtLGSwxrrm/171005_Masterpost_Icons-01.png
https://steemitimages.com/50x50/https://steemitimages.com/DQmZBhZLPhqKiHZmLW2tFupUXCtM9dPP4mh85DtLGSwxrrm/171005_Masterpost_Icons-01.png
</div>

the best contribution with which I could come across. Many thanks!!

tsss markdown sorcery!

Whoa! That's a great trick!

This is great - I've always wondered how to do this and now I know! Thank you

Nice!! Excellent example of justifying images within text. Thanks for sharing this @maxg :D

Nice, so what if you want to reduce a photo size in a post?

Thank you for posting this instruction! I have been looking for it!

This is really useful, thanks for sharing

Good HTML note bud!

I'm so glad I found this account!
May I translate your articles for my little community (to Hebrew)?
Of course with a credit for you.

Absolutely! Message us in Steemit.Chat with the links once their up :)

Really very helpful tools. It will save a lot of time because I was using HTML for my posts till now.

That's a really useful post! I'm bookmarking it so I can send it to newbies when they need help with this kind of stuff.

Excellent, that's great to hear @rocking-dave. Thanks for your support :D

Oh, my pleasure! Especially when the support is just taking advantage of some awesome resources. ;)

How can a post get bookmarked?

You can bookmark the link to a certain post as any other link in your browser. That's what I meant. You can't really bookmark a post as part of the steemit interface itself.

Oh, cut and paste!!! Alright, thank you! As long as there is no other way! I have been looking for some hidden function! :)

Browser bookmarking is a bit more convenient than cut and paste really and if you are using Chrome and don't mind being logged in, you can even move your bookmarks and sessions between devices. I personally mind that very much and I'm neither using Chrome, nor logging in to save bookmarks or anything like that.

Thanks for sharing! Very useful for beginners, and those who do not know html. I naturally gravitate towards styling through html as I use it a lot in some of my other work.

You have some really useful tips and have helped me build my content a lot, thank you @sndbox!

Glad this could be helpful @lukebrn. Thanks for your continuous support!

No problem! I would love to get involved in some of your projects, Will be supporting you as much as I can!

Thank you so much! I've been using standard html to do mine... but these seem a bit easier.
Do you think there is any harm in using standard html?

No harm at all! Just another option to choose from :D

beautifully crafted article. You guys got style :)

Thanks @geniusloci ;)

wow.. thank u so much for this

Thank you for this info, I just started steemit 1 week ago with a help from a friend
@deveerie

This post is helpful, This will help me a lot in improving the styling of my future blogs!

  • Thanks for sharing this!
  • Upvoted!
  • Followed!
  • This is cool!

Nice to see this can work.

try to see whether table can work

col1col2
v1v2

seems most markdown syntax can work here.

public static void main() {
}

This is amazing. Thank you!