dominoGuru.com

Your Development & Design Resource

Adding Quick Highlighter support to your IBM Lotus Notes Domino Wiki, Weblog, or Webpage

03/18/2010 02:55 PM by Chris Toohey

Writing for the
web... Earlier today David Leedy posted a link to Quick Highlighter, a language-specific HTML and CSS markup generator which gives web authors post-friendly versions of their submitted code snippets.

What made this truly newsworthy (for the Lotus Online Community) was the online generators inclusion of the LotusScript and @Formula languages.

For example, the generator turns this:

@LowerCase(@Text("FOO"))

... into this:

@LowerCase(@Text("FOO"))

Much easier on the eyes if you ask me!

The markup generated from Quick Highlighter uses a combination of DIV and SPAN HTML Elements with language-specific ClassName attributes. For example, it takes the above Formula (which I use as the Comment Form CAPTCHA on this site), and generates the following HTML:

<div class="lotusformulas">@LowerCase(@Text("FOO"))</div>

I've compiled the following list of various formats that would be commonly used by an IBM Lotus Notes Domino Application Developer below:


/**

 * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann

 * (http://qbnz.com/highlighter/ and http://geshi.org/)

 */



.lotusscript  {font-family:monospace;color: #006; border: 1px solid #d0d0d0; background-color: #f0f0f0;}

.lotusscript a:link {color: #000060;}

.lotusscript a:hover {background-color: #f0f000;}

.lotusscript .imp {font-weight: bold; 
color: red;}

.lotusscript .kw1 {color: #0000FF;}

.lotusscript .kw2 {color: #0000EE;}

.lotusscript .co1 {color: #008000;}

.lotusscript .es0 {color: #000099;}

.lotusscript .br0 {color: #000000;}

.lotusscript .sy0 {color: #006600;}

.lotusscript .st0 {color: #000000;}

.lotusscript .nu0 {color: #FF00FF;}

.lotusscript .me1 {color: #0000AA;}

.lotusscript span.xtra { display:block; 
}



.lotusformulas  {font-family:monospace;color: #006; border: 1px solid #d0d0d0; background-color: #f0f0f0;}

.lotusformulas a:link {color: #000060;}

.lotusformulas a:hover {background-color: #f0f000;}

.lotusformulas .imp {font-weight: bold; 
color: red;}

.lotusformulas .kw1 {color: #800000;}

.lotusformulas .kw2 {color: #0000FF;}

.lotusformulas .co1 {color: #008000;}

.lotusformulas .es0 {color: #000099;}

.lotusformulas .br0 {color: #000000;}

.lotusformulas .sy0 {color: #66cc66;}

.lotusformulas .st0 {color: #FF00FF;}

.lotusformulas .nu0 {color: #FF00FF;}

.lotusformulas .me1 {color: #0000AA;}

.lotusformulas span.xtra 
{ display:block; 
}



.java  {font-family:monospace;color: #006; 
border: 1px solid #d0d0d0; background-color: #f0f0f0;}

.java a:link {color: #000060;}

.java a:hover {background-color: #f0f000;}

.java .imp {font-weight: bold; 
color: red;}

.java .kw1 {color: #000000; 
font-weight: bold;}

.java .kw2 {color: #000066; 
font-weight: bold;}

.java .kw3 {color: #003399;}

.java .kw4 {color: #000066; 
font-weight: bold;}

.java .co1 {color: #666666; 
font-style: italic;}

.java .co2 {color: #006699;}

.java .co3 {color: #008000; 
font-style: italic; font-weight: bold;}

.java .coMULTI {color: #666666; 
font-style: italic;}

.java .es0 {color: #000099; 
font-weight: bold;}

.java .br0 {color: #009900;}

.java .sy0 {color: #339933;}

.java .st0 {color: #0000ff;}

.java .nu0 {color: #cc66cc;}

.java .me1 {color: #006633;}

.java .me2 {color: #006633;}

.java span.xtra { display:block; 
}



.html4strict  {font-family:monospace;color: #006; border: 1px solid #d0d0d0; background-color: #f0f0f0;}

.html4strict a:link {color: #000060;}

.html4strict a:hover {background-color: #f0f000;}

.html4strict .imp {font-weight: bold; 
color: red;}

.html4strict .kw2 {color: #000000; 
font-weight: bold;}

.html4strict .kw3 {color: #000066;}

.html4strict .es0 {color: #000099; 
font-weight: bold;}

.html4strict .br0 {color: #66cc66;}

.html4strict .sy0 {color: #66cc66;}

.html4strict .st0 {color: #ff0000;}

.html4strict .nu0 {color: #cc66cc;}

.html4strict .sc-1 {color: #808080; 
font-style: italic;}

.html4strict .sc0 {color: #00bbdd;}

.html4strict .sc1 {color: #ddbb00;}

.html4strict .sc2 {color: #009900;}

.html4strict span.xtra { display:block; 
}



.javascript  {font-family:monospace;color: #006; 
border: 1px solid #d0d0d0; background-color: #f0f0f0;}

.javascript a:link {color: #000060;}

.javascript a:hover {background-color: #f0f000;}

.javascript .imp {font-weight: bold; 
color: red;}

.javascript .kw1 {color: #000066; 
font-weight: bold;}

.javascript .kw2 {color: #003366; 
font-weight: bold;}

.javascript .kw3 {color: #000066;}

.javascript .co1 {color: #006600; 
font-style: italic;}

.javascript .co2 {color: #009966; 
font-style: italic;}

.javascript .coMULTI {color: #006600; 
font-style: italic;}

.javascript .es0 {color: #000099; 
font-weight: bold;}

.javascript .br0 {color: #009900;}

.javascript .sy0 {color: #339933;}

.javascript .st0 {color: #3366CC;}

.javascript .nu0 {color: #CC0000;}

.javascript .me1 {color: #660066;}

.javascript span.xtra { display:block; 
}



.xml  {font-family:monospace;color: #006; 
border: 1px solid #d0d0d0; background-color: #f0f0f0;}

.xml a:link {color: #000060;}

.xml a:hover {background-color: #f0f000;}

.xml .imp {font-weight: bold; 
color: red;}

.xml .es0 {color: #000099; 
font-weight: bold;}

.xml .br0 {color: #66cc66;}

.xml .sy0 {color: #66cc66;}

.xml .st0 {color: #ff0000;}

.xml .nu0 {color: #cc66cc;}

.xml .sc-1 {color: #808080; 
font-style: italic;}

.xml .sc0 {color: #00bbdd;}

.xml .sc1 {color: #ddbb00;}

.xml .sc2 {color: #339933;}

.xml .sc3 {color: #009900;}

.xml .re0 {color: #000066;}

.xml .re1 {color: #000000; 
font-weight: bold;}

.xml .re2 {color: #000000; 
font-weight: bold;}

.xml span.xtra { display:block; 
}



.css  {font-family:monospace;color: #006; 
border: 1px solid #d0d0d0; background-color: #f0f0f0;}

.css a:link {color: #000060;}

.css a:hover {background-color: #f0f000;}

.css .imp {font-weight: bold; 
color: red;}

.css .kw1 {color: #000000; 
font-weight: bold;}

.css .kw2 {color: #993333;}

.css .co1 {color: #a1a100;}

.css .co2 {color: #ff0000; 
font-style: italic;}

.css .coMULTI {color: #808080; 
font-style: italic;}

.css .es0 {color: #000099; 
font-weight: bold;}

.css .br0 {color: #00AA00;}

.css .sy0 {color: #00AA00;}

.css .st0 {color: #ff0000;}

.css .nu0 {color: #cc66cc;}

.css .re0 {color: #cc00cc;}

.css .re1 {color: #6666ff;}

.css .re2 {color: #3333ff;}

.css .re3 {color: #933;}

.css span.xtra { display:block; 
}

Just add the above CSS markup into your shared Stylesheet for your weblog, and you can just copy and paste the resulting Code View Code content from Quick Highlighter directly into your blog post!

I'll be tweaking this CSS markup, so by the time you see this post my version of the Quick Highlighter CSS will differ from the standard shown above. And that's the beauty of this approach to sharing your markup: I can customize the visual representation of the markup to fit with my theme and overall design. Good stuff here, and something that you can easily and immediately start using for your wikis, websites, and -- of course -- blogs.

About the author: Chris Toohey

Thought Leadership, Web & Mobile Application Development, Solutions Integration, Technical Writing & Mentoring

A published developer and webmaster of dominoGuru.com, Chris Toohey specializes in platform application development, solutions integration, and evangelism of platform capabilities and best practices.