🚀 QuikDown CDN Demo

A simple, clean example of integrating QuikDown from CDN with Highlight.js and Mermaid

📝 Markdown Input
👁️ HTML Preview (Editable)

📋 Integration Steps

  • Include QuikDown CSS and JavaScript from CDN
  • Include Highlight.js and Mermaid from CDN
  • Create a simple fence plugin for code highlighting
  • Call quikdown() with your markdown

Complete Integration with Bidirectional Support

<!DOCTYPE html>
<html>
<head>
    <!-- QuikDown CSS -->
    <link rel="stylesheet" href="https://unpkg.com/quikdown@latest/dist/quikdown.light.min.css">
    
    <!-- Optional: Highlight.js for syntax highlighting -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    
    <!-- Optional: Mermaid for diagrams -->
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
</head>
<body>
    <!-- Your HTML elements -->
    <textarea id="markdown-input" style="width: 45%; height: 400px;"># Your markdown</textarea>
    <div id="preview" class="quikdown-light" style="width: 45%; height: 400px; overflow: auto;" contenteditable="true"></div>
    
    <script type="module">
        // Import QuikDown with bidirectional support
        import quikdown_bd from 'https://unpkg.com/quikdown@latest/dist/quikdown_bd.esm.min.js';
        
        // Initialize Mermaid (if using)
        if (typeof mermaid !== 'undefined') {
            mermaid.initialize({ startOnLoad: false });
        }
        
        // Optional: Create fence plugin for code blocks
        function fencePlugin(code, lang) {
            // Handle Mermaid diagrams
            if (lang === 'mermaid' && typeof mermaid !== 'undefined') {
                const id = 'mermaid-' + Math.random().toString(36).substr(2, 9);
                const escapedCode = code.replace(/"/g, '&quot;');
                // Preserve source for bidirectional conversion
                setTimeout(() => {
                    const element = document.getElementById(id);
                    if (element) {
                        mermaid.render(id + '-svg', code).then(result => {
                            element.innerHTML = result.svg;
                        });
                    }
                }, 10);
                return `<div class="mermaid-container" data-qd-fence="\`\`\`" data-qd-lang="mermaid">
                    <pre class="mermaid" id="${id}" data-qd-source="${escapedCode}">${code}</pre>
                </div>`;
            }
            
            // Handle code highlighting with Highlight.js
            if (lang && typeof hljs !== 'undefined' && hljs.getLanguage(lang)) {
                const highlighted = hljs.highlight(code, { language: lang }).value;
                return `<pre data-qd-fence="\`\`\`" data-qd-lang="${lang}"><code class="hljs language-${lang}">${highlighted}</code></pre>`;
            }
            
            return undefined; // Let QuikDown handle it
        }
        
        let isUpdating = false;
        
        // Parse markdown and render
        function updatePreview() {
            if (isUpdating) return;
            const markdown = document.getElementById('markdown-input').value;
            const html = quikdown_bd(markdown, { 
                fence_plugin: fencePlugin,
                bidirectional: true 
            });
            
            isUpdating = true;
            document.getElementById('preview').innerHTML = html;
            isUpdating = false;
        }
        
        // Convert HTML back to Markdown (bidirectional)
        function convertToMarkdown() {
            if (isUpdating) return;
            isUpdating = true;
            const preview = document.getElementById('preview');
            const markdown = quikdown_bd.toMarkdown(preview);
            document.getElementById('markdown-input').value = markdown;
            isUpdating = false;
        }
        
        // Listen for changes
        document.getElementById('markdown-input').addEventListener('input', updatePreview);
        document.getElementById('preview').addEventListener('input', convertToMarkdown);
        
        // Initial render
        updatePreview();
    </script>
</body>
</html>

Minimal Example (No plugins)

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/quikdown@latest/dist/quikdown.light.min.css">
</head>
<body>
    <div id="output" class="quikdown-light"></div>
    
    <script type="module">
        // For simple markdown rendering (no bidirectional)
        import quikdown from 'https://unpkg.com/quikdown@latest/dist/quikdown.esm.min.js';
        
        const markdown = '# Hello\n\n**QuikDown** is *easy*!';
        document.getElementById('output').innerHTML = quikdown(markdown);
    </script>
</body>
</html>