index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ace Editor Syntax Highlighting</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Ace Editor CDN --> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/ace.js"></script> <style> #editor { height: 300px; width: 100%; border: 1px solid #ddd; } </style> </head> <body> <div class="container mt-4"> <h1 class="mb-4">Ace Editor Dynamic Syntax Highlighting</h1> <div class="form-group mb-3"> <label for="languageSelect">Select Language:</label> <select class="form-select" id="languageSelect"> <option value="javascript">JavaScript</option> <option value="python">Python</option> <option value="css">CSS</option> <option value="html">HTML</option> </select> </div> <div class="form-group mb-3"> <label for="themeSelect">Select Theme:</label> <select class="form-select" id="themeSelect"> <option value="ace/theme/chrome">Chrome (Default)</option> <option value="ace/theme/dracula">Dracula</option> <option value="ace/theme/monokai">Monokai</option> <option value="ace/theme/eclipse">Eclipse</option> <option value="ace/theme/twilight">Twilight</option> </select> </div> <div id="editor">// Paste or type your code here...</div> </div> <script> // Initialize Ace Editor var editor = ace.edit("editor"); editor.setTheme("ace/theme/chrome"); // Default theme editor.session.setMode("ace/mode/javascript"); // Default mode // Change language mode based on dropdown selection document.getElementById('languageSelect').addEventListener('change', function () { var selectedLanguage = this.value; editor.session.setMode("ace/mode/" + selectedLanguage); }); // Change theme based on dropdown selection document.getElementById('themeSelect').addEventListener('change', function () { var selectedTheme = this.value; editor.setTheme(selectedTheme); }); </script> </body> </html> |
