Is there any good Markdown Javascript library or control?

Question

I want to build a site where the user can enter text and format it in Markdown. The reason I'd like a Javascript solution is because I want to display a live preview, just like on StackOverflow.

My site is not targeted at developers, however, so an editor control would be ideal.

I gather that on StackOverflow, the WMD editor is being used.

A quick search on Google also turns up Showdown library, which I think is actually being used by WMD.

Are there any other options? Are WMD/Showdown great tools already? What have been your experiences with the different options?

https://github.com/nhn/tui.editor – Andrew Feb 17 '21 at 01:44 — Andrew, Feb 17 '21 at 01:44

score 66 · Answer 1 · edited Sep 12 '11 at 19:03

66

We've been pretty happy with WMD. There are a few niggling bugs in it, however. Nothing major, but I would love if John Fraser (the author) made the code open source so we can fix some of them. He's promised to do so but other real life projects are getting in the way.

~~I do follow up with John every week. I'll post on the blog once the WMD source is finally available.~~ Haven't been able to contact John Fraser in over a year now.

We have open sourced both the JavaScript Markdown library

http://code.google.com/p/pagedown/

and the server-side C# Markdown library

http://code.google.com/p/markdownsharp/

edited Sep 12 '11 at 19:03

Elliott Slaughter

1,455
19
27

answered Sep 25 '08 at 18:42

Jeff Atwood

63,320
48
150
153

Thanks for the answer Jeff. I didn't even realize WMD wasn't open source... I'll keep my eyes peeled. – webmat Sep 26 '08 at 13:06
2

What did you do about the gaping security hole? For example:
hi
The above works in the WMD demo! – andrewrk Aug 26 '10 at 04:28
1

@superjoe30 That stuff is filtered on the server. – epochwolf Apr 20 '11 at 04:24
@superjoe30: See http://meta.stackexchange.com/questions/95821/markdownsharp-not-a-complete-rip-from-stack-overflow -- the same applies to the JavaScript version – balpha Jul 13 '11 at 21:48
Is PageDown still maintained? Will it be moving to GitHub now that Google Code is shutting down? – DisgruntledGoat Apr 12 '15 at 00:08
1

@DisgruntledGoat looking at http://stackexchange.github.io/ you can see that it's in the list and last commit was 6 months ago (2015 already). – Loïc Faure-Lacroix Dec 29 '15 at 04:29

score 34 · Accepted Answer · edited Aug 09 '19 at 02:51

If you're not averse to using Ajax to generate the live preview, then another option is markItUp!. markItUp! is a universal markup-editor, and very flexible. It does provide an easy way of creating a markup editor, but unlike WMD, it doesn't provide its own live preview.

I used markItUp!, along with a simple JSP (using MarkdownJ) for one of my open-source projects (a Markdown plugin for Roller). If you're using another server-side technology, replace that simple JSP as appropriate.

I actually starting using this before I came across WMD. I'd agree, WMD is great, but has only just been open-sourced and is, at this stage, more difficult to customize the behavior of.

malcomwu · Answer 3 · 2013-03-17T05:15:28.037

12

I would recommend marked, which is lightweight, efficient, easy to use and supports GitHub Flavored Markdown (GFM) as well. It can be used in either server(nodejs) or client(browser) sides.

edited Mar 17 '13 at 05:15

answered Mar 16 '13 at 16:06

malcomwu

157
1
9

marked is still being developed and the minimized version is only 23 KB large. – Peter T. Feb 08 '19 at 15:14

score 6 · Answer 4 · answered Sep 25 '08 at 16:31

As far as I know there really isn't any other browser-based editor for Markdown, at least none as extensive as the WMD editor.

Showdown is a Markdown converter in JS, which forms the basis for the HTML preview of WMD. They're both made by http://attacklab.net/.

And as far as I know there haven't been any big complaints about both (at least not on the Markdown mailing list). So go for it.

score 6 · Answer 5 · answered Apr 24 '11 at 09:22

6

There is one named Showdown and it is currently hosted here: https://github.com/coreyti/showdown

And there is https://github.com/evilstreak/markdown-js :)

answered Apr 24 '11 at 09:22

Bijan

25,559
8
79
71

score 4 · Answer 6 · answered Aug 25 '12 at 06:36

4

Strapdown.js, which was recently released, "makes it embarrassingly simple to create elegant Markdown documents. No server-side compilation required."

answered Aug 25 '12 at 06:36

Julian Knight · Answer 7 · 2012-06-28T15:17:31.480

3

The question is even more ancient now but also even more relevant since much of the mentioned code is several years out of date.

However, I did find a few that still seems current:

Jquery-Markedit - This was forked from wmd-edit quite some time ago and refactored to use jQuery. Seems good at first sight.

EpicEditor - is also still maintained, has a flexible parser and, as you can see below, the author is highly responsive (see below). IT seems to have good documentation as well. Sadly not working with IE9.

MarkdownDeep is a third option that is still current. The interesting point with this one is support for Markdown Extra. Has a dependency on JQuery (actually you can also implement without JQuery). Based on the .NET version so documentation is more aligned to that than the JS version. This also works with IE9. It is very easy to use (with JQuery) & very simple. No significant development happening with this though as far as I can see.

js-markdown-extra is a fairly accurate port of the PHP library and is still under maintenance. It supports Markdown Extra of course.

edited Jun 28 '12 at 15:17

answered Jun 20 '12 at 09:00

Julian Knight

4,716
2
29
42

1

Live previews work fine with my editor :) open fullscreen as an example or simply run `preview()` on keydown or a timeout. It's built for any kind of customization. – Oscar Godson Jun 22 '12 at 05:59
@OscarGodson thanks for pointing that out +1 for keeping a close eye on things! Is there an example of that in the documentation, I couldn't see it, though I admit I didn't have much time to look. Perhaps I can take another look. – Julian Knight Jun 22 '12 at 08:29
There's not an example of that specifically no, because most people use the either the toggling or full screen, not their own custom previewer. However, if you give me an example use case I can write up an example for you. – Oscar Godson Jun 22 '12 at 18:23
Hey, thanks Oscar. I am wanting a WIKI that I can use on restricted corporate desktops. I am writing it as an HTA (HTML Application) because that get OS privileges and will run on any Windows desktop. So what I want to do is to keep the WIKI entries in MD files and I want the option to have a live preview, ether underneath the editor or to the right of it when space allows - for your example, underneath would probably be better as the HTML is simpler. Is that enough? Happy to say more. – Julian Knight Jun 22 '12 at 20:36
1

So, under the editor is how it works now. Once you click preview it shows the hidden previewer which is updated with what you wrote. Fullscreen does it (sorta) as you type. To make your own previewer you could do something like this: http://jsbin.com/otuyub/edit#javascript,html – Oscar Godson Jun 23 '12 at 01:47
That will put the generated HTML into a new previewer div I made as an example. It should work by simply clicking render and start typing. If you reload the page the previewer div should load an up to date preview. – Oscar Godson Jun 23 '12 at 01:49
Can't get on to jsbin.com just now, it isn't responding. I'll try again later. – Julian Knight Jun 23 '12 at 18:31
Hi Oscar, I got on but I've only had chance for a quick look. It may take me a few days to get back to it as I'm rather tied up at the moment. I'll update you when I've had another go. One small think I meant to check. Can I intercept the SAVE function? I need to do a save locally rather than via AJAX. – Julian Knight Jun 26 '12 at 15:19
1

Intercept? You can do: `editor.on('save', function(file) { console.log(file.content) })` if thats what you mean. That'll spit out the file contents whenever the file is saved. – Oscar Godson Jun 26 '12 at 22:35
1

Also, you might want to use `on('update')` instead of save. Save will fire a lot if you have autosave on. Update will only fire when something changes. http://epiceditor.com/#events – Oscar Godson Jun 26 '12 at 22:36
Brill, I'll get to it as soon as I can make some time. Hopefully in the next couple of days. – Julian Knight Jun 26 '12 at 22:47
OK, I've tried it - one problem, I can't get it to work in Firefox 11. In fact, although your homepage works, a simple example doesn't, nothing gets rendered at all. However, it does work in Chrome. So, to clarify. Neither the exampl in jsbin nor a simple setup works in FF, but your homepage does. – Julian Knight Jun 28 '12 at 12:17
OK, I take that back. It looks like NoScript is being far too "helpful"! I've turned it off and things seem to be working now. – Julian Knight Jun 28 '12 at 12:34
Grrr, error with IE9: "SCRIPT5007: Unable to get value of the property 'epiceditor': object is null or undefined " "epiceditor.js, line 1135 character 5" also on line 1000. `var files = JSON.parse(localStorage[this.settings.localStorageName]);` – Julian Knight Jun 28 '12 at 13:02
1

FYI to anyone reading this: https://github.com/OscarGodson/EpicEditor/issues/137 -- the problem is that it was trying to be run locally and IE9 has security restrictions against using localStorage locally via file:\\\ – Oscar Godson Jun 30 '12 at 01:31

score 3 · Answer 8 · answered Sep 25 '08 at 16:37

3

I've not tested this, but here is another option:

Markdown wysiwyg

answered Sep 25 '08 at 16:37

VirtuosiMedia

52,016
21
93
140

score 2 · Answer 9 · answered Aug 15 '12 at 19:24

After trying with several plugins to solve my own needs of offering a MarkDown seudo-WYSIWYG I ended implementing my own one:

http://fguillen.github.com/MDMagick/

Maybe is not as powerful as all the solutions commented here but I think that none is as simple and easy to integrate and customize.

score 2 · Answer 10 · answered Jun 12 '11 at 21:39

The question is ancient but hopefully this might help someone. I have just recently published a working version of my own Javascript markdown editor, uedit. You can find the source code here. It works on most browsers (including IE6+) and doesn't depend on any external JS libraries.

Is there any good Markdown Javascript library or control?

10 Answers10

Linked