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.
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...
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...
Comments (7)
Great stuff Serdar, I was pleasantly suprised by the colourcoding yesterday when I posted my code.
Ulrich,
I will absolutely use it :)
I couldn't solve how to prevent blog template's messing up tags... Thanks!
: ) I did this already 5 years ago ... { Link }
This is just fantastic. Thank you Serdar for sharing this. I have no out of the pocket solution for your CDATA problem though, sorry.
FREAKING AWESOME!!!! Thank you sir!!
Thanks for sharing these Serdar!
Did you submit a pull request to Alex Gorbatchev's GITHub project?