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 defer src="/js/second-menu.js?v=2"></script>
    <!-- SEO guide content -->
    <section class="content-card" aria-labelledby="seo-utilitytools-others-coding-tools-markdown-previewer-index-html">
        <h2 class="h4 text-success mb-3" id="seo-utilitytools-others-coding-tools-markdown-previewer-index-html"><i class="bi bi-info-circle me-2"></i>What is Markdown Previewer?</h2>
        <p class="text-secondary">Markdown Previewer is a browser-based utility for text and code cleanup. It helps you transform, inspect, generate, or evaluate the relevant input without installing a separate desktop tool.</p>
        <h2 class="h5 text-success mt-4 mb-3"><i class="bi bi-list-ol me-2"></i>How to use this tool</h2>
        <p class="text-secondary mb-0">Enter or paste the required input, select the available options, then review the generated result before copying or applying it in your project. Check the output in its real target environment when accuracy matters.</p>
    </section>
    <section class="content-card mb-0" aria-labelledby="faq-utilitytools-others-coding-tools-markdown-previewer-index-html">
        <h2 class="h4 text-success mb-3" id="faq-utilitytools-others-coding-tools-markdown-previewer-index-html"><i class="bi bi-patch-question me-2"></i>Frequently Asked Questions (FAQ)</h2>
        <div class="accordion" id="faqAccordion-utilitytools-others-coding-tools-markdown-previewer-index-html">
            <div class="accordion-item">
                <h3 class="accordion-header"><button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#faq-utilitytools-others-coding-tools-markdown-previewer-index-html-one">Is my input processed locally?</button></h3>
                <div id="faq-utilitytools-others-coding-tools-markdown-previewer-index-html-one" class="accordion-collapse collapse" data-bs-parent="#faqAccordion-utilitytools-others-coding-tools-markdown-previewer-index-html"><div class="accordion-body text-secondary">Yes. This tool is designed to process the values you enter in your browser.</div></div>
            </div>
            <div class="accordion-item">
                <h3 class="accordion-header"><button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#faq-utilitytools-others-coding-tools-markdown-previewer-index-html-two">How should I verify the result?</button></h3>
                <div id="faq-utilitytools-others-coding-tools-markdown-previewer-index-html-two" class="accordion-collapse collapse" data-bs-parent="#faqAccordion-utilitytools-others-coding-tools-markdown-previewer-index-html"><div class="accordion-body text-secondary">Review the output for the target syntax and test it in the application, browser, API, or workflow where it will be used.</div></div>
            </div>
        </div>
    </section>
</body>
</html>