The Only Markdown Crash Course You Will Ever Need

learning how to write markdown is incredibly important it's used everywhere from reddits comment systems [Music] you so you can start building your dream project sooner and today I'm going to be talking all about markdown and the very first thing I want to mention I do have a markdown cheat sheet for you as you can see here it covers everything you need to know about markdown it has tons of examples super visual I even have a light version of it if you prefer to burn your eyes out that's going to be linked down in the description

for you also I have a full blog article covering this and in this blog article I have interactive examples so you can mess around with any of the code and see exactly what it renders off to the side I think this is probably the best way to look at and to learn markdown now before I start talking about markdown itself I kind of want to show you an example of how markdown is used here's the actual GitHub repo for my blog you'll notice there's a read me inside of it I haven't done anything to it

it's just the default Astro read me but you notice it has all this really nice formatting everything looks really clean and professional and if I look at the actual code for this you'll notice it's using essentially markdown all of this is written in markdown and it has this different syntax you can use to essentially format things exactly as you want so as you can see this doesn't look super pretty but as soon as we actually look at the rendered version of it it looks really good and clean and all it took was a little bit

of code to make something that looks so good so now let's actually talk about markdown on the right hand side I have that blog article that I talked about we're going to be using that quite a bit in this video and on the left hand side I have Visual Studio code open and the reason I have it open is because they actually give you a way to preview markdown so if I close out of this preview I just have a file and if you end a file in MD that stands for markdown that is going

to make this a markdown file and if you want to view a preview if you type control shift p or command shift p on a Mac you're going to get the command palette here and if you just search for markdown you notice this one called open preview to the side if you click on that it'll open up a live preview on the side so now if I change things on the right you can see that they automatically update on the right when I change them on the left so now let's make this a little bit

larger and actually talk about what markdown is essentially markdown is just a way to format text based on different characters and different ways that you write out the text to make it show up how you want generally markdown is going to be rendered out as HTML but you could take a markdown file and render it out however you want you could render it to like a PDF for example if you wanted to now unfortunately Visual Studio code the text that they actually render out is quite small inside of Mark time and you can see that

is incredibly tiny and even when I zoom in it's still really really small so what I'm going to do instead is I'm actually going to use my blog because all of my examples on my blog are interactive and if I scroll to the very bottom of this article I have essentially a full screen interactive editor that I can use anything I type on the left is going to show up on the right and the nice thing is is it's going to be a little bit larger and a little bit easier to see I even went

ahead and bumped up the font size a little bit extra just for this video so you you can really see what I'm talking about now the very first thing you need to know about markdown is just how to write normal text if we just write out some text you'll notice when I write out text on the left it just shows up exactly the same on the right and that's because by default when you type in text with nothing else around it no special characters it's going to render out essentially a paragraph inside of HTML so

if you're rendering to HTML by default this will give you a paragraph and you can just type whatever you want inside of here and it's going to render in a paragraph and if you even put a new line and start typing it's still going to put that on the exact same line it'll just treat it as if it was a space instead of an actual new line if you want to create a new paragraph you need to separate your old paragraph from your newe paragraph by one empty line and essentially inside a markdown anytime you

have elements next to each other you need to separate them by an empty line otherwise you'll run into issues potentially so pretty much anytime that you want to create multiple paragraphs or separate other elements from one another just put an empty line in between them and that's going to give you exactly what you expect now if instead of creating a brand new paragraph you wanted it to be in the same paragraph but on an actual new line the way you would do that is you would just put two spaces at the end of the previous

line so here if I just come and I just take our code and I'll just say normal text and then this here I want to be on a new line put two spaces on the previous line and now you'll notice it's on a new line but if I actually inspect this element I'm going to bring this over here you'll notice it's all with ins side of one P tag because it's rendering out inside of an actual paragraph tag the only thing here is I have a line break in between them that's what that two spaces

is doing for me luckily that's not something you're going to Super commonly need to do but it is something you can do I just really don't like the fact that it's two spaces it's kind of ugly and hard to see but that's just what they decided to do now another thing that's really common in markdown is the need for headings so for example if you want to create an H1 the largest possible heading you would put one pound symbol followed by some text as you can see we have heading and for every pound symbol you

add your headings are going to get smaller and smaller all the way up until you get to six you can see here this is six and that's the smallest heading you can have you also notice there's certain Styles being applied to this changing the color and so on you can add any CSS you want this just renders out normal HTML so you can add all your own styles to it to make it work exactly like you want one kind of interesting thing to note is all the code that you see on this page is actually

written inside of markdown every article on my blog is written entirely in markdown and if you want I'm going to be linking this blog in the description so you can go ahead and play around with this interactive editor yourself if you want so for example let's say we wanted to have a main heading we make it super large then we make sure we separate it by an empty line and let's just put some text afterwards so now we have a heading followed by a paragraph super straightforward then if we wanted a smaller heading we could

put some text after that and as you can see it's just working better and better and it's almost like giving you a perfect document outline and as you can see this is really great for things like documentation blogs comments and so on now before we get too much further into all the really cool things you can do with markdown one thing I do want to mention is that there's actually different flavors of markdown that's what they call them it's essentially different types of markdown so markdown is a specification that has specific things defined in it

like how do you create headings how do you create paragraphs but some people wanted to add on to markdown because they didn't think there was enough stuff in the base specification so there are different flavors of markdown that extend upon that one of the most common flavors of markdown is the GitHub flavored markdown sometimes called gfm and this adds a bunch of additional things there's also other flavors out there that add even more so when I'm going through this video I'm going to be mentioning when certain things are from the base spec versus the extended

spec so you know what to expect if you try to use markdown somewhere where maybe some of these extended features are or are not supported so far everything we've covered is in the base specification of markdown and should work everywhere that you use markdown another thing that's supported everywhere is if you want to bold or italicize text so let's just say we have some text and let's say we want to make this word bold here actually be bold well the way you do that is you surround it by two of the star symbol and that's

going to give you a bold piece of text it's a little bit hard to see here if it's bold but is actually bold in this text it just doesn't have much of a difference between The Bold and the normal font now another alternative to using the asterisk is you can use double underscore and that's going to give you the same effect it's going to give you bold text just like as if you used the asteris but generally I recommend using double asteris just because if you're in the middle of a word so for example I

wanted to bold just the O here if I do that with underscores it may not work as I expect it to while the double asteris here is going to work now as for italics let's say we want to do italics here what we could do is we could just use one of the asteris and now you can see the text is italicized and same thing here if we use underscores exactly the same thing as before so if you use two asteris or underscores it'll be bold one asteris or underscore is going to give you italics

and if you want the text to be both bold and italic we'll just surround it by three and now it's going to be both bold and italic and the nice thing is you can do the exact same thing with three underscores so if we come in here with three underscores you can see we get the same thing we can even mix and match you can see for example here I'm using underscores for bold and stars or asteris sorry for my italics and you can see that's working just fine generally though I would recommend just doing

one or the other and stick with it for your entire document and this again is a feature that is supported in the base version of markdown now all the other text styling specific stuff I want to talk about they're all going to be in the extended versions of markdown so for example here let's say I wanted to cross some text off so we're going to say crossed off oops there we go crossed off to do that you use the double till day and if you use two till days like this that's going to strike through

your text and sometimes it'll even work with just one till day but I would recommend not doing that because one till day actually has another meaning in specific flavors of markdown so here two till days is going to cross off any text for you now if you want to highlight some text you need to use double equal sign and that is going to highlight text for you but you will notice if I do that here it doesn't actually work that's because this is again an extended feature of markdown but this this is not supported by

github's flavor of markdown which is what I'm using to render out this markdown editor right here but luckily some versions of markdown do support HTML so I could use the mark element which is an HTML element that will give me the exact same feeling there we go if I just close that off you can now see that it is highlighting this text over here by using the mark element which is what this double equal sign essentially translates to when you actually render it out inside of the proper extended specification another specification that does not work

at all inside of github's flavor of markdown is doing super and subscripts I'm actually just going to copy this text over here real quick and paste it down and you can see if you want text to be super scripted essentially it's going to be at the top of word you use these carrot symbols just like if you were to write like x to the 2 power like this you just surround it by those carrots and that'll make it raise up or at least it's supposed to and if you want something to drop down for example

if you were to write H2 o if you surround it by a single till day it should drop that down obviously in this GitHub flavored markdown that does not work so instead what you can do is you can do this with HTML so we could use the subtag and the subtag is going to be a superscript so you can see it makes it small and puts it upward while the subtag is going to do the exact same thing but it's going to make it smaller and go down below there we go you can see that

two in H2O has been dropped down and made smaller so again unfortunately these are not part of the GitHub flavored mark down specifications but they are part of other extended specifications so depending on where you're writing your markdown you may actually have access to these or not but again A lot of times you have access to HTML which is great the final type of text styling that again is not supported in GitHub but is supported in many markdown editors is going to be creating emojis so for example you could just type in an emoji like

this and if your markdown editor supports it it'll actually render out the correct Emoji unfortunately GitHub does not support this but what you can do is you can just copy the actual emoji and paste the Emoji into your actual code and now you can see the Emoji is rendering out just fine so that's the easy workaround for this just copy the Emoji paste it into your markdown and it should render just fine now the next thing I want to talk about is what happens when you want to render code inside a markdown one of the

more common use cases for markdown is showing code and an easy way to do that is with the back tick key so what we can do is we can say this is code and if we want something to be represented as code which really just means it's monospace you can surround it by this back tick and now you can see we get this monospace code looking thing right here now if you want you can add different styles to actually make this look better but let's just say I said let Cal 10 you can see that

this is showing up in a monoface SP mono space font while if I remove that you can see it's no longer mono space and if you actually look at my blog there are instances here where I have this code being written out and you can see I add specific Styles around it to make it look a little bit better than just a plain mono space font now if you wanted to have code across multiple lines the way to do that is with triple back ticks so we can do three back ticks here here we can

do three back ticks here and then we can write whatever code we want we say like const AAL 10 let yal 8 and now you can see that we get multiple lines of code and the nice thing is it supports all your indentation so if I have like different indentation all of that is going to be preserved and it's a really great way to render out code and again you can take this even a step further most markdown will support the ability to add the language so I could type in JS here and what that'll

do is it'll actually give me syntax highlighting for JavaScript now this markdown editor right here does not support that but for all the code in my blog I actually do support that so if we scroll up here ways you can see here I have a code block that is for JavaScript code and I just labeled it as JS just like I did below and it's giving me proper syntax highlighting for all the code inside that code block so it's important to note that if you do have the ability to use the actual language for your

code I would recommend doing so because again many editors will actually render out the actual correctly formatted syntax highlighted version of that code which makes it much easier to read the code now unfortunately this ility to specify the actual language here this is part of the extended specification and even using this triple back tick is again something that is only part of the extended specification normally if you want to actually render something out as code the way that you do that is by indenting it essentially really far so if we just indent this a bunch

of times you can see now that this is actually rendered out as code I don't like the fact that this is how it is by default I much prefer the backtick method but that is technically part of the expend extended specification but but pretty much every markdown editor will recommend and use that triple back tick syntax cuz it's so much easier and better to look at now for the rest of this article I kind of want to talk about other types of elements and specifically these are elements that go a little bit beyond just rendering

out text to the screen even though this first one is not much further Beyond it and that is how do you create a link let's say I want to create a link that goes somewhere as you can see in my blog I have a bunch of different links all over the place the way you do that is you put first square brackets and inside those square brackets you put the text for your link so you can say like this is a link and then what you do is you put parentheses after that and inside the

parentheses you put a link you could make it a relative link so I could just say like SL page and that'll bring me to SL page on my actual page that I'm on or you could say that you wanted to go to somewhere like google.com and now that's going to be a link that brings you to Google and you can see if I were to right click open this in a new tab it's bringing me over to Google so that's how a link works you put what you want your link to say inside of square

brackets and inside of parentheses after that you put the actual link now one thing that's really nice is if you want to have a link that has the same text as the actual link you could do this and that'll work but if you want to make it a little bit easier what you can do is you can just wrap it inside of these angle brackets and what that'll do is it'll create a link that goes to the exact same place as this text and it will give it the text and the link the exact same

place so you can see if I open this it again brings me over to Google another thing that's really nice is that most extended markdown editors will allow you just to leave all of this off and if you just place a link anywhere inside of your markdown it'll automatically convert it to a link for you that'll bring you to whatever this URL is now again this ability to leave off all of the formatting that is only an extended markdown feature but again most editors support it now for something that's very similar to Links we have

images and images have the exact same format where we have square brackets followed by parentheses but the key is here we put an exclamation point in front of our square brackets and that tells us we're rendering out an image instead so what we can do inside the square brackets is gives our image an ALT text so we can say like Google logo and that's going to be the actual Google logo and here I actually have the Google logo downloaded inside of some assets on my website so you can see this is a relative link to

the Google logo and you can see it's rendering out over here I could make this a link to somewhere else like an unlash URL whatever this URL is it just points to an image and that's the image that's rendered and then whatever text you put in the square brackets is going to be the alt text for that image so if I were to inspect this image you can see here the alt text says Google logo which is exactly what I put in side of here now the next big block that we want to talk about

is going to be how do you write out block quotes so a lot of times you may have a quote for someone else or you want to kind of like bring attention to a specific piece of text if you put inside here an angle bracket a space and then some text you notice most often you're going to get some format where you get this left side kind of bar and then you know as long as you just keep having the uh angle bracket here you can see that you're constantly bringing down this angle bracket and

all the text that you put inside of it is going to show up off to the side you can even Nest these inside of each other if you put double angle brackets you can see this is nested and we can even go so far as to do like triple nesting and quadruple nesting as many times as you want which is really cool and really nice so you want this kind of like block quote syntax that's how you're going to do it right here another really easy thing as syntax is going to be a horizontal rule

so let's say I have some text up here I have some text down here and I want to put a line in between them well to do that there's a few different ways the first way is put three dashes that's going to give you a line three underscores is going to do the same thing and three stars is also going to do the same thing so asterisk dashes or underlines as long as you have at least three you can see I can put as many asteris as I want as long as I have at least

three it's going to give me a horizontal line and the key is to make sure you have space before and after that line just to make sure it renders out cuz sometimes if you don't leave space in between it may think that you're trying to do like Bolding or italics and it's just not going to work right so again I highly recommend that you always make sure you put a empty line in between all your elements inside a markdown now the final non-extended feature I want to talk about in markdown is how you render out

LT so let's say I have a list of items well I just put one in a period And I can say like item one and that's going to give me a list and I can say that I want item two for example and item three and I just keep going down I can put any number I want followed by a period and then whatever your on text is after that make sure I have a space in between them and that's going to give me a list of those items and the real important thing is it

doesn't matter what my numbers are these could all say one and it doesn't matter as long as there's a number followed by a period it's going to give me a list as you can see it gives me a list of 1 2 3 off to the side now if I wanted to have an un ordered list instead of putting numbers here I would essentially use either an asterisk so here you can see I have an unordered list I could use dashes instead or I could use the plus symbol and all three of these different things

the syntax are going to give me the exact same output it's going to be an unordered list and if I wanted to Nest these inside of each other I either need to use a tab key or four spaces and then I can continue with this so I'll say like item three and we'll just put some text inside of here and I can even go further if I want to do more nesting just make sure I have those four spaces and there you go I have more nesting and I can even make this one in ordered

list inside of here I'll just copy this down real quick so we have another one and you can see that it's rendering out exactly the same off to the side so list are really great because you can do unordered ordered any type of nesting you want however you want to handle your list it always going to work exactly as you expect and I can even come down here and I can continue this other list so you can see you can get all the list related stuff that you want really really easily now the last two

things I want to talk about are going to be extended markdown features specifically GitHub extended markdown features and the first one is going to be a table now these are quite complex to arrange so I'm actually going to copy over the code for a table and it's going to be much easier to see what it looks like if I just copy it over as you can see here on the right hand side I have a table with two columns and inside those columns I have some different text and it has all these different styles being

applied for me which is great now if we look over here on the left hand side for my code the very first row of my table what I have is this pipe symbol is at the very start of my row and at the very end of my row and every single row I have has to start and end with this pipe symbol and then in between each column I put a pipe symbol as well and then whatever text I want to go in the middle I just put the text so here I put column one

here I put column 2 now in between your first row and all your other rows you want to have essentially a divider and this divider tells you that this row up here is your header and the rows below it are your normal rows so here you need to put at least three dashes it doesn't matter how many dashes I put in here it's going to render out exactly the same as long as I have at least three if I have less than three things aren't going to work super well you need to make sure you

have at least three generally when people write these out they like to put enough that all of your different you know bars in between your rows line up so it's a little bit easier to read but the nice thing is is it doesn't matter if those bars line up at all you can see the output is still exactly the same and you can see it's actually updating just fine then what you do is you just go on and you continue this pattern you create a bar Follow by some text make sure you have a pipe

in between them Follow by some text and you always end your row with a pipe and you just do that all the way through again things don't have to line up you can make them line up to make it a little bit easier to read but they don't have to now the next thing that you can change is how you actually change the alignment of your different columns for example if I want this to be aligned on the right side instead of the left side I can put a colon on the right hand side of

my dashes and that's going to right align everything inside this column if I put a colon on the left side that's going to left align everything and if I put a colon on both sides that is now going to Center align everything inside my table so that's really the only type of customization you can do with tables besides the text inside them is determining what your alignment is going to be for each one of your rows so I can make this right aligned and this centered aligned now you can see we have right aligned column

one Center aligned column 2 now this Final Markdown feature is much simpler and it's how you create a checklist or like a task list what you need to do is you need to create open and close square brackets and then you put a space in between them to represent that this is an unchecked checkbox then you've put a space after that and whatever text you want and the important thing is you need to make sure at the very beginning you have a dash f by a space now you can see here we have a checkbox

with some text after it my checkbox is really small just cuz I have my font size artificially increased it would be much more you know similar to the font size if I hadn't done that now if you want to create a checked check box you do the exact same thing here but instead of having a space inside of here you just put an X doesn't matter if it's capital or lowercase it should work fine either way and then you can see I now have a check checkbox and again if it's capital or lowercase it does

not matter and that's all the markdown features you need to know again if you want to check out that cheat sheet I'm going to have linked down in the description below as well as Linked In This blog article and I'll again have this blog article linked below because as you can see I have interactive examples for every single thing that I talked about so you can go through and try out every single thing we talked about through all the interactive examples and really deep dive into how markdown works and really Master it for yourself