Impresionante editor de Javascript

1100 hasan

Abrir en el editor Publica tu código

Recomendado

27 October 2024

Sitio de juego agrietado público Cualquiera puede publicar

14 June 2024

icono de redes sociales con el cursor

15 May 2025

Un código de kouadioarmel055

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

JS

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

Recomendado

Sitio de juego agrietado público Cualquiera puede publicar

icono de redes sociales con el cursor

Un código de kouadioarmel055

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS