How QuikDown Styles Work
QuikDown is a markdown parser that converts markdown text into HTML. To make the HTML look good, QuikDown offers three different ways to apply styles:
- External CSS Classes (Default): QuikDown adds class names like
quikdown-h1to HTML elements. You include a CSS file (quikdown.lite.css or quikdown.dark.css) to style these classes. This is the most flexible approach and keeps your HTML clean. - Inline Styles: QuikDown adds style attributes directly to each HTML element. This creates self-contained HTML that looks good without any external CSS files. Perfect for emails or isolated content.
- Programmatic CSS: QuikDown can generate the CSS rules as a string that you can inject into your page dynamically. Useful when you want to control when and how styles are loaded.
Use the buttons below to see each approach in action. The same markdown content will be styled differently based on which method you choose.
Test Markdown Content
1. Classes with External CSS
Usage:
quikdown(markdown) + external CSS file
// HTML
<link rel="stylesheet" href="quikdown.lite.css">
// JavaScript
const html = quikdown(markdown);
2. Inline Styles
Usage:
quikdown(markdown, { inline_styles: true })
const html = quikdown(markdown, { inline_styles: true });
3. Programmatic CSS Generation
Usage:
quikdown.emitStyles() to generate CSS
// Generate CSS and inject into page
const css = quikdown.emitStyles();
const styleTag = document.createElement('style');
styleTag.textContent = css;
document.head.appendChild(styleTag);
// Then use normally
const html = quikdown(markdown);
4. Configure Helper
Usage:
quikdown.configure(options) for reusable parser
// Create configured parser
const mdParser = quikdown.configure({ inline_styles: true });
// Use multiple times
const html1 = mdParser(markdown1);
const html2 = mdParser(markdown2);
5. Raw Output (No Styles)
Usage:
quikdown(markdown) without any CSS