Markdown editor plugin for Question2Answer

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, http://www.google.com now becomes a link as well as <http://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.

7 thoughts on “Markdown editor plugin for Question2Answer

  1. This is a great fast light weight editor.

    I found the default CK Editor of Q2A would not load on web browsers that are set as a blank user agent, it also loaded over 350k of js.

    Great job :D.

    I’m wondering if you know how I can get all the links to open in target=”_blank” that are posted in teh editor ?.

    1. Someone else asked for this over at Q2A so I will likely add it as an option in the future :)

      In the meantime, you can check inc.markdown.php for the HTML <a href= and add it in, i.e. <a target="_blank" href=

      1. Thanks for the reply :D

        I found this solution:

        In the file…
        qa-plugin / markdown-editor / inc.markdown.php

        Go to line 608 or search for:

        $result .= “>$link_text“;

        and change to:

        //$result .= “>$link_text“; //origional
        $result .= “target=\”_blank\”>$link_text“;

        Something else I noticed, when I enable the tooltips in teh admin plugins, the tooltip rollover has the raw markup inside.

        I have been looking at implementing a noce jQuery lightweight rollover :).

        I think the answer lyes here:

        qa-plugin / mouseover-layer

        but maybe there is a way to do this from the Markup plugin folder!.

        Kind Regards

  2. Great plugin, thanks alot! It works fine, except it doesn’t seem to show the live preview. Is there something I’m doing wrong? Using FF5

  3. It seems to be a problem with domain permissions… I only get this problem running Q2A in an iframe, which i would like to do. It throws errors accessing “top.” elements and “a.attachEvent”, if that helps.

  4. Okay, I figured it out… I just changed all references to ‘top’ to ‘window’ and now it works fine. Wouldn’t it be better to use ‘window’ instead of ‘top’ anyway?

Comments are closed.