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

36
index.html
View file

@ -330,11 +330,9 @@ var MyNewFoldMode = require("./folding/mynew").MyNewFoldMode;
var Mode = function() {
// set everything up
var highlighter = new MyNewHighlightRules();
this.HighlightRules = MyNewHighlightRules;
this.$outdent = new MatchingBraceOutdent();
this.foldingRules = new MyNewFoldMode();
this.$tokenizer = new Tokenizer(highlighter.getRules());
};
oop.inherits(Mode, TextMode);
@ -343,9 +341,8 @@ oop.inherits(Mode, TextMode);
this.lineCommentStart = "//";
this.blockComment = {start: "/*", end: "*/"};
// Extra logic goes here--we won't be covering all of this
/* These are all optional pieces of code!
// special logic for indent/outdent.
// By default ace keeps indentation of previous line
this.getNextLineIndent = function(state, line, tab) {
var indent = this.$getIndent(line);
return indent;
@ -358,14 +355,17 @@ oop.inherits(Mode, TextMode);
this.autoOutdent = function(state, doc, row) {
this.$outdent.autoOutdent(doc, row);
};
// create worker for live syntax checking
this.createWorker = function(session) {
var worker = new WorkerClient(["ace"], "ace/mode/mynew_worker", "NewWorker");
worker.attachToDocument(session.getDocument());
worker.on("errors", function(e) {
session.setAnnotations(e.data);
});
return worker;
};
*/
}).call(Mode.prototype);
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>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>
<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>
<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>
@ -642,25 +642,15 @@ if (match) {
}</code></pre>
<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 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>
<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>
<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>
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>
</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>
<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>
<p>add a sample file to <code>demo/kitchen-sink/docs/</code> with same name as the mode file
</li>
</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>
<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).