Content Features

Pyxie provides a clean, straightforward way to create rich content using markdown, with special support for mathematical expressions and interactive components.

Basic Markdown

Pyxie supports all standard markdown syntax for basic formatting:

Text Formatting

• Bold text using **double asterisks**

• Italic text using *single asterisks*

• Inline code using `backticks`

• Links using [text](url)

Lists and Structure

1. Ordered lists use numbers

2. And automatically increment

   • Nested unordered lists

   • Use dashes or asterisks

Blockquotes use the greater-than symbol Perfect for highlighting important text

Code Blocks

Code blocks use triple backticks:

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

LaTeX Math Support

Pyxie includes built-in support for LaTeX math rendering using KaTeX cdn links for in browser rendering. You can write mathematical expressions using standard LaTeX syntax:

Inline Math

Use single dollar signs $...$ for inline math expressions:

The quadratic formula is:

Display Math

Use double dollar signs $$...$$ for displayed equations:

Complex Equations

You can write complex equations with multiple lines using align environments:

Setting Up KaTeX in Your Project

To enable LaTeX math rendering in your Pyxie project, you'll need to include KaTeX resources in your app. Here's how to set it up:

1. Add KaTeX CSS and JavaScript to your app's resources:

# KaTeX CSS
katex_css = Link(
    rel="stylesheet",
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css",
    integrity="sha384-zh0CIslj+VczCZtlzBcjt5ppRcsAmDnRem7ESsYwWwg3m/OaJ2l4x7YBZl9Kxxib",
    crossorigin="anonymous"
)
# KaTeX JavaScript
katex_js = Script(
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js",
    integrity="sha384-Rma6DA2IPUwhNxmrB/7S3Tno0YY7sFu9WSYMCuulLhIqYSGZ2gKCJWIqhBWqMQfh",
    crossorigin="anonymous",
    defer=True
)

2. Add an initialization script to render the math expressions:

# KaTeX initialization script
katex_init_script = Script("""
document.addEventListener('DOMContentLoaded', function() {
    function renderKaTeX() {
        // Handle inline math
        document.querySelectorAll('.katex-inline').forEach(element => {
            try {
                const tex = element.getAttribute('data-tex');
                if (tex) {
                    katex.render(tex, element, {
                        throwOnError: false,
                        displayMode: false
                    });
                }
            } catch (e) {
                console.error('KaTeX rendering error:', e);
            }
        });
        // Handle display math
        document.querySelectorAll('.katex-block').forEach(element => {
            try {
                const tex = element.getAttribute('data-tex');
                if (tex) {
                    katex.render(tex, element, {
                        throwOnError: false,
                        displayMode: true
                    });
                }
            } catch (e) {
                console.error('KaTeX rendering error:', e);
            }
        });
    }
    // Initial render
    if (window.katex) {
        renderKaTeX();
    } else {
        // Wait for KaTeX to load
        document.querySelector('[src*="katex.min.js"]').addEventListener('load', renderKaTeX);
    }
});
""")

3. Include these resources in your FastHTML app initialization:

# In your main.py
app, rt = fast_app(
    hdrs=(katex_css, katex_js, katex_init_script),
    # other app configuration...
)

4. Optional: Preload KaTeX fonts for better performance:

# Preload essential KaTeX fonts
katex_fonts = [
    Link(
        rel="preload",
        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/KaTeX_Main-Regular.woff2",
        _as="font",
        type="font/woff2",
        crossorigin="anonymous"
    ),
    Link(
        rel="preload",
        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/KaTeX_Math-Italic.woff2",
        _as="font",
        type="font/woff2",
        crossorigin="anonymous"
    )
]

You can customize this setup based on your specific needs. For example:

• Use a different version of KaTeX

• Include additional fonts

• Modify the rendering options

• Use a local copy instead of CDN links

HTML Integration

For advanced formatting needs, you can seamlessly mix HTML with markdown. Here are some examples:

Best Practices

1. Keep It Simple

   • Use basic markdown for most content

   • Add LaTeX math when needed

   • Use components for interactivity

2. Structure Your Content

   • Use headings for clear hierarchy

   • Keep paragraphs focused

   • Include code examples when helpful

3. Enhance with HTML

   • Use HTML for advanced formatting

   • Style with CSS when needed

   • Keep accessibility in mind

Next Steps

Now that you understand Pyxie's content features, you can:

1. Write content using markdown

2. Add mathematical expressions with LaTeX

3. Create interactive elements with components

4. Enhance your content with HTML when needed