Back

MDX features showcase

3 min

This post showcases all the MDX features available on this blog. Use it as a reference when writing your own posts.

Headings

You can use different heading levels to organize your content. This is an h2 heading above.

This is an h3 heading

Use h3 for subsections within your main sections.

Text Formatting

You can make text bold or italic or even bold and italic. This helps emphasize important points in your writing.

You can link to external sites which open in a new tab, or link to internal pages within the blog.

Lists

Unordered Lists

Here are some things I enjoy:

  • Writing clean code
  • Building useful tools
  • Learning new technologies
  • Sharing knowledge with others

Ordered Lists

Steps to write a good blog post:

  1. Choose an interesting topic
  2. Create an outline
  3. Write the first draft
  4. Edit and refine
  5. Publish and share

Blockquotes

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

— Alan Kay

Blockquotes are great for highlighting important quotes or callouts.

Code

Inline Code

You can use inline code for things like variable names, function() calls, or file names like package.json.

Code Blocks

Here's a TypeScript function:

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

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

const user: User = {
  id: "1",
  name: "Alice",
  email: "alice@example.com"
}

console.log(greetUser(user))

And here's some JavaScript:

const numbers = [1, 2, 3, 4, 5]

const doubled = numbers.map(n => n * 2)
const sum = numbers.reduce((acc, n) => acc + n, 0)

console.log(doubled) // [2, 4, 6, 8, 10]
console.log(sum)     // 15

CSS example:

.container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  background-color: #f5f5f5;
}

.container:hover {
  background-color: #e0e0e0;
}

Images

You can include images in your posts. Here's an example using a placeholder:

A border collie running on grass
A border collie running on grass

Images automatically scale to fit the content width.

Horizontal Rules

Use horizontal rules to separate major sections:

This content is after the horizontal rule.

Combining Elements

You can combine multiple elements for rich content:

Pro tip: When writing code, always consider:

  1. Readability
  2. Maintainability
  3. Performance

Remember: code is read more often than it is written.

Conclusion

That covers all the MDX features currently available. Happy writing!