Markdown Crash Course

[Music] hey guys this is gonna be a crash course on markdown and I know that if you've been a web developer for a while you probably already know markdown or at least some of the syntax if you use github and you commit readme files and so on but I wanted to make a crash course on it because it's something that everyone should know and you can literally learn the syntax in less than an hour so this is gonna be for beginners as well as for people that have used markdown but may not know the entire

syntax and what you can do with it so we'll talk about what it is what it's used for and then we'll jump into vs code with the markdown preview extension and we'll create kind of a cheat sheet that you can use for future reference all right so let's get into it coding dojo is a programming school that turns beginners into developers in only 14 weeks over 90% of their grads land jobs within three months of graduating often making over 70 K per year to learn more visit coding dojo com or click the link in the

description below so what exactly is markdown it's a lightweight markup language with a plain text formatting syntax so like HTML it's a markup language but we don't use tags or anything like that it's a very readable syntax and it can be converted into HTML XHTML as well as other formats and its main purpose is readability the creators of markdown basically one of the documents to look like as is plain text documents without any HTML tags or anything like that so kind of what you see is what you get you put a space in the document

it reflects a space no need for a br tag and so on markdown kind of keeps that positioning in place alright then you can use certain characters or punctuation marks to format stuff to make it bold or italic you can create lists things like that and we're gonna take a look at all that stuff in a little bit so what is markdown actually used for it's widely used for readme files and documentation markdown is heavily used by github when you go to a repository page you see all that documentation that's underneath the the the application

file structure that's usually written in markdown in fact all you have to do when pushing your code to a repository is create a file called readme dot MD markdown uses MD as a file extension it will automatically display on the in the github repository okay it's also used for things like forum post blog post things like that pieces of content on websites and applications it's also used quite a bit with static site generators that's one of the reasons that I'm doing this crash course one of the reasons I got the idea for it is because

I'm looking into Gatsby right now which is a static site generator that uses react but you can also create blog posts using a few Gatsby plugins and markdown files okay so I was working on that and that gave me the idea to kind of do a little crash course on markdown itself so here's some of the basic types of formatting that you can do with core markdown so headings lists emphasis like bold and italic links you can create links you can create blocks of code you can have images displayed block quotes horizontal rules things like

that now there's also basically extensions to mark down like with PHP markdown there's an extension you can use github itself has its own special flavor of markdown where you can add things like tables task lists things like that we're gonna take a look at some of that stuff as well so it's gonna be kind of an extended tutorial now as far as writing markdown you can write it in any text editor but it's really nice to have something that gives you like a preview of what its gonna look like so what I use is vyas

code for visual studio code and I use a an extension called auto open markdown previewer and that's that's what I use but you can also use other extensions for v/s code and then of course other text editors like atom sublime text they also have markdown extensions or plugins you can use that's what I would recommend but then you also have editors that were actually created for markdown so mark pad haru pad markdown pad to type aura these were all created for writing markdown and i can't really say much about them I haven't used them I

know some are free some aren't some have free versions and some have premium versions but in all honesty I would just suggest using a text editor with an extension but it's up to you okay but we'll be using vyas code with with one of the extensions all right so there's not really much more to to say about what markdown is it's pretty simple it's just a very lightweight markup language so let's get into it and let's create a cheat sheet so that you guys can have it for future reference and you can use it to

whatever create readme files or create blog posts things like that alright guys so what I have here is Visual Studio code with an extension called Auto mark auto open markdown preview so that's what I would suggest for writing markdown but of course if you want to use another extension or another text editor with another extension or even something that is for markdown like Mark pad or whatever it's absolutely fine it doesn't really matter but I really like this because it shows the preview on the side and it's it's it's you don't have to save it

or anything it's really cool so we're gonna start off with with headings okay so I'm gonna put some comments in here just showing what we're doing we can use HTML style comments so for headings we use the number sign or pound sign hashtag whatever you want to call this and if we just do one that's going to give us basically an h1 it's going to give us the largest heading okay if we want to do in h2 we can do two whoops close this up here hate these notifications if we wanted to do three say

heading 3 and four five and six okay so there's our headings so very very easy next thing we're gonna look at is some emphasis let's look at it-- Alex so italics we can you we can wrap whatever we want to italicize let's say this text is italic so let's say we want to wrap this text and I make that italics so we would use either asterisks single asterisks like that so now you can see over here in the preview and on the side as well that you can see it's also italic or we can use

underscores single underscores so we can go like that and that will also be italic all right now if we wanted to do strong if we wanted some strong text we could use double asterisks so that'll make it strong we can also use double underscore and that will make it strong as well all right so next thing we'll look at is strikethrough so for strikethrough we can use the tilde or double yeah double tilde so we'll say this text double tilde is strikethrough okay let's do horizontal rule so you can use this is like a separator

and for that we use triple what are these - x' or we can use triple underscores and it gives us these lines so you can use these to kind of separate your your content now one thing I want to mention is that if we actually wanted to display like let's say we wanted to show the asterisks over here next to this text we can escape these characters with a backslash so if I go like that now you can see this is no longer italicized and it's actually showing the the the asterisks so it works like

just like in JavaScript if you if you wanted to escape a special character or something like that all right so let's see continuing continuing on let's look at block quotes so for a block quote we use the greater than say this is a quote and it just gives us it gives you like background and gives you this blue line on the side here this border okay links so for a link what we do is the text we want to use for the link goes in brackets and then for the link that will go in parenthesis

okay so now that's a link and if I wanted to have a title where if I hover over it it'll show the title what I could do is copy this and go to the end here still within the parentheses we'll put a space and then some quotes and whatever we want to use as the title so now if I hover over this now you'll see the title will be displayed so that's links let's move on to unordered lists and I don't list are easy it's just one asterisk so for each item so let's do item

one we'll say item two has to be a space there item three and so on and then if we wanted to have nested items we could just tab over put another asterisk and say nested item one nested item two alright and you can see the bullet is is is different as well so if we wanted to do an ordered list we could do one dot will say item one and again one dot item two item three and over here you'll see that it's actually incrementing numbers so one two three and so on so very easy

to create lists now if we wanted to create an inline code block we could use one of these vac ticks could use back ticks so for instance if I wanted to display like P tags we could go like that alright if we wanted to do let's see an image we could do it's similar to it's actually very similar to Lynx except we want to put an exclamation in front of our brackets and let's say markdown logo and then in parentheses you want to put the location of the image which I'm going to use HTTP and

markdown - here dot-com /img /a con 256 dot PNG and that will actually display the image in the file okay so that's that's the basics of core markdown now github has kind of its own flavor of markdown so we're gonna look at some of that stuff so we'll say github markdown so four code blocks and if you guys have created repositories with with documentation you've probably done this before but we can use triple backticks so if we go like that and you might want to do like you know show them what they have to do

to set up so NPM install NPM start you might see something like that and a lot of times you might see like bash right here or bash because you can specify syntax specific code blocks so let's say we want to do something in JavaScript we could do JavaScript and then in here let's do we'll just say function ad and we'll say num1 num2 in return num1 plus num2 and it gives us special highlighting for Java Script which is nice if we wanted to do let's say Python we could specify Python and of course this is

not Python syntax we would do def so we wanted to find a function we'll do ad and we don't want our curly braces we want to put a colon here get rid of that get rid of that and now we have our Python syntax all right so that's code blocks we can also do tables and this I'm actually gonna just paste in because it take me too long to type and you'll see that this preview actually translates or converts it into this nice-looking table which is cool another thing we can do is task lists which

should show up is like check boxes on github if you're using this as a as a readme file and and I'll show you that I'll actually push this to a repository but for task lists we would just do just like an unordered list and then we put some brackets and an X and say task one so that would be like a task that's complete and we'll do another one and then let's do one that's not complete like that so that's a task list all right so I think that's that's about it what I'm gonna do

now is actually push this to github to see what it looks like on a and a readme file so it's called sample dot MD I have it on my desktop what I'm gonna do let me just delete that I'm gonna create a new folder called test you guys can do it can follow along if you want and then I'm gonna copy that whole file we just created and put it in here but I'm gonna rename it to read me all caps dot MD and then let's see I'll just grab something I don't know there's nothing

in there we just grabbed this app.js file it doesn't really matter just something and we'll put it in here and then I'm gonna open this folder up in get bash and let's initialize a git repository with to get an it and I have I have an entire get tutorial get github tutorial it's about 40 50 minutes long if you want to check that out but we're going to do add dot which means add it all to the staging area then we're gonna commit it I'm gonna add the a.m. flag and then just a comment I'll

just say test so now we need to github repository so we'll go and head over to github okay and I'm just gonna go new repository I'll just call it test I'm gonna delete it right away and then I'm gonna grab the remote command right here get remote or on that and then we want to push to the remote repository to the master branch I don't have my SSH key set up on this machine okay so that should push and let's reload and there we go so there is all of our markdown so you can see

a little the code blocks we did there's the table and the task list which actually has checkboxes okay so pretty cool now if you wanted to see the HTML version of what we did we could grab all this and there's actually converters online so if we say markdown to HTML and paste that in and it gets converted and you can see all the HTML with all the tags alright so hopefully this gave you a good idea of what markdown is what it's used for and of course the syntax which is very very easy it's it's

really easy to remember you may not remember it right away you might have to look at the cheat sheet a couple times but you'll get it pretty quick so I'll put a link in the description to that cheat sheet so you guys can get it and you can use it in the future if you want but that's gonna be it thanks for watching guys and I'll see you in the next video coding dojo is a programming school that turns beginners into developers and only 14 weeks if you're serious about landing a career in tech but

lack the formal education or background coding dojo will get you there and no time with over 3,000 graduates to date over 90% of their grads land jobs within three months of graduating often making over seventy K per year at tech firms of all sizes from companies like Google to local startups to learn more visit coding dojo com or click the link in the description below