Guides

Complete Markdown Test - All Elements Guide

A comprehensive test post containing all Markdown and MDX elements to verify rendering. This includes headings, lists, code blocks, tables, images, and more.

7 min read
Complete Markdown Test - All Elements Guide

Heading 1 - Main Title

This is a comprehensive markdown test document for MeraChat AI blog. Use this to verify all markdown elements render correctly.

Heading 2 - Section Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. This paragraph contains bold text, italic text, and bold italic text.

Heading 3 - Subsection

You can also use underscores for bold and underscores for italic. Here's some strikethrough text for deletions.

Heading 4 - Minor Section

This is a heading level 4. Good for nested content organization.

Heading 5 - Small Heading

This is a heading level 5. Rarely used but should still render.

Heading 6 - Smallest Heading

This is the smallest heading level available in markdown.


Text Formatting

Here are all the text formatting options:

  • Bold text using double asterisks
  • Italic text using single asterisks
  • Bold and italic using triple asterisks
  • Strikethrough using double tildes
  • Inline code using backticks
  • Highlighted text using mark tag
  • Superscript and Subscript text
  • Press Ctrl + C to copy
  • API is an abbreviation


Images

Standard Image

MeraChat AI Dashboard
MeraChat AI Dashboard

Image with Alt Text

Screenshot showing the MeraChat AI chat interface with conversation history
Screenshot showing the MeraChat AI chat interface with conversation history

Lists

Unordered List

  • First item
  • Second item
  • Third item with sub-items
    • Sub-item A
    • Sub-item B
      • Deep nested item
      • Another deep item
    • Sub-item C
  • Fourth item

Ordered List

  1. First step
  2. Second step
  3. Third step with sub-steps
    1. Sub-step 3.1
    2. Sub-step 3.2
    3. Sub-step 3.3
  4. Fourth step

Mixed Lists

  1. First ordered item
    • Unordered sub-item
    • Another unordered sub-item
  2. Second ordered item
    1. Ordered sub-item
    2. Another ordered sub-item

Task List / Checkbox List

  • Completed task
  • Another completed task
  • Incomplete task
  • Another task to do

Blockquotes

Simple Blockquote

This is a simple blockquote. MeraChat AI helps businesses automate customer interactions.

Multi-line Blockquote

This is a longer blockquote that spans multiple lines.

It can contain multiple paragraphs and maintain proper formatting throughout the entire quote block.

— MeraChat AI Team

Nested Blockquotes

This is the first level of quoting.

This is a nested blockquote inside the first one.

And this is an even deeper nested quote.

Back to the first level.


Code Blocks

Inline Code

Use const for constants and let for variables. The console.log() function prints to console.

Fenced Code Block (No Language)

This is a plain code block
without syntax highlighting
just monospace text

JavaScript

javascript
// MeraChat AI - JavaScript Example const meraChat = { name: "MeraChat AI", version: "2.0.0", features: ["chat", "voice", "analytics"], async sendMessage(message) { const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message }), }); return response.json(); }, }; // Arrow function example const greet = (name) => `Hello, ${name}! Welcome to MeraChat AI.`; // Async/await example async function fetchData() { try { const data = await meraChat.sendMessage("Hello!"); console.log(data); } catch (error) { console.error("Error:", error); } }

TypeScript

typescript
// MeraChat AI - TypeScript Example interface ChatMessage { id: string; content: string; role: "user" | "assistant" | "system"; timestamp: Date; metadata?: Record<string, unknown>; } interface ChatConfig { apiKey: string; model: string; temperature?: number; maxTokens?: number; } class MeraChatClient { private config: ChatConfig; private messages: ChatMessage[] = []; constructor(config: ChatConfig) { this.config = config; } async sendMessage(content: string): Promise<ChatMessage> { const message: ChatMessage = { id: crypto.randomUUID(), content, role: "user", timestamp: new Date(), }; this.messages.push(message); return message; } } // Generic type example type ApiResponse<T> = { data: T; success: boolean; error?: string; };

Python

python
# MeraChat AI - Python Example import asyncio from dataclasses import dataclass from typing import Optional, List @dataclass class Message: """Represents a chat message""" id: str content: str role: str timestamp: float class MeraChatClient: """Client for MeraChat AI API""" def __init__(self, api_key: str, model: str = "gpt-4"): self.api_key = api_key self.model = model self.messages: List[Message] = [] async def send_message(self, content: str) -> Message: """Send a message to the AI""" return message # List comprehension example numbers = [x**2 for x in range(10) if x % 2 == 0]

CSS

css
/* MeraChat AI - CSS Styles */ :root { --primary-color: #6366f1; --secondary-color: #8b5cf6; --background: #ffffff; --foreground: #1f2937; --border-radius: 12px; } .chat-widget { display: flex; flex-direction: column; height: 100%; max-width: 400px; border-radius: var(--border-radius); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }

SQL

sql
-- MeraChat AI - SQL Examples CREATE TABLE users ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), email VARCHAR(255) UNIQUE NOT NULL, name VARCHAR(100), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); SELECT u.name, COUNT(c.id) as conversation_count FROM users u LEFT JOIN conversations c ON u.id = c.user_id GROUP BY u.id, u.name ORDER BY conversation_count DESC LIMIT 10;

Bash/Shell

bash
#!/bin/bash # MeraChat AI - Deployment Script APP_NAME="merachat-ai" echo "Starting deployment for $APP_NAME" # Install dependencies pnpm install --frozen-lockfile # Build application pnpm build echo "Deployment completed!"

JSON

json
{ "name": "merachat-ai", "version": "2.0.0", "config": { "api": { "baseUrl": "https://api.merachat.ai", "timeout": 30000 }, "models": [ { "id": "gpt-4", "name": "GPT-4" }, { "id": "claude-3", "name": "Claude 3" } ] } }

Diff

diff
- const oldFunction = () => { - return "old implementation"; - }; + const newFunction = () => { + return "new and improved implementation"; + };

Tables

Simple Table

FeatureFree PlanPro PlanEnterprise
Messages/month10010,000Unlimited
AI ModelsGPT-3.5GPT-4All Models
SupportCommunityEmailDedicated

Aligned Table

Left AlignedCenter AlignedRight Aligned
TextTextText
More textMore textMore text
Even moreEven moreEven more

Complex Table

ModelProviderContext LengthCost per 1M tokensBest For
GPT-4 TurboOpenAI128,000$10.00Complex reasoning
Claude 3 OpusAnthropic200,000$15.00Long documents
Gemini ProGoogle32,000$7.00Multimodal tasks

Table with Formatting

ElementMarkdownRendered
Bold**text**text
Italic*text*text
Code`code`code
Link[text](url)text
Strikethrough~~text~~text

Horizontal Rules

Three or more hyphens:


Three or more asterisks:



Callouts (Custom MDX Components)

This is an informational callout. Use it to highlight important information.

This is a tip callout. Use it for helpful suggestions.

This is a warning callout. Use it to warn users about potential issues.

This is a danger callout. Use it for critical warnings.


Emoji

Standard emoji support: 🚀 🎉 ✨ 💡 🔥 ⭐ 👍 ❤️ 🎯 📊

Emoji in context: MeraChat AI is awesome! 🎉 Try it today! 🚀


Summary

This document contains examples of:

  1. ✅ All 6 heading levels (H1-H6)
  2. ✅ Text formatting (bold, italic, strikethrough, etc.)
  3. ✅ Inline code and code blocks
  4. ✅ Links (inline and external)
  5. ✅ Images (with alt text and captions)
  6. ✅ Lists (ordered, unordered, nested, task lists)
  7. ✅ Blockquotes (simple, multi-line, nested)
  8. ✅ Code blocks (multiple languages with syntax highlighting)
  9. ✅ Tables (simple, aligned, complex)
  10. ✅ Horizontal rules
  11. ✅ Callout components (info, tip, warning, danger)
  12. ✅ Emoji support
  13. ✅ Highlighted text (mark)
  14. ✅ Superscript and Subscript
  15. ✅ Keyboard keys (kbd)
  16. ✅ Abbreviations (abbr)

Thank you for using MeraChat AI! 🚀

If any elements don't render correctly, check your MDX renderer configuration.

Last updated: January 16, 2026