Sublime Text 3: Markdown and Live Reload

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

  1. 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.
  2. Next, use Package Control to install the aforementioned “Markdown Preview” and “LiveReload” packages.
  3. Install the LiveReload server application for your OS of choice.
  4. Install the LiveReload browser extension for your browser of choice.
  5. Start the LiveReload server and add your project directory to the site folders.
    • Important: Markdown preview generates the HTML documents in a temporary folder by default (Windows: C:\Users\<username>\AppData\Local\Temp\ by default)
  6. Restart Sublime Text and your browser.

Usage

  1. Open up a Markdown file and use the “Markdown Preview: Preview in Browser” option (via CTRL+SHIFT+P) to generate an HTML document and open it in your default browser.
  2. 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).
  3. 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:

  1. Using the menu, navigate as follows: Preferences > Package Settings > Markdown Preview > Settings - User
  2. Insert the following block of text (assuming the file is blank; if the file already has content, just modify the “markdown_filetypes” line):
{
    "markdown_filetypes": [".md", ".markdown", ".mdown", ".txt"],
}

Obviously if your Markdown files use a different extension(s), update the list accordingly. I hope this saves someone else the time and frustration of not having your files auto-update.

3 Comments on "Sublime Text 3: Markdown and Live Reload"

  • Comment on by Gui Ambros | Reply

    Hey Ryan, were you able to do this with ST3? I can’t get it to work.

    LiveReload is working fine for me (I can see it connected, and it does reload the browser when I change the Sublime-generated HTML temp file). But when I save the .md, the HTML is not being re-generated automatically, so I have to do CTRL-SHIFT-P and select “Preview in Browser” again, which defeats the purpose of LiveReload.

    I tried looking at the MarkdownPreview source code and found the def on_post_save which should be re-converting the .markdown into html, but seems it is not being called after save. Console does not display any errors.

    Any pointers? Is yours working with ST3?

  • Comment on by Gui Ambros | Reply

    Never mind, I already solved the problem 🙂 For some reason LiveReload plugin wasn’t informing the Chrome LR extension that the page had changed, so the browser wasn’t reloading the /tmp/nn.html after the update.

    This was solved by 1) removing the LiveReload package from ST3, 2) installing the LiveReload server, and adding /tmp/ to the list of monitored directories.

  • Comment on by MK | Reply

    I think you can try to install the package “omnimarkuppreviewer” instead.
    https://github.com/timonwong/OmniMarkupPreviewer

    It’s much simpler and easier.

Leave a Reply

Your email address will not be published. Required fields are marked *