customization_syntax.html
5.73 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>EditArea documentation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="doc_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class='header'>
<h1>Customization - Creating a syntax definition file</h1>
</div>
<div class='content'>
<h3>Creating your own syntax definition file</h3>
<p>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.</p>
<p>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".</p>
<p>Here is a "css" example:</p>
<pre>editAreaLoader.load_syntax["css"] = { <strong>// here <language_abbr> is "css" so the file is "css.js"</strong>
'DISPLAY_NAME' : 'Css' <strong>// String: used to define a better syntax name to display. Used only when using script using compressed version of the script</strong>
,'COMMENT_SINGLE' : ['@'] <strong>// Array: possible single line comments</strong>
,'COMMENT_MULTI' : {'/*' : '*/'} <strong>// associated Array: possible multiple line comments</strong>
<strong>// ("open_mark1" : "close mark1", "open_mark2" : "close_mark2"}</strong>
,'QUOTEMARKS' : ['"', "'"] <strong>// Array: the different possible quotemarks that delimitate strings</strong>
,'KEYWORD_CASE_SENSITIVE' : false <strong>// Boolean: define if the language is case-sensitive</strong>
,'KEYWORDS' : { <strong>// Array: an array of array containing the different keywords class</strong>
'attributes' : [ <strong>// the name 'attribute' can be changed with no problem. I</strong>
<strong>// it's only used to define the matching style class</strong>
'aqua', 'azimuth', 'background-attachment', 'background-color' <strong>// etc...</strong>
]
,'values' : [
'absolute', 'block', 'bold', 'bolder', 'both' <strong>// etc...</strong>
]
,'specials' : [
'important'
]
}
,'OPERATORS' :[ <strong>// Array: the operators to highlight (eg, can also contain: +, -, * or / in other languages).</strong>
':', ';', '!', '.', '#'
]
,'DELIMITERS' :[ <strong>// Array: the block code delimiters to highlight</strong>
'{', '}'
]
,'STYLES' : { <strong>// Array: an array of array, containing all style to apply for categories defined before.</strong>
<strong>// Better to define color style only. </strong>
'COMMENTS': 'color: #AAAAAA;'
,'QUOTESMARKS': 'color: #6381F8;'
,'KEYWORDS' : { <strong>// contain the associated style foreach keywords categories</strong>
'attributes' : 'color: #48BDDF;'
,'values' : 'color: #2B60FF;'
,'specials' : 'color: #FF0000;'
}
,'OPERATORS' : 'color: #FF00FF;'
,'DELIMITERS' : 'color: #60CA00;'
}
};</pre>
<p>After reading this example you should be able to create your own syntax file.</p>
<div class='separator'></div>
<h3>Advanced syntax definition</h3>
<pre>editAreaLoader.load_syntax["xml"] = {
'COMMENT_SINGLE' : {}
,'COMMENT_MULTI' : {'<!--' : '-->'}
,'QUOTEMARKS' : {1: "'", 2: '"'}
,'KEYWORD_CASE_SENSITIVE' : false
,'KEYWORDS' : {
}
,'OPERATORS' :[
]
,'DELIMITERS' :[
]
,'REGEXPS' : { <strong>// advance syntax highlight through regexp</strong>
'xml' : { <strong>// the name 'doctype' can be changed with no problem.</strong>
'search' : '()(<\\?[^>]*?\\?>)()' <strong>// the regexp</strong>
,'class' : 'xml' <strong>// the css class</strong>
,'modifiers' : 'g' <strong>// the modifier ("g" and/or "i")</strong>
,'execute' : 'before' <strong>// "before" or "after". Determine if the regexp must </strong>
<strong>// be done before or after the main highlight process</strong>
}
,'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;'
}
}
};</pre>
<p>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:
</p>
<pre>(<before_highlight>)(<code_to_highlight>)(<after_highlight>)</pre>
<p>For the pattern modifier, "g" signify that all occurences will be highlighted, "i" signify
that the regexp will be case-insensitive.</p>
<div class='separator'></div>
<h3>Contributing your syntax definition file</h3>
<p>
Go to the <a href="http://sourceforge.net/tracker/?atid=829999&group_id=164008&func=browse">sourceforge patch page</a>
and upload the syntax file.
</p>
</div>
<div class='footer'>
<div class="indexlink"><a href="index.html">Index</a></div>
<div class='copyright'>EditArea - © Christophe Dolivet 2007-2010</div>
<br style="clear: both" />
</div>
</body>
</html>