Take notes in Atom like a pro

atom logo

Taking notes constantly is a good think that allows you to don’t forget important ideas, examples, and another useful information. In order to do that, you need a good tool with useful shortcuts to save some time when you need, for example, to paste an image in your notes and write a good foot note below it. So, let’s talk about Atom editor and Markdown language, and how they have helped me to take notes quickly and consequently to keep my ideas and useful information about my job well located.

Atom is an open source text editor developed by GitHub team using Electron framework, which allows developers to write cross-platform desktop apps writing only HTML, CSS and Javascript. What I like the most of Atom is the great number of open source packages that you can find and install in a few seconds using its package manager. Also, although it is not as fast as Sublime Text, for example, it works like a charm, supports themes (I use One Light), and it’s very configurable.

Markdown is a markup language which allows us to write plain text that can be interpreted later as HTML, so we don’t need, for example, to write a entire <h1> tag with its content to add a header in our text. In that case, we only have to write this:

# Header

What about links? Well, that it’s pretty straightforward too:

[Example text](http://www.example.com)

In short, Markdown has a sintaxis that allows us to write rich text fast using plain text, so it can be interpreted later. To get started, I recommend you to take a look at this useful cheatsheet: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

So, now that you know Atom and Markdown (if you didn’t before), it’s time to install Atom and the packages that we need to start taking good notes:atom notes markdown packages

  • Markdown-Writer for Atom: This package adds some nice Markdown shortcuts to Atom that you will need to write notes even more faster. Once you install it, you need to execute the action “Markdown Writer: Create default keymaps” (use ⌘cmd + shift + p in mac or ctrl + shift + p in Windows/Linux and write it, then press enter to execute). For example, with this package you can use ⌘cmd+B in Mac (or ctrl+B in Windows and Linux) to format selected text as bold.
  • Markdown Preview Plus (MPP): With this package you can see your changes rendered instantly. Really useful to see your text properly formatted when you need to read your notes.
  • Markclip: This is my favourite. When I started to take notes using Atom, I wondered why the hell I couldn’t paste my images quickly in my notes like others apps do, and then I find this nice package. Whenever I paste an image with ⌘cmd + V, it generates a copy of it with its md5 as name, saves it to a directory with the same name of your markdown file and then adds a line to insert it. Simple but very useful, at least for me :).

And that’s all you need. The next step is to create a new .md file in Atom and start to take notes. This is a short example:

atom notes markdown

To open the markdown preview, you can use ⌘cmd+shift+p (or ctrl+shift+p) shortcut and write “markdown preview toggle” and press enter. With that shortcut you can find all atom actions quickly, so I recommend you to get use to it because it really saves time and it’s very useful because it also shows you the shortcuts that you can use for that actions. Remember that thanks to markdown-writer package you can use the standard shortcuts to format text like you can do in another text editor (⌘cmd + b for bold, ⌘cmd + i for italic…).

This is my first post in English and maybe the start of a series of post about programming and useful tips that have helped me to improve a bit as a developer since I started to work as a Java programmer (full stack using GWT and JEE) last year. It’s been only a year, but I think I have learned a lot and that’s a good thing for me in order to keep motivated. So I hope that this article have been useful to you and that these tips will help you to improve your productivity like they did in my case.