Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:28Length:1.7 hours
Speedy workflows with atom.io
  • Overview
  • Transcript

6.4 Markdown Preview

The package we're going to learn about in this lesson, doesn't need to be installed and that's because it's actually native to Atom. This package is called the markdown preview. If we open up our settings and we search markdown, the search results shows the markdown preview package which was created by Atom and that comes just with the default installation. So let's create a new markdown file. I am going to open up the terminal so we can do quick file creating, and we will say touch read me dot md. When you search for read me in the fuzzy finder, nothing shows up, and that's because we need to open up the editor again, in order to get the file indexed in the search. This will hopefully be something that gets fixed in the package and were going to close out of the terminal and close out of index.html and we're just going to open up the read me. For those of you who are unfamiliar with markdown, it's a syntax we can use to provide formatting to our text. This is just like using HTML markup, but just with a different syntax. All of the read me files on GitHub use this markdown syntax. One pound sign will give us the largest heading, so we can type the name of our application here. Ideally we want to see what our markdown is formatting out to as we type it. And to do this we can use markdown preview. We'll first find it in the command pilot by typing markdown preview and we see that markdown preview can be toggled with Ctrl+shift+M and for now, we'll just hit enter. The mark down preview opens up in a pane to the right and we can see that we have the largest header when we were typing Command Speedy. Below Speedy, if we typed three pound signs and then we can type a description. Arguably, one of the best features within mark down, is the code syntax that we can use. We have to use three ticks, and then provide the language that we're writing in. However, Atom comes with snippets for markdown. So we actually can type code, and then hit tab, and we get these three snippets that appear for us. If we want to create a code snippet for JavaScript, we just write JavaScript right there, and now we can write our JavaScript code. Whenever we need to create documentation or remy files, using markdown is a really good choice. We saw that we had the code snippet available, but how do we know all the snippets that come with markdown? Well, there's a couple files we could check or we can hit Cmd+Shift+P and we can search for available snippets, and to check available snippets we actually can hit Option+Shift+S. So now we'll hit Option+Shift+S, and here is a list of all the snippets that we can use within markdown. Legal will get us a copyright notice, Lorem will give us some filler text and then we also can even use table to get a table. So let's check some of these out. We'll type legal and we get our copyright 2014. And then above here we can type some lorem text, and we get a nice paragraph of lorem ipsum. And then below here if we wanna use a table, we have automatically a markdown table generated out for us. One thing you might notice too when we generated out the Lorem ipsum, is that we even get spell check inside of here because spelling is usually something that's a bit of an issue when writing technical documentation. So remember, whenever you need to be creating markdown files, open up the markdown preview in a pane to the right, will allow us to automatically see the updates from our changes. We also can use things such as the code tab to get code syntax highlighting. We can generate filler text using the lorem snippet. We also get spellcheck, using tables to generate tables, and using legal to generate out copyright footers. So when writing any documenting in the future, using markdown is a really solid choice.

Back to the top