This is my site's styleguide page, showcasing all the custom components and how everything flows together for blog content.

Typography & Text Formatting

Regular paragraph text looks like this. It uses a comfortable line height and muted foreground color for easy reading.

Bold text is used for emphasis. Italic text is used for subtle emphasis. You can also combine bold and italic together.

Inline code snippets are styled with a monospace font and subtle background. Great for mentioning function_names(), variables, or file.py paths.

Heading 1 (H1)

Lists

Unordered List

First item in the list
Second item with some bold text
Third item with inline code
- Nested item one
- Nested item two
  - Deeply nested item
Fourth item

This is a long paragraph of text designed to test how content wraps around the floated sidebar cards on the right side of the page. When you have floated elements like the author card and the "mentioned" sidebar, the text should flow naturally around them, creating a magazine-style layout. This paragraph contains enough words to demonstrate the wrapping behavior across multiple lines. The text should hug the left edge of the floated elements and then expand to full width once it clears them. This is particularly important for readability and visual balance in blog posts that contain rich metadata sidebars. We want to ensure that paragraphs, lists, code blocks, and other content elements all respect the float boundaries properly without any awkward overlapping or visual glitches. The goal is a clean, professional reading experience that makes good use of the available horizontal space while keeping supplementary information accessible in the sidebar.

Ordered List

First step in the process
Second step with emphasis
Third step
1. Sub-step A
2. Sub-step B
Fourth step with a link

Task List (GitHub-style)

Completed task
Another done item
Pending task
Future work

Blockquotes

This is a simple blockquote. Great for highlighting important information or quoting someone.

Pro Tip: You can include formatting inside blockquotes too!

Even multiple paragraphs work.

View the pull request that inspired this

Code Blocks

Python

from litestar import Litestar, get
from litestar.di import Provide
 
async def get_db_connection() -> AsyncGenerator[Connection, None]:
    """Dependency that provides a database connection."""
    async with pool.acquire() as conn:
        yield conn
 
@get("/users/{user_id:int}")
async def get_user(user_id: int, db: Connection) -> User:
    """Fetch a user by ID from the database."""
    return await db.fetch_one(
        "SELECT * FROM users WHERE id = $1",
        user_id
    )
 
app = Litestar(
    route_handlers=[get_user],
    dependencies={"db": Provide(get_db_connection)},
)

TypeScript/React

import { useState, useEffect } from "react";
 
interface User {
  id: number;
  name: string;
  email: string;
}
 
export function UserProfile({ userId }: { userId: number }) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then((res) => res.json())
      .then((data) => {
        setUser(data);
        setLoading(false);
      });
  }, [userId]);
 
  if (loading) return <div>Loading...</div>;
  if (!user) return <div>User not found</div>;
 
  return (
    <div className="p-4 border rounded-lg">
      <h2 className="text-xl font-bold">{user.name}</h2>
      <p className="text-muted-foreground">{user.email}</p>
    </div>
  );
}

Shell/Bash

# Install uv (the fast Python package manager)
curl -LsSf https://astral.sh/uv/install.sh | sh
 
# Create a new project
uv init my-project
cd my-project
 
# Add dependencies
uv add litestar uvicorn
 
# Run the application
uv run python -m uvicorn main:app --reload

YAML

name: CI Pipeline
on:
  push:
    branches: [main]
  pull_request:
 
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: astral-sh/setup-uv@v4
      - run: uv sync
      - run: uv run pytest

JSON

{
  "name": "scriptr-prime",
  "version": "1.0.0",
  "dependencies": {
    "next": "^15.0.0",
    "react": "^19.0.0",
    "tailwindcss": "^4.0.0"
  }
}

SQL

SELECT
    u.id,
    u.username,
    COUNT(p.id) as post_count,
    MAX(p.created_at) as last_post_date
FROM users u
LEFT JOIN posts p ON p.author_id = u.id
WHERE u.active = true
GROUP BY u.id, u.username
HAVING COUNT(p.id) > 5
ORDER BY post_count DESC
LIMIT 10;

Callouts

Information

This is an informational callout. Use it to highlight helpful tips or additional context.

Warning

This is a warning callout. Use it when users should be careful about something.

Error

This is an error callout. Use it for critical information or common pitfalls.

Success

This is a success callout. Use it to celebrate wins or confirm correct approaches.

A callout without a type defaults to neutral styling. Good for general notes.

Tables

Simple Table

Package	Language	Stars	Description
Litestar	Python	5.2k	High-performance ASGI framework
FastAPI	Python	75k	Modern web framework for APIs
Starlette	Python	10k	Lightweight ASGI toolkit
Flask	Python	67k	Micro web framework

Complex Table

Feature	Litestar	FastAPI	Django	Flask
Async Support	✅	✅	✅	❌
OpenAPI	✅	✅	❌	❌
ORM	✅	❌	✅	❌
Admin	✅	❌	✅	❌
WebSockets	✅	✅	✅	❌

I recently contributed a Django upgrade to the Python.org codebase. Huge thanks to @adamchainz for the django-upgrade tool!

The upgrade involved updating django from 4.2 to 5.2, along with dependencies like django-pipeline.

Learn More

Watch the JetBrains Django 5 video for a great overview of the new features.

Horizontal Rules

Content above the rule.

Content below the rule.

Alternative rule syntax also works.

Escaping & Special Characters

Sometimes you need to show literal characters:

Asterisks: *not italic*
Backticks: `not code`
Underscores: _not italic_
Brackets: [not a link]

Conclusion

This page demonstrates all the MDX components and markdown features available for blog posts.

Quick Reference:

Use <PyPi name="package" /> for Python packages
Use <Npm name="package" /> for NPM packages
Use <GhUser name="username" /> for GitHub users
Use <GhRepo repo="owner/repo" /> for repositories
Use <GhIssue issue="owner/repo#123" /> for issues
Use <GhPr pr="owner/repo#123" /> for pull requests
Use <Bluesky handle="user" /> for Bluesky
Use <Twitter handle="user" /> for X/Twitter
Use <LinkedIn handle="user" /> for LinkedIn
Use <YouTube href="url" /> for YouTube
Use <Callout type="info|warning|error|success"> for callouts

Questions? Reach out via @scriptr.dev or @_scriptr!

# related_posts

Upgrading Python.org: From Django 4.2 to 5.2