Writing Beautiful Markdown in Sublime Text

X @urre
I've switched to VS Code now. But this is still a great way of writing Markdown in Sublime Text :)

From time to time i like to try new ways of keeping notes. New Mac apps, web apps and other tools for writing and keeping notes/writings/blog posts in sync. There are some great apps out there, like iA Writer, Typora, Mou, Macdown.

I’ve tried a shear number of great tools for this, but on my Mac I always came back to the same thing: I want to use features from my text editor. After spending a fair amount of hours in a text editor on a daily basis (I use Sublime Text) you miss all those power tools I have learned to master. If you work in a text editor all the time, why not write your blog posts, articles and notes in there aswell? It will not only speed things up, you’ll write more often and enjoy it more!

Packages

To begin with, I use two packages for my Markdown Setup.

Markdown Editing

Support for writing GFM Markdown, Multi markdown and more.

Sublime Text Markdown Preview

Some like apps that display the preview in a split window. For me i like writing in one place and previewing in the browser. This plugin enables that, and the GFM Github preview is really neat!

Look and feel

In Sublime Text you can have different settings and look-and-feel for different languages and syntaxes.

Preferences -> Settings more -> Syntax specific - User

Here you can change a lot of stuff like settings for caret, color scheme, font settings, indendation, margin etc. This is my current setup.

{
    "auto_indent": false,
    "caret_style": "smooth",
    "color_scheme": "Packages/kermit.tmTheme",
    "detect_indentation": false,
    "draw_centered": true,
    "extensions":
    [
        "hidden"
    ],
    "fade_fold_buttons": false,
    "fold_buttons": false,
    "font_face": "Nitti WM2 Light",
    "font_options":
    [
        "subpixel_antialias"
    ],
    "font_size": 20,
    "gutter": true,
    "highlight_line": false,
    "indent_subsequent_lines": true,
    "indent_to_bracket": false,
    "line_numbers": false,
    "line_padding_bottom": 2,
    "line_padding_top": 3,
    "margin": 100,
    "overlay_scroll_bars": "system",
    "smart_indent": false,
    "spell_check": false,
    "tab_size": 4,
    "translate_tabs_to_spaces": true,
    "trim_automatic_white_space": false,
    "use_tab_stops": false,
    "wide_caret": true,
    "word_separators": "./\\()\"'-:,.;<>~!@#$%^&*|+=[]{}`~?",
    "word_wrap": "true",
    "wrap_width": 70,
    "show_minimap": false
}

Kermit - A Markdown theme

As you can see above, I’m using a theme called Kermit. I’ve created that myself and it’s heavily inspired from iA Writer. It has great typography (Using Nitti), acentered column and a nice smooth cursor.

Get it here for free!

Writing

Command Palette goodies

Markdown Editing comes with some handy command palette shortcuts, like inserting image, Save to html, Markdown lint, Markdown cheat sheet and more.

And of course, you have all the benefits of having all of Sublimes tooling at your finger tips!

Syncing

I’m using Dropbox. Create a project file writings.sublime-project in the same folder as you keep your markdown files. Mine looks like this.

{
    "folders":
    [
        {
            "path": "/Users/urbansanden/Dropbox/Writing"
        }
    ]
}

On my phone

I use the iA Writer iOS app. A no-brainer.