Web Design HTML Editor

Customizing WebDesign's More Advanced Features

Creating Syntax Files

WebDesign allows you to create custom keyword files that WebDesign will load when it is launched and use to color the specified keywords. These custom keyword files allow you customize WebDesign's syntax coloring abilities and add syntax coloring support for languages not directly supported by WebDesign. For example, by default, WebDesign provides syntax coloring for HTML, XHTML, CSS, PHP, JavaScript, ASP, XML, VBScript through the use of syntax files.

Keyword files are simply XML files which give instructions to WebDesign on how to color documents. The best way to learn about creating syntax files is to look at the ones that are already provided. You can find the default Syntax Files in the Syntax Files folder located in the Support Folder in the same folder as the WebDesign application.

The format of a syntax file is shown below using the HTML Syntax File, provided by default in WebDesign, as an example;

<SyntaxFile>
 <name>HTML</name> <!--Specify a name for your syntax file-->
 <delimiters> <>"'%,.(){}[]+*~|;=</delimiters> <!--Specify word delimiters that WebDesign will recognize as the ending of a word-->
 <quotation1 color="teal">"</quotation1> <!--Specify the first quotation character, you can have up to 2 quotation characters by using the 'quotation2' tag-->
 <blockcommentON color="gray"><!</blockcommentON> <!--Specify the character that begins a block comment-->
 <blockcommentOFF>></blockcommentOFF> <!--Specify the character that ends a block comment-->
 <keywordprefix color="blue"><</keywordprefix> <!--Specify a character that should be colored as a keyword. You can have up to 2 keyword prefixes by using the tag 'keywordprefix2'. The keyword is colored until a delimiter keyword, specified above, is found-->
 <keywords> <!--Specify keywords using the 'category' child tag. You can have as many categories as you like. Make sure a name and color attribute is specified.-->
  <category name="attributes" color="green">,abbr,accept-charset,accept,accesskey,action,align,alink,alt,applicationname,archive,autoFlush,axis,background,behavior,bgcolor,bgproperties,border,bordercolor,bordercolordark,bordercolorlight,borderstyle,buffer,caption,cellpadding,cellspacing,char,charoff,charset,checked,cite,class,classid,clear,code,codebase,codetype,color,cols,colspan,compact,content,contentType,coords,data,datetime,declare,defer,dir,direction,disabled,dynsrc,encoding,enctype,errorPage,extends,face,file,flush,for,frame,frameborder,framespacing,gutter,headers,height,href,hreflang,hspace,http-equiv,icon,id,import,info,isErrorPage,ismap,isThreadSafe,label,language,leftmargin,link,longdesc,loop,lowsrc,marginheight,marginwidth,maximizebutton,maxlength,media,method,methods,minimizebutton,multiple,name,nohref,noresize,noshade,nowrap,object,onabort,onblur,onchange,onclick,ondblclick,onerror,onfocus,onkeydown,onkeypress,onkeyup,onload,onmousedown,onmousemove,onmouseout,onmouseover,onmouseup,onreset,onselect,onsubmit,onunload,page,param,profile,prompt,property,readonly,rel,rev,rows,rowspan,rules,runat,scheme,scope,scrollamount,scrolldelay,scrolling,selected,session,shape,showintaskbar,singleinstance,size,span,src,standby,start,style,summary,sysmenu,tabindex,target,text,title,topmargin,type,urn,usemap,valign,value,valuetype,version,vlink,vrml,vspace,width,windowstate,wrap,xmlns:jsp, </category>
  <category name="Entities" color="navy">
,acute,agrave,acirc,amp,atilde,aring,auml,aelig,ccedil,cent,copy,deg,eacute,egrave,ecirc,eth,euml,frac12,frac14,frac34,gt,iacute,icirc,iexcl,igrave,iquest,iuml,lt,nbsp,ntilde,oacute,ograve,ocirc,otilde,ouml,oslash,pound,quot,reg,szlig,thorn,trade,uacute,ugrave,ucirc,uuml,yacute,yen,yuml, </category>
 </keywords>
</SyntaxFile>


Important Notes on Syntax Files
  1. When specifying characters such as <, > and & it is important that you use the their HTML entity value or else WebDesign will report an XML error when it tries to parse the document. WebDesign will correctly interpret HTML entites when it loads Syntax Files, so when in doubt, always use the HTML Entite value. Remember, WebDesign will let you easily insert HTML Entities from the HTML entities window (under the Window menu)
  2. You can specify line comments by using the 'linecomment1' and 'linecomment2' tags
  3. Separate each keyword with a comma (,). Also make sure the list of keywords begins with and ends with one.
  4. Make sure your keywords do not have any delimiters that you have specified in them or WebDesign will not color them correctly

To let WebDesign know about your custom Syntax File, place the Syntax files in the 'Syntax Files' folder within the 'Support Folder'. If there is no 'Syntax Files' folder you can create one. The Syntax files can be given any name, however, it is recommended that you keep the names short so that they will show up correctly in WebDesign's preferences dialog. For more details on using Syntax Files in WebDesign see Customizing the Text Editor and Document Modes in this user manual.

Adding Language Extensions

Learning a new language and coding one can be very difficult. It is hard to remember all the proper syntax rules or even the built in variables or functions. This is where WebDesign's Language Extensions will come in handy. They can provide specific code to be entered either by double clicking or dragging an item from the Language Extensions window to your document.

WebDesign Language Extensions can be created directly in WebDesign. Language Extensions are simple text files which follow a certain format. The Language Extension format looks like this;

#NEW=LANGUAGE EXTENSION HEADER (APPEARS IN BOLD IN WEBDESIGN - since no text is placed within the NEW tags)
#/NEW

#NEW=LANGUAGE EXTENSION ITEM 1 (APPEARS IN BOLD IN WEBDESIGN)
Text to be inserted into your document. Insertion point appears before ^!
http://www.url_to_help_resource.com/
#/NEW

#NEW=LANGUAGE EXTENSION ITEM 2
This text is inserted on one line.\rThis text inserted on the next line
http://www.url_to_help_resource.com/
#/NEW

A new Language Extension item is specified with the #NEW keyword, followed by an = sign then by the text that should appear in the Language Extensions list (See Window menu->Language Extensions for an example of how Language Extensions look in WebDesign). As you can see, all the text listed is just the text after the = sign.

The next line specifies the text that should be inserted into your document when you double click a Language Extension item. You can specify where the insertion point should be by placing ^! where the insertion should go. You can also specify line breaks using \r which WebDesign will convert to line breaks when the Language Extension item is double clicked. This is because you are only allowed one line to write the text that should be entered. You can also specify tabs using \t.

The next line lets you specify a url to a help or more information resource. If one is specified, a question mark icon within the Language Extension window will be displayed beside the Language Extension item. When clicked, the help page will be loaded within WebDesign's help reference.

You can create as many Language Extension items as you like. THE #NEW keyword creates a new Language Extension item while the #/NEW keyword closes one that was previously opened. Make sure each #NEW and #/NEW keyword is on a separate line.

Previous | Top | Next


Have Any Questions? Post them on our FREE discussion forum at http://www.ragesw.com/forums/
Copyright 1999-2005 Rage Software. All rights reserved world wide
Back to Index | More About WebDesign | FREE WebDesign Add-ons

Designed With WebDesign