Working with Markdown in VS Code

Update: Here's an excellent interactive tutorial to supplement/replace this post.

About the Video

The video shows up some basic VS Code shortcuts while focusing specifically on getting a 'side by side' preview in VS Code where we can edit Markdown code and get a preview of our changes right next to it.

About Markdown

Markdown is a super simple language...as in super simple...not the 'it's simple b/c I'm some super senior dev' simple, but as in I could have taught my 'hunt and peck' typing dad how to use it...

However, unlike HTML (which is harder than Markdown, FYI) that will automatically be parsed and displayed in a browser, Markdown can only be rendered by a Markdown renderer or engine.

Why Learn Markdown?

I am not saying that Markdown replaces HTML.

But, in the event that I just want to quickly format some text and even work with images and alt tags (the text description that helps your image's SEO, works with screenreaders for visually impaired, or just describes your image in case something is screwed up and your image won't load), Markdown is quick and efficient. 🤓

For one thing, Markdown is the best way to quickly format posts here on dev.to.

For another thing, if you are on a service like GitHub, any public-facing repositories should have a specially named file: 'README.md' (yeah, the 'md' extension stands for Markdown). That's what folks will see when they pull up one of your projects on GitHub. Example

Other than that, there are numerous other platforms that allow you to quickly format some text using Markdown - it beats highlighting and clicking on stuff.

How Can I Learn It?

Well, if you watched the video above and you have VS Code then, here's pretty much all you need to know to get started!

# This is a Header

## This is a Smaller Header

### This is an Even Smaller Header

Here is some normal text. A paragraph, even!

_This text is in italics._

**This text is in bold.**

**_This text is in both._**

~~This text is rendered with a strikethrough.~~

- Item
- Item
- Another item

1. Item one
2. Item two
3. Item three

1. Item one
2. Item two
3. Item three 
    1. Sub-item 
    2. Sub-item
4. Item four

---

[I'm a link to a web page!](http://www.google.com)
![alt text](https://i.imgur.com/81qyN1y.jpg)`