Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>CodeMirror: Formatting Demo</title> | |
| <link rel="stylesheet" href="../lib/codemirror.css"> | |
| <script src="../lib/codemirror.js"></script> | |
| <script src="../addon/format/formatting.js"></script> | |
| <script src="../mode/css/css.js"></script> | |
| <script src="../mode/xml/xml.js"></script> | |
| <script src="../mode/javascript/javascript.js"></script> | |
| <script src="../mode/htmlmixed/htmlmixed.js"></script> | |
| <link rel="stylesheet" href="../doc/docs.css"> | |
| <style type="text/css"> | |
| .CodeMirror { | |
| border: 1px solid #eee; | |
| } | |
| td { | |
| padding-right: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>CodeMirror: Formatting demo</h1> | |
| <p><strong>Note:</strong> The formatting addon receives a fair | |
| amount of bug requests. I (the maintainer of CodeMirror) do not | |
| intend to spend time on improving it. Pull requests (if clean and | |
| intelligent) are welcome, but you should see this code as a | |
| proof-of-concept (using CodeMirror's mode tokenizers to help | |
| format code), not a finished, robust module.</p> | |
| <form><textarea id="code" name="code"><script> function (s,e){ for(var i=0; i < 1; i++) test("test();a=1");} </script> | |
| <script> | |
| function test(c){ for (var i = 0; i < 10; i++){ process("a.b();c = null;", 300);} | |
| } | |
| </script> | |
| <table><tr><td>test 1</td></tr><tr><td>test <strong>2</strong></td></tr></table> | |
| <script> function test() { return 1;} </script> | |
| <style> .test { font-size: medium; font-family: monospace; } | |
| </style></textarea></form> | |
| <p>Select a piece of code and click one of the links below to apply automatic formatting to the selected text or comment/uncomment the selected text. Note that the formatting behavior depends on the current block's mode. | |
| <table> | |
| <tr> | |
| <td> | |
| <a href="javascript:autoFormatSelection()"> | |
| Autoformat Selected | |
| </a> | |
| </td> | |
| <td> | |
| <a href="javascript:commentSelection(true)"> | |
| Comment Selected | |
| </a> | |
| </td> | |
| <td> | |
| <a href="javascript:commentSelection(false)"> | |
| Uncomment Selected | |
| </a> | |
| </td> | |
| </tr> | |
| </table> | |
| </p> | |
| <script> | |
| var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
| lineNumbers: true, | |
| mode: "htmlmixed" | |
| }); | |
| CodeMirror.commands["selectAll"](editor); | |
| function getSelectedRange() { | |
| return { from: editor.getCursor(true), to: editor.getCursor(false) }; | |
| } | |
| function autoFormatSelection() { | |
| var range = getSelectedRange(); | |
| editor.autoFormatRange(range.from, range.to); | |
| } | |
| function commentSelection(isComment) { | |
| var range = getSelectedRange(), selStart = editor.getCursor("start"); | |
| editor.commentRange(isComment, range.from, range.to); | |
| editor.setSelection(selStart, editor.getCursor("end")); | |
| } | |
| </script> | |
| </body> | |
| </html> | |