1 00:00:00,240 --> 00:00:01,810 Since you're a student here at Treehouse, 2 00:00:01,810 --> 00:00:04,880 you probably have some interest in learning how to code. 3 00:00:04,880 --> 00:00:08,640 Formatting programming code for a blog or forum post can be challenging. 4 00:00:08,640 --> 00:00:11,000 This is one area in which Markdown shines. 5 00:00:11,000 --> 00:00:14,280 In fact, GitHub uses Markdown for project readme files. 6 00:00:14,280 --> 00:00:17,010 Many other code-centric sites also support Markdown. 7 00:00:18,370 --> 00:00:22,870 Let's throw in a section heading here, and of course, we will call it code. 8 00:00:24,647 --> 00:00:27,283 One, two, code. 9 00:00:27,283 --> 00:00:32,120 Now, we format code using the backtick character. 10 00:00:32,120 --> 00:00:35,558 The backtick is on the same key as the tilde on a US English keyboard. 11 00:00:35,558 --> 00:00:40,332 It is usually immediately above the Tab key, and to the left of the number 1 key. 12 00:00:40,332 --> 00:00:43,960 The backtick is also known as the grave accent in non-technical writing. 13 00:00:43,960 --> 00:00:47,720 There are two different formats for programming code, inline and block. 14 00:00:47,720 --> 00:00:51,577 Inline code appears within a sentence or paragraph of text, and you use 15 00:00:51,577 --> 00:00:56,510 a single backtick at the beginning and another at the end of the snippet of code. 16 00:00:56,510 --> 00:01:00,940 For example, you may want to add code to an instruction like this. 17 00:01:00,940 --> 00:01:06,532 To install the latest version of NPM, 18 00:01:06,532 --> 00:01:13,186 you can type, and now I'll add my backtick. 19 00:01:14,881 --> 00:01:19,417 Now, Atom is clever and it knows that I probably want a backtick at the end of 20 00:01:19,417 --> 00:01:23,120 my text as well, so it's added this second one here for me. 21 00:01:23,120 --> 00:01:25,400 So I can just type between these two backticks. 22 00:01:25,400 --> 00:01:29,756 install npm@latest -g. 23 00:01:29,756 --> 00:01:34,568 Now, let's check this 24 00:01:34,568 --> 00:01:38,661 out in our preview. 25 00:01:38,661 --> 00:01:42,802 Okay, you can see everything between those backticks has been formatted in 26 00:01:42,802 --> 00:01:46,900 a different font, and has a slightly different colored background. 27 00:01:46,900 --> 00:01:51,340 And it appears to be in this kind of box of sorts. 28 00:01:51,340 --> 00:01:54,225 So that's how we know that this is a little bit of code, 29 00:01:54,225 --> 00:01:56,390 it's been formatted specially. 30 00:01:56,390 --> 00:01:59,990 For multiple lines of code, you usually create a code block. 31 00:01:59,990 --> 00:02:02,220 This allows you to show larger chunks of code and 32 00:02:02,220 --> 00:02:05,440 preserve the indentation of the language you're trying to show. 33 00:02:05,440 --> 00:02:10,890 Instead of one backtick, you use three bacticks above and bellow the code block. 34 00:02:10,890 --> 00:02:14,741 So let's type one, and again, Atom adds the second one, 35 00:02:14,741 --> 00:02:16,949 it's trying to help me out here. 36 00:02:16,949 --> 00:02:22,010 I want a third, and let's just create a simple example JavaScript function. 37 00:02:31,990 --> 00:02:34,080 And we'll throw in a few lets here. 38 00:02:45,330 --> 00:02:47,620 And just pretend we're going to return. 39 00:02:51,310 --> 00:02:54,060 Okay, something silly and basic here. 40 00:02:54,060 --> 00:02:56,540 Now I have this little example function. 41 00:02:56,540 --> 00:03:02,036 All I need to do to format this properly is, below, it add our three backticks. 42 00:03:02,036 --> 00:03:08,405 Again, so now you can see, we have three backticks below, and above, this text. 43 00:03:08,405 --> 00:03:10,040 Let's check it out in our preview. 44 00:03:11,320 --> 00:03:15,329 And great, again, this is a different font from the rest of our font. 45 00:03:15,329 --> 00:03:19,164 It's inside this box, which has a slightly different background color, so 46 00:03:19,164 --> 00:03:22,590 you can see that we've formatted a block of code. 47 00:03:22,590 --> 00:03:26,530 You'll get more practice formatting code as you write technical documentation and 48 00:03:26,530 --> 00:03:27,350 readme files. 49 00:03:27,350 --> 00:03:29,490 But don't worry if that's all Greek to you right now. 50 00:03:29,490 --> 00:03:33,440 Again, you'll have this document to reference if you ever need a refresher. 51 00:03:33,440 --> 00:03:38,050 One quick tip here, if you add the coding language after the first three backticks, 52 00:03:38,050 --> 00:03:41,570 your code will be formatted with syntax highlighting, that is appropriate for 53 00:03:41,570 --> 00:03:42,970 that language. 54 00:03:42,970 --> 00:03:46,072 So for example if I type, JavaScript, 55 00:03:46,072 --> 00:03:51,090 here after these three backticks, you 56 00:03:51,090 --> 00:03:55,460 can see I get all of this nice coloring here, all this syntax highlighting. 57 00:03:55,460 --> 00:03:57,590 Now this isn't supported everywhere, but 58 00:03:57,590 --> 00:04:01,590 it is a feature that makes code that much more readable on sites that do support it. 59 00:04:01,590 --> 00:04:04,603 So it's nice to know about. 60 00:04:04,603 --> 00:04:07,940 Let's end this section with a horizontal rule. 61 00:04:07,940 --> 00:04:11,283 Save our document, and I will see you in the next video, 62 00:04:11,283 --> 00:04:13,360 where we will talk about lengths.