MDX Typography and Components Showcase

H1 The quick brown fox jumps over the lazy dog.

H2 The quick brown fox jumps over the lazy dog.

H3 The quick brown fox jumps over the lazy dog.

H4 The quick brown fox jumps over the lazy dog.

H5 The quick brown fox jumps over the lazy dog.
H6 The quick brown fox jumps over the lazy dog.

Regular paragraph text: 1 The quick brown fox jumps over the lazy dog.

Code style: The quick brown fox jumps over the lazy dog.

This post demonstrates all the available typography elements and MDX components you can use in your blog posts.

Basic Typography

Paragraphs and Text Styling

Regular paragraph text looks like this. You can write normally and include bold text, italic text, or bold and italic text. You can also use strikethrough when needed.

You can also write inline code using backticks, which is great for technical terms.

Links and References

You can create inline links or reference-style links like this: my portfolio.

Lists

Unordered list:

  • First item
  • Second item
    • Nested item
    • Another nested item
  • Third item
  • Fourth item
  • Fifth item

Ordered list:

  1. First step
  2. Second step
    1. Sub-step one
    2. Sub-step two
  3. Third step

Task list:

  • Completed task
  • Pending task
  • Future task

Blockquotes

This is a blockquote. It can contain multiple paragraphs and other elements.

Second paragraph in the blockquote.

Nested blockquotes are also possible.

Code Blocks

Syntax-highlighted code block:

interface User {
  id: string
  name: string
  email: string
}

function greetUser(user: User) {
  console.log(`Hello, ${user.name}!`)
}

Tables

Header 1Header 2Header 3
Cell 1Cell 2Cell 3
Cell 4Cell 5Cell 6

MDX Components

Accordion Component

Images

Here are some examples of images in different formats:

Placeholder image A caption for the image.

Horizontal Rule

Advanced Typography

Definition Lists

Term 1 : Definition 1

Term 2 : Definition 2a : Definition 2b

Footnotes

Here's a sentence with a footnote2.

Abbreviations

The HTML specification is maintained by the W3C.

_[HTML]: Hyper Text Markup Language _[W3C]: World Wide Web Consortium

Conclusion

This post showcases all the typography elements and components available in MDX. You can use this as a reference when writing your own blog posts.

Remember that some components might need to be explicitly imported or made available through the MDX provider configuration.

Footnotes

  1. This is the footnote content 1. ↩

  2. This is the footnote content 2. ↩