/usr/share/doc/libjs-edit-area/customization_syntax.html is in libjs-edit-area 0.8.2-1.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
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>
|