This page is just a reference for some custom MDX components. These are not the droids you are looking for.

Headings

MDX supports six levels of headings, from h1 to h6. Each heading automatically generates an anchor link for easy referencing.

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Code Blocks

Code blocks support syntax highlighting for various languages:

function talkToMe() {
    for (let i = 0; i < 10; i++) {
      console.log("Hello, world!")
    }
}

def main():
  print("Hello, world!")

if __name__ == "__main__":
  main()

Inline Code

Here's some in-line code: store := int[]{1, 2, 3}.

Tables

Tables can be created using the custom Table component:

Images

Images are displayed with rounded corners and are automatically optimized:

Blockquotes

This is a blockquote. It can be used to emphasize text or attribute quotes to their sources.

Booyah!

YouTube Embeds

YouTube videos can be easily embedded:

Custom Links

Different types of links are handled automatically:

1. Internal link to another blog post
2. Link to a section within this post
3. External link to Next.js documentation

Non-numerical List

Look at this List:

• The first item in the list
• Second item
• Finally, the final item

Checklist

Todo Tasks:

• Completed task
• Incomplete task

LaTeX

This is a block of LaTeX:

This is in-line LaTeX: $O(n \log n)$.

Footnotes

A note¹.

Another note².

Strikethrough

This is strikethrough text.

Callouts

Mermaid

Mermaid.js allows you to create different versions of charts.

Conclusion

This documentation page demonstrates the various custom MDX components available in this blog setup. Use this as a reference.