I just forked MacDown, a popular open-source markdown editor for Mac as I have a few ideas to improve it to better suit my needs.

I’m looking to add some features that I wasn’t able to find in any other Mac editor to help me write blog posts. This blog like many others is powered by Jekyll, a ruby application capable to parse markdown formatted text files and generate a static website.

What I’m missing from MacDown is the ability to seamlessly write and preview my posts exactly1 as they will appear on the website. I’m currently able to do it with the combination of 7 apps:

  • Atom (or any other text editor like MacDown itself) to write the post and
  • Terminal, to run the command bundle exec guard that launches
  • Guard that tells
  • Jekyll to regenerate the pages as soon as the file is modified and saved to disk, and also run
  • guard-livereload that in combination with the
  • LiveReload Safari Extension can reload the page in
  • Safari as soon as a new version is available.

What I’m aiming for is to be able to reduce the amount of apps needed to obtain the same result. With just 40 added and 4 removed lines to the MacDown source code, I made a hack to remove from the workflow Atom, Guard, guard-livereload, the LiveReload Safari Extension and Safari itself reducing the needed apps to just three2.

Every second MacDown saves to disk the currently open document so Jekyll generates the new version. MacDown also won’t show the internally rendered preview (with custom CSS), but loads the file generated by Jekyll itself from disk with the proper stylesheet,exactly as it will appear and render in production.

I’m really happy with this solution as MacDown already has mostly of the features I need like: ability to hide and show the preview with ⇧⌘H, spell checking (using macOS standard APIs), fullscreen support, scroll sync between editor and preview, custom editor fonts, resizable preview (great to test responsive websites) and quick text search within the document.

The features I’m looking to add are:

  • Proper live website preview (not a hack anymore).
  • Quick document selector.
  • Automatically infer the rendered html path from the frontmatter parameters.
  • Sidebar for file and folders navigation.
  • Link to open the rendered file on an external website.
  • Open the currently previewed file in the editor when navigating the site.
  • Highlight links in the editor and generally improve the editor view.
  • Customisable buttons to start and stop Jekyll, generate the production site and deploy3 it to the remote server.

I’d also like to support javascript and css editing with syntax highlight, but that’s really an optional feature. It would be also interesting to embed Jekyll inside the app bundle to create a self contained solution.

I still haven’t decided how to distribute the app, but surely I’ll develop those new features and release them publicly on GitHub. It will be a different direction for the MacDown app so I’m not sure if those features will make sense inside the original app, if they do I’ll try to submit some pull requests. I’ll probably try to contact the original author to discuss a solution if and when those new features will be ready. Fortunately the MIT license chosen by the author is really permissive.

  1. MacDown itself can live preview the document with a custom theme, or you can use Marked if you prefer to use a more capable external application. However using them you won’t be able to preview the page exactly as it will appear on your production website. 

  2. Full disclosure: I’ve also added Xcode as dependency because to change the file to preview I need to recompile the app, but that’s a rough hack, as I already said. 

  3. At the moment I just rsync the site folder to my remote VPS.