jyapayne/ace
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update mode docs

Browse source
This commit is contained in:
nightwing 2013-09-19 00:17:12 +04:00
commit 80b8f557f0
1 changed files with 13 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

34
index.html
View file

@ -330,11 +330,9 @@ var MyNewFoldMode = require("./folding/mynew").MyNewFoldMode;
var Mode = function() { var Mode = function() {
// set everything up // set everything up
var highlighter = new MyNewHighlightRules(); this.HighlightRules = MyNewHighlightRules;
this.$outdent = new MatchingBraceOutdent(); this.$outdent = new MatchingBraceOutdent();
this.foldingRules = new MyNewFoldMode(); this.foldingRules = new MyNewFoldMode();
this.$tokenizer = new Tokenizer(highlighter.getRules());
}; };
oop.inherits(Mode, TextMode); oop.inherits(Mode, TextMode);
@ -343,9 +341,8 @@ oop.inherits(Mode, TextMode);
this.lineCommentStart = "//"; this.lineCommentStart = "//";
this.blockComment = {start: "/*", end: "*/"}; this.blockComment = {start: "/*", end: "*/"};
// Extra logic goes here--we won't be covering all of this // special logic for indent/outdent.
// By default ace keeps indentation of previous line
/* These are all optional pieces of code!
this.getNextLineIndent = function(state, line, tab) { this.getNextLineIndent = function(state, line, tab) {
var indent = this.$getIndent(line); var indent = this.$getIndent(line);
return indent; return indent;
@ -359,13 +356,16 @@ oop.inherits(Mode, TextMode);
this.$outdent.autoOutdent(doc, row); this.$outdent.autoOutdent(doc, row);
}; };
// create worker for live syntax checking
this.createWorker = function(session) { this.createWorker = function(session) {
var worker = new WorkerClient(["ace"], "ace/mode/mynew_worker", "NewWorker"); var worker = new WorkerClient(["ace"], "ace/mode/mynew_worker", "NewWorker");
worker.attachToDocument(session.getDocument()); worker.attachToDocument(session.getDocument());
worker.on("errors", function(e) {
session.setAnnotations(e.data);
});
return worker; return worker;
}; };
*/
}).call(Mode.prototype); }).call(Mode.prototype);
exports.Mode = Mode; exports.Mode = Mode;
@ -499,7 +499,7 @@ var fonts = lang.arrayToMap(
<li>Run <code>npm install</code> to install required dependencies.</li> <li>Run <code>npm install</code> to install required dependencies.</li>
<li>Run <code>node tmlanguage.js &lt;path_to_tmlanguage_file&gt;</code>; for example, <code>node &lt;path_to_tmlanguage_file&gt; /Users/Elrond/elven.tmLanguage</code></li> <li>Run <code>node tmlanguage.js &lt;path_to_tmlanguage_file&gt;</code>; for example, <code>node &lt;path_to_tmlanguage_file&gt; /Users/Elrond/elven.tmLanguage</code></li>
</ol> </ol>
<p>Two files are created and placed in <em>lib/ace/mode</em>: one for the language mode, and one for the set of highlight rules. You will still need to add the code into <em>kitchen_sink.html</em> and <em>demo.js</em>, as well as write any tests for the highlighting.</p> <p>Two files are created and placed in <em>lib/ace/mode</em>: one for the language mode, and one for the set of highlight rules. You will still need to add the code into <em>ace/ext/modelist.js</em>, and add a sample file for testing.</p>
<h3 id="a-note-on-accuracy"><a class="heading_anchor" href="#a-note-on-accuracy"><i class="headerLinkIcon"></i></a>A Note on Accuracy</h3> <h3 id="a-note-on-accuracy"><a class="heading_anchor" href="#a-note-on-accuracy"><i class="headerLinkIcon"></i></a>A Note on Accuracy</h3>
<p>Your <em>.tmlanguage</em> file will then be converted to the best of the converter’s ability. It is an understatement to say that the tool is imperfect. Probably, language mode creation will never be able to be fully autogenerated. There's a list of non-determinable items; for example:</p> <p>Your <em>.tmlanguage</em> file will then be converted to the best of the converter’s ability. It is an understatement to say that the tool is imperfect. Probably, language mode creation will never be able to be fully autogenerated. There's a list of non-determinable items; for example:</p>
<ul> <ul>
@ -642,25 +642,15 @@ if (match) {
}</code></pre> }</code></pre>
<h2>Testing Your Highlighter</h2> <h2>Testing Your Highlighter</h2>
<p>The best way to test your tokenizer is to see it live, right? To do that, you&#39;ll want to modify the <a href="build/kitchen-sink.html">live Ace demo</a> to preview your changes. You can find this file in the root Ace directory with the name <em>kitchen-sink.html</em>.</p> <p>The best way to test your tokenizer is to see it live, right? To do that, you&#39;ll want to modify the <a href="build/kitchen-sink.html">live Ace demo</a> to preview your changes. You can find this file in the root Ace directory with the name <em>kitchen-sink.html</em>.</p>
<p>The file that defines the behavior for this live demo is defined in <em>demo/kitchen-sink/demo.js</em>. You&#39;ll want to add lines to two separate objects:</p>
<ol> <ol>
<li> <li>
<p><code>modesByName</code> needs a new entry that defines all the rules regarding your new mode. Entries looks like <code>propertyName: [dropdownName, arrayOfExtensions]</code>, where:</p> add an entry to <code>supportedModes</code> in <a href="https://github.com/ajaxorg/ace/blob/master/lib/ace/ext/modelist.js#L53"><code>ace/ext/modelist.js</code></a>
<ul>
<li><code>propertyName</code> is the name of the new language you&#39;re highlighting</li>
<li><code>dropdownName</code> is an arbitrary string that lists your language in the live demo&#39;s <strong>Mode</strong> dropdown menu</li>
<li><code>arrayOfExtensions</code> is an array of strings (seperated by <code>|</code>) that defines valid extensions to use for the new language. </li>
</ul>
</li> </li>
<li> <li>
<p><code>docs</code> also needs a new entry, which defines the location of your sample document showing all the power of your new language. Entries look like <code>filenamePath: modeToUse</code>, where:</p> <p>add a sample file to <code>demo/kitchen-sink/docs/</code> with same name as the mode file
<ul>
<li><code>filenamePath</code> is the path to your example document. This should just be in <em>docs/</em>.</li>
<li><code>modeToUse</code> is the same arbitrary string as <code>dropdownName</code></li>
</ul>
</li> </li>
</ol> </ol>
<p>Once you set this up, you should see be able to witness a live demonstration of your new highlighter.</p> <p>Once you set this up, you should be able to witness a live demonstration of your new highlighter.</p>
<h3 id="adding-automated-tests"><a class="heading_anchor" href="#adding-automated-tests"><i class="headerLinkIcon"></i></a>Adding Automated Tests</h3> <h3 id="adding-automated-tests"><a class="heading_anchor" href="#adding-automated-tests"><i class="headerLinkIcon"></i></a>Adding Automated Tests</h3>
<p>Adding automated tests for a highlighter is trivial so you are not required to do it, but it can help during development.</p> <p>Adding automated tests for a highlighter is trivial so you are not required to do it, but it can help during development.</p>
<p>In <code>lib/ace/mode/_test</code> create a file named <code><pre>text_<span style="color:#AA0D91">&lt;modeName&gt;</span>.txt</pre></code> with some example code. (You can skip this if the document you have added in <code>demo/docs</code> both looks good and covers various edge cases in your language syntax). <p>In <code>lib/ace/mode/_test</code> create a file named <code><pre>text_<span style="color:#AA0D91">&lt;modeName&gt;</span>.txt</pre></code> with some example code. (You can skip this if the document you have added in <code>demo/docs</code> both looks good and covers various edge cases in your language syntax).