Pyxie Markdown Guide

Learn how to create rich content using Pyxie's markdown features and FastHTML integration.

Document Structure

Pyxie markdown files are flexible and can be adapted to your chosen layout. The only required part is the frontmatter metadata at the top and at least one xml section:

---
title: "Your Title"
date: 2024-03-19  # ISO format date
author: "Author Name"
category: "Category"
summary: "Brief summary"
reading_time: "5 min read"  # Optional
tags: ["tag1", "tag2"]  # Optional
---

XML Elements

Pyxie uses XML-style elements to structure content. The available sections depend on your chosen layout. Common sections include:

• <featured_image>: Hero image at the top
• <toc>: Table of contents (auto-generated from headings)
• <content>: Main content area
• <conclusion>: Summary or call-to-action
• <share>: Social sharing buttons

Some layouts may define additional sections like <share> for social sharing buttons. If you don't define a section that's available in your layout, that part of the page simply won't be rendered. This flexibility lets you create different types of content using the same layout.

Markdown Syntax

Text Formatting

• Bold with **text**
• Italic with *text*
• Strikethrough with ~~text~~
• Code with `text`

Lists

1. Ordered lists

2. Use numbers

   • Nested items
   • Work too

• Unordered lists
• Use dashes
  • Or asterisks
  • For nested items

Code Blocks

def hello_world():
    print("Hello from Pyxie!")

Tables

Feature	Description	Support
Markdown	Basic syntax	✅
FastHTML	Python components	✅
DaisyUI	UI components	✅

FastHTML Basics

FastHTML lets you create dynamic components right in your markdown. Here's a simple example:

Basic FastHTML Elements

FastHTML provides XML element constructors that let you create HTML elements using Python:

# Common elements - these are XML constructors that create HTML elements
Div("content", cls="my-class")  # Creates a <div> element
P("paragraph text")            # Creates a <p> element
H1("heading 1")                # Creates an <h1> element
H2("heading 2")                # Creates an <h2> element
Span("inline text")            # Creates a <span> element

# Interactive elements
Button("Click me", onclick="handleClick()")  # Creates a <button> element
Input(type="text", placeholder="Enter text")  # Creates an <input> element

Adding Classes and Styles

Use the cls parameter to add CSS classes to any element:

Div(
    "Content with styling",
    cls="p-4 bg-blue-100 rounded-lg shadow-md"
)

Nesting Elements

FastHTML elements can be nested to create complex structures:

Div(
    H2("Title", cls="text-2xl"),
    P("Description", cls="text-gray-600"),
    Button("Action", cls="btn btn-primary"),
    cls="card p-4"
)