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.
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:
<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:
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.
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
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:
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
instead of a <br>
.
### <center>Line breaks and Spaces</center>
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 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
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
- Item 1
- Item 2
- Item 3
- 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.
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.
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.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
This is super helpful @gmuxx!! Great post!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thanks Doug
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Awesome beginners guide to markdown!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
My pleasure, glad it's of help.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
This is a must save page for a lot of beginners including me. You solve alot of problems in that post. Thank you
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Excellent work here my friend, A goldmine of information for new users!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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 :(
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Great post, last few tips are new to me :D
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
I've been trying to figure out how to center for awhile so this is much appreciated!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Good stuff. I've been using the html editor to do the same things but this seems easier to work with.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you very much! Can you explain how to indent? I didn't understand the instructions in steemit's faq.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
What do you mean by indent?
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Like you would for a paragraph. Or on Microsoft word it would be a tab or 5 spaces.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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
five times before the text.Unordered sub-list.
⋅⋅1. Ordered sub-list
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
@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.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
very useful information..will benefit newcomers thx dear @gmuxx ;)
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
So useful, especially for da noobs! Shared!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
#steemiteducation
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Great to see this, Thank You @gmuxx for making steemit a easier place for us all!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you for sharing! I am a newcomer and I had alot of questions you just answered! Thanks!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Very useful. Thanks. I am always on the lookout to learn new markdown tricks. 👍
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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 :)
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
I forgot to paste the link..aaahhh...here ya go https://steemit.com/dtube/@roxane/n658hift
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
I do occasionally use Busy, but this is aimed more at users who do not.
Thanks for the share, @roxane is awesome.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
My pleasure! 😊✌️
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Ohh this is really nice....
Thanks @gmuxx for sharing this
Its very useful to me personally
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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?
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Ah, right. That must be it. Many coders I know really dislike having UIs and prefer doing things in code or through a console.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Wonderful @gmuxx. This is an useful isuue to increase quality in our posts.
Thanks a lot!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
This will be GREAT for newcomers! Anyone I know who joins, this'll be another post I direct them to! Great job, Muxxy!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Don't forget about < sub> Make text subscript</ sub>!
Useful when adding sources under images. ;)
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Ah, I forgot that one. Thanks.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
really inspiring post.... im recently start using this formula. thanx for share.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
great! thank you
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
very interesting your article
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Greater great stuff ... I still can’t understand why markup had to be this complex .... I use an iPad ... makes it harder ....cheers
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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?
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Check one of my previous posts:
https://steemit.com/markdown/@gmuxx/a-beginner-s-guide-to-markdown
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
nices posts i like your posts and i am thankful to you and thanks to share a posts and i am supported to you.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
thank you, the best markdown info yet
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you so much! This answered all the questions I had that were really frustrating me!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you @gmuxx, I am a newbie and this is really going to help me. Great post
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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):
Just copy this and replace the URLs:
<center>(URL2)</center>
<center>[<-Previous](URL1) [Next->](URL3)</center>
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit