Using Jekyll with Atom Editor
Table of Contents
{: .center-image}
{: width=“860px”, height=“390px”,}
Atom is a modern, approachable text editor.
Until the last year, I had used Sublime Text for a text editor. However, after I saw some post examining Atom, I switched to it.
It is as modern as Sublime Text, and plugins are much much more powerful, I think.
I am using Markdown (Especially, Markdown Preview), Latex, Git, and Jekyll package on Atom. Here are some default shortcuts that I want to remember.
** Note: I have to look at what is provided by kramdown syntax, because Github Pages only supports kramdown and markdown engines are slightly different from each other.
Markdown Preview Enhanced #
It shows Markdown result in real time. Not perfectly suitable to Jekyll, but still good to see it roughly.
- Toggle Preview: Shift + Control + M, or ⇧ + ⌘ + M
- Insert Image (Image Helper): Shift + Control + I, or ⇧ + ⌘ + I
This is an awesome feature, because it was hard to organize images in Markdown (except those in the web). However, Image Helper automatically copies the image to specified location (In my case, set/assets/images
) {: width=“601px”}
Latex #
With pdfview plugin, I can see a compiled result right after clicking the build shortcut.
- Build: Control + Alt + B
- Clean: Control + Alt + C
Git Plus #
Using this plugin, I no longer have to use Github desktop, manually committing and pushing modified files in a separate window.
There are too many shortcuts, it would be better to use a menu.
- Menu: Shift + Command + H
We can add, add and commit, add and commit and push, etc.
Jekyll #
At the first time, I committed and pushed to see a change, which was really burdensome. I had no choice but to install Jekyll in a local machine, and run a local server temporarily to see the change. After seeing the result, I can push it only if it is good.
- New Post: Option + Command + J It creates a default template (Jekyll format).
- Toggle Server: Shift + Option + T
It starts or stops the local server. Whenever I hit the save shortcut (⌘ + S), it automatically re-build my blog and I can see it in a web browser (localhost:3000
). {: height=“100px”}
Reference #
- Atom: https://atom.io/
- MacOS command unicode: http://tech.karbassi.com/2009/05/27/command-option-shift-symbols-in-unicode/