diff options
| author | Jeremy <jeremy@jeremydorn.com> | 2015-05-11 22:28:23 -0700 |
|---|---|---|
| committer | Jeremy <jeremy@jeremydorn.com> | 2015-05-11 22:28:23 -0700 |
| commit | a6f868ec26a16b56f0365168ead5045d200a581c (patch) | |
| tree | 3ddff5a011e1573485470935f42793cac2b38a29 /examples/js.html | |
| parent | ffecdad6ca3f6235f941e960bc9d290a20054586 (diff) | |
| download | sql-formatter-origin/javascript-port.zip sql-formatter-origin/javascript-port.tar.gz sql-formatter-origin/javascript-port.tar.bz2 | |
Initial commit of javascript port.origin/javascript-port
Working: highlight, format, example
TODO:
* Improve example page
* removeComments
* compress
* splitQuery
* Node wrapper with ASCII shell highlighting
* README updates
* github pages update
* test suite
Diffstat (limited to 'examples/js.html')
| -rw-r--r-- | examples/js.html | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/examples/js.html b/examples/js.html new file mode 100644 index 0000000..419ba82 --- /dev/null +++ b/examples/js.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<html> +<head> + <title>SqlFormatter Javascript Examples</title> + <style> + .sql-quote { + color: blue; + } + .sql-backtick-quote { + color: purple; + } + .sql-reserved { + font-weight: bold; + } + .sql-function { + color: brown; + } + .sql-number { + color: green; + } + .sql-word { + color: #333; + } + .sql-comment, .sql-block-comment { + color: #aaa; + } + .sql-variable { + color: orange; + } + .sql-error { + background: lightcoral; + color: white; + padding: 2px; + } + + + + #input, #output { + border: 1px solid #ccc; + box-sizing: border-box; + padding: 8px; + font-family: monospace; + position: fixed; + top: 0; + bottom: 0; + width: 50%; + margin: 0; + display: block; + } + #input { + left: 0; + } + #output { + right: 0; + overflow: auto; + } + .clear { clear: both; } + </style> +</head> +<body> + <div class='container'> + <textarea id='input' placeholder='Paste SQL Here...'></textarea> + <pre id='output'></pre> + </div> + + +<script src='../lib/SqlFormatter.js'></script> +<script> + (function() { + var input = document.getElementById('input'); + var output = document.getElementById('output'); + + input.addEventListener('change',function(e) { + output.innerHTML = SqlFormatter.format(input.value); + }); + input.addEventListener('keyup',function(e) { + output.innerHTML = SqlFormatter.format(input.value); + }); + })(); +</script> +</body> +</html> |