DEV Community

Cover image for Markdown Basics
Helen Kent
Helen Kent

Posted on

Markdown Basics

#codenewbie #markdown #womenintech #tutorial

To get ready for bootcamp next year we've been asked to learn markdown. I already started learning a little to format these posts, but i thought i'd make a note of what i learn so i can look back on it later on when i've forgotten it!

Basic formatting 

_italics_
Enter fullscreen mode Exit fullscreen mode 
**bold**
Enter fullscreen mode Exit fullscreen mode 
**_bold and italics_**
Enter fullscreen mode Exit fullscreen mode

Headers

Headers - one is the largest and six is the smallest just like h1 - h6 in html

#Header one
##Header two
###Header three
####Header four
#####Header five
######Header six
Enter fullscreen mode Exit fullscreen mode 
###I can write a header 3 _and make some of it italics_
Enter fullscreen mode Exit fullscreen mode

Inline Links

You wrap link text in square brackets and the actual link in normal curly brackets

[Click here to visit the website](www.websitewebsite.com)
Enter fullscreen mode Exit fullscreen mode

You can format the link text too.

[You're **really, really** going to want to see this.](www.dailykitten.com)
Enter fullscreen mode Exit fullscreen mode

Headers can also have links within them, although this might be odd.

####The Latest News from [the BBC](www.bbc.com/news)
Enter fullscreen mode Exit fullscreen mode

Reference Links

Reference links are useful if you might use the same link a few times and you'd only want to update it once if the link changed. You put the reference links at the bottom of the document and they would be hidden. You then put the link references in place of a url. (Put the ref links without the spaces, they wouldn't show up in this doc without them!)

Click here for [BBC news][BBCsite]

Click here for [CNN][CNNsite]

[ BBCsite ] : www.bbc.com
[ CNNsite ] : www.cnn.com
Enter fullscreen mode Exit fullscreen mode

Inline images

Very similar to the inline links, just with an ! at the start

![alt text for accessibility](www.yourimagelink.com/blahblah.jpg)
Enter fullscreen mode Exit fullscreen mode

Reference images

Pretty much exactly the same as reference links...but with images and an ! at the front. (don't include spaces in the references. That's just so they'd show up as normally they'd be hidden in the markdown doc)

![Black cat][Black]

![Orange cat][Orange]

[ Black ] : www.imagelink.com/image1.jpg
[ Orange ] : www.imagelink2.com/image2.jpg
Enter fullscreen mode Exit fullscreen mode

Blockquotes

To turn a piece of text into a quote that stands out, just put the greater than symbol in front of the text. (Apparently this is known as a caret character)

>"Blahdy blah blah" Helen Kent
Enter fullscreen mode Exit fullscreen mode

If the quote spans multiple paragraphs, put the caret character on each line to ensure that the whole quote is included.

>Once upon a time and a very good time it was....
>
>Her mother was a lovely lady...
>
>She made a giant cake.
Enter fullscreen mode Exit fullscreen mode

You can also make parts of the quote italics or bold in the usual way.

Lists

You can have unordered (bullet points) and ordered (numbered) lists.
Use * for unordered and for ordered, just type the numbers as below. You need a space between your * and the item for it to work.

* Milk
* Squash
* Bread

1. Go to the shop
2. Buy the stuff
3. Go home
Enter fullscreen mode Exit fullscreen mode

You can nest your lists by indenting each asterisk one space more than the preceding item.

* Bob
 * Green hair
 * 11 fingers
 * 12 toes
Enter fullscreen mode Exit fullscreen mode

You might want lists with extra info underneath that doesn't need its own bullet point. To do this, just put your bullet point in as normal with the asterisk. Write your extra text underneath indented one or two spaces in.

1. Crack three eggs over a bowl.

 Now, you're going to want to crack the eggs in such a way that you don't make a mess.

2. Pour a gallon of milk into the bowl.

 Basically, take the same guidance as above: don't be messy, but if you are, clean it up!
Enter fullscreen mode Exit fullscreen mode

Paragraphs

If you want some text to go on separate lines you can't just use enter and start typing on the line below. To put text on the next line you need to put two spaces after the text for it to go to the next line.
If you want to miss a line and then have your text on the line after that, just press enter twice as usual.

To get text on the next line, use two spaces (these are shown with -- here)

I love a haiku--
So does Laura she is great--
She is next to me.
Enter fullscreen mode Exit fullscreen mode

Done!

That's all the basics for now. There is a nice simple run down of most of that on wikipedia that is pretty useful.

Oldest comments (2)

Collapse
 
mootens profile image
MOOTENS productions •

Nice! Good luck in bootcamp!

I use markdown on a daily basis. I use it to organize my ideas in raw form. It is the most efficient way to document my ideas in text form an integrated with hypermedia. I typed my daily log Journal in markdown on GitHub. I like the simplicity of markdown along with the easy syntax. It's easy to remember to type on the Fly.

MOOTENS.org

I love you.

Collapse
 
mr_oysterhead profile image
Tim •

Fantastic post. Personally I've been using stackedit.io/app for any in depth write ups but for building up the quick muscle memory I like this.

Read next

saint_vandora profile image

Natural Language Processing (NLP) in Web Development: Enhancing Communication with Users

FOLASAYO SAMUEL OLAYEMI -

robsonmuniz16 profile image

🎨 Form Input Wave Animation | CSS & JavaScript🚀

Robson Muniz -

ranjancse profile image

The Power of Abstract Thinking

Ranjan Dailata -

balastrong profile image

TanStack Router: Nesting & 404 pages

Leonardo Montini -