Impresionante editor de Javascript

1,897 hasan

Abrir en el editor Publica tu código

Recomendado

25 September 2025

Plantilla HTML para sitio web de portafolio

23 November 2024

Efecto de desplazamiento de icono

12 December 2025

Datos espaciales: Exploración del universo y cronología

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');