Impresionante editor de Javascript

1,899 hasan

Abrir en el editor Publica tu código

Recomendado

26 October 2024

Botón interruptor de luz oscura.

13 November 2024

Efecto de marco para imágenes usando CSS puro

23 March 2025

Un código de constantcc607

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