WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Impresionante editor de Javascript
790
hasan
Abrir en el editor
Publica tu código
Recomendado
25 August 2024
Animación del formulario de inicio de sesión/registro
7 September 2024
Plantilla de cuadro de chat HTML
18 June 2025
API para desarrolladores: creación e integración | DevFlow
HTML
Copy
JavaScript Editor
Run (⌘⏎)
Nord
Material
Monokai
Solarized
// Minimal JavaScript Editor // Write your code here and press Run function fibonacci(n) { if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); } console.log('Fibonacci sequence:'); for (let i = 0; i < 10; i++) { console.log(fibonacci(i)); }
CSS
Copy
body { margin: 0; padding: 0; font-family: 'Fira Code', 'Menlo', 'Consolas', monospace; background-color: #2E3440; color: #D8DEE9; height: 100vh; overflow: hidden; } .editor-container { display: flex; flex-direction: column; height: 100vh; } .controls { display: flex; padding: 8px 12px; background-color: #3B4252; border-bottom: 1px solid #4C566A; } button { display: flex; align-items: center; gap: 6px; background-color: #434C5E; color: #E5E9F0; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 13px; transition: all 0.2s ease; } button:hover { background-color: #4C566A; } button svg { color: #A3BE8C; } .theme-selector { margin-left: auto; background-color: #434C5E; color: #E5E9F0; border: 1px solid #4C566A; border-radius: 4px; padding: 4px 8px; font-family: inherit; font-size: 13px; } .code-editor { flex: 1; overflow: hidden; } .CodeMirror { height: 100% !important; font-family: 'Fira Code', 'Menlo', 'Consolas', monospace; font-size: 14px; line-height: 1.5; } .console { height: 180px; background-color: #3B4252; border-top: 1px solid #4C566A; padding: 12px; overflow-y: auto; font-family: 'Fira Code', 'Menlo', 'Consolas', monospace; font-size: 13px; } #console-output { display: flex; flex-direction: column; gap: 4px; } .console-message { margin: 0; white-space: pre-wrap; line-height: 1.4; } .console-log { color: #D8DEE9; } .console-error { color: #BF616A; } .console-warn { color: #EBCB8B; }
JS
Copy
// Initialize CodeMirror const editor = CodeMirror.fromTextArea(document.getElementById('editor'), { mode: 'javascript', theme: 'nord', lineNumbers: true, indentUnit: 4, tabSize: 4, matchBrackets: true, styleActiveLine: true, lineWrapping: true, extraKeys: { 'Cmd-Enter': runCode, 'Ctrl-Enter': runCode } }); // Get DOM elements const runBtn = document.getElementById('run-btn'); const themeSelector = document.getElementById('theme-selector'); const consoleOutput = document.getElementById('console-output'); // Event listeners runBtn.addEventListener('click', runCode); themeSelector.addEventListener('change', changeTheme); // Override console methods to capture output const originalConsole = { log: console.log, error: console.error, warn: console.warn }; console.log = function(...args) { originalConsole.log.apply(console, args); printToConsole(args, 'log'); }; console.error = function(...args) { originalConsole.error.apply(console, args); printToConsole(args, 'error'); }; console.warn = function(...args) { originalConsole.warn.apply(console, args); printToConsole(args, 'warn'); }; // Functions function runCode() { // Clear console consoleOutput.innerHTML = ''; // Get code from editor const code = editor.getValue(); try { // Run the code new Function(code)(); } catch (error) { console.error(error); } } function printToConsole(args, type) { const message = document.createElement('div'); message.className = `console-message console-${type}`; // Format the message with multiple arguments const formattedArgs = args.map(arg => { if (typeof arg === 'object' && arg !== null) { try { return JSON.stringify(arg, null, 2); } catch { return arg.toString(); } } return arg; }).join(' '); message.textContent = formattedArgs; consoleOutput.appendChild(message); // Auto-scroll to bottom consoleOutput.scrollTop = consoleOutput.scrollHeight; } function changeTheme() { const theme = themeSelector.value; editor.setOption('theme', theme); } // Set initial theme editor.setOption('theme', 'nord');