Main Heading (h1)#

This is a demonstration of all MDX components and markdown tags available in our blog.

Typography Examples (h2)#

Basic Text Formatting (h3)#

Inline Styles (h4)#

Lists and Quotes (h5)#

Code Examples (h6)#

This is a regular paragraph with bold text, italic text, and strikethrough text. You can also use inline code for technical terms.

Here's a link to somewhere and a link with an image.

Let's test some lists:

• Unordered list item 1
• Unordered list item 2
  • Nested item 2.1
  • Nested item 2.2
• Unordered list item 3

1. Ordered list item 1
2. Ordered list item 2
   1. Nested ordered item 2.1
   2. Nested ordered item 2.2
3. Ordered list item 3

Todo#

• Not done ToDo
• Done Todo

This is a blockquote. It can contain multiple lines and can be used to highlight important information or quotes from other sources.

You can have multiple paragraphs in a blockquote.

Code Blocks#

Here's a code block with syntax highlighting:

const copyToClipboard = async () => {
    try {
      // Get the pre element's text content
      const preElement = document.querySelector("pre");
      const codeElement = preElement?.querySelector("code"); // ahwjdbvajhbwd jawhybd hjawdjh bawdb jawhydvb awybdjhawbdy awbjhd bawjyhgdb
 
      // Get raw text content, removing any extra whitespace
      const codeToCopy = codeElement?.textContent || "";
 
      await navigator.clipboard.writeText(codeToCopy);
      setIsCopied(true);
      setTimeout(() => setIsCopied(false), 2000);
    } catch (err) {
      console.error("Failed to copy text: ", err);
    }
  };

Link Title discuss

Tables#

Custom Components#

Images#

Here's a regular markdown image:

And here's a Next.js Image component:

Carousel#

Complex Example#

Here's a more complex example combining multiple elements:

// Even code blocks within callouts
const demo = {
  title: 'MDX Demo',
  isAwesome: true
};

Text Wrapping and Spacing#

This is a paragraph demonstrating text wrapping and spacing. It should have proper line height and margin spacing between other elements. The text should be easy to read and properly formatted.

Here's the next paragraph to demonstrate spacing between paragraphs. It should have adequate margin to separate it from the previous paragraph while maintaining readability.

Final Notes#

This demo includes:

• All heading levels (h1-h6)
• Text formatting (bold, italic, strikethrough)
• Lists (ordered and unordered)
• Code blocks with syntax highlighting
• Tables
• Blockquotes
• Custom components
• Images (both markdown and Next.js Image)
• Horizontal rules
• Links
• Inline code
• Complex nested structures

Remember that you can combine these elements in various ways to create rich, engaging content.