Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Lists are a great way to organize content. We'll use Markdown to format both numbered (ordered) and bulleted (unordered) lists. We'll also see how to combine list formatting, and cover a few formatting quirks that can be surprising when you're getting started.
Starter code for this video:
# Markdown Basics
## Headlines, Paragraphs, and Basic Formatting
### Headlines
Type a single hash (AKA pound symbol) and a space to create the largest or first-level heading. A second-level heading uses two hashes next to each other followed by a space and text. The rest of the headline levels just add another hash.
#### Heading Level 4
##### Heading Level 5
###### Heading Level 6
### Paragraphs and Line Breaks
We create paragraphs by typing the way we would in any other program. Just hit return twice to start another paragraph.
Where you see empty space between blocks of text in your Markdown document, you will see empty space separating those blocks of text in your formatted HTML document.
#### Line Breaks
You don’t always want that space that appears between one line of text and another: for example, lines of poetry or song lyrics don't have spaces between them. To add just a line break without a space, type two spaces at the end of a line, then press return once.
I love you without knowing how, or when, or
from where
I love you directly without problems or pride:
I love you like this because I don't know any
other way to love
Neruda, Pablo. "Sonnet 17" The Poetry of Pablo Neruda, edited by Ilan Stavans, translated by Mark Eisner, Farrar, Straus and Giroux, 2005, p. 514.
### Emphasis and Bolding
#### Italics
Emphasis can be added with either the asterisk or the underscore characters.
This *works*, and this _works_ too
#### Bolding
Bolding is easy too. Just add an extra asterisk or underscore.
This **works**, and this __works__ too
#### Bolding and Emphasis Together
You can even bold and italicize text like ***this*** or ___this___
### Blockquotes
A blockquote sets text apart from the rest of the document. It indicates that the text is quoted from another source.
You format a blockquote using the greater than symbol. If you want a blockquote to span multiple paragraphs, add the greater than symbol to the line between paragraphs too.
> Markdown is intended to be as easy-to-read and easy-to-write as is feasible.
>
> Readability, however, is emphasized above all else. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions. — John Gruber
### Horizontal Rule
OK, that’s a good start. We can separate this from our next section with a horizontal rule, which is just a line used to separate sections of a document.
You can use three or more underscores, asterisks, or hyphens. I prefer hyphens.
___
***
---
[MUSIC]
0:00
As I mentioned earlier, I will pace
on a simplified version of what I've
0:05
been saying in toward
sheet between videos.
0:08
This is an effort to make sure
that we have a complete reference
0:11
document by the end of the course.
0:14
If you're following along and you want
your document to match mine exactly,
0:16
there's a copy in the teacher's notes.
0:19
List are a great way to
organize content and
0:22
mark down provides a way to format
both numbered and bulleted lists.
0:24
Let's start with a numbered list.
0:29
I'm just throwing some returns in here.
0:31
So we can see what we're doing.
0:33
And then I'll start with a heading for
our section.
0:34
Lists and another heading for
subsection, numbered Lists.
0:39
Now, we create a Numbered Lists in
the same way we might with Microsoft Word,
0:49
Apple Pages, or
any other word processing program.
0:52
You just type the number 1
followed by a period, a space,
0:55
and then the text for your item.
0:59
Then you could type a return, a 2,
a period, a space, and again your text.
1:03
Now, let's see what that
looks like in our preview.
1:10
We have our numbered list
the way we would expect.
1:13
One thing to notice is that you actually
don't have to type these numbers in order.
1:17
If l were to type a 1 here, mark down
figures in the cell,it understands that l
1:22
am trying to create a number list
because of the number 1 in the period.
1:27
So, over here in our preview,
we still have 1 and a 2.
1:31
We could add another item like this.
1:34
One, period, item three.
1:37
And you can see in the preview
we have a one, two, and a three.
1:40
I find this unnecessarily confusing.
1:44
I prefer to follow the numbers in order.
1:46
Because that's easier to understand and
it matches the rendered HTML.
1:47
So I'm going to delete this third
item to clean the document up,
1:52
and we'll come up here and make this a 2.
1:57
And you can see in our preview,
we're still getting what we expect but
2:00
we're following those numbers in order
here to I just find this less confusing.
2:03
You can also nest items in the list.
2:09
You begin the list the same way so
number 1 period and an item.
2:11
And then where you would
create your second list,
2:17
you can either Tab to indent or
use at least two spaces and
2:21
then the number one,
a period and your item again.
2:26
And let's check that out in our preview.
2:31
Okay, so we are getting something
a little unexpected here.
2:35
We've got items 1, 2, 3,
then this indented item 1,
2:38
it's all spaced out a little strange.
2:41
What's happening here,
Adam is getting a little confused.
2:44
It thinks of that this item is
a member of the list above so
2:47
I can fix that by just typing a return and
there we go.
2:52
Adam figures out what
we're trying to do here,
2:56
you can see now we have
two separate lists.
2:57
This is why it's really nice
to have this live preview.
3:00
You can see all these
little gotchas before you
3:03
go publish your document somewhere.
3:06
Let's add another nested item,
just for a little for practice.
3:08
If we took the two period, Item 2.
3:11
And we continue to have these
nested items in our numbered list.
3:14
Now, let's throw in some returns so
that we can see, and another heading for
3:22
our bulleted lists.
3:26
Bulleted lists work just like numbered
lists but you use the asterisk character,
3:34
no period, and a space.
3:38
So I would created a bulleted item
by typing the asterisk, a space, and
3:39
then item, and
then I can create a second item.
3:44
Again, asterisk, space, and another item.
3:49
Let's check that out in our preview.
3:53
We can see we have these
bullets next to our items.
3:56
We have our bulleted list.
3:58
That's great.
3:59
Now, of course, you can nest items
in the bulleted lists as well, So
4:00
you can have a item here, and then,
just like what the numbered list,
4:06
you would either use two spaces or tab,
and again, the asterisks space and
4:11
the item, And in the preview, we can
see that we have our bulleted item and
4:17
then a nested bulleted item with
a slightly different style of bullet.
4:23
Let's try one more just
to see what happens.
4:29
What if we want to further indent,
type our asterisk, space and the Item.
4:31
And, there we go.
4:37
You can see we now have a third level.
4:39
And it's a different style bullet.
4:42
It's indented, so
this is what we would expect.
4:43
Before we look at lists any further,
I want to mention of the surprises I
4:49
encountered often as I gained
comfort writing with Markdown.
4:53
We have now used the asterisk for bolding,
italicizing, and creating bulleted lists.
4:56
This is one reason why I like
to have this live preview
5:02
of my formatted document
beside my mark down text.
5:05
It's easy to accidentally create a list of
italicized items rather than bullets or
5:08
items that aren't formatted at all.
5:13
Markdown takes practice and
the live preview helps.
5:15
You will often find that
you often forgot a space or
5:18
you didn't type the character
on both sides of the text.
5:21
To show you what I'm talking about,
let's create an italicized item.
5:24
So we would have our asterisk.
5:28
No space and cized item.
5:30
And then we add the asterisk at
the end a well with no space.
5:36
And that's an italicized item.
5:40
Now, below this,
5:42
we can create an item with no formatting
by typing one asterisk, no space.
5:43
And we'll have an item with no formatting.
5:49
Now, over in our preview, you can
see I've got a little bit of a mess.
5:55
I have this italicized item but then I've
got the asterisk actually showing and
5:58
it's not on it's own line.
6:02
And then this text doesn't really
formatted specially in anyway.
6:03
So, the difference here really is that I
just don't have asterisk on the end of
6:07
this text.
6:11
Now, let's create
a bulleted item below that.
6:13
So the asterisk plus a space.
6:16
And bulleted item.
6:18
And now, I've got even more of a mess.
6:22
So I have this italicized item.
6:24
No formatting.
6:26
And the bullet.
6:27
And you can see there's really
a pretty subtle difference here.
6:28
It's the matter of a space or
a character on the end of the text.
6:31
So just keep those little gotchas in mind,
they can trip you up.
6:35
Now, what if I did want a bulleted
item that is also bold and italicized?
6:38
Well, we can definitely do that.
6:43
So let's come down here,
and add some more returns.
6:44
Just so that we can see.
6:48
I would first type the asterisk to
begin our bulleted item, and a space.
6:51
And then I want one,
two asterisk to bond something and
6:56
one asterisk added also in italicizing.
7:00
We can call this a bulleted
bold italicized item.
7:04
And to make sure that this actually is
bold and italicized we need all three of
7:12
those asterisks on the end of the text
as well, so two for bolding, one for
7:16
the italics, and in our preview,
you can see that's what we're getting.
7:21
We have a bulleted, bold, italicized item.
7:26
So we can mix formatting.
7:30
That's great.
7:31
But can we also mix list styles?
7:31
Well, let's try it out.
7:34
Let's try to nest some bulleted
items in a numbered list.
7:35
So we'll start with our numbered list.
7:40
So number, period, text.
7:42
And then,
let's nest some bulleted items under here.
7:46
So Tab, asterisk, space, and
an Item, how about another one.
7:50
And over here in the preview, we are
getting pretty much what we expect here.
8:00
We've got an indented bullet
under our numbered list.
8:06
Now, what if I want a second item
that's outdented and that's fine?
8:11
I just outdent and
type a number two period space and
8:16
this is our second item and then,
8:23
let's say I want another
nested bulleted item.
8:26
And then let's see if we can throw
some numbered items in under here,
8:32
so then I would tab to indent again,
and numbers,
8:38
For a numbered list, and
8:44
let's see what we have got.
8:48
Ok.
This is working.
8:52
So I do not know if you'd ever
actually want to do this but
8:53
we do have these numbers and
8:56
bulleted items all mixed together
the way that they should be behaving.
8:58
That wraps it up for this video.
9:02
Definitely explore lists and
additional formatting.
9:04
After a little practice you won't
even think about this stuff,
9:07
your fingers will just do the work.
9:10
To finish this video, let's throw in
a horizontal rule, and save our documents,
9:12
and I will see you in the next video
where we'll talk about formatting code.
9:18
You need to sign up for Treehouse in order to download course files.
Sign up