A Beginner's Guide to Markdown

in #markdown6 years ago


 
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.


Sort:  

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.

This is super helpful @gmuxx!! Great post!

Thanks Doug

Awesome beginners guide to markdown!

Thank you.

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.

My pleasure, glad it's of help.

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

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

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.

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 :(

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

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

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

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

What do you mean by indent?

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

          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.

    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.

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.

@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.

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

So useful, especially for da noobs! Shared!

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

Great to see this, Thank You @gmuxx for making steemit a easier place for us all!

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!

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

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

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.

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

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!

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!

I forgot to paste the link..aaahhh...here ya go https://steemit.com/dtube/@roxane/n658hift

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

Thanks for the share, @roxane is awesome.

My pleasure! 😊✌️

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

Ah, I forgot that one. Thanks.

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!

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

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

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.

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

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

Thank you.

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 :)

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.

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.

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?

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.

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

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.

very interesting your article

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

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

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

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?

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>

thank you, the best markdown info yet

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

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

This was very helpful. Thank you very much