Writing with sublime text 3

Usually I’d prefer writing in emacs using org-mode due to its great power. But lately after finding emacs loads much slower ¹ at Windows compared at Linux, the elegant text editor, sublime text 3,² just stands out with its incredibly fast opening speed. In this post, packages and configuration are presented, which makes writing in markdown easier and smoother.

Packages

MarkdownEditing

This package brings a lot of features to make sublime text a perfect markdown editor. Its stock color theme highlights syntax of several languages. Editing area is centered and truncated to a reasonable width, providing an elegant and clean interface, also enabling one to concentrate on writing itself.

When it comes to writing, it provides many key bindings to insert markup commands, e.g. italic, bold text, block quote etc. This part will be covered later, as another package would also help.

This package supports three types of markdown syntaxes: markdown, Github favored markdown(GFM) and MultiMarkdown(MMD). Each of they possesses distinctive markup syntax, though the latter two are developed based the first. For more information, visit their documentation websites:

• Markdown
• GFM
• MMD

From my personal preferences, I usually go for GFM because of its rich features and wide support.

Github Markdown Snippets

This package provides several useful snippets to trigger GFM commands. For example, I just type bq and then press tab, ending up with

> Put a nice, beautiful
> quote here...

as hints to insert a block quote. I find it more useful when it comes to block code as only pre plus tab are needed to generate equivalence of six grave accent symbols. All available commands are listed in its documentation.

MarkdownPreview and LiveReload

One great feature³ of many markdown editor is so-called WYSIWYG (what you see is what you get). That is, one writes and sees the output simultaneously. To turn sublime text into such an editor, these two packages are required. MarkdownPreview would interpret files into HTML pages to present rich texts while LiveReload refreshes temporary output pages after changes are saved. Besides, MarkdownPreview has some other features: converting markdown to HTML and saving it as another file or copying it to clipboard. It supports original markdown and GFM; provides three types of templates for preview: its built-in python-markdown,⁴ Github and GitLab. If necessary, one could specify an external CSS file as custom template. In that case one should notice the required syntax.

As mentioned above, my most used markup style is GFM and live-preview is only for a peek to see if everything is fine. Therefore, in its user setting I specify github as parser to skip popping request; also allocate ctrl+shift+m for generation of preview instantly.

Key bindings

As the table lists, several shortcuts are available to make inserting markdown commands faster. Since I prefer to use emacs-like key binding ⁵ to navigate through lines and files, there are a couple of ones having conflicts with them. For example alt+b is set as moving the cursor back one word while in MarkdownEditing as triggering bold texts. As follows are some essential shortcuts work fine and are used quite frequently:

• alt+shift+6: Inserting a footnote.
• ctrl+alt+v: Inserting a newline link. If texts selected, they’ll be put inside square brackets; if any URL in clipboard, it’ll be included in parenthesis.
• alt+i: making texts italic.

Other common markdown commands like bold text, strike through, block quote etc. are accessed by triggers provided by Github Markdown Snippets.

Snippets

For posts in this blog, I use Jekyll to interpret markdown files into HTML pages. A drawback of markdown is its lack of formatting inserted images, for sometimes one may wish to center images or need to caption them. Referring to this article I made the following snippet to insert an image with caption and hover text (as default they are set the same).

<snippet>
    <description>insert an image in HTML syntax</description>
    <content>
        <![CDATA[<figure><img src="${2:image link}" title="${1:image caption}">
         <figcaption>${1:image caption}</figcaption>
</figure>]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>iimg</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>text.HTML.markdown, text.HTML.markdown.multimarkdown</scope>
</snippet>

When writing, one just types iimg (the trigger), then tab and iimg would be replaced by

<figure><img src="image link" title="image caption">
         <figcaption>image caption</figcaption>
</figure>