Use Atom as your Markdown editor

Feb 15, 2017

I’ve tested all the popular text/markdown editors on Valentine’s Day.

Including:

As a front-end developer who often write technical articles on github, I found that the best writing editor for me is Atom.

Installation
Packages & Theme
Hack on the init script
Blog settings
Using Atom

I have to declare my demands at first:

Most of my articles contains code showcases, so I need good code highlight supportings.
I need to publish my articles to my blog on Github, it would save lots of my time if I could push git commits right in the editor.
I’m not an English native speaker, so I need some auto completion or dictionary plugins for help.
I’m using jekyll powering my blog, it would be better if the editor support post template.

If you are a developer like me, the following guide may works for you too.

Installation

Download from here: Atom

Download the installer accroding to your platform. Atom supports all the operating systems including Windows/OSX/Linux.

2017-02-15_13-43-01

Packages & Theme

You can find all the packages I’m using at my Atom personal page.

And I’m using Material UI theme.

Hack on the init script

You can find your init script here:

Add these code to your file:

atom.workspace.observeTextEditors (editor) ->
  defaultGrammarScopeName =  "source.gfm"
  unless editor.getPath()
    grammar = atom.grammars.grammarForScopeName defaultGrammarScopeName
    if grammar
      editor.setGrammar grammar
    else
      disposable = atom.grammars.onDidAddGrammar (grammar) ->
        if grammar.scopeName == defaultGrammarScopeName
          editor.setGrammar grammar
          disposable.dispose()

{TextEditor} = require 'atom'

atom.workspace.observeActivePaneItem (activePaneItem) ->
  if activePaneItem instanceof TextEditor
    editor = activePaneItem

    # https://github.com/atom/markdown-preview/blob/master/lib/main.coffee#L63
    # grammars = atom.config.get('markdown-preview.grammars') ? []
    grammars = ['source.gfm', 'text.md'] # markdown-preview's defaults include text files...
    return unless editor.getGrammar().scopeName in grammars

    # https://github.com/atom/markdown-preview/blob/master/lib/main.coffee#L68
    uri = "markdown-preview-enhanced://editor/#{editor.id}"
    previewPane = atom.workspace.paneForURI(uri)
    if previewPane?
      previewPane.activateItemForURI(uri)
    else
      activeView = atom.views.getView(editor)
      atom.commands.dispatch(activeView, 'markdown-preview-enhanced:toggle')
    editor.onDidDestroy ->
      for pane in atom.workspace.getPanes()
        for item in pane.items when item.getURI() is uri
          pane.destroyItem(item)
          break

This init script helps you to set the default language to markdown. And open the markdown preview automatically when you click on an existing markdown file.