MDX Component Showcase

This post demonstrates all the available components and styling options in the afterthoughts section.

Typography

Headings

You can use headings from H1 to H6. The H1 is usually reserved for the post title.

Emphasis and Styling

You can make text bold, italic, or both. You can also add inline code snippets.

Lists

Unordered Lists

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

Ordered Lists

1. First step
2. Second step
3. Third step

Links

You can add external links or internal links to other posts.

Callouts

Quotes

Code Blocks

With Syntax Highlighting

1
import React from 'react';
2

3
export default function Component() {
4
const [count, setCount] = React.useState(0);
5

6
return (
7
  <div>
8
    <h1>Count: {count}</h1>
9
    <button onClick={() => setCount(count + 1)}>
10
      Increment
11
    </button>
12
  </div>
13
);
14
}

Standard Code Blocks

console.log("This is a standard code block");
const greeting = "Hello, world!";

Images

Video Embeds

Horizontal Rules

Use horizontal rules to separate sections:

Tables

| Feature | Supported | Notes | |---------|-----------|-------| | Typography | ✅ | Full markdown support | | Code Blocks | ✅ | With syntax highlighting | | Images | ✅ | With captions | | Videos | ✅ | YouTube and Vimeo |

Conclusion

This showcase demonstrates all the components available for creating rich, engaging afterthoughts posts. Mix and match these elements to create compelling content!

I am heading two

I am heading three

I am heading four

I am heading five

And, I am heading six

I am just a normal paragraph, but you must have figured this out by now. It can be bold or italic.

You can add inline code as well. It cannot highlight syntax based on language yet.

You can have code blocks as well.

1
const a = 10;
2
const b = 10;
3

4
console.log(a + b);

Huge shoutout to React Code Block by Akash for this.

You can also have normal code with pre tag like this. I am working on it's implementation though.

console.log("grainy background on code snippets look weied tho ngl");

Oh, btw, these are links.

You can add quotes as well. I am not sure when I'll use this... but better than plagarism i guess.

And now something intersting... Callouts

1. Numbered lists
2. are
3. used
4. when ther's a sequence
5. that must be kept, or be followed
6. or the reader must be made aware of it
7. while reading it

On the other hand,

• Unordered lists however
• any specific sequence
• in any order
• doesn't need to have
• you can have them