Markdown Previewer - Online Tool

Markdown Input 0 chars
# Hello Markdown

This is a **live previewer** built with Bootstrap 5 and marked.js.

## Features
- Real-time rendering
- GitHub Flavored Markdown (GFM)
- Responsive split layout

> "Code is like humor. When you have to explain it, it’s bad." — Cory House

```javascript
function greet(name) {
    console.log(`Hello, ${name}!`);
}
greet('Developer');
<!-- PREVIEW COLUMN -->
                <div class="col-lg-6 d-flex flex-column">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <label class="form-label text-secondary small fw-bold mb-0">Live Preview</label>
                        <span class="stats-badge" id="outputStats">Rendered</span>
                    </div>
                    <div id="previewPane" class="preview-pane flex-grow-1"></div>
                </div>
            </div>

            <!-- ACTION BUTTONS -->
            <div class="d-flex flex-wrap gap-2 mt-4">
                <button class="btn btn-outline-secondary" id="btnCopy">
                    <i class="bi bi-clipboard me-1"></i> Copy Markdown
                </button>
                <button class="btn btn-outline-secondary" id="btnClear">
                    <i class="bi bi-trash me-1"></i> Clear All
                </button>
            </div>
        </div>

        <!-- REFERENCE GUIDE -->
        <div class="content-card mb-0">
            <h2 class="h4 text-success mb-3"><i class="bi bi-info-circle me-2"></i>Markdown Syntax Quick Reference</h2>
            <div class="row text-secondary">
                <div class="col-md-4 mb-2"><code># Heading 1</code></div>
                <div class="col-md-4 mb-2"><code>**Bold Text**</code></div>
                <div class="col-md-4 mb-2"><code>*Italic Text*</code></div>
                <div class="col-md-4 mb-2"><code>[Link Text](url)</code></div>
                <div class="col-md-4 mb-2"><code>- Bullet list item</code></div>
                <div class="col-md-4 mb-2"><code>`inline code`</code></div>
            </div>
        </div>

    </div>
</div>

<!-- JS LIBRARIES -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<script>
    $(document).ready(function() {

        function renderMarkdown() {
            const text = $('#textInput').val();
            $('#inputStats').text(`${text.length} chars`);

            if (!text) {
                $('#previewPane').html('<span class="text-secondary">Nothing to preview...</span>');
                return;
            }

            try {
                const htmlContent = marked.parse(text);
                $('#previewPane').html(htmlContent);
            } catch (e) {
                $('#previewPane').html('<span class="text-danger">Error rendering markdown</span>');
            }
        }

        // Bindings
        $('#textInput').on('input', renderMarkdown);

        $('#btnClear').on('click', function() {
            $('#textInput').val('');
            renderMarkdown();
        });

        $('#btnCopy').on('click', function() {
            const val = $('#textInput').val();
            if (!val) return;

            navigator.clipboard.writeText(val).then(() => {
                const $btn = $(this);
                const orig = $btn.html();
                $btn.html('<i class="bi bi-check2"></i> Copied!').addClass('btn-success').removeClass('btn-outline-secondary');
                setTimeout(() => $btn.html(orig).removeClass('btn-success').addClass('btn-outline-secondary'), 1200);
            });
        });

        // TOP NAVIGATION SCROLL LOGIC
        const $container = $('#topTopicsScroll');
        const $leftBtn = $('#scrollLeftBtn');
        const $rightBtn = $('#scrollRightBtn');

        function updateScrollButtons() {
            if (!$container.length) return;
            const scrollLeft = Math.ceil($container.scrollLeft());
            const scrollWidth = $container[0].scrollWidth;
            const clientWidth = $container.innerWidth();

            if (scrollWidth <= clientWidth) {
                $leftBtn.hide(); $rightBtn.hide(); return;
            }
            scrollLeft <= 5 ? $leftBtn.hide() : $leftBtn.css('display', 'flex');
            scrollLeft >= (scrollWidth - clientWidth - 5) ? $rightBtn.hide() : $rightBtn.css('display', 'flex');
        }

        updateScrollButtons();
        $container.on('scroll', updateScrollButtons);
        $(window).on('resize', updateScrollButtons);

        $('#scrollLeftBtn').on('click', function () { $container.animate({ scrollLeft: $container.scrollLeft() - 200 }, 200); });
        $('#scrollRightBtn').on('click', function () { $container.animate({ scrollLeft: $container.scrollLeft() + 200 }, 200); });

        // Initial render
        renderMarkdown();
    });
</script>
<!--SCRIPT GENERATED BY SERVER! PLEASE REMOVE-->
<center><a href="http://somee.com">Web hosting by Somee.com</a></center>