Interpretations of a Bottom Dweller

Sublime Text 3: Markdown and Live Reload

August 17, 2013

markdown, st3, sublime text, web development

Recently I have started using the Markdown syntax for all of my notes, to-do lists, etc. due to the readability it offers (not to mention I have been using a similar syntax of my own for years). Obviously one of the biggest perks to using Markdown is that you can quickly generate an HTML document from it for a more polished presentation.

I have also been using Sublime Text for well over a year now, and I absolutely love it. I consider it to be a Vim/Notepad++ hybrid, bringing nearly all of my favorite features (more on that later…) from both together into one editor. Today I wanted to try using Markdown to actually generate an entire webpage, and I quickly realized that I would like to live preview my changes in a browser; enter the Markdown Preview and LiveReload packages.

Setup for this was actually very simple, except for one oversight that took me far too long to resolve…

Installation

The very first thing you should do when getting started with Sublime Text is to install Package Control and familiarize yourself with it. Hit CTRL+SHIFT+P and type “Package” to find all of the relevant commands.

Next, use Package Control to install the aforementioned “Markdown Preview” and “LiveReload” packages.

Click the LiveReload button in your browser to enable the LiveReload functionality (the button’s enabled state has a red dot in the middle of the icon).

Make some changes in your Markdown file and hit save; the HTML document in your web browser should automatically update.

Issues

The only issue I had took me long enough to discover that I decided to document it here. Basically, there are only certain file extensions for which the Markdown Preview package enables the LiveReload functionality by default. I happen to save all of my Markdown files as “.txt” files, just in case I need to access them on my phone (or anywhere else that the “.md” or “.markdown” extensions could cause issues). Unfortunately, “.txt” is NOT one of the extensions that automatically has this support by default. Fortunately, there is a setting in the Markdown Preview package that controls which extensions should have the LiveReload functionality: