WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Editor Javascript Incrível
792
hasan
Abrir no Editor
Publique Seu Código
15 October 2025
Jogo de Adivinhação Código HTML JavaScript
22 August 2025
Carrossel de cartas de leão 3D HTML CSS e JavaScript
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');