Blockquotes & CalloutsLink to section

This page showcases various blockquote styles and callout patterns available in the markdown system.

Simple BlockquotesLink to section

This is a simple blockquote. It’s perfect for highlighting important quotes or passages.

“The best way to predict the future is to invent it.”

— Alan Kay

Multi-paragraph BlockquotesLink to section

This is the first paragraph of a longer quote. It establishes the context and introduces the main idea.

This second paragraph continues the thought, providing additional detail and nuance to the quoted material.

Finally, this third paragraph concludes the quote, tying everything together.

Nested BlockquotesLink to section

This is the outer quote level, providing the main context.

This nested quote adds a secondary voice or perspective.

And this deeply nested quote shows a third level of quotation.

Back to the second level.

And back to the first level to conclude.

Blockquotes with AttributionLink to section

“Any sufficiently advanced technology is indistinguishable from magic.”

— Arthur C. Clarke

“The only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle.”

— Steve Jobs, Stanford Commencement Address, 2005

Blockquotes with FormattingLink to section

Important: This blockquote contains various formatting elements including inline code, links, and more.

You can use:

  • Lists inside blockquotes
  • Multiple formatting styles
  • Even code blocks:
def hello():
    print("Hello from a blockquote!")

Callout PatternsLink to section

While not native markdown, here are patterns for different types of callouts:

Note CalloutLink to section

📝 Note: This is an informational callout. Use it to highlight supplementary information that enhances understanding but isn’t critical.

Tip CalloutLink to section

💡 Tip: Here’s a helpful suggestion! Tips provide best practices or shortcuts that can improve the user’s experience.

Warning CalloutLink to section

⚠️ Warning: Be careful with this operation. Warnings alert users to potential issues or important considerations.

Danger CalloutLink to section

🚨 Danger: This action is destructive and cannot be undone. Danger callouts highlight critical warnings about irreversible actions.

Success CalloutLink to section

✅ Success: Operation completed successfully! Success callouts confirm that an action was completed as expected.

Info CalloutLink to section

ℹ️ Info: Additional context about this feature. Info callouts provide background information or additional context.

Real-world ExamplesLink to section

Code Review CommentLink to section

Suggestion: Consider extracting this logic into a separate function for better reusability:

function calculateDiscount(price, percentage) {
  return price * (1 - percentage / 100);
}

This would make the code more modular and easier to test.

Documentation NoteLink to section

Compatibility Note: This feature requires version 3.0 or higher. Users on older versions should upgrade or use the legacy API instead.

For migration instructions, see the upgrade guide.

Academic CitationLink to section

“In the beginner’s mind there are many possibilities, but in the expert’s mind there are few.”

— Shunryu Suzuki, “Zen Mind, Beginner’s Mind” (1970)

This quote illustrates the importance of maintaining openness to new ideas, even as we gain expertise.

Blockquote StylingLink to section

The default blockquote styling includes:

  • Left border for visual distinction
  • Italic text for quoted content
  • Proper spacing and indentation
  • Responsive margins
  • Dark mode support

Best PracticesLink to section

  1. Use blockquotes for actual quotes - Don’t use them just for emphasis
  2. Always attribute quotes - Give credit to the original source
  3. Keep quotes concise - Long blockquotes can be hard to read
  4. Use callout patterns consistently - Pick a style and stick with it
  5. Consider accessibility - Ensure callout icons have text alternatives

Semantic HTMLLink to section

Behind the scenes, blockquotes use the semantic <blockquote> HTML element, which helps with:

  • Screen reader navigation
  • Search engine understanding
  • Proper document structure
  • Styling consistency
Return to the homepage