Kitchen Sink: All Ghost Editor Elements

Typography

This is a standard paragraph with bold text, italic text, bold italic, inline code, links, and strikethrough. The Codex theme uses IBM Plex Sans for body text and IBM Plex Mono for code.

Heading Level 2

Content under a second-level heading. This is the most common heading level in documentation.

Heading Level 3

Content under a third-level heading, used for subsections within a topic.

Heading Level 4

Fourth-level headings are used sparingly, typically for parameter names or sub-sub-sections.

Heading Level 5

Fifth-level heading — rarely used but styled for completeness.

Heading Level 6

Sixth-level heading — the smallest heading level available.

Lists

Unordered List

• First item in the list
• Second item with more detail
  • Nested item A
  • Nested item B
    • Deeply nested item
• Third item to complete the list

Ordered List

1. Install the CLI tool
2. Initialize your project
   1. Choose a template
   2. Configure your database
   3. Set environment variables
3. Start the development server
4. Deploy to production

Blockquotes

Documentation is a love letter that you write to your future self. — Damian Conway

This is a multi-paragraph blockquote.

The second paragraph continues the quoted material with additional context and detail that spans multiple lines.

Code Blocks

JavaScript

const express = require("express");
const app = express();

app.get("/api/health", (req, res) => {
  res.json({
    status: "healthy",
    version: process.env.APP_VERSION || "1.0.0",
    uptime: process.uptime()
  });
});

app.listen(3000, () => {
  console.log("Server running on port 3000");
});

Python

from dataclasses import dataclass
from typing import Optional
import asyncio

@dataclass
class Document:
    id: str
    title: str
    content: str
    author: Optional[str] = None

async def fetch_documents(collection: str) -> list[Document]:
    """Fetch all documents from a collection."""
    async with get_connection() as conn:
        results = await conn.query(
            f"SELECT * FROM {collection} ORDER BY created_at DESC"
        )
        return [Document(**row) for row in results]

CSS

.doc-layout {
  display: grid;
  grid-template-columns: 280px 1fr 220px;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .doc-layout {
    grid-template-columns: 1fr;
  }
}

.doc-content pre code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.875rem;
  line-height: 1.6;
}

Tables

Images

Gallery

Callout Cards

Toggle Cards

Bookmark Card

Ghost: The Creator Economy Platform

The world's most popular modern publishing platform for creating a new media platform. Used by Apple, Sky News, OpenAI, and thousands more.

Ghost

Button Card

Embed