data:text/html;base8, <html> <head> <title>Code Editor</title> <style> body{ background:#111; } .scroll{ overflow-x:auto; overflow-y:auto; white-space:nowrap; } #code-editor{ margin:auto; margin-top:3%; width:90%; height:90%; color:#EEE; background:#000; font-family:monospace,monospace; font-size:20; padding:3px; display:block; } .code-comment{ color:#0F0; } .code-keyword{ color:#FA0; } .code-number{ color:#FD0; } </style> </head> <body> <span class="scroll"id="code-editor"contenteditable="true">#include <iostream> <br/>int main(int argc,char *argv[]) { <br> return 0; <br>} </span> <script> const editor = document.getElementById("code-editor"); function mktick(func) { function newFunc() { func(); requestAnimationFrame(newFunc); }; return newFunc; } function lint() { const exprs = [ [ "/\\*(.*)\\*/" , "<span class=\"code-comment\">/*$1*/</span>" ], [ "//(.*)" , "<span class="code-comment">//$1</span>" ], [ "([\w\(\);\{\}\*/\+-%\=\!:\?&\|\^ ,])(\d+)([\w\(\);\{\}\*/\+-%\=\!:\?&\|\^ ,])" , "$1<span class="code-number">$2</span>$3" ], [ "([\\w\\(\\);\\{\\}\\*/\\+-%\\=\\!:\\?&\\|\\^,])(asm|break|case|catch|continue|default|do|else|explicit|extern|for|friend|goto|if|mutable|namespace|private|protected|public|static_assert|struct|switch|this|thread_local|try|typedef|typeid|typename|union|using|virtual|while|template|class|decltype|void|char|char16_t|char32_t|short|signed|int|unsigned|long|float|double|const|volatile|bool|true|false|typename|operator|new|alignof|enum|sizeof|static_cast|nullptr|auto|throw|dynamic_cast|reinterpret_cast|const_cast|alignas|constexpr|inline|static|noexcept|delete)([\\w\\(\\);\\{\\}\\*/\\+-%\\=\\!:\\?&\\|\\^,])" , "$1<span class="code-keyword">$2</span>$3" ], [ " ", " " ] ]; const editor = document.getElementById("code-editor"); var tmp = editor.innerText; for(let it of exprs) { tmp = tmp.replace(new RegExp(it[0]), it[1]); } editor.innerHTML = tmp; } mktick(lint)(); </script> </body> </html> |
<html> <head> <meta charset="utf-8"> <title>Code Editor</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.50.2/codemirror.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.50.2/codemirror.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.50.2/mode/clike/clike.min.js"></script> </head> <body> <h3>Code Editor</h3> <form> <textarea id="code" name="code"> </textarea> </form> <script> var conf = { lineNumbers: true, mode: "text/x-c++src" }; var editor = CodeMirror.fromTextArea(document.getElementById("code"), conf); </script> </body> </html> |