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
Formatting programming code for a blog or forum post can be challenging. This is one area in which Markdown shines. We'll see how to format inline code and code blocks, which will come in handy for README files and other technical documentation.
Resources
Starting 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.
___
***
---
## Lists
You can write both numbered and bulleted lists with Markdown.
### Numbered Lists
You create numbered lists like you do in other writing programs. Type the number, a period, a space, and the item label.
1. Item One
2. Item Two
To nest an item, indent it with a tab or at least two spaces beneath the item above it.
1. Item One
1. Nested Level Two
2. Nested Level Two
1. Nested Level Three
2. Nested Level Three
#### Bulleted Lists
Bulleted lists work like numbered lists, but you use the asterisk character, a space, and no period.
* Item One
* Item Two
You can nest bulleted items too. We just indent our item below another item like we did with our numbered list.
* Item One
* Nested Item One
* Nested Item Two
##### Asterisk Gotchas
Because the asterisk is used for bolding, italicizing, and creating bulleted lists, it's easy to make mistakes. Check your spacing, and use a preview to ensure you are formatting text the way you intend.
*Italicized Item*
*Not Formatted
* Bulleted Item
What if you do want a bulleted item that is bold and italicized? Type an asterisk and a space. This will create the bulleted item. Then use two asterisks for the bolding and a third for the italicizing on both sides of the text.
* ***Bold Italicized Bulleted Item***
#### Mixed Lists
You can mix the two list styles too. Just use the numbers or asterisks where you want them.
1. Item One
* Nested Item
* Nested Item
2. Item Two
* Nested Item
* Nested Item
1. Deep Nested Item One
2. Deep Nested Item Two
* Super Deep Nested Item
* Super Deep Nested Item
---
Since you're a student here at Treehouse,
0:00
you probably have some interest
in learning how to code.
0:01
Formatting programming code for
a blog or forum post can be challenging.
0:04
This is one area in which Markdown shines.
0:08
In fact, GitHub uses Markdown for
project readme files.
0:11
Many other code-centric
sites also support Markdown.
0:14
Let's throw in a section heading here,
and of course, we will call it code.
0:18
One, two, code.
0:24
Now, we format code using
the backtick character.
0:27
The backtick is on the same key as
the tilde on a US English keyboard.
0:32
It is usually immediately above the Tab
key, and to the left of the number 1 key.
0:35
The backtick is also known as the grave
accent in non-technical writing.
0:40
There are two different formats for
programming code, inline and block.
0:43
Inline code appears within a sentence or
paragraph of text, and you use
0:47
a single backtick at the beginning and
another at the end of the snippet of code.
0:51
For example, you may want to add
code to an instruction like this.
0:56
To install the latest version of NPM,
1:00
you can type, and
now I'll add my backtick.
1:06
Now, Atom is clever and it knows that I
probably want a backtick at the end of
1:14
my text as well, so
it's added this second one here for me.
1:19
So I can just type between
these two backticks.
1:23
install npm@latest -g.
1:25
Now, let's check this
1:29
out in our preview.
1:34
Okay, you can see everything between
those backticks has been formatted in
1:38
a different font, and has a slightly
different colored background.
1:42
And it appears to be in
this kind of box of sorts.
1:46
So that's how we know that
this is a little bit of code,
1:51
it's been formatted specially.
1:54
For multiple lines of code,
you usually create a code block.
1:56
This allows you to show
larger chunks of code and
1:59
preserve the indentation of
the language you're trying to show.
2:02
Instead of one backtick, you use three
bacticks above and bellow the code block.
2:05
So let's type one, and again,
Atom adds the second one,
2:10
it's trying to help me out here.
2:14
I want a third, and let's just create
a simple example JavaScript function.
2:16
And we'll throw in a few lets here.
2:31
And just pretend we're going to return.
2:45
Okay, something silly and basic here.
2:51
Now I have this little example function.
2:54
All I need to do to format this properly
is, below, it add our three backticks.
2:56
Again, so now you can see, we have three
backticks below, and above, this text.
3:02
Let's check it out in our preview.
3:08
And great, again, this is a different
font from the rest of our font.
3:11
It's inside this box, which has
a slightly different background color, so
3:15
you can see that we've
formatted a block of code.
3:19
You'll get more practice formatting code
as you write technical documentation and
3:22
readme files.
3:26
But don't worry if that's
all Greek to you right now.
3:27
Again, you'll have this document to
reference if you ever need a refresher.
3:29
One quick tip here, if you add the coding
language after the first three backticks,
3:33
your code will be formatted with syntax
highlighting, that is appropriate for
3:38
that language.
3:41
So for example if I type, JavaScript,
3:42
here after these three backticks, you
3:46
can see I get all of this nice coloring
here, all this syntax highlighting.
3:51
Now this isn't supported everywhere, but
3:55
it is a feature that makes code that much
more readable on sites that do support it.
3:57
So it's nice to know about.
4:01
Let's end this section
with a horizontal rule.
4:04
Save our document, and
I will see you in the next video,
4:07
where we will talk about lengths.
4:11
You need to sign up for Treehouse in order to download course files.
Sign up