Sunday, August 23, 2009

ParseWiki.js - A JavaScript Wiki Parsing Engine

Like most developers, I have a list of applications or pet project that address various scenarios I would like to develop or find solutions for.  While I have to admit my pet project list seems to grow more than shrink, I do knock things out on occasion.  One of these items was a wiki parsing engine.  Now there are plenty of wiki-based solutions out there; however, I wasn't able to find one that allowed me to bring just the parsing engine into my own solution.  Most of the solutions that are available are full solutions that include the parsing engine, data store, and full UI.  Sure they can be tweaked a bit but having a simple tool that will allow me to mark up some text in a <textarea> field and then preview it is usually too simple for these solutions.  WikiPlex is a great solution to fill this gap on the server side and recommend everyone to check it out; however, it got me wondering if a JavaScript solution could be done for client side parsing.  This is when I started to work on ParseWiki.js.


An Overview of the Wiki Parsing Engine:

After looking at a lot of wiki solutions and engines, almost all of them use Regular Expressions to parse the raw text.  I decided to do a similar approach since JavaScript has a pretty good RegEx system.  Since the focus is to just build the engine and not a full solution like Luminotes or Tiddlywiki, I needed to look at the bare minimum items to parse in my engine.  Below is a list of what version 1 of ParseWiki.js has:

  • Headings 1-6
  • bold/italic/underline
  • horizontal rule
  • Named Anchors and Internal Links
  • External Links
  • Ordered and Unordered Lists (1 level only right now)


The Syntax:

I've used a lot of wiki platforms from Wikia to CodePlex to Luminotes and SharePoint.  Of the differences in wiki markup each provide, I found it that CodePlex's engine provided the easiest/fastest to use for me.  Because of this, I based a lot of my syntax on such as well. 

  • Headings:
    ! Heading1 text
    !! Heading2 test 
    !!! Heading3 text
  • Bold:
    *Bolded Text*
  • Italic:
    _Italicized Text_
  • Underline:
    +Underlined Text+
  • Horizontal Rule:
    ---- (4 hyphens)
  • Named Anchors:
    [a:Anchor Name]
  • Internal Link:
    [goto:Anchor Name|Link Text]
  • External Link:
    [url:External Url|Link Text]
  • Unordered Lists:
    * Item 1
    * Item 2
    * Item 3
    * etc.
  • Ordered Lists:
    # Item 1
    # Item 2
    # Item 3
    # etc.


Using ParseWiki.js:

Since I wanted a simple wiki engine, using ParseWiki is very simple.

  1. Download ParseWiki.js
  2. Add it to your Html page
  3. Have your own JavaScript Code pass the marked up text into the ParseWiki() Method
  4. Do with the outputted text as wish.

In the example files provided with the ParseWiki.js download, a full implementation has been provided where I pass the contents of a <textarea> field into the ParseWiki() method and then output it into a <div> to preview.


Download the Code with Example:


Download ParseWiki.js and Examples: Link


Next Steps:

What's next on this pet project?  Well, there are a few things that I need to work on in order to make it better and provide more features.  There's a number of syntax features that I still need to add to the engine (obvious ones are multi-level lists and escape syntax).  Until that time, feel free to play around and with it and let me know what you think.

kick it on DotNetKicks.comShout it


  1. Wow, I hadn't thought about it that way before. Good write up, very clearly written. Have you written previously about ParseWiki.js - A JavaScript Wiki Parsing Engine? I'd love to read more.

  2. @Balaji

    This is the first post I have written about my ParseWiki.js file. I'm planning on working on it more as I find free time. I'm also going to be providing another post in the near future that will provide a little more comprehensible example on implementing it.

  3. Hello,
    im wondering if this project is still alive
    are you still busy on it?
    it sound exact what i need

  4. @Tidde

    The project is in a transitional phase right now. I've been swamped and one of the first tasks I have with it is to move it to a public repository so that it's easier for people to fork and run with while I'm working on addressing other issues.

    One thing that I want to do to this project is to rewrite it so that it'll be HTML5 compatible in the near future. A lot of the tricks that I use in this project are focused around using existing HTML 4.01 presentation elements. These elements are obsolete in HTML5 and I want to make sure that I can make things work going forward while using open standards. It'll come soon.

  5. If I may make a suggestion; I think more important than the html 5 support is adding support for additional formatting elements. Tables and images would be huge.