🎨 MDX Feature Demonstration

#MDX#demo#features

🌈 Complete MDX Expression Features

This demo article introduces all the expression features available in the Yumeu22 LLC blog system.

🎯 Basic Markdown Elements

Heading Levels

Heading 1 (Maximum size with psychedelic effects)

Heading 2 (Gradient effects)

Heading 3 (Standard white text)

Heading 4 (Small size)

Text Decoration

Bold text Italic text Inline code

Links

External link Internal link

📋 Lists and Tables

List Display

  • 🎮 VR Game Development
  • 🤖 AI Chatbot
  • 🎨 Web Design
  1. Project Start
  2. Design & Development
  3. Testing & Release

Data Table

Service Price Duration Rating
VR Basic ¥10,000 1 month ⭐⭐⭐⭐
VR Pro ¥30,000 1 month ⭐⭐⭐⭐⭐
AI Chat ¥5,000 1 month ⭐⭐⭐

💻 Code Blocks

JavaScript

// VR Scene Initialization
const initVRScene = () => {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight);
  
  // Psychedelic background setup
  scene.background = new THREE.Color(0xff6b9d);
  
  return { scene, camera };
};

console.log("Welcome to the dream world!");

TypeScript

interface DreamWorld {
  id: string;
  name: string;
  immersionLevel: number;
  type: 'fantasy' | 'scifi' | 'abstract';
}

const createDreamWorld = (config: DreamWorld): Promise<VREnvironment> => {
  return new Promise((resolve) => {
    // Generate dream world
    setTimeout(() => {
      resolve(generateEnvironment(config));
    }, 1000);
  });
};

CSS

.psychedelic-element {
  background: linear-gradient(45deg, #ff6b9d, #c44569, #f8b500);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(255, 107, 157, 0.3);
  transition: all 0.3s ease;
}

.psychedelic-element:hover {
  transform: scale(1.05) rotate(1deg);
}

📐 YouTube Embed

Note: Replace with actual video ID when using

🖼️ Image Display

Yumeu22 LLC Logo

💬 Quotes and Callouts

Quote

"Escapism is not shameful. It is a door to new possibilities."

― Yumeu22 LLC Founding Member

Important Information

⚠️ Note: This is a demonstration article.

✅ Point: MDX allows direct use of HTML elements.

💡 Tip: Use emojis effectively to enhance visual appeal.

🎨 Special Expressions

Checklist

  • Blog system construction
  • Design integration
  • Image optimization
  • SEO optimization
  • Performance improvement

Statistical Data

  • User Satisfaction: 98.5%
  • Average Session Time: 12 minutes 30 seconds
  • Monthly Active Users: 2,847 people

Divider

🚀 Technology Stack

Technologies used in this blog system:

  1. Next.js 15: React framework
  2. MDX: Markdown + React Components
  3. Tailwind CSS: Utility-first CSS
  4. Framer Motion: Animation library
  5. TypeScript: Type-safe development

🎯 Summary

The MDX blog system enables the following rich expressions:

  • 📝 Basic Markdown syntax
  • 💻 Code blocks with syntax highlighting
  • 🎬 YouTube video embedding
  • 🖼️ Optimized image display
  • 📊 Tables and data display
  • 🎨 Custom styling

Combine these features to create attractive and informative articles!

Article creation date: December 14, 2024
Updated: December 15, 2024