CodeLair website tutorials, articles & scripts

Markdown editor plugin for Question2Answer

Published: 16 July 2011   •   Tags: q2a

Question2Answer is a popular open source platform for building Q&A sites. Version 1.3, released last November, introduced a plugin feature to allow for further extending Question2Answer without editing core functionality. Since then I have - very slowly - been working on a Markdown editor plugin for better formatting of posts. Q2A actually comes with a WYSIWYG editor, however Markdown has several advantages:

  • It’s a simple markup format that is readable as plain text.
  • It uses a standard textarea and is therefore compatible with more browsers, including mobile devices and browsers without Javascript support.
  • It defines a neat set of allowable elements, including code, block quotes, lists, links and images.
  • Markdown intrinsically creates much better HTML code. If you have ever seen the HTML output of CKeditor or TinyMCE, you’ll know how plain terrible they are with even simple formatting.

The plugin uses modified versions of the WMD and Showdown scripts for the editor and live preview respectively. It’s the same combo that Stack Overflow uses, however, the open source version they released has numerous bugs not present on Stack Overflow and the code has barely been touched in the two years since release. The majority of issues have been fixed, but a few edge cases remain (see below).

Installation #

UPDATE: new version with more fixes now on GitHub here. Click ‘ZIP’ on the right to download it.

  1. Extract the files to your qa-plugin folder so that it contains the subfolder markdown-editor.
  2. Copy the CSS from sample.css to the bottom of your theme’s current stylesheet.
  3. Log in to your Q2A site as a super administrator and head to Admin > Posting.
  4. In the second section, set the default editor for questions and answers to ‘Markdown Editor’. (The editor does also work for comments, but I would recommend sticking to plain text.)

Known issues #

Some small problems remain with the plugin. If you are able to provide a patch, let me know and I will release an update!

  1. URLs not auto-linked. FIXED
  2. Adding an unordered list (lines starting with * or -) directly after an ordered list (starting with 1., 2. etc) converts the numbered list to dashes.
  3. In Google Chrome, adding a second link in the same paragraph causes WMD to wrap it in the code for the first link, on top of the normal link formatting. This results in something like [linkA][1] and [linkA][2][linkB][3][linkA][4] instead of [linkA][1] and [linkB][3].

Changes to original Markdown #

I also made some minor changes to resulting HTML code, for better usability and compatibility with Q2A:

  1. Headings range from H2 to H6, instead of H1 to H6. This is to avoid repeated first-level heading tags in user’s posts. Although multiple H1 tags is supported in HTML5, it’s generally not that useful for SEO, nor for semantics when dealing with user-generated content.
  2. Single line breaks are supported. In official Markdown a line break is only created if the preceding line ends with two spaces. This is unintuitive and confuses users no end when they create what they think is a well-formatted post, only to have all the lines smushed together.
  3. Links are automatically added to URLs, without the requirement for angle brackets. In other words, https://www.google.com now becomes a link as well as <https://www.google.com>.

Problems? Suggestions? #

If you have any problems with the plugin, feel free to leave a comment here, or on the appropriate Question2Answer question.