This blog post demonstrates the full range of markdown features available in our blog system, from basic formatting to complex elements like tables, code blocks, and embedded content.

Images and Media

Single Image

Here's a standard image embedded in the content:

Image with Link

You can also wrap images in links:

Tables

Tables are great for displaying structured data:

Simple Table

Feature	Status	Priority
Markdown Support	✅ Complete	High
Image Rendering	✅ Complete	High
Table Support	✅ Complete	Medium
Code Highlighting	✅ Complete	High
Syntax Highlighting	🚧 In Progress	Medium

Complex Table with Alignment

Left Aligned	Center Aligned	Right Aligned	Default
This is left	This is center	This is right	This is default
Content here	More content	Numbers: 1234	Text
Short	Medium length text	5678	More text here

Table with Markdown

Component	Description	Usage
BlogCard	Displays blog post preview	Used in grid layout
BlogGrid	Container for blog cards	Main listing page
getAllBlogPosts()	Fetches all posts	Server-side function

Code Blocks

JavaScript Example

// Blog utility function
export function getAllBlogPosts(): BlogPost[] {
  const fileNames = fs.readdirSync(blogDirectory)
    .filter(fileName => fileName.endsWith('.md'));
  
  return fileNames.map(fileName => {
    const slug = fileName.replace(/\.md$/, '');
    const fileContents = fs.readFileSync(
      path.join(blogDirectory, fileName), 
      'utf8'
    );
    const { data, content } = matter(fileContents);
    return { slug, frontmatter: data, content };
  });
}

TypeScript Example

interface BlogPostFrontmatter {
  title: string;
  date: string;
  excerpt: string;
  category: string;
  tags: string[];
  image: string;
  author: string;
}

export interface BlogPost {
  slug: string;
  frontmatter: BlogPostFrontmatter;
  content: string;
}

CSS Example

.blog-content {
  color: var(--foreground);
  line-height: 1.75;
  font-size: 1.125rem;
}

.blog-content h1,
.blog-content h2 {
  font-family: var(--font-display);
  font-weight: 700;
  margin-top: 2em;
}

Bash/Shell Example

# Install dependencies
npm install gray-matter remark remark-html date-fns

# Run development server
npm run dev

# Build for production
npm run build

JSON Example

{
  "title": "Exploring Advanced Markdown Features",
  "date": "2025-01-20",
  "tags": ["nextjs", "markdown", "tutorial"],
  "category": "Web Development"
}

Lists

Unordered Lists

• First item
• Second item
  • Nested item one
  • Nested item two
    • Deeply nested item
• Third item
• Fourth item with bold text and italic text

Ordered Lists

1. First step in the process
2. Second step
   1. Sub-step A
   2. Sub-step B
3. Third step
4. Final step

Mixed Lists

• Main point one
  1. Sub-point A
  2. Sub-point B
• Main point two
  • Nested bullet
  • Another nested bullet

Blockquotes

Simple Blockquote

This is a simple blockquote. It can contain multiple paragraphs and various formatting.

Blockquote with Multiple Paragraphs

This is the first paragraph of a blockquote.

This is the second paragraph, continuing the quote.

And here's a third paragraph for good measure.

Nested Blockquotes

This is the outer blockquote.

This is a nested blockquote inside the outer one.

You can nest them multiple levels if needed.

Text Formatting

Emphasis

This paragraph contains italic text, bold text, bold and italic text, and inline code.

Strikethrough

This text has strikethrough formatting applied.

Links

• Internal link to homepage
• Link to portfolio
• External link to Next.js
• Link with title

Horizontal Rules

You can use horizontal rules to separate sections:

---

Headings Hierarchy

Heading 1 (H1)

Heading 2 (H2)

Heading 3 (H3)

Heading 4 (H4)

Heading 5 (H5)

Heading 6 (H6)

Task Lists

• Completed task one
• Completed task two
• Incomplete task one
• Incomplete task two
• Another completed task

Definition Lists

Term 1 : Definition for term 1

Term 2 : Definition for term 2 : Another definition for term 2

Mathematical Expressions (if supported)

Inline math: $E = mc^2$

Block math:

$$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$

HTML Elements

Since markdown supports HTML, you can embed HTML directly:

HTML Table

Name	Type	Description
BlogCard	Component	Displays blog post preview
getAllBlogPosts	Function	Fetches all blog posts

Conclusion

This blog post demonstrates the wide range of markdown features available in our blog system. From simple text formatting to complex tables and code blocks, you can create rich, engaging content.

Key Takeaways

1. Images - Support for standard markdown image syntax
2. Tables - Full table support with alignment options
3. Code Blocks - Syntax highlighting for multiple languages
4. Lists - Ordered, unordered, and nested lists
5. Blockquotes - For highlighting important information
6. HTML - Direct HTML embedding for advanced formatting

Feel free to experiment with these features in your own blog posts!