November 18, 2014

Live Markdown Preview in Komodo

Since the Komodo team has been using GitHub more and more, we’ve been writing a
lot more [Markdown] content. I personally like markdown (we actually write our
blogs in Markdown too), it’s simple text formatting makes it faster (for me) to
write web-based content.

Now, the only problem I was having with writing Markdown in Komodo, is that I
had to use an external tool to generate the HTML content in order for me to do a
final verification.

With the addition of the [Markdown Viewer] add-on, this is no longer a problem!
I can view the generated HTML directly within Komodo and the HTML preview will
update itself whenever I make a change to the Markdown text – it doesn’t even
need to be saved.

The Markdown preview uses GitHub styling (though we may make this optional in
the future, or support other markdown variants), so you should feel right at
home when writing Markdown inside of Komodo.

## Features

– A small Preview button appears in the top-right corner of the editor whenever
a Markdown file is open
– Automatically closes the markdown preview when switching to another file,
re-opens when switching back
– Allows side-by-side, or under-over previewing inside of Komodo
– Dynamically updates the markdown preview as you edit (live editing)
– Uses GitHub flavoured CSS styling
– Styles code blocks inside of triple back quotes

## Screenshot

### Source Code

The code for the Markdown Viewer add-on is open-source at GitHub, in the Komodo
[markdown-viewer] repository. We’ve love to hear from people trying the add-on, and
hopefully we’ll see contributions from other users.

### Installation

To install the add-on simply hit the “View Resource” and “Install Instructions”
links below.

Once the add-on is installed – just open a Markdown file and you should see a
“Preview” button in the top-right corner.

[Markdown]: http://en.wikipedia.org/wiki/Markdown
[Markdown Viewer]: http://komodoide.com/resources/addons/komodo–markdownviewer/
[markdown-viewer]: https://github.com/Komodo/markdown-viewer

Todd Whiteman

Todd Whiteman

Todd Whiteman is the Development Lead for Komodo IDE. He works adeptly with Mozilla, Python and JavaScript to ensure that Komodo IDE is the IDE of choice for development teams. Todd has been working on Komodo IDE for nearly 6 years, adding components such as the Vi Key Bindings, Distributed Source Code Control, 64-bit Linux builds as well as Remote SSH support into Komodo IDE.