JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/shiki/0.14.7/shiki.min.js"></script>
 <div class="code-container">
        <div class="resize-handle left"></div>
        <pre id="code"></pre>
        <div class="resize-handle right"></div>
    </div>

CSS

body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .code-container {
            position: relative;
            width: 80%;
            max-width: 800px;
            min-width: 300px;
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .resize-handle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 5px;
            background-color: #ddd;
            cursor: ew-resize;
        }
        .resize-handle.left {
            left: 0;
        }
        .resize-handle.right {
            right: 0;
        }
        pre {
            margin: 0;
            padding: 20px;
            overflow-x: auto;
        }

JavaScript

const sampleCode = `function factorial(n) {
    if (n === 0 || n === 1) {
        return 1;
    }
    return n * factorial(n - 1);
}

console.log(factorial(5)); // Output: 120`;

        shiki.getHighlighter({
            theme: 'github-dark'
        }).then(highlighter => {
            const code = document.getElementById('code');
            code.innerHTML = highlighter.codeToHtml(sampleCode, { lang: 'js' });
        });

        function initResize(container, leftHandle, rightHandle) {
            let isResizing = false;
            let lastDownX = 0;
            let containerWidth = container.offsetWidth;
            let resizeDirection = '';

            function handleMouseDown(e, direction) {
                isResizing = true;
                lastDownX = e.clientX;
                resizeDirection = direction;
                document.addEventListener('mousemove', handleMouseMove);
                document.addEventListener('mouseup', handleMouseUp);
            }

            function handleMouseMove(e) {
                if (!isResizing) return;
                const delta = e.clientX - lastDownX;
                if (resizeDirection === 'left') {
                    containerWidth -= delta;
                    container.style.marginLeft = `${parseInt(container.style.marginLeft || 0) + delta}px`;
                } else {
                    containerWidth += delta;
                }
                container.style.width = `${containerWidth}px`;
                lastDownX = e.clientX;
            }

            function handleMouseUp() {
                isResizing = false;
                document.removeEventListener('mousemove', handleMouseMove);
                document.removeEventListener('mouseup', handleMouseUp);
            }

            leftHandle.addEventListener('mousedown', (e) => handleMouseDown(e, 'left'));
            rightHandle.addEventListener('mousedown', (e) => handleMouseDown(e, 'right'));
        }

        const container =...