update documentation
This commit is contained in:
nightwing
parent
f9d4bbac49
commit
4011447526
3 changed files with 34 additions and 47 deletions
|
|
@ -480,4 +480,13 @@ p.highlight_note a {
|
|||
/*https://github.com/twitter/bootstrap/issues/5262*/
|
||||
img {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.text-logo{
|
||||
color: black;
|
||||
font-size: 24px;
|
||||
font-weight: lighter;
|
||||
margin-top: 23px;
|
||||
text-align: center;
|
||||
text-shadow: 1px 17px 2px gray, 1px 1px 2px gray;
|
||||
}
|
||||
70
index.html
70
index.html
|
|
@ -657,50 +657,14 @@ oop.inherits(FoldMode, BaseFoldMode);
|
|||
</ol>
|
||||
<p>Once you set this up, you should see 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>It's also suggested that you go one step further and define some automated tests to test your syntax highlighter. A basic test looks something like this:</p>
|
||||
<pre><code class="language-javascript"><span class="keyword">if</span> (<span class="keyword">typeof</span> process !== <span class="string">"undefined"</span>) {
|
||||
require(<span class="string">"amd-loader"</span>);
|
||||
}
|
||||
|
||||
define(<span class="keyword">function</span>(require, exports, module) {
|
||||
<span class="string">"use strict"</span>;
|
||||
|
||||
<span class="keyword">var</span> MyNewLanguage = require(<span class="string">"./mynewlanguage"</span>).Mode;
|
||||
<span class="keyword">var</span> assert = require(<span class="string">"../test/assertions"</span>);
|
||||
|
||||
module.exports = {
|
||||
|
||||
name: <span class="string">"MyNewLanguage Tokenizer"</span>,
|
||||
|
||||
setUp : <span class="keyword">function</span>() {
|
||||
<span class="keyword">this</span>.tokenizer = <span class="keyword">new</span> MyNewLanguage().getTokenizer();
|
||||
},
|
||||
|
||||
<span class="string">"test: my random description"</span> : <span class="keyword">function</span>() {
|
||||
<span class="keyword">var</span> line = <span class="string">"-12px"</span>;
|
||||
<span class="keyword">var</span> tokens = <span class="keyword">this</span>.tokenizer.getLineTokens(line, <span class="string">"ruleset"</span>).tokens;
|
||||
|
||||
assert.equal(<span class="number">2</span>, tokens.length);
|
||||
assert.equal(<span class="string">"constant.numeric"</span>, tokens[<span class="number">0</span>].type);
|
||||
},
|
||||
|
||||
<span class="string">"test: tokenize more than one thing"</span> : <span class="keyword">function</span>() {
|
||||
<span class="keyword">var</span> tokens = <span class="keyword">this</span>.tokenizer.getLineTokens(<span class="string">"{()}"</span>, <span class="string">"start"</span>).tokens;
|
||||
|
||||
assert.equal(<span class="number">3</span>, tokens.length);
|
||||
assert.equal(<span class="string">"paren.lparen"</span>, tokens[<span class="number">0</span>].type);
|
||||
assert.equal(<span class="string">"text"</span>, tokens[<span class="number">1</span>].type);
|
||||
assert.equal(<span class="string">"paren.rparen"</span>, tokens[<span class="number">2</span>].type);
|
||||
},
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
<span class="keyword">if</span> (<span class="keyword">typeof</span> module !== <span class="string">"undefined"</span> && module === require.main) {
|
||||
require(<span class="string">"asyncjs"</span>).test.testcase(module.exports).exec()
|
||||
}</code></pre>
|
||||
<p>All tests contain a string describing what the test is doing. Then, you define an arbitrary line that you want your tokenizer to check. It's recommended that you test both the number of tokens found, as well as the values of those tokens.</p>
|
||||
<p>Any file ending with the <em>_test.js</em> suffix are automatically run by Ace's <a href="http://travis-ci.org/#!/ajaxorg/ace">Travis CI</a> server.</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"><modeName></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>
|
||||
<p> Run <code><span style="color:#AA0D91">node</span> <span style="color:#008800">highlight_rules_test.js</span> <span style="color:#000088">-gen</span></code> to preserve current output of your tokenizer in <code>tokens_<span style="color:#AA0D91"><modeName></span>.json</code>
|
||||
</p>
|
||||
<p>After this running <code><span style="color:#008800">highlight_rules_test.js</span> <span cstyle="color:#000088">optionalLanguageName</span></code> will compare output of your tokenizer with the correct output you've created.
|
||||
</p>
|
||||
<p>Any files ending with the <em>_test.js</em> suffix are automatically run by Ace's <a href="http://travis-ci.org/#!/ajaxorg/ace">Travis CI</a> server.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="api">
|
||||
<div class="row centerpiece">
|
||||
|
|
@ -912,10 +876,22 @@ module.exports = {
|
|||
<a href="https://drivenotepad.appspot.com/support">Drive Notepad</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://phpassist.com/images/logo.png"
|
||||
style="position: relative; left: -9px; top: 19px; width: 118px">
|
||||
<img src="http://phpassist.com/images/logo-large.png"
|
||||
style="position: relative; left: 3px; top: -10px; width: 95px">
|
||||
<a href="http://phpassist.com/">PHP Assist</a>
|
||||
</li>
|
||||
<li>
|
||||
<div class="text-logo">Dillinger</div>
|
||||
<a href="http://dillinger.io/">Dillinger</a>
|
||||
</li>
|
||||
<li>
|
||||
<div class="text-logo">Evaluzio</div>
|
||||
<a href="http://www.evaluzio.net/editor">Evaluzio</a>
|
||||
</li>
|
||||
<li>
|
||||
<div class="text-logo">Edicy</div>
|
||||
<a href="http://www.edicy.com/blog/new-code-editor-for-creating-unique-website-designs">Edicy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://orbit.bonsaijs.org/">BonsaiJS playground</a>
|
||||
</li>
|
||||
|
|
@ -941,6 +917,7 @@ module.exports = {
|
|||
<a href="http://www.pythonanywhere.com/">PythonAnywhere</a>
|
||||
</li>
|
||||
<li>
|
||||
<div class="text-logo">ShareJS</div>
|
||||
<a href="http://sharejs.org/hello-ace.html">ShareJS</a>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -953,6 +930,7 @@ module.exports = {
|
|||
<a href="http://neutronide.com/">Neutron IDE</a>
|
||||
</li>
|
||||
<li>
|
||||
<div class="text-logo">tmpltr</div>
|
||||
<a href="http://rocktronica.github.com/tmpltr/">tmpltr</a>
|
||||
</li>
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
They are generated from `text_<modeName>.txt` or `demo/kitchen-sink/doc/*` with
|
||||
|
||||
```sh
|
||||
node highlight_rules_test.js gen
|
||||
node highlight_rules_test.js -gen
|
||||
```
|
||||
|
||||
command.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue