Anatomy of a Syntax Highlighting Engine – Part 1

This is the first of a series of posts where I’m going to discuss some of the, um… fun that we’ve had while writing Wikid Editor, the text editor that we built for our flagship product Haven (which is still being developed). In this post I’m going to focus solely on the choice in technology.

Here are a few high level requirements for Wikid Editor.

  1. It had to run inside the browser and it needed to work in all browsers or at least the main ones, Firefox, IE, Safari and Chrome.
  2. It needed to be able to color text any way we wanted.
  3. It should be able to color the background of rows.
  4. It needed to be able to communicate with our servers without reloading the page and preferably be able to receive pushed data from our servers.
  5. It needed to perform well.

We pretty much had it narrowed down to JavaScript, Flex or Silverlight. There may well have been other choices but we either didn’t find them or they didn’t seem practical or feasible to us. Any one of the three would technically work so for us it came down to these areas of concert.

  1. Cross browser compatibility (Winners: Flex, Silverlight)
    1. JavaScript – While there are several frameworks that have done a great job of dealing with this issue it’s still something that has to be dealt with or be concerned about, especially when new or updated browsers are released.
    2. Flex – The crew at Adobe are not flawless but they are tasked with keeping up with browser compatibility not us and not an open source community.
    3. Silverlight – Kinda in the same boat as Flex, Microsoft is tasked with keeping up with the Jones’ so we don’t have to.
  2. Maturity of the framework (Winners: JavaScript, Flex)
    1. JavaScript – No questions there, as far as I know it’s the oldest of the bunch
    2. Flex – While the Flex framework is only a few years old the Flash player has been around for quite a while.
    3. Silverlight – Silverlight is pretty new. Microsoft has put a ton of work into it so I’m sure that it would work out but it’s the baby of the bunch.
  3. How does our skill set match up (Winners: Flex, JavaScript)
    1. JavaScript – Neither of us were JavaScript ninjas but it wouldn’t be to hard to get up to speed fast.
    2. Flex – We had just finished up a project in Flex so it was fresh on our minds.
    3. Silverlight – Other than having some C# and ASP.Net under my our belt this Silverlight is not something that we know real well.
  4. In browser performance
    1. We didn’t do any testing just some studying up on architecture

So we chose to write the editor in Flex. It was pretty fun and we learned a ton. It took me about 6 weeks of spare time coding to get the highlighting to work but it was slow. Over the course of 6 months I finally learned enough about lexers, regexp and real-time highlighting design that I got a working version that was pretty speedy.

Was Flex the right choice? I can say that it wasn’t the wrong choice. I can also say that there are a few JavaScript text editors that boast highlighting capabilities. I’d say that there may not be a right or wrong choice but that you shoud stick with what you know best. If it works, great, if not, sweet, you get to learn something new.

Stay tuned for a more techinical dive next time.

Submit a Comment

Your email address will not be published. Required fields are marked *