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 75 76 77 78 79 80 81 82 83 84 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CodeFlask Theme Editor</title> <!-- Bootstrap CSS for styling --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> <style> /* Initial styles for the editor container */ #editor { height: 500px; width: 100%; margin-top: 10px; border: 1px solid #ddd; } </style> </head> <body> <div class="container mt-4"> <h1>CodeFlask Code Editor with Theme Selection</h1> <div class="form-group mb-3"> <label for="themeSelect">Select Theme:</label> <select class="form-select" id="themeSelect"> <option value="default">Default</option> <option value="dark">Dark</option> <option value="light">Light</option> </select> </div> <!-- The editor container --> <div id="editor"> <!-- Initial content in the editor --> <textarea> let x = 10; let y = 20; </textarea> </div> </div> <!-- CodeFlask JS --> <script src="https://unpkg.com/codeflask/build/codeflask.min.js"></script> <script> // Initialize CodeFlask editor const editorElem = document.getElementById('editor'); const flask = new CodeFlask(editorElem, { language: 'js', lineNumbers: true }); // Function to update the theme function updateTheme(selectedTheme) { // Access the shadow DOM of CodeFlask and change styles inside const editorContent = editorElem.querySelector('.codeflask__pre'); if (selectedTheme === 'dark') { editorContent.style.backgroundColor = '#2c3e50'; editorContent.style.color = '#ecf0f1'; } else if (selectedTheme === 'light') { editorContent.style.backgroundColor = '#ecf0f1'; editorContent.style.color = '#2c3e50'; } else { editorContent.style.backgroundColor = '#ffffff'; editorContent.style.color = '#000000'; } } // Theme change event listener document.getElementById('themeSelect').addEventListener('change', function () { let selectedTheme = this.value; updateTheme(selectedTheme); // Call the theme update function }); // Set initial theme (default) updateTheme('default'); </script> </body> </html> |
