Show HN: Livedown – realtime Markdown previews for Vim, Emacs and Sublime

by shime • 12 years ago

34 25 12 years ago

kartikkumar2• 12 years ago

Cool! I've been actually thinking I should get something like this for Sublime because I'm often correcting silly mistakes in my Github repo readme's that I only notice once the Markdown renders in browser.

Only minor comment is that you say "realtime" but from the demo it seems like that the view is updated only when you hit save right?

Off to test it out now!

Edit: went through all the steps and live preview doesn't seem to be working. Does the plugin work under ST3? I also assume that there's a missing step in the readme, so I cloned the git repo to the Packages sub-directory as "Livedown". Hoping I've just made a silly mistake with the setup.

Edit #2: So I verified that running from the command line works and it loads my markdown file without any problems. The link with Sublime doesn't seem to be working though, so when I make changes, I can see them in the browser window by refreshing. Guessing something is screwed up in the way the plugin is setup on my laptop.

evanrelf• 12 years ago

If you're on Mac, you should definitely check out Marked 2: http://marked2app.com

kartikkumar2• 12 years ago

Cool thanks for the tip. Nice to see MathJax support!

santa_boy• 12 years ago

If you are looking for cross platform, checkout [Haroopad](http://pad.haroopress.com/). It is based on node-webkit and is free. That opens up a lot of improvement possibilities.

shime6• 12 years ago

please open an issue here https://github.com/shime/sublime-livedown/issues if you're having problems, it should work with ST3

philsnow2• 12 years ago

(without so much as glancing at the source, ) in emacs at least you should be able to make it work with flymake-mode to update the preview every time you stop typing for 100ms or whatever you configure it to.

The downside of course is if you're in the middle of some big change, the preview is useless and a bit distracting.

divmain• 12 years ago

I've used OmniMarkupPreviewer, and it has worked very well under both Sublime Text 2 & 3. https://github.com/timonwong/OmniMarkupPreviewer

bbx• 12 years ago

I thought it would be realtime like http://tmpvar.com/markdown.html (although you miss all your text editor features).

This plugin acts as a browser reloader, like the ones you find for HTML/CSS, which is already helpful in itself.

bshimmin• 12 years ago

For those wondering about "like the ones you find for HTML/CSS", http://livereload.com is what you're looking for (or at least one choice, anyway).

shime6• 12 years ago

oh yeah, maybe the description is a bit misguided, sorry about that.

Joe8Bit• 12 years ago

On a slightly tangential note, after having used Mou for a while I've recently moved to Macdown[0] for Markdown editing on the Mac after Mou seemed to be abandoned, plus, it's open source!

I mention it as the live previews in both those apps are the real winners for me, and having something like that in my regular text editor would be awesome. Not such a fan of the browser based previews, but I'll give it a go!

[0] http://macdown.uranusjr.com/

rcsorensen• 12 years ago

Mou isn't abandoned. The creator has recently started an IndieGoGo project to fund 1.0.

https://www.indiegogo.com/projects/mou-1-0-markdown-editor-o...

hobofan2• 12 years ago

vim-instant-markdown [0] has been around for quite some time and if the gif on livedowns github page is representative provides much faster preview.

Another great editor-independent alternative is livereload + a markdown rendering plugin for your browser.

[0] https://github.com/suan/vim-instant-markdown

shime6• 12 years ago

thanks, I'm aware of it and I've mentioned it in the readme. I don't like how much dependencies it has, so I've decided to make this.

hobofan2• 12 years ago

Oh, didn't see that.

I really understand what you mean with the dependencies, it is by far the heaviest plugin I have installed.

petepete• 12 years ago

I use vim-instant-markdown heavily and it's fantastic, it's very simple and very responsive.

FatalBaboon• 12 years ago

In Emacs you could achieve the same thing without node dependency, the markdown mode already supports previewing in browser so you could add two hooks (on 'markdown-mode-hook and 'after-save-hook) and call 'markdown-preview on the latter.

What does livedown add?

shime6• 12 years ago

Wasn't aware of that, thanks. Livedown provides Github styling via [1] and uses socket.io to reload the browser content upon saving. It also serves images, so your rendered Markdown should pretty much look the same as on Github.

[1] https://github.com/sindresorhus/github-markdown-css

philsnow2• 12 years ago

If you're using emacs in a native window (not curses/terminal), various modes render e.g. section headings, emphasis, etc right in the buffer you're editing, no need for a preview window.

It's not exactly the markdown / wiki output (because you still see e.g. the `+++` at the beginning of header lines) but you can at least see when you've messed up the markdown (because it doesn't render correctly). It's a bit like syntax highlighting now that I think of it.

See the screenshot on e.g. http://www.neilvandyke.org/erin-twiki-emacs/ for what I'm talking about.

pixelmonkey• 12 years ago

Some bugs with vim-livedown:

- I couldn't get it to work with the after/mkd directory via pathogen. Not sure why. Moving the small bits of vimscript up in the load order worked for me.

- I think the behavior of making it auto-open upon buffer switch is un-vimlike and probably annoying. Better to just support the LivedownPreview() function. (Also, the other function has code repetition it seems.)

- The npm module (livedown) uses highlight.js for code highlighting with default options. For a standard README.md I just opened, it thought some Python code blocks were alternatively nginx or bash, because they were very short, thus did wrong syntax highlighting. You probably want to turn off language auto-detection. You can do this by doing

   hljs.configure({languages: []})

before calling hljs.highlightBlock(). HTH. I'll also open a Github issue about this.

shime6• 12 years ago

Thank you for reporting this! Opened issues from your comment.

benbristow• 12 years ago

GitHub's Atom has this as a package pre-installed. Pretty nice I must say.

nymanjon• 12 years ago

Is it possible to get this plugin to work with pandoc-style markdown, or is there another similar plugin to it out there?

shime6• 12 years ago

which editor are you using?

ilchenearly• 12 years ago

This makes a similar concept with marked2 (http://marked2app.com), you write markdown on any app you like and then preview it using another tool. But personally, I prefer to do the previewing and writing on the sometime. So my ideal markdown eidtor is something like Typora (http://typora.io)

Show HN: Livedown – realtime Markdown previews for Vim, Emacs and Sublime

Related Stories