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
Why should you learn Markdown? In this video you'll get a quick answer to that question before we move into the details. I'll discuss and demonstrate both Markdown and Atom, the text editor used in this course, to write and preview Markdown documents.
Resources
- Atom
- Atom Installation Guide
- DILLINGER
- StackEdit
- John Gruber's Post About Markdown
- CSS Tricks: You Should Probably Blog in Markdown
A Note About Atom on Windows
The Windows version of Atom includes a "Welcome Guide" when you first open the program. If you like that guide you can just leave it alone. But, if you'd like to not see that screen each time you start Atom, just uncheck the "Show Welcome Guide when opening Atom" box on the bottom left of the Welcome Guide.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
You know what is great about
writing content for the web?
0:04
Formatting, right?
0:07
I'm of course joking, if you have copied
a document from Microsoft word to the web,
0:09
you've likely been surprised by the visual
chaos resulted, formatting might change,
0:14
formatting might disappear,
formatting might drive you crazy.
0:18
No one wants to spend as much time
formatting their headlines as they do
0:22
writing their content.
0:26
What about adding HTML tags
to your document manually?
0:28
No thanks.
0:31
My name is Wade, and
I'm here to introduce you to Markdown.
0:32
Mark down is one way to format your
writing for the web that is consistent,
0:36
easy to learn, and supported by many
log engines, forums, and other tools.
0:40
For those of you familiar with HTML,
0:45
mark down is a text to HTML tool
originally created by John Gruber in 2004.
0:47
HTML structures the content of a web page.
0:52
For example, in HTML, you would
surround a paragraph with opening and
0:55
closing paragraph tags.
0:59
This tells your web browser that
the text is a paragraph and
1:01
should be displayed accordingly.
1:04
The problem is that HTML
is cumbersome to write,
1:06
adding all the necessary HTML to your
document is messy and distracting.
1:09
Mark down allows you to use
a few non-alphabetic characters,
1:13
such as the asterisk and hyphen instead.
1:16
A site that supports mark down will
understand this mark down formatting and
1:19
translate your marked down text into or
render the marked down text as html.
1:24
For those of you who aren't
familiar with HTML, don't worry.
1:30
You don't need to know
any HTML to use Markdown.
1:33
I have no doubt that you can learn
Markdown using these lessons and
1:36
a little bit of practice.
1:40
Rather than giving you too much
background, let's dive in.
1:42
If you would like to read more about the
history of Markdown or why it's become so
1:45
popular, check the teacher's notes.
1:48
The short version is
that Markdown is simple,
1:50
it's relatively consistent wherever
it's used, and it's versatile.
1:53
You'll see more concrete examples
as we work through the course.
1:57
Before we start writing Markdown, let me
walk you through the tool I'll be using.
2:01
Writing Markdown isn't difficult, but
it helps a lot to see a real-time
2:05
version of your document the way
it'll look once it's on the web.
2:09
Thankfully there is a free text editor
called Atom, which will allows us to write
2:12
mark down in one window and
see a formatted version in another.
2:16
I've provided the link to the Atom
webpage in the teacher's notes.
2:20
Atom is produced by a company called
GitHub, which we'll talk more about later.
2:24
To install Atom, just download it and
2:27
install it the way you
would any other program.
2:30
For more detailed
information on installation,
2:33
you can check out the Atom documentation.
2:35
I've provided a link in
the teacher's notes.
2:37
If you'd rather not download and
install a new program,
2:40
there are some great browser-based tools
that you can use to follow along as well.
2:42
I like both Dillinger and StackEdit.
2:47
Both of these tools allow you to write,
mark down, see a preview, and
2:51
save your document.
2:55
StackEdit!
2:56
even integrates into Google Docs,
which can be handy for some folks.
2:57
I've provided links to both of
these tools in the teacher's notes.
3:01
Now, I already have Atom installed,
so let's open that.
3:05
And when Adam opens,
it gives me this tree view here.
3:09
I actually don't want that.
3:13
I think it will be a little cleaner for
us if we just hide that.
3:14
So let's go to View, Toggle Tree View.
3:18
And then I want to create a new file for
us to work on.
3:22
So I am going to go to File,
New File, and then File, Save As.
3:25
And let's call this Markdown_Basics.
3:32
Now this is a small but important thing.
3:37
If you tell Atom or any other program
that this is a markdown document,
3:41
we need to save it with
a markdown extension.
3:46
We can do that by typing .md.
3:49
I do want to save this to the desktop,
so let's save.
3:52
Now, as I mentioned earlier, we get this
3:55
preview where we can see a rendered
version of our document with Atom.
3:58
To open that preview, go to packages,
markdown preview, and toggle preview.
4:02
And now you see this second pane open up.
4:09
This is where we'll see the rendered
version of whatever we type
4:12
over in this other window.
4:15
Let's get some text in here so
you can see what I'm talking about.
4:16
So let's start by putting
a title on our document.
4:19
How about Markdown Basics,
that would make sense.
4:24
And then how about a little text here?
4:29
Okay things are looking good.
4:37
Don't worry about the details
of what I've typed yet.
4:39
We'll dissect Markdown as we go.
4:41
We started with a headline and
the beginning of a paragraph.
4:44
We're going to cover headlines and
4:49
paragraphs in more detail
in the next video.
4:51
I'll see you there.
4:54
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up