Markdown Flavors and the Treehouse Forum8:00 with Wade Christensen
Markdown actually exists in a few variations or *flavors*. We'll talk about what that means and look at a few Markdown flavors, which you can explore in more detail if you're interested. Also, did you know that the Treehouse Community Forum supports Markdown? I'll walk you through a quick example post on the Community Forum to provide a preview of what you can do to write better forum posts.
- Babelmark 2
- CSS Tricks: Choosing the Right Markdown Parser
- GitHub: Mastering Markdown
- Treehouse: Mastering Markdown
Completed cheatsheet code for this course
You can also download this from the Downloads tab on this page.
Markdown provides a syntax for links that’s easy to remember. First, type the text you want to appear on the page in square brackets, then add the link in parenthesis. If I want to link to Treehouse, I would type
You also have the option to provide a title, which appears when you hover the mouse cursor over the link. Just type a space after the url and close the label in quotes. Both the url and the title should be inside the parenthesis.
What if you want to link to a reference at the bottom of a section or page like a footnote? Start with the text in square brackets, but don’t add the parenthesis. Instead, add a number to reference in another set of square brackets.
Now at another place in the document, add the reference number in square brackets and follow it with a colon, a space, and the link url. You can add an optional title with a space and quotes to this type of link too. Reference links don’t require parenthesis.
: https://teamtreehouse.com "Treehouse Reference Link"
Type a label for the image in square brackets. On the Web we call this alt text, because it will be displayed as an alternate if the image cannot be shown for any reason. I have an image of kittens, so I’ll write, “Kittens” in square brackets and follow that with the url for the image in parenthesis.
That creates a link for the kitten image, but I want to display the image. All I have to do is add an exclamation mark in front of the square brackets.
What if I want the image to link to something too? Just add square brackets around your whole image code. At the end of the new square brackets, put the link url in parenthesis.
Images can have titles like links too. You add them the same way. After the image url, add a space and put the title in quotes.
That's it for this document. You now have a handy Markdown reference. Feel free to explore more information about Markdown and its many flavors, but this is a great start. The more you use Markdown the more natural it will feel.
Thanks for learning Markdown with Treehouse
We have been using standard Markdown to create our cheat sheet, but 0:00 there are actually many variations of markdown. 0:04 In programming, you'll hear the word flavor somewhat often. 0:07 As you can imagine, people see ways to enhance a technology by adding some 0:10 features or improvements thereby creating a new flavor of that technology. 0:14 This means that your Markdown may not work exactly the same as everywhere, 0:19 and some tools will support features from one flavor but not others. 0:23 You may be wondering, what exactly are we doing when we write Markdown? 0:27 What are all these tools and flavors? 0:30 Can we write Markdown anywhere? 0:33 Unfortunately, no we can't. 0:35 A text editor or website must support Markdown. 0:37 This means that behind the scenes, there must be a parser, which is 0:40 a tool that does the work of translating our Markdown formatting into HTML tags. 0:44 For example, when we use Adam, 0:49 there's a parser that uses GitHub-flavored Markdown to render a preview of our text. 0:50 There are many of these parsers and therefore many flavors of Markdown. 0:55 Each website or text editor that allows you to write Markdown 1:00 must have one of these parsers installed. 1:03 If you stick to vanilla Markdown, you'll be pretty safe. 1:06 There are several websites you can use to test your Markdown, 1:09 and see if all the features you're using are supported. 1:12 I've linked to those sites and 1:15 some additional resources in the teacher's notes. 1:16 Lastly, our community forum here at Treehouse supports Markdown. 1:19 So, I'm going to show you how to create a forum post using Markdown. 1:22 I highly encourage you to use the Treehouse forum when you have questions 1:26 about Markdown, or any other technology. 1:29 Formatting your questions properly with Markdown is a huge help to those trying to 1:32 assist you. 1:36 So let's try out some Markdown, and format a forum post. 1:37 When discussing different flavors of Markdown, 1:41 I wanted to show you this tool specifically. 1:44 This is Babelmark. 1:46 Now what I've down is I've just pasted in some Markdown headings. 1:47 This is nothing particularly complex, but 1:51 what's cool about this tool is that you can then see 1:54 how those headings will be treated by all of these different flavors of Markdown. 1:57 And this is really cool. 2:02 So you can get this code that would be actually output by the parser, or 2:03 you can see a preview. 2:07 So this is what it would look like if this flavor of mark-down took care of this. 2:09 So this is a really handy utility. 2:15 I don't want you to worry about this too much. 2:18 Don't feel like you need to paste every one of your Markdown documents in here and 2:19 check it first, that's totally unnecessary. 2:24 But this is a really cool tool and something that you should know exists. 2:26 In addition to giving us GitHub-flavored Markdown, 2:30 GitHub also provides some nice cheat sheets of their own. 2:33 Here you can see GitHub's tutorial which includes information 2:36 about some of the amazing features available in GitHub flavored markdown. 2:39 These include task lists and tables, all kinds of cool stuff. 2:43 I have a link to this in the teacher's notes as well. 2:47 I have also linked to a video here on Treehouse covering 2:49 GitHub-flavored Markdown. 2:53 Definitively check it out. 2:54 There's also this great interactive tutorial on the CommonMark website. 2:56 CommonMark provides both this cheat sheet, but also this little ten minute 3:01 mark down tutorial, where you can go through and do different exercises. 3:06 It's really cool, definitely check it out. 3:09 I used their reference to see what was new with CommonMark, 3:12 and what was going on in the Markdown community before teaching this course, 3:16 so it's a pretty handy resource. 3:20 And then last but not least, I wanted to show you the Treehouse community forum. 3:21 So if I were to ask a question. 3:27 And let's call this Example Question. 3:29 Next Step. 3:36 Next Step. 3:38 Now I have this field here, where I can add my question. 3:41 What's great is that this field supports Markdown, so 3:45 you can add all of the Markdown syntax that you've learned in this course 3:48 to better format your questions. 3:52 So, let's say, I wanted to ask a question about Python. 3:54 I might say, hey, I can't figure 3:59 out what's wrong with my Python code. 4:03 And then down here, maybe I could add a list of things that I've tried. 4:08 So I could say, tried this first. 4:14 Then l tried this. 4:21 And then maybe further down l can say, 4:25 I've looked around on the web l found this other 4:30 forum post but I didn't understand it. 4:36 And then I could link to that forum post, 4:41 so I could say Treehouse Community 4:47 And then you might have more of a link for the actual post, but 5:01 this is just an example, so I'll close that off. 5:05 And then the most important thing, it's really hard to answer a question about any 5:09 specific code without actually seeing that code, 5:13 and that's where we can throw in our back ticks. 5:15 So, one, two, three, and 5:18 we support syntax highlighting by language here, so you could type Python. 5:21 And then let's say, we'll just make something up here. 5:26 Okay, so there's my silly little example, and 5:51 then I might close that off with my back ticks as well. 5:53 And so let's say that this is a bunch of formatting for my forum post. 5:57 You can see those little eye over here. 6:02 We hover over it says Preview. 6:04 If I click on that, I get a preview. 6:05 And you can see that I've got the syntax highlighting, it's nice. 6:08 I've got a link here. 6:12 I've got my list. 6:14 So this can be really helpful. 6:15 The better able you are to format your question and really display what you're 6:17 trying to get at, the better someone can answer you and really help you out. 6:22 Now, I can continue editing this and 6:26 you can see that the eye icon turned into a pencil and the word is now composed. 6:28 So, I'll click on that and I can edit some more stuff. 6:33 I could say, this is code from 6:36 an imported file and then I might have some more code here. 6:41 Let's just copy this. 6:47 More back ticks and, hey, this is Python. 6:55 Again, let's preview that. 6:59 So now I have got two code blocks. 7:02 So you can see, you can get as detailed as you need. 7:03 The important part here is not that none of this really makes any sense, 7:07 I'm just trying to show you an example so that you get the idea that, hey, 7:10 all of this Markdown that you've used, 7:15 you can use it in the future going forward to ask better forum questions. 7:17 So I hope this helps you. 7:21 I'm not, of course, going to actually post this. 7:23 I will just cancel here. 7:26 But I do hope it's helpful in all of your future forum use. 7:28 Thank you for joining me in this course. 7:32 I hope you've started to internalize Markdown. 7:34 I enjoy using Markdown when I write because it doesn't distract me. 7:37 My hands stay on the keyboard, and I focus. 7:40 If you've been following along, 7:43 you should have your own cheat sheet, if not no worries. 7:45 You can download the completed cheat sheet I created from the teacher's notes. 7:48 I've linked to the tools we looked at in this video as well. 7:52 And there's some additional reading if you wanna dig deeper. 7:54 Keep on coding and I'll see you next time. 7:58
You need to sign up for Treehouse in order to download course files.Sign up