Customization - Creating a syntax definition file

Creating your own syntax definition file

Creating you own syntax definition file for EditArea is fairly easy. You just have to know the language syntax, it's kewords, and then fill a javascript array with thoses values.

If your want to create a new syntax file for a given language, choose a language abbreviation for it (<language_abbr>) in lowercase. Then create the file "edit_area/reg_syntax/<language_abbr>.js".

Here is a "css" example:

editAreaLoader.load_syntax["css"] = {		// here <language_abbr> is "css" so the file is "css.js"
	'DISPLAY_NAME' : 'Css'		// String:  used to define a better syntax name to display. Used only when using script using compressed version of the script
	,'COMMENT_SINGLE' : ['@']		// Array:  possible single line comments
	,'COMMENT_MULTI' : {'/*' : '*/'}	// associated Array: possible multiple line comments 
						// ("open_mark1" : "close mark1", "open_mark2" : "close_mark2"}
	,'QUOTEMARKS' : ['"', "'"]		// Array: the different possible quotemarks that delimitate strings
	,'KEYWORD_CASE_SENSITIVE' : false	// Boolean: define if the language is case-sensitive
	,'KEYWORDS' : {				// Array: an array of array containing the different keywords class 
		'attributes' : [		// the name 'attribute' can be changed with no problem. I
						// it's only used to define the matching style class 
			'aqua', 'azimuth', 'background-attachment', 'background-color'	// etc...
		]
		,'values' : [
			'absolute', 'block', 'bold', 'bolder', 'both' 	// etc...
		]
		,'specials' : [
			'important'
		]
	}
	,'OPERATORS' :[		// Array: the operators to highlight (eg, can also contain: +, -, * or / in other languages).
		':', ';', '!', '.', '#'
	]
	,'DELIMITERS' :[	// Array: the block code delimiters to highlight
		'{', '}'
	]
	,'STYLES' : {	// Array: an array of array, containing all style to apply for categories defined before.
			// Better to define color style only. 
		'COMMENTS': 'color: #AAAAAA;'
		,'QUOTESMARKS': 'color: #6381F8;'
		,'KEYWORDS' : {			// contain the associated style foreach keywords categories
			'attributes' : 'color: #48BDDF;'
			,'values' : 'color: #2B60FF;'
			,'specials' : 'color: #FF0000;'
			}
		,'OPERATORS' : 'color: #FF00FF;'
		,'DELIMITERS' : 'color: #60CA00;'
				
	}
};

After reading this example you should be able to create your own syntax file.

Advanced syntax definition

editAreaLoader.load_syntax["xml"] = {
	'COMMENT_SINGLE' : {}
	,'COMMENT_MULTI' : {'<!--' : '-->'}
	,'QUOTEMARKS' : {1: "'", 2: '"'}
	,'KEYWORD_CASE_SENSITIVE' : false
	,'KEYWORDS' : {
	}
	,'OPERATORS' :[
	]
	,'DELIMITERS' :[
	]
	,'REGEXPS' : {			// advance syntax highlight through regexp
		'xml' : {		// the name 'doctype' can be changed with no problem.
			'search' : '()(<\\?[^>]*?\\?>)()'	// the regexp
			,'class' : 'xml'			// the css class
			,'modifiers' : 'g'			// the modifier ("g" and/or "i")
			,'execute' : 'before'			// "before" or "after". Determine if the regexp must 
								// be done before or after the main highlight process
		}
		,'cdatas' : {
			'search' : '()(<!\\[CDATA\\[.*?\\]\\]>)()'
			,'class' : 'cdata'
			,'modifiers' : 'g'
			,'execute' : 'before' 
		}
		,'tags' : {
			'search' : '(<)(/?[a-z][^ \r\n\t>]*)([^>]*>)'
			,'class' : 'tags'
			,'modifiers' : 'gi'
			,'execute' : 'before' 
		}
		,'attributes' : {
			'search' : '( |\n|\r|\t)([^ \r\n\t=]+)(=)'
			,'class' : 'attributes'
			,'modifiers' : 'g'
			,'execute' : 'before'
		}
	}
	,'STYLES' : {
		'COMMENTS': 'color: #AAAAAA;'
		,'QUOTESMARKS': 'color: #6381F8;'
		,'KEYWORDS' : {
			}
		,'OPERATORS' : 'color: #E775F0;'
		,'DELIMITERS' : ''
		,'REGEXPS' : {
			'attributes': 'color: #B1AC41;'
			,'tags': 'color: #800080;'
			,'xml': 'color: #8DCFB5;'
			,'cdata': 'color: #50B020;'
		}	
	}		
};

Well, as you can see in this example, the syntax highlight for xml is not based on keywords but on regexp. The text that will be highlighted, is the one between the second parentheses. The search parameter should always be like this:

(<before_highlight>)(<code_to_highlight>)(<after_highlight>)

For the pattern modifier, "g" signify that all occurences will be highlighted, "i" signify that the regexp will be case-insensitive.

Contributing your syntax definition file

Go to the sourceforge patch page and upload the syntax file.