gherkin
Version:
A fast Gherkin lexer/parser based on the Ragel State Machine Compiler.
116 lines (109 loc) • 3.66 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Editor</title>
<style type="text/css" media="screen">
body {
overflow: hidden;
font-size: 3em;
}
#editor {
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 900px;
}
.syntax_error {
background-color: #AA0000;
}
</style>
<script src="../lib/gherkin/lexer/en.js"></script>
<script src="ace/build/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="ace/build/src/mode-gherkin.js" type="text/javascript" charset="utf-8"></script>
<script src="ace/build/src/theme-twilight.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/gherkin" id="feature">
Feature: Hello World
Scenario: Look Ma
Given I am in a browser
</script>
<script>
window.onload = function() {
var lexer = new Lexer({
comment: function(value, line) {
},
tag: function(value, line) {
},
feature: function(keyword, name, description, line) {
},
feature: function(keyword, name, description, line) {
},
background: function(keyword, name, description, line) {
},
scenario: function(keyword, name, description, line) {
},
scenario_outline: function(keyword, name, description, line) {
},
examples: function(keyword, name, description, line) {
},
step: function(keyword, name, line) {
},
doc_string: function(string, line) {
},
row: function(row, line) {
},
eof: function() {
}
});
if(typeof ace != 'undefined') {
var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight");
var GherkinMode = require("ace/mode/gherkin").Mode;
editor.getSession().setMode(new GherkinMode());
editor.getSession().setTabSize(2);
editor.getSession().setUseSoftTabs(true);
editor.getSession().on('change', function(e) {
var source = editor.getSession().getValue();
jQuery('#editor .ace_text-layer .ace_line').toggleClass('syntax_error', false);
try {
lexer.scan(source);
} catch(exception) {
var line = exception.match(/Lexing error on line (\d+):/)[1];
jQuery('#editor .ace_text-layer .ace_line:nth-child(' + line + ')').toggleClass('syntax_error');
}
});
} else {
document.getElementById('editor').innerHTML = "You have to run <code>git submodule update --init</code> in order to see the editor."
}
};
</script>
</head>
<body>
<div id="editor"># This is just a demo of syntax highlighting
# And very basic syntax checking (based on gherkin.js)
# Try to introduce a syntax error (Replace When with a different
# string). This will colour that line red.
Feature: Hello World
Scenario: Look Ma
Given I am in a browser
When I make a syntax error
Then stuff should be red
@tags @are @handy
Scenario: Look Pa
Given I am in a browser
When I make a syntax error
| a | table |
| yes | nice |
Then stuff should be red
"""
Several lines
is handy
sometimes
"""
</div>
</body>
</html>