Impresionante editor de Javascript

2,041 hasan

Abrir en el editor Publica tu código

Recomendado

26 October 2024

Bot de planes (página de inicio)

21 August 2025

Contenedor de animación CSS con cuenta regresiva

25 November 2025

Condenar

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Editor</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/nord.min.css">
</head>
<body>
    <div class="editor-container">
        <div class="controls">
            <button id="run-btn">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polygon points="5 3 19 12 5 21 5 3"></polygon>
                </svg>
                Run (⌘⏎)
            </button>
            <select id="theme-selector" class="theme-selector">
                <option value="nord">Nord</option>
                <option value="material">Material</option>
                <option value="monokai">Monokai</option>
                <option value="solarized">Solarized</option>
            </select>
        </div>
        
        <div class="code-editor">
            <textarea id="editor">// 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

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;
}

// 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 changeTheme() {
    const theme = themeSelector.value;
    editor.setOption('theme', theme);
}

// Set initial theme
editor.setOption('theme', 'nord');