Markdown Features Demo: Testing All Formatting Options

This demonstration post showcases all the Markdown formatting features available for blog posts on ddev.com. It’s designed for testing the rendering of various Markdown elements.

Table of Contents

• Callout Boxes
  • Note/Info Callout
  • Tip Callout
  • Warning Callout
  • Danger Callout
• Callout with Multiple Paragraphs and Formatting
• GitHub Flavored Markdown Features
  • Autolinks
  • Strikethrough
  • Emoji Support
• Standard Markdown Blockquotes
• Code Blocks
  • Bash Commands
  • Multi-line Bash with Comments
  • PHP Code
  • JavaScript
  • YAML Configuration
  • JSON
• Links
  • Links Between Blog Posts
  • Links to Other Site Pages
  • External Links
• Lists
  • Unordered Lists
  • Ordered Lists
  • Task Lists
• Typography Examples
  • Emphasis
  • Inline Code
  • Strikethrough
  • Horizontal Rules
• Tables
• Nested Content Examples
  • Callout with Code Block
  • List with Callouts
• Images and Figures
• Video Embeds
• Complex Combinations
• Conclusion

Callout Boxes

Note/Info Callout

You can also use :::info[] for the same blue-themed styling:

Tip Callout

Here’s a tip without a custom title:

Warning Callout

Another warning example:

Danger Callout

Critical warning example:

Callout with Multiple Paragraphs and Formatting

GitHub Flavored Markdown Features

The site supports GitHub Flavored Markdown (GFM) which adds several useful features:

Autolinks

URLs automatically become clickable links:

• https://ddev.com
• https://docs.ddev.com
• user@example.com (email addresses too!)

Strikethrough

You can strike through text using double tildes. This is useful for showing deprecated features or corrections.

Example: DDEV v1.0 required manual configuration DDEV now auto-detects project types.

Emoji Support

Emojis are automatically made accessible for screen readers:

• 🚀 DDEV is fast and powerful
• ✅ Tests passing
• ⚠️ Warning message
• 💡 Helpful tip
• 🎉 Celebrate your success!

Standard Markdown Blockquotes

For simpler callouts that don’t need full styling, you can use standard Markdown blockquotes:

Note: This is a simple note using blockquote syntax.

Tip: Use ddev ssh to open a shell inside your web container.

Update: DDEV v1.25.0 includes support for Docker Compose v2 by default.

Code Blocks

Bash Commands

ddev start
ddev composer install
ddev npm install

Multi-line Bash with Comments

# Start your DDEV project
ddev start

# Import a database
ddev import-db --file=backup.sql.gz

# Run Composer commands
ddev composer require drupal/admin_toolbar

PHP Code

<?php

namespace Drupal\my_module\Controller;

use Drupal\Core\Controller\ControllerBase;

class MyController extends ControllerBase {
  public function content() {
    return [
      '#type' => 'markup',
      '#markup' => $this->t('Hello DDEV!'),
    ];
  }
}

JavaScript

const config = {
  host: "localhost",
  port: 3000,
  environment: "development",
}

function initializeApp() {
  console.log("Starting DDEV-powered app...")
  return config
}

YAML Configuration

name: my-project
type: php
docroot: web
php_version: "8.3"
database:
  type: mysql
  version: "8.0"
nodejs_version: "20"

JSON

{
  "name": "my-ddev-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "ddev npm run dev",
    "build": "ddev npm run build"
  }
}

Links

Links Between Blog Posts

Internal blog links use filename references: Learn about DDEV performance

Links to Other Site Pages

Root-relative links: Visit our support page

External Links

External links automatically open in a new tab with security attributes: DDEV Documentation

Reference-style links for cleaner Markdown:

Check out the Docker documentation and the Astro guide for more information.

Lists

Unordered Lists

• First item
• Second item with bold text
• Third item with inline code
  • Nested item one
  • Nested item two
    • Deeply nested item

Ordered Lists

1. Start your DDEV project
2. Configure your application
3. Import your database
4. Test your site
   1. Check the homepage
   2. Test user login
   3. Verify email functionality

Task Lists

• Install DDEV
• Create new project
• Configure add-ons
• Deploy to production

Typography Examples

Emphasis

This text has italic emphasis and this has italic emphasis too.

This text has bold emphasis and this has bold emphasis too.

You can combine bold and italic or italic and bold.

Inline Code

Use ddev start to start your project, ddev stop to stop it, and ddev restart to restart.

Strikethrough

This feature is deprecated Use the new feature instead.

Horizontal Rules

You can use horizontal rules to separate sections:

Content after the horizontal rule.

Tables

Alignment in tables:

Nested Content Examples

Callout with Code Block

# Run PHP commands
ddev exec php -v

# Run Composer
ddev exec composer require vendor/package

# Or use the shorthand
ddev composer require vendor/package

List with Callouts

Here’s a workflow with embedded callouts:

1. Start your project

   ddev start

2. Configure your database

   ⚠️ Warning

   Make sure to snapshot your database before making changes: ddev snapshot

3. Import your content

   ddev import-db --file=backup.sql.gz

4. Verify everything works

   💡 Tip

   Use ddev launch to open your site in a browser automatically.

Images and Figures

Images are automatically wrapped in semantic <figure> elements with captions generated from alt text:

The alt text becomes the figure caption, improving both accessibility and visual presentation:

Video Embeds

Videos should be wrapped in a .video-container div for responsive sizing:

Complex Combinations

Conclusion

This demo post covers all the major Markdown features available for blog posts on ddev.com. Each section demonstrates different formatting capabilities that can be used when writing actual blog content.

Remember to check the MARKDOWN_FORMATTING.md guide for the latest syntax and examples.