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.