November 23 2011 Wednesday

Highlight your syntax in Designer style...

For a while, I am part of a fantastic team, including Niklas Heidloff, Frank van der Linden and Bruce Elgort. We are working with pleasure on an OpenNTF project named "XSnippets". As you may already know, Beta version of XSnippets has been online for a week. Meanwhile, we also welcomed René Winkelmeyer. He will take care of the most shiny part of XSnippets: Designer plugin.

A picture named M2

So far, I am very happy about the community reaction... Tweets, blogs and personal feedbacks are making us very motivated and delighted...

One of the most important features of this project is that we are not only developing a database, we are also documenting how we are doing... So far, we had very important experiences like 4 different developers from 4 different countries (3 time zones) working and coordinating together. We are using SVN for code sharing, LotusLive Activities for documentation, communication and follow-up, mockups for visualization, etc.

There will be blogs and videos about what we are doing...

I got many questions about syntax highlighting. I'll cover this issue today and you will have some give-aways from this post :)

Syntax highlighting is one of the most important parts of the project. We have considered many different perspectives like server-side, as-you-type, etc. There are lots of resources, widgets and libraries out there. Our criterias were licensing, customization, xml-support and flexibility.

After digging, we found Alex Gorbatchev's Syntax Highlighter library. It was also used by Keith Strickland on his OpenNTF project XBlog.

The library is very easy to deploy, but a bit difficult to customize. Because you need to know regular expressions and javascript very well. After a long effort, I customized its brushes according to Designer coloring. It's not perfect but enough to use on snippets.

XPages source code and Lotusscript didn't exist on its repository. So we had to create them. Lotusscript was easy. It's based on VBScript. The only thing we needed was the list of all keywords which I found very easily :)

However, XPages was a bit complicated. It's based on XML but there were problems. Because in Domino Designer, coloring scheme is different from common XML. For instance, CDATA sections normally highlighted in XML. But since XPages has code inside those tags, Designer starts highlighting at the end of CDATA identifier. Normally, it's not that difficult to exclude an identifier in Regex. But client-side javascript (ECMA) does not support lookbehinds. So I had to use some javascript magic.

Previous paragraph may not mean anything to you. I can understand you; before XSnippets, I didn't know anything about those :)

Anyway. enough talking...

You  may use this on your blog. Currently it supports many of blog engines. For Wordpress and Blogger, you may read detailed instructions on Syntax Highlighter project site. I will provide necessary CSS and Brush files for Designer-compatible coloring and syntax highlighting. I am working on embedding this on Domino Blog but Domino Blog template messes with HTML and I couldn't find a descent solution for XSP highlighting. There is a problem with "<![CDATA[ ... ]]>" processing. I'll blog when I solve this issue :)

Anyway, you'll need these files:

- shThemeXSnippets.css  for fonts and colors specific to Domino Designer.
- shBrushXsp.js    for XPages source code.
- shBrushJScript_custom.js   for Javascript
- shBrushLscript.js    for Lotusscript
- shBrushCss_custom.js   for CSS (some corrections needed here)
- shBrushJava_custom.js   for Java (not very good)

You will also need shCore.css, shCore.js, shAutoloader.js and other brush files you need from the Syntax Highlighter package.

I'm open to any questions about this. Use responsibly and don't forget to give some credit to Alex Gorbatchev...
Serdar Basegmez   |   November 23 2011 06:15:00 PM   |    Blog  Community  HowTo  XSnippets    |  
  |   Next   |   Previous

Comments (7)

Gravatar Image
Stephan H. Wissel    01/06/2014 1:25:52 AM

Did you submit a pull request to Alex Gorbatchev's GITHub project?

Gravatar Image
Tom Steenbergen    11/23/2011 10:03:22 AM

Great stuff Serdar, I was pleasantly suprised by the colourcoding yesterday when I posted my code.

Gravatar Image
Serdar Basegmez    11/23/2011 4:30:36 AM


I will absolutely use it :)

I couldn't solve how to prevent blog template's messing up tags... Thanks!

Gravatar Image
Ulrich Krause    11/23/2011 4:25:59 AM

: ) I did this already 5 years ago ... { Link }

Gravatar Image
Henning Schmidt    11/23/2011 1:58:43 AM

This is just fantastic. Thank you Serdar for sharing this. I have no out of the pocket solution for your CDATA problem though, sorry.

Gravatar Image
David Leedy    11/22/2011 8:32:10 PM

FREAKING AWESOME!!!! Thank you sir!!

Gravatar Image
Keith Strickland    11/22/2011 7:45:18 PM

Thanks for sharing these Serdar!