Multiple Language Syntax Highlighting, Part 1: JScript

• highlight_src.zip (112.3 Kb)
• highlight-demo.zip (8.9 Kb)

Outline

This is the first of a 2 articles serie. In this article, the techniques and ideas are discussed and a Javascript solution is given. In Part 2, a C# solution is given.

Unfortunately for JScript users, I will not update the JScript code and focus on C# only. :)

Introduction

Have you ever wondered how the CP team highlights the source code in their edited article ? I suppose it's not by hand and they must have some clever code to do it.

However, if you look around in the forums on the web, you will see that there are few if any who have this feature. Sad thing, because colored source code is much easier to read. In fact, it would be great to have source code in forums automatically colored with your favorite coloring scheme.

The last-but-not-least reason for writing this article was to learn regular expressions, javascript and DOM in one project.

The source code entirely written in JScript so it can be included server-side or client-side in your web pages.

The techniques used are:

• regular expressions
• XML DOM
• XSL transformation
• CSS style

When reading this article, I will assume that you have little knowledge of regular expressions, DOM and XSLT although I'm also a newbie in those 3 topics.

Live Demo

CP does not accept script or form tags in the article. To play with the live demo, download the "JScript" enabled page (see download section).

Transformation Overview

Parsing pipe

All the boxes will be discussed in details in the next chapter. I will give here an short overview of the process.

First, a language syntax specification file is loaded (Language specification box). This specification is a plain xml file given by the users. In order to speed up things, preprocessing is made on this document (Preprocessing box).

Let us suppose for simplicity that we have the source code to colorize (Code box). Note that I will show how to apply the coloring to a whole html page later on. The parser, using the preprocessed syntax document, builds an XML document representing the parsed code (Parsing box). The technique used by the parser is to split up the code in a succession of nodes of different types: keyword, comment, litteral, etc...

At last, an XSTL transformation are applied to the parsed code document to render it to HTML and a CSS style is given to match the desired appearance.

Parsing Procedure

The philosophy used to build the parser is inspired from the Kate documentation (see [1]).

The code is considered as a succession of contexts. For example, in C++,

• keyword: if, else, while, etc...
• preprocessor instruction: #ifdef, ...
• literals: "..."
• line comment: // ...
• block comment: /* ... */
• and the rest.

For each context, we define rules that have 3 properties:

1. a regular expression for matching a string
2. the context of the text matched by the rule: attribute
3. the context of the text following the rule: context

The rules have priority among them. For example, we will first look for a /* ... */ comment, then a // ... line comment, then litteral, etc...

When a rule is matched using a regular expression, the string matched by the rule is assigned with the attribute context, the current context is updated as context and the parsing continues. The diagram show the possible path between contexts. As one can see, some rule do not lead to a need context.

Context dynamics

Let me explain a bit the schema below. Consider that we are in the code context. We are going to look for the first match of the code rules: /**/, //, "...", keyword. Moreover, we have to take into account their priorities: a keyword is not really a keyword in a block of comment, so it has a lower priority. This task is easily and naturally done through regular expressions.

Once we find a match, we look for the rule that triggered that match (always following the priority of the rules). Therefore, pathological like is well parsed:

// a keyword while in a comment

while is not considered as a keyword since it is in a comment.

Rules Available

There are 5 rules currently available:

1. detect2chars: detects a pattern made of 2 characters.
2. detectchar: detects a pattern made of 1 character.
3. linecontinue: detects end of line
4. keyword:detect a keyword out of a keyword family
5. regexp:matches a regular expression.

regexp is by far the most powerful rule of all as all other rules are represented internally by regular expressions.

Language Specification

From the rules and context above, we derive an XML structure as described in the XSD schema below (I don't really understand xsd but .Net generates this nice diagram...)

Language specification schema. Click on the image to view it full size.

I will breifly discuss the language specification file here. For more details, look at the xsd schema or at highlight.xml specification file (for C++). Basically, you must define families of keywords, choose context and write the rule to pass from one to another.

Nodes

Name	Type	Parent Node	Description
highlight	root	none	The root node
needs-build	A (optional)	highlight	"yes" if file needs preprocessing
save-build	A (optional***)	highlight	"yes" if file has to be saved after preprocessing
keywordlists	E	highlight	Node containing families of keywords as children
keywordlist	E	keywordlist	A family of keywords
id	A	keywordlist	String identifier
pre	A (optional)	keywordlist	Regular to append before keyword
post	A (optional)	keywordlist	Regular to append at the end of the keyword
regexp	A (optional*)	keywordlist	Regular expression matching the keyword family. Build by the preprocessor
kw	E	keywordlist	Text or CDATA node containing the keywords
languages	E	highlight	Node containing languages as children
language	E	languages	A language specification
contexts	E	language	A collection of context node
default	A	contexts	String identifying the default context
context	E	contexts	A context node containing rules as children
id	A	context	String identifier
attribute	A	context	The name of the node in which the context will be stored.
detect2chars**	E	context	Rule to dectect pair of characters. (ex: /*)
char	A	detect2chars	First character of the pattern
char1	A	detect2chars	Second character of the pattern
detectchar**	E	context	Rule to dectect one character. (ex: ")
char	A	detectchar	character to match
keyword**	E	context	Rule to match a family of keywords
family	A	keyword	Family indentifier, must match /highlight/keywordlists/keyword[@id]
regexp	E	context	A regular expression to match
expression	A	regexp	the regular expression.

Comments:

• *: this argument is optional at the condition that preprocessing takes place. The usual way to do is to always preprocess or to preprocess once with the "save-build" parameter set to "yes" so that the preprocessing is save. Note that if you modify the language syntax, you will have to re-preprocess.
• **: all those element have two other attributes:

  attribute (optional)	A	a rule	The name of the node in which the string match will be stored. If not set or equal to "hidden", no node is created.
  context	A	a rule	The next context.

• ***: Client-side javascript is not allowed to write files. Hence, this option aplies only to server-side execution.

Preprocessing

In the preprocessing phase, we are going to build the regular expressions that will be used later on to match the rules. This section makes an extensive use of regular expressions. As mentionned before, this is not a tutorial on regular expressions since I'm also a newbie in that topic. A tool that I have found to be really useful is Expresso (see [3]) a regular expression test machine.

Keyword Families

Building the keyword families regular expressions is straightforward. You just need to concatenate the keywords togetter using |:

<keywordlist ...>
    <kw>if</kw>
    <kw>else</kw>
</keywordlist>

will be matched by

\b(if|else)\b

The generated regular expression is added as an attribute to the keywordlist node:

<keywordlist regexp="\b(if|else)\b"> 
    <kw>if</kw> 
    <kw>else</kw> 
</keywordlist>

When using libraries of function, it is usual to have a common function header, like for OpenGL:

glVertex2f, glPushMatrix(), etc...

You can skip the hassle of rewritting gl in all the kw items by using the attribute pre which takes a regular expression as a parameter:

<keywordlist pre="gl" ...>
    <kw>Vertex2f</kw>
    <kw>PushMatrix</kw>
</keywordlist>

will be matched by

\bgl(Vertex2f|PushMatrix)\b

You can also add regular expression after the keyword using post. Still working on our OpenGL example, there are some methods that have characters at the end to tell the type of parameters:

• glCoord2f: takes 2 floats,
• glRaster3f: takes 3 floats,
• glVertex4v: takes an array of floats of size 4

Using post and regular expression, we can match it easily:

<keywordlist pre="gl" post="[2-4]{1}(f|v){1}" ...>
    <kw>Vertex</kw>
    <kw>Raster</kw>
</keywordlist>

will be matched by

\bgl(Vertex2f|PushMatrix)[2-4]{1}(f|v){1}\b

String Literals

This is a little exercise on regular expression: How to match a literal string in C++? Remember that it must support \", end of line with \.

My answer (remember I'm a newbie) is

"(.|\\"|\\\r\n)*?((\\\\)+"|[^\\]{1}")

I tested this expression on the following string:

"a simple string" 
---
"a less \" simple string" 
---
"a even less simple string \\" 
---
"a double line\
string"
---
"a double line string does not work without 
backslash"
---
"Mixing" string "can\"" become "tricky"
---
"Mixing  \" nasty" string is \" even worst" 

 

Contexts

The context regular expression is also build by concatenating the regular expression of the rules. The value is added as an attribute to the context node:

<context regexp="(...|...)">

Controlling if Preprocessing is Neccessary

It is possible to skip the preprocessing phase or to save the "preprocessed" language specification file. This is done by specifying the following parameters in the root node highlight

Attribute	Description	Default
need-build	"yes" if needs preprocessing	yes
save-build	"yes" if saving preprocessed language specification to disk	no

Javascript call

The preprocessing phase is done through the javascript method loadAndBuildSyntax:

// language specification file

var sXMLSyntax = "highlight.xml";
// loading is done by loadXML

// preprocessing is done in loadAnd... It returns a DOMDocument

var xmlDoc = loadAndBuildSyntax( loadXML( sXMLSyntax ) );

Parsing

We are going to use the language syntax above to build an XML tree out of the source code. This tree will be made out of successive context nodes.

We can start parsing the string (pseudo-code below):

source = source code;
context = code; // current context

regExp = context.regexp; // regular expresion of the current context

while( source.length > 0)
{

Here we follow the procedure:

1. find first match of the contextrules
2. store the source before the match
3. find the rule that was matched
4. process the rule parameters

    match = regExp.execute( source );
    // check if the rules matched something

    if( !match)
    {
        // no match, creating node with the remaining source and finishing.

        addChildNode( context // name of the node,

            source // content of the node);

        break;
    }    
    else
    {

The source before the match has to be stored in a new node:

        addChildNode( context, source before match);

We now have to find the rule that has matched. This is done by the method findRule that returns the rule node. The rule is then processed using attribute and context parameters.

    
        // getting new node

        ruleNode = findRule( match );
        // testing if matching string has to be stored

        // if yes, adding

        if (ruleNode.attribute != "hidden")                
            addChildNode( attribute, match);
        
        // getting new context            

        context=ruleNode.context;
        // getting new relar expression            

        regExp=context.regexp;            
    }
}

At the end of this method, we have build an XML tree containing the context. For example, consider the classic of the classic "Hello world" program below:

int main(int argc, char* argv[])
{
    // my first program

    cout<<"Hello world";
    return -1;
};

This sample is translated in the following xml structure:

<parsedcode lang="cpp" in-box="-1">
  <reservedkeyword>int</reservedkeyword>
  <code> main(</code>
  <reservedkeyword>int</reservedkeyword>
  <code> argc, >

Here is the specification of the resulting XML file:

Node Name	Type	Parent Node	Description
parsedcode	root		Root node of document
lang	A	parsedcode	type of language: c, cpp, jscript, etc.
in-box	A	parsedcode	-1 if it should be enclosed in a pre tag, otherwize in code tag
code	E	parsedcode	non special source code
and others...	E	parsedcode

Javascript Call

The algorithm above is implemented in the applyRules method:

applyRules( languageNode, contextNode, sCode, parsedCodeNode);

where

• languageNode is the current language node (XMLDOMNode),
• contextNode is the start context node (XMLDOMNode),
• sCode is the source code (String),
• parsedCodeNode is the parent node of the parsed code (XMLDOMNode)

XSLT Transformation

Once you have the XML representation of your code, you can basically do whatever you want with it using XSLT transformations.

Header

Every XSL file starts with some declarations and other standard options:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output encoding="ISO-8859-1" indent="no" omit-xml-declaration="yes"/>

Since source code indenting has to be conserved, we disable automatic indenting and, also the xml declaration is omitted:

<xsl:output encoding="ISO-8859-1" indent="no" omit-xml-declaration="yes"/>

Basic Templates

<xsl:template match="cpp-linecomment">
<span class="cpp-comment">//<xsl:value-of select="text()"
	disable-output-escaping="yes" /></span>
</xsl:template>

This template appies to the node cpp-linecomment which corresponds to single line comment in C++.
We apply the CSS style to this node by encapsulating it in span tags and by specifying the CSS class.
Moreovern, we do not want character escaping for that, so we use

<xsl:value-of select="text()"   disable-output-escaping="yes" /></span>

The Parsedcode Template

It gets a little complicated here. As everybody knows, XSL quicly becomes really complicated once you want to do more advanced stylesheets. Below is the template for parsedcode, it does simple thing but looks ugly:
Checks if in-box parameter is true, if true create pre tags, otherwize create code tags.

<xsl:template match="parsedcode">
  <xsl:choose>
    <xsl:when test="@in-box[.=0]">
      <xsl:element name="span">
        <xsl:attribute name="class">cpp-inline</xsl:attribute>
        <xsl:attribute name="lang">
          <xsl:value-of select="@lang"/>
        </xsl:attribute>
        <xsl:apply-templates/>
      </xsl:element>
    </xsl:when>
    <xsl:otherwise>
      <xsl:element name="pre">
        <xsl:attribute name="class">cpp-pre</xsl:attribute>
        <xsl:attribute name="lang">
          <xsl:value-of select="@lang"/>
        </xsl:attribute>
        <xsl:apply-templates/>
      </xsl:element>
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>

Javascript Call

This is where you have to customize a bit the methods. The rendering is done in the method highlightCode:

highlightCode( sLang, sRootTag, bInBox, sCode)

where

• sLang is a string identifying the language ( "cpp" for C++),
• sRootTag will the node name encapsulation the code. For example, pre for boxed code, code for inline code,
• bInCode a boolean set to true if in-box has to be set to true.
• sCode is the source code
• it returns the modified code

The file names are hardcoded inside the highlightCode method: hightlight.xml for the language specification, highlight.xsl for the stylesheet. In the article, the XML syntax is embed in a xml tag and is simply accessed using the id

Applying Code Transformation to an Entire HTML Page.

So now you are wondering how to apply this transformation to an entire HTML page? Well surprisingly, this can be done in... 2 lines! In fact, there exist the method String::replace(regExp, replace) that replaces the substring matching the regular expressions regExp with replace. The best part of the story is that replace can be a function... So we just (almost) need to pass highlightCode and we are done.

For example, we want to match the code enclosed in pre tags:

// this is javascript

var regExp=/<pre>(.|\n)*?<\/pre>/gim;
// render xml

var sValue =  sValue.replace( regExp,  
        function( $0 ) 
        {
            return highlightCode("cpp", "cpp",$0.substring( 5, $0.length-6 ));
        } 
    );

In practice, some checking are made on the language name and all these computations are hidden in the replaceCode method.

Using the Methods in your Web Wite

ASP Pages

To use the highlightin scheme in your ASP web site:

1. Put the javascript code between script tags in an asp page:

   <script language="javascript" runat="server">
   ...
   </script>
   

2. include this page where you need it
3. modify the method processAndHighlightCode to suit your needs
4. modify the method handleException to redirect the exception to the Response
5. apply this method to the HTML code you want to modify
6. update your css style with the corresponding classes.

Demonstration Application

The demonstration application is a hack of the CodeProject Article Helper. Type in code in pre or code to see the results.

Update History

Date	Description
02-20-2002	Added demonstration in the article! Added new languages: JScript, VBScript, C, XML Now handling <pre lang="..."> bracketting: you can specify the language of the code. loadAndBuildSyntax takes a DomDocument as parameter. You can call it like this: loadAndBuildSyntax( loadXML( sFileName )) highlightCode takes one more argument: bInBox.
02-17-2002	Minor changes in stylesheet
02-14-2003	Added pre, post to the keyword rule <li> The text disapearing in <code> brackets is fixed. The bug was in processAndHighlightArcticle (bad function argument).</li> </ul>
02-13-2003	Initial release.

References

[1]	The Kate Syntax Highlight System documentation files.
[2]	The Code Project Article Helper, Jason Henderson
[3]	Expresso - A Tool for Building and Testing Regular Expressions, Hollenhorst
[4]	Article Part 2

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

Msgs 1 to 25 of 46 (Total in Forum: 46) (Refresh) FirstPrevNext

How to implement that mark78 23:21 22 Jun '05   I have code in Dreamweaver and i would like to Highlight my code! here in those zip files are just also code, how to change my codes color??? Sign In·View Thread·PermaLink Re: How to implement that Anonymous 7:13 23 Jun '05   1. Read the article. 2. Change the style in the css Sign In·View Thread·PermaLink simplified schema for markup Sebrell 2:18 3 Nov '04   This schema requires no prioritization rules, merely ordering (plus 800-odd lines of javascript code, of course). <?xml version="1.0" encoding="utf-8" ?> <schema id="MarkupMetaData"       targetNamespace="sebrell-schemas:markup-generator"       elementFormDefault="unqualified"       attributeFormDefault="unqualified"       xmlns="http://www.w3.org/2001/XMLSchema">       <element name="MarkupMetaData">             <complexType>                   <choice maxOccurs="unbounded">                         <element name="MarkupLanguage" type="ct_MarkupLanguage" />                         <element name="TransformStep" type="ct_TransformStep" />                         <element name="StepRegexMapping" type="ct_StepRegexMapping" />                         <element name="RegexDef" type="ct_RegexDef" />                         <element name="Keyword" type="ct_Keyword" />                         <element name="MatchRule" type="ct_MatchRule" />                         <element name="RuleRegexMapping" type="ct_RuleRegexMapping" />                   </choice>             </complexType>             <key name="PK_MarkupLanguage">                   <selector xpath=".//MarkupLanguage" />                   <field xpath="@LanguageId" />             </key>             <key name="PK_TransformStep">                   <selector xpath=".//TransformStep" />                   <field xpath="@StepId" />             </key>             <key name="PK_StepRegexMapping">                   <selector xpath=".//StepRegexMapping" />                   <field xpath="@StepId" />                   <field xpath="@RegexId" />             </key>             <key name="PK_RegexDef">                   <selector xpath=".//RegexDef" />                   <field xpath="@RegexId" />             </key>             <key name="PK_Keyword">                   <selector xpath=".//Keyword" />                   <field xpath="@RegexId" />                   <field xpath="@Word" />             </key>             <key name="PK_MatchRule">                   <selector xpath=".//MatchRule" />                   <field xpath="@RuleId" />             </key>             <key name="PK_RuleRegexMapping">                   <selector xpath=".//RuleRegexMapping" />                   <field xpath="@RuleId" />                   <field xpath="@RegexId" />             </key>             <keyref name="FK_TransformStep_MarkupLanguage" refer="PK_MarkupLanguage">                   <selector xpath=".//TransformStep" />                   <field xpath="@LanguageId" />             </keyref>             <keyref name="FK_StepRegexMapping_TransformStep" refer="PK_TransformStep">                   <selector xpath=".//StepRegexMapping" />                   <field xpath="@StepId" />             </keyref>             <keyref name="FK_StepRegexMapping_RegexDef" refer="PK_RegexDef">                   <selector xpath=".//StepRegexMapping" />                   <field xpath="@RegexId" />             </keyref>             <keyref name="FK_Keyword_RegexDef" refer="PK_RegexDef">                   <selector xpath=".//Keyword" />                   <field xpath="@RegexId" />             </keyref>             <keyref name="FK_MatchRule_RegexDef" refer="PK_RegexDef">                   <selector xpath=".//MatchRule" />                   <field xpath="@RegexId" />             </keyref>             <keyref name="FK_RuleRegexMapping_MatchRule" refer="PK_MatchRule">                   <selector xpath=".//RuleRegexMapping" />                   <field xpath="@RuleId" />             </keyref>             <keyref name="FK_RuleRegexMapping_RegexDef" refer="PK_RegexDef">                   <selector xpath=".//RuleRegexMapping" />                   <field xpath="@RegexId" />             </keyref>       </element>       <complexType name="ct_MarkupLanguage">             <attribute name="LanguageId" type="string" use="required" />             <attribute name="CssClass" type="string" use="required" />       </complexType>       <complexType name="ct_TransformStep">             <attribute name="StepId" type="int" use="required" />             <attribute name="LanguageId" type="string" use="required" />             <attribute name="MatchAll" type="boolean" use="required" />             <attribute name="IsOtherLanguage" type="boolean" use="required" />       </complexType>       <complexType name="ct_StepRegexMapping">             <attribute name="StepId" type="int" use="required" />             <attribute name="RegexId" type="int" use="required" />       </complexType>       <complexType name="ct_RegexDef">             <attribute name="RegexId" type="int" use="required" />             <attribute name="PatternEnd" type="string" use="required" />             <attribute name="PatternStart" type="string" />             <attribute name="Options" type="st_Options" use="required" />             <attribute name="OtherLanguageIndex" type="int" default="-1" />             <attribute name="ResolveIndex" type="int" default="-1" />             <attribute name="ResolutionKind" type="st_ResolutionKind" default="none" />       </complexType>       <simpleType name="st_Options">             <restriction base="string">                   <pattern value="g?m?i?" />             </restriction>       </simpleType>       <complexType name="ct_Keyword">             <attribute name="RegexId" type="int" use="required" />             <attribute name="Word" type="string" use="required" />       </complexType>       <simpleType name="st_ResolutionKind">             <restriction base="string">                   <enumeration value="clientScript" />                   <enumeration value="serverScript" />                   <enumeration value="style" />                   <enumeration value="none" />             </restriction>       </simpleType>       <complexType name="ct_MatchRule">             <attribute name="RuleId" type="int" use="required" />             <attribute name="RegexId" type="int" use="required" />             <attribute name="Index" type="int" use="required" />             <attribute name="Encode" type="boolean" use="required" />             <attribute name="Markup" type="string" />       </complexType>       <complexType name="ct_RuleRegexMapping">             <attribute name="RuleId" type="int" use="required" />             <attribute name="RegexId" type="int" use="required" />       </complexType> </schema> Sign In·View Thread·PermaLink Bug?!? Bassam Abdul-Baki 11:09 10 Feb '04   Seems like there's a bug in the highlighting whenever there's an #include statement. Some appear and some don't. Sign In·View Thread·PermaLink Re: Bug?!? Bassam Abdul-Baki 6:08 13 Feb '04   It seems that for those #include where file is not a keyword like "vector", the code is interpretting it as an HTML tag. One work-around for this is to call the following function after processAndHighlightText(). The function could be improved to keep the number of whitespace the same and be case-sensitive. function replaceIncludes( sValue ) { var sLang, sTemplate, xp, languageNode; // get language sLang = findLang( sValue ); // if no language... do nothing if (sLang == null) return sValue; if ((sLang != "c") && (sLang != "cpp")) return sValue; var sRegExp, regExp; // building regular expression sRegExp = "#include" +"\\s*" +"<"; regExp=new RegExp(sRegExp, "gim"); // render pre return sValue.replace( regExp, "#include <" ); } Sign In·View Thread·PermaLink Re: Bug?!? Anonymous 20:54 16 Aug '04   There is also a problem handling #ifdefs #ifndef etc. it also doesn't handle #define correctly. basicly these are the points I noticed: #include "something" //or is the same as: # include "something" //there could be whitespace between "#" and the rest. std::map is the same as std :: map or even the same as std \ ::map so, it could be fixed by changing pre="(std:{0,1}" with pre="(std\s*::\s*)?" for stl keywords. "3" with "#\s*" for preprocessor derictives. For the case with line break "\" char there wouldn't be any problems probably if all the lines, that are not part of a comment finishing with "\\\s*" are glued together, forming a single line "string" is one of the oftenly used stl containers is not recognized (not listed inside stl keywords). and there was a strange problem I noticed - regular expression "#" doesn't work to match #ifdefs - so in my case #include is always in plain black color - don't know what's the problem. Sign In·View Thread·PermaLink Re: Bug?!? Sebrell 0:52 3 Nov '04   To handle pre-processor directives, use this RegExp: /(?:^|\s)\#(define|elif|else|endif|endregion|error|ifdef|ifndef|include|line|pragma|undef|using)\s/g; To handle the backslash that means "ignore the next line break", you need a pattern that tells the parser to match "either (not lineBreak nor carriageReturn) or (sequence: backslash, possible carriageReturn, newLine, possible carriageReturn)" Thus, for strings delimited with double-quotes (javascript syntax allows this, I think) you get: /"([^\\]?\\"|[^"\n\r]|\\\r?\n\r?)*"/g or new RegExp("\"([^\\\\]?\\\\\"|[^\"\\n\\r]|\\\\\\r?\\n\\r?)*\"", "g"); HTH Sebrell Sign In·View Thread·PermaLink Nicely Done! Bassam Abdul-Baki 10:25 2 Feb '04   Surprizingly, I was just asking some web people if such a thing could be done using stylesheets. I do have one suggestion though. Create a frame that displays a link of files on the left=hand side with the formatted code on the right-hand side. This way, when the user selects a file, the contents of it is read and formatted for display on the right. You can also write the type of formatting to be used on the first line of each file to make things easier. Sign In·View Thread·PermaLink Have you test the preprocessors? Anonymous 18:36 23 Jun '03   I found the highlighting of cpp-preprocessors doesn't work. Sign In·View Thread·PermaLink 5.00/5 (1 vote) Updates for VBScript Highlighting Ed Preston 9:03 20 Jun '03   Great article Jonathan. I hope I can offer some suggestions that come in handy for you. Missing a few statements for VBScript. Resume (On Error Resume Next) End (End If) Step (for .. to .. step) You have an extra function, named "Conversions" which does not exist but is in the keyword list. The inclusion of the methods for intrinsic objects might give you some trouble. You specified that they are preceded and ended on a word boundary. Often they are not, for example:       object.Clear They will only be found when they are within a "with" statement.       With object             Clear       End With Lastly, if the script being highlighted consumes an object that has some similar methods to intrinsic objects you find that you get inconsistant highlighting.       With object             Clear               <- Highlighed             DoSomething      <- Not highlighted       End With I say, leave them out for consistancy. There is an "and", in lowercase, in the function keyword list. Include the full set (Mod Is Not And Or Xor Eqv Imp) in the function keyword list. Or, put the multi-character operators in thier own keywordlist. Since multi-character operators are separated by a word boundry on either side. With a few updates to the "context" node and the style sheet you can apply formatting to operators. I like orange for displaying operators but it does not look good on the boxed code background. Just for interest, single character operators ^ - * / \ + & = > < <= >= could be pulled out using the expression ([-\^\*/\\&=><\+]) Note: Since < > = are defined as operators already, why search for <= >= combinations? Color formatting remains consistant. I do not know if it is a good or bad thing but numeric expressions come out half formatted. (ie. the leading - in -1234) I added in a separate search for numerics which fixed it. I found that using a separate color for numerics was a bit confusing. The "Rem" statement is listed as a keyword. It would be nice if it was evaluated as a comment when applicable. For the context of this article I would have avoided it too. (ie.. The documentation says one thing but VBScript does another; rem is not indicitive of modern basica; excluding the keyword list before a rem statement on a single line would double the regex) Took some time to nut out a few things regarding "Rem" and I am offering them up in case you need them in the future. Short and simple: do what you are doing for ' delimniated comments. I added Rem((\t| ).*$|$) making it ('.*$|Rem((\t| ).*$|$)|"(.|"")*?" ...... Note: The documentation says that it must be a space but VBScript seems to accept tabs as well. You need to add another test to the java script function findRule along with the entry into the XML syntax file. I recommend testing the first and fourth characters. The first being R or r and the fourth having a value less than 33. This will format "Rem" statements properly for the most part. You see the documentation says that the "Rem" syntax is pretty strict when in fact it is not. Try the examples in the 5.6 documentation without the proceeding : on a line that just does assignment. That said, the scope of you article was formatting code for display not validation so I offer the simpler expression that is not looking for the : between "Rem" and proceeding statements on the same line. Again, great article. Hope this contributes to your work. Sign In·View Thread·PermaLink 5.00/5 (1 vote) Re: Updates for VBScript Highlighting Jonathan de Halleux 0:34 21 Jun '03   Thank you for this fantastic update. In I haven't look up much at vbscript. I'm mainly a C++ freak and don't play much with those languages. Could you forward me your "revamped" language xml file ? Looks like you did quite a work on that. Jonathan de Halleux. Sign In·View Thread·PermaLink Re: Updates for VBScript Highlighting Ed Preston 8:15 8 Jul '03   Opps! Forgot to add the "To" statement to the updated XML file I sent through. Sign In·View Thread·PermaLink This page requires Microsoft Internet Explorer. Gregor S. 4:01 13 Mar '03   Why is that the case? I don't use IE, and don't want in the future. Is there any code that is not supported by other browsers, such like Mozilla? regards Sign In·View Thread·PermaLink 1.00/5 (2 votes) Re: This page requires Microsoft Internet Explorer. Jonathan de Halleux 4:09 13 Mar '03   If you render the page on the server, you don't need a particular browser... You can also try to use the C# component. Jonathan de Halleux. Sign In·View Thread·PermaLink Re: This page requires Microsoft Internet Explorer. DaveThorn 3:54 25 Jan '04   Works fine in theory, I have just found a whole swag of issues with sytle positioning of textbox controls and other controls when using a mozilla browser to view asp.net pages. I'm not quite sure why, when microsoft detect a mozilla browser they refrain from sending critical positioning information to the client. Weird... I understand older versions of mozilla don't handle it properly, but the new browser supposably works correctly. Sign In·View Thread·PermaLink 2.00/5 (1 vote) Amazing! Chopper 8:04 12 Mar '03   What's only left to make it generate ready formatted articles for this website Regards, Vitaly Tomilov Professional tooltips for all development platforms Free on www.Tooltips.NET Sign In·View Thread·PermaLink 1.00/5 (1 vote) Vote Jonathan de Halleux 4:44 13 Mar '03   Thanks, Don't forget to vote for me in the contest... Jonathan de Halleux. Sign In·View Thread·PermaLink Re: Vote Chopper 4:48 13 Mar '03   ops! just did Regards, Vitaly Tomilov Professional tooltips for all development platforms Free on www.Tooltips.NET Sign In·View Thread·PermaLink Survey Jonathan de Halleux 4:59 13 Mar '03   One last effort and vote also in the survey Jonathan de Halleux. Sign In·View Thread·PermaLink Highlight and Folding :P Roger J 21:51 11 Mar '03   My little highlighter can do this to , and also add javascript folding to the html output http://www.compona.com/forum/thread.ascx?thread=13[^] the actual winforms control is licensed , but the "syntaxdocument" can be used for syntaxhighlight html export in a forum or whatever w/o any license... it currently comes with predefined syntaxes for some 30 languages. more info on : http://www.compona.com/WikiEngine/WikiPageViewer.ascx?ID=5[^] oke , will end the commercial here :p //Roger Sign In·View Thread·PermaLink 1.00/5 (2 votes) Advertising Jonathan de Halleux 1:23 12 Mar '03   Roger, you are doing advertising here... I don't see what I could do from your syntax files without the parsing code. Anyway, after a quich look on them, I'm glad to see that you had the same ideas as I. Of course, 30 languages syntax files is impressive! Maybe you could add details on the Client Javascript used to do the folding ? This is a developper site, no? Jonathan de Halleux. Sign In·View Thread·PermaLink Re: Advertising Roger J 2:28 12 Mar '03   NOOOH thats not advertising , is it :P oke , maybe it was a little attempt to do that actually its not that easy to share the javascript . coz the exporter uses the "SyntaxDocument" class (which parses the document and handles all the folding structures internally) , and the exporter merely loop through all rows in the document and reads the folding settings from that row , and incase the row is foldable , the exporter outputs a litte java script.... so the javascript is nothing that can be applied to a set of text or anything , you need the hirarchies from the document in order to make anything usefull of it... it is not much more that a function that sets the "display" style of a html DIV element. although , it would be interesting pros and cons of our different syntax definition files //Roger Sign In·View Thread·PermaLink 1.00/5 (1 vote) :) Jonathan de Halleux 3:03 12 Mar '03   Roger J wrote: although , it would be interesting pros and cons of our different syntax definition files Maybe the best solution would wrapping Lexx ? Jonathan de Halleux. Sign In·View Thread·PermaLink 5.00/5 (1 vote) Case sensitivity and context based highlighting Chris Maunder 8:09 27 Feb '03   Nice Job! I had a brief look through the code and the article and I didn't see any quick qay of specifying if keywords are case sensitive or not. Eg C/C#/C++ are case sensitive while VB/VB.NET/SQL etc aren't. Did I miss something obvious? Also: I was wondering if you've thought of extending the algorithm to be context sensitive. When colorizing HTML, the HTML itself obeys one set of rules but javascript or C# code blocks obey a completely different set of rules. Any thoughts on this? Again - sensational work. cheers, Chris Maunder Sign In·View Thread·PermaLink 5.00/5 (1 vote) Ooops Jonathan de Halleux 22:26 27 Feb '03   Chris Maunder wrote: I had a brief look through the code and the article and I didn't see any quick qay of specifying if keywords are case sensitive or not. Eg C/C#/C++ are case sensitive while VB/VB.NET/SQL etc aren't. Did I miss something obvious? Damn VB ! A priori, there is no straightforward solution since the "case sensitivity" is specififed for the entire regular expression. Maybe I could specify if a language is case sensitive at all ? This could be added quite easily, but it's not a very flexible solution. For example, if a language mixes case sensitive, insensitive keywords it will fail. Chris Maunder wrote: Also: I was wondering if you've thought of extending the algorithm to be context sensitive. When colorizing HTML, the HTML itself obeys one set of rules but javascript or C# code blocks obey a completely different set of rules. Any thoughts on this? I'm afraid I don't understand the meaning of the sentence ? Do you mean CSS class? Chris Maunder wrote: Again - sensational work. Again - sensational site ! Jonathan de Halleux. Sign In·View Thread·PermaLink 5.00/5 (1 vote)

Last Visit: 16:39 8 Nov '09     Last Update: 16:39 8 Nov '09 12 Next »