A Beginner's Guide to Markdown

avatar


 
Following on from my How To Steem yesterday, I wanted to cover markdown for newbies.

What is Markdown?

Markdown syntax allows you to format your text and create headlines, lists, tables, links, images, and block quotes. See that heading up there? That is markdown.

This is centered. This is also markdown.

Any text you see italicized, BOLD, or BOLD italicized is also using markdown. So, how do you do it?

Italics

In order to italicize text simply put a * either wide of the text, as in *text*, which turns out as text. The * has to be right up against either side of the text or it will not work. Another way of using italics is to place a _ either side of the text, like _this_.

Bold

To make text bold, use ** either side of your text, as in **text**, which then appears as text.

Bold italics

You might guess the pattern by now. This time use *** either side of the text to be bold and italic, as in ***text***, looking like text. Another way of making bold italics is to combine the _ with ** as in _**text**_ but it's probably simpler to just use the ***.

Headers

A # at the start of a line, followed by a space, will make the following text on that line into a h1 header. For example, # Header produces the following:

Header

 
Use ## to make a h2 header, ### for h3 or #### for h4, like this:

h1 header

h2 header

h3 header

h4 header

URLs

Centering

To center text or an image, use <center>text</center> or <center>imageURL</center>. Be sure to use the </center> when you wish to stop centering, otherwise everything afterwards will remain centered. Example: <center>text</center> looks like:

text

<center>https://udemy-images.udemy.com/course/240x135/1303834_90fe_2.jpg</center> gives you:

With text, you can combine styles and centering. For example <center>*Centered italicized text*</center> gives you:

Centered italicized text

You can center a heading by using ### <center>h3 heading centered</center>

h3 heading centered

Strike through text

If you wish to show text crossed out, use ~~ on either side, as in ~~strike through~~

strike through

Links

There is no special formatting needed to produce URL links, these are made automatically. For example, simply type https://steemit.com/@gmuxx and it appears as follows.

https://steemit.com/@gmuxx

If however you wish to create a named URL link do something like

Visit [GMuxx's Blog](https://steemit.com/@gmuxx)

Type the text you want as a clickable link inside [] and the actual url in between ()

Visit GMuxx's Blog

Images

You can include an image from any URL, simply by pasting the URL into the editor as seen earlier.

https://udemy-images.udemy.com/course/240x135/1303834_90fe_2.jpg

It can be centered

<center>https://udemy-images.udemy.com/course/240x135/1303834_90fe_2.jpg</center>

You can make the image clickable, sending the user to a specific URL by using the following format:

<a href="URL to visit"><img src="URL of the image"/></a>

So if I use <a href="https://steemit.com"><img src="https://udemy-images.udemy.com/course/240x135/1303834_90fe_2.jpg"/></a> it looks like this:

Of course, you can center this too.

<center><a href="https://steemit.com"><img src="https://udemy-images.udemy.com/course/240x135/1303834_90fe_2.jpg"/></a></center>

Pull left or pull right

Should you wish for small images to be inserted with the text flowing around them do this:

Use the following format <div class="pull-left">or <div class="pull-right">followed immediately by the image URL, followed immediately with </div>

Examples:

<div class="pull-left"> https://images.com/myimage.jpg</div> text carries on here...

<div class="pull-right"> https://images.com/myimage.jpg</div> text continues here...

This formatting also works with text. For example:

<div class=pull-right>This text is on the right</div>
<div class=pull-left>This text is on the left</div>
<center>This text is in the middle</center>

produces:

This text is on the right
This text is on the left
This text is in the middle

Code snippets

Did you notice that I can type <center>THIS TEXT</center> and it does nothing but show you what I typed, without applying the formatting? All I do is to put a ` before and after the code - this is the one to left of the number 1 on the main keyboard.

Line breaks and Spaces

Sometimes you will want to manually add a line inside your text. For example, even though there is a line space in the editor below the h3 heading, in the preview it does not show. Simply add a <br> between the heading and the following text.

### <center>Line breaks and Spaces</center>
<br>
Sometimes you will want to manually add a line inside your text. For example, even though there is a line space in the editor below the h3 heading, in the preview it does not show. Simply add a <br> between the heading and the following text.

This then becomes:

Line breaks and Spaces



Sometimes you will want to manually add a line inside your text. For example, even though there is a line space in the editor below the h3 heading, in the preview it does not show. Simply add a <br> between the heading and the following text.

If however that space looks too big to you, maybe use a &nbsp; instead of a <br>.

### <center>Line breaks and Spaces</center>
&nbsp;
Sometimes you will want to manually add a line inside your text. For example, even though there is a line space in the editor below the h3 heading, in the preview it does not show. Simply add a &nbsp; between the heading and the following text.

Becomes:

Line breaks and Spaces

 
Sometimes you will want to manually add a line inside your text. For example, even though there is a line space in the editor below the h3 heading, in the preview it does not show. Simply add a &nbsp; between the heading and the following text.

Ruled line

Should you wish for a line across the page as a separator perhaps, use ---

Quoted text

You can use > to quote text. For example:

>Mary had a little lamb It's fleece was white as snow, Everywhere the child went The lamb was sure to go.

Becomes:

Mary had a little lamb
It's fleece was white as snow,
Everywhere the child went
The lamb was sure to go.

Lists

If you want to create a bulleted list, simply insert a * and a space before each item. Example:

* Item 1
* Item 2
* Item 3

Becomes

  • Item 1
  • Item 2
  • Item 3

Perhaps you want to create a numbered list? The format here is to use a number followed by a . a space and an item

1. Item 1
2. Item 2
3. Item 3
4. Item 4

Becomes

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4

I hope this helps to get your posts looking as neat and formatted as you can make them. The more you use markdown, the easier it becomes. I recommend either bookmarking this post, or copying the code snippets into a document on your local computer for future reference.

Steemit Image Source



Like what I do? Vote for my witness https://steemit.com/~witnesses - scroll below top the 50 witnesses and enter my name in the text box, then click vote. Thanks for your support.

Are you a writer or keen to learn? Do you wish to join a community of like-minded individuals who can help hone your writing skills in the fields of fiction, non-fiction, technical, poetry, or songwriting? Join us at The Writers' Block by clicking the logo below.

markdown formatting post
0
0
0.000
66 comments
avatar

very useful information..will benefit newcomers thx dear @gmuxx ;)

0
0
0.000
Reply
avatar

Awesome article thanks for this useful information,i don't know all this awesome tips as a new member when I joined 3 weeks ago.i want to believe all newbie be take this your information serious even though I still call myself newbie

0
0
0.000
Reply
avatar
(Edited)

Very useful. Thanks. I am always on the lookout to learn new markdown tricks. 👍

0
0
0.000
Reply
avatar

Thank you for sharing! I am a newcomer and I had alot of questions you just answered! Thanks!

0
0
0.000
Reply
avatar

Wow... This is just like a manual that has to be studied and followed. I've been able to learn a great deal from this post. This is what steemit should really be about, providing useful information and insight. I'm not done reading, i am still on it! Thank you @gmuxx. It worked for me, im sure it will for others as well. Well done!

0
0
0.000
Reply
avatar

Thanks for putting in the time. I wish there was a way to organize all your informative posts into a feed. It would help out noobs.

0
0
0.000
Reply
avatar

Nice work mate.
One of the most important things to learn when posting is quality formatting.
Learning to master markdown is key to an ascetically pleasing post.
Cheers bud.

0
0
0.000
Reply
avatar

Ohh this is really nice....
Thanks @gmuxx for sharing this
Its very useful to me personally

0
0
0.000
Reply
avatar

This is super! I was just talking to someone about this the other day. They showed me how to do a few of them. Thanks @gmuxx!

0
0
0.000
Reply
avatar

Great post @gmuxx, thank you!
Have you heard of busy.org? It has all the features on the interface, no formatting needed.
Here is a vlog of the fabulous @roxane talking about it, she is introducing other apps for steemit as well!

0
0
0.000
Reply
avatar

I do occasionally use Busy, but this is aimed more at users who do not.

Thanks for the share, @roxane is awesome.

0
0
0.000
Reply
avatar

Don't forget about < sub> Make text subscript</ sub>!
Useful when adding sources under images. ;)

0
0
0.000
Reply
avatar

Ah, I forgot that one. Thanks.

0
0
0.000
Reply
avatar

I've been wondering how to show code without actually having the code change the formatting.

I could have done a google search, but never really needed it. Now I'll just store it in memory that I need to use one of these `. Thank!

0
0
0.000
Reply
avatar

@gmuxx I luckily stumbled on your post. Thank you very much, I learned a lot. I was looking for this tutorial for a certain time. I know how to put image from left and right but never learned the other commands since then. I jot down every commands I want and will use it on my next post.

0
0
0.000
Reply
avatar

really inspiring post.... im recently start using this formula. thanx for share.

0
0
0.000
Reply
avatar

This will be GREAT for newcomers! Anyone I know who joins, this'll be another post I direct them to! Great job, Muxxy!

0
0
0.000
Reply
avatar

This is brilliant. Just what I was after as new to Steemit. Posted a terrible blog today because couldnt line anything up. Understand what I did wrong now. Cheers.

0
0
0.000
Reply
avatar

I freak'n love markdown! Great post mate, you seem to cover everthing that one needs to get into the flow and format their post at the same time! Markdown is a blogger's best friend :D

<3

0
0
0.000
Reply
avatar

Wonderful @gmuxx. This is an useful isuue to increase quality in our posts.
Thanks a lot!

0
0
0.000
Reply
avatar

Thanks to @gmuxx for posting and to @princessmewmew for resteeming this for us!

Super useful info, I will be leaving this post open in a separate tab to come and refer back to :)

0
0
0.000
Reply
avatar

Man, you're on a roll with these posts. I have several posts bookmarked explaining some of these things, the details the basic guide doesn't go into. Now I'll have this one and that's it.

I'll probably never close this tab now.

0
0
0.000
Reply
avatar
(Edited)

This is so extremely helpful, Thank you so much. I am a total newbie here and was trying to figure out how everyone's posts had such wonderful format. I will be saving this one. Thank you again.

0
0
0.000
Reply
avatar

Thank you very much! Can you explain how to indent? I didn't understand the instructions in steemit's faq.

0
0
0.000
Reply
avatar

What do you mean by indent?

0
0
0.000
Reply
avatar

Like you would for a paragraph. Or on Microsoft word it would be a tab or 5 spaces.

0
0
0.000
Reply
avatar

          I cannot find a specific markdown command to simply indent paragraphs. The closest I could find was to indent sub items in lists, shown below. I have however 'cheated' my way round this limitation, as you can see with this paragraph. All I did was to add &nbsp; five times before the text.

  1. First ordered list item
  2. Another item
      Unordered sub-list.
  3. Actual numbers don't matter, just that it's a number
    ⋅⋅1. Ordered sub-list
  4. And another item.
0
0
0.000
Reply
avatar

    That is a great tip, best tip I have seen since the one @suesa did about the five sub or sup To tiny downdrop or push up text on a line.

0
0
0.000
Reply
avatar

This is a must save page for a lot of beginners including me. You solve alot of problems in that post. Thank you

0
0
0.000
Reply
avatar

Beautiful post and great timing for me. I am completely new to blogging and not highly technical. I have not used Markdown yet to compose a post. And good thing, because I knew none of this. This post is invaluable to me and many other newbies to SteemIt. For this reason the post has been resteemed and upvoted. Thank you so much, my friend.

0
0
0.000
Reply
avatar

This is really helpful. Thanks a lot!

Something I've wondered since joining is why the formatting is so complicated. Why aren't there just buttons like in Google Docs for the different things? Do you know why it's not easier?

0
0
0.000
Reply
avatar

I'm guessing it's because Steemit was created by devs who are used to using codes. I agree, it would be easier for new users to be able to just click buttons.

0
0
0.000
Reply
avatar

Ah, right. That must be it. Many coders I know really dislike having UIs and prefer doing things in code or through a console.

0
0
0.000
Reply
avatar

Your Post Has Been Featured on @Resteemable!
Feature any Steemit post using resteemit.com!
How It Works:
1. Take Any Steemit URL
2. Erase https://
3. Type re
Get Featured Instantly – Featured Posts are voted every 2.4hrs
Join the Curation Team Here

0
0
0.000
Reply
avatar

This is so helpful I had to bookmark the page as well. One of the most time consuming thing I deal with is learning the markdown. Html coding is all I've learned over the many years and your post here is more helpful than the "markdown styling guide" for some reason. Thank you for posting this.

0
0
0.000
Reply
avatar

My pleasure, glad it's of help.

0
0
0.000
Reply
avatar

Good stuff. I've been using the html editor to do the same things but this seems easier to work with.

0
0
0.000
Reply
avatar

Great post, last few tips are new to me :D

0
0
0.000
Reply
avatar

I've been trying to figure out how to center for awhile so this is much appreciated!

0
0
0.000
Reply
avatar

Thank you @gmuxx, I am a newbie and this is really going to help me. Great post

0
0
0.000
Reply
avatar

This was so helpful, thank you very much for taking so much time to show us all these features.
I was already wondering how some bloggers were able to format their posts like this as some of the features are not shown in the Markdown styling guide :(

0
0
0.000
Reply
avatar

Excellent work here my friend, A goldmine of information for new users!

0
0
0.000
Reply
avatar

Greater great stuff ... I still can’t understand why markup had to be this complex .... I use an iPad ... makes it harder ....cheers

0.000
Reply
avatar

Very concise post. Anyone who follows these instructions will be far more than a beginner after this. I think you got all that one really needs to produce good quality formatted posts here.

0
0
0.000
Reply
avatar

Thank you very much for this!! About a week or two after I started I discovered the markdown, but wasn't fully sure how to use it. From the start of my SteemIt adventures I wanted to add bold texts and other things on my post, but didn't know how it was done, then found markdown, but it was a dead issue. I never went to learning how to use it, and I don't need now thanks to you and this post! Now I can get with making my posts a bit fancy and stick out more:)

To insert pictures you have to put a url link? You can upload them like you can outside of markdown?

0
0
0.000
Reply
avatar

That was very helpful. What I found out is that you can add some navigation arrows to your post like this (for example when you want to post a series of photos):


<-Previous   Next->

Just copy this and replace the URLs:
<center>(URL2)</center>
<center>[<-Previous](URL1) &nbsp; [Next->](URL3)</center>

0
0
0.000
Reply
avatar

thank you, the best markdown info yet

0
0
0.000
Reply
avatar

Thank you so much! This answered all the questions I had that were really frustrating me!

0
0
0.000
Reply
avatar

nices posts i like your posts and i am thankful to you and thanks to share a posts and i am supported to you.

0
0
0.000
Reply
avatar
(Edited)

Oh! Just the thing I was looking for. Saw your comment on a welcome post and followed you here. Thank you for this easy to follow guide.

I would like to resteem it so I have it on my blog where I can find it easily. :)
(I don't know how to bookmark things as yet) BUT, I can't find the resteem icon on this post. Why is that?

Cheers.

0
0
0.000
Reply
avatar

This was very helpful. Thank you very much

0
0
0.000
Reply
avatar

Thank you
These will be of great help to me

0
0
0.000
Reply