Markdown and the Atom Text Editor4:55 with Wade Christensen
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.
- Atom Installation Guide
- 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.
[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 up