Add preview for all markdown enabled textareas

mendicant-original / puzzlenode

Quiz application inspired by Project Euler and the Internet Problem Solving Contest (IPSC)

puzzlenode.com

81 stars 43 forks source link

Add preview for all markdown enabled textareas #57

Closed gjp closed 13 years ago

gjp commented 13 years ago

This is a port of the markdown preview code used on university-web. Submitting for review & feedback.

Notable differences:

Tabs stylesheet converted from css to sass & modified for puzzlenode
preview.js modifed to handle multiple preview instances on the same page without duplicating IDs. The original relied on named anchors having the exact same syntax as a jQuery ID selector e.g. <a href="#preview"> -> $("#preview"). I converted these to classes. Not quite as slick but it works.
Custom showdown.js - I modified a regexp in one of the WMD forks of showdown to fix fenced code blocks and then minified it. A fenced block starts and ends with three or more backticks, optionally followed by a language name (a syntax highlighting hook, currently unused).

I also moved the Puzzlenode 'fun' functions to their own file. :) The javascript might need some namespace cleanup to finalize this merge, but I don't have a sure idea of where to go with that.

gjp commented 13 years ago

FWIW, I still recommend following in github's footsteps and abandoning showdown.js in favor of doing an AJAX call to redcarpet unless there's a really good reason not to - DRY, well-supported and current vs. an obsolete Perl port.

A common lightweight controller might be shared by PuzzleNode, university-web, and the upcoming community site.

jordanbyron commented 13 years ago

FWIW, I still recommend following in github's footsteps and abandoning showdown.js in favor of doing an AJAX call to redcarpet unless there's a really good reason not to - DRY, well-supported and current vs. an obsolete Perl port.

I totally agree. I've done this before in another project, so rather than have you reinvent the wheel let me port over my code and get it working the right way.

A common lightweight controller might be shared by PuzzleNode, university-web, and the upcoming community site.

Making our comment system a rails plugin has been on my list for a while now. I'll probably do the same thing for markdown preview since this is something I do in almost all of my apps.

jordanbyron commented 13 years ago

Thanks for working on this Greg. I made some minor style improvements to the tabs which you might want to check out: c684604041df8c6bde4e450aae28139803532b81

Compass has a bunch of CSS3 helpers that make doing rounded corners and lots of other stuff much easier.

gjp commented 13 years ago

hey, didn't you suggest showdown in #25? :p I hope there's still something of value in this patch; regardless, this was a good integration exercise for me.

Please let me know if I can be of any assistance with the preview plugin.

gjp commented 13 years ago

grrr, crosspost. I'll have a look at that commit when I get back. Thanks Jordan.

jordanbyron commented 13 years ago

hey, didn't you suggest showdown in #25? :p

Yup I did, but I also said, "At some point we can replace showdown with a round trip call to Redcarpet"

I hope there's still something of value in this patch; regardless, this was a good integration exercise for me.

This was totally valuable. I merged all of your work and just made some minor modifications so it uses Redcarpet. Thanks for your help!