A Beginner's Guide to Markdown

64 comments

gmuxx
67
8 months agoBusy7 min read


 
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.


Comments

Sort byBest