Rich Content Writing Guide

This guide shows you all the cool things you can do with your MDX content!

✨ Text Formatting

You can make text bold, italic, or strikethrough. You can also <mark>highlight text</mark> or write inline code.

Need to show a keyboard shortcut? Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy!

You can also use superscripts like x² and subscripts like H₂O.

🔗 Links

External Links

External links automatically get an indicator icon:

• Visit my GitHub profile
• Check out Next.js documentation
• Read more on MDX

Internal Links

Link to other pages on your site:

• Go back to Journal home
• Check out my Projects
• Learn more About me

Anchor Links

Link to specific sections:

• Jump to Images section
• See Code Blocks
• View Tables

🖼️ Images

External Images

Images from the web with automatic captions:

A beautiful mountain landscape

Local Images

Place images in public/images/journal/ and reference them like this:

My setup

Image with Link

Make an image clickable:

Click to view larger

💻 Code Blocks

Inline Code

Use const greeting = "Hello World" for inline code.

Code Blocks

// This is a JavaScript code block
function calculateSum(a, b) {
  return a + b;
}

const result = calculateSum(5, 10);
console.log(result); // 15

Python Example

# Python code block
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Generate first 10 numbers
for i in range(10):
    print(fibonacci(i))

Bash/Terminal

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

📊 Tables

✅ Task Lists

Project Roadmap

• Set up Next.js project
• Configure Tailwind CSS
• Add MDX support
• Create journal system
• Add search functionality
• Implement RSS feed
• Add newsletter signup

Reading List

• Atomic Habits
• Deep Work
• The Pragmatic Programmer
• Clean Code
• Design Patterns

💬 Blockquotes

📋 Lists

Unordered Lists

• First item
• Second item with bold text
• Third item
  • Nested item 1
  • Nested item 2
    • Deep nested item
• Fourth item with a link

Ordered Lists

1. First step: Initialize the project
2. Second step: Install dependencies
3. Third step: Configure settings
   1. Sub-step A
   2. Sub-step B
4. Fourth step: Deploy to production

Mixed Lists

1. Main topic
   • Sub-point one
   • Sub-point two
2. Another topic
   • Detail A
   • Detail B

📐 Definition Lists

Term 1 : Definition for term 1. This explains what the term means in detail.

Term 2 : Definition for term 2. Another detailed explanation goes here.

Term 3 : Definition for term 3 with formatting and even links.

🎨 Special Elements

Abbreviations

The <abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr> are fundamental web technologies.

Horizontal Rules

Use horizontal rules to separate sections:

Or with the decorative divider:

✦

📝 Writing Tips

1. Keep paragraphs short - Easier to read on screens
2. Use headings - Help readers scan content
3. Add images - Visual breaks make reading more enjoyable
4. Include code examples - Shows practical application
5. Link generously - Connect related concepts

🎯 Quick Reference

Happy writing! 🚀

For more examples, check out:

• MDX Documentation
• GitHub Flavored Markdown
• My other articles