Hacker News new | comments | show | ask | jobs | submit login
Show HN: Livedown – realtime Markdown previews for Vim, Emacs and Sublime (github.com)
34 points by shime 788 days ago | hide | past | web | 25 comments | favorite



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


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.


Oh, didn't see that.

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


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


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/


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...


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.


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


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.


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


(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.


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


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


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.


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


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.


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).


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


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)


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?


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.


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


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


which editor are you using?


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




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | DMCA | Apply to YC | Contact

Search: