Skip to main content

BookStack Formatting & Style Guide

Test all the visual elements and formatting options available!

Text Formatting

Basic Text Styles

  • Bold text - important information
  • Italic text - emphasis
  • Bold and italic - maximum emphasis
  • Strikethrough - deleted/deprecated content
  • Inline code - variable names, commands
  • ==Highlighted text== - important notes
  • H2O - subscript for chemical formulas
  • E=mc^2^ - superscript for equations

Headers Hierarchy

Header 1 - Page Title

Header 2 - Main Sections

Header 3 - Subsections

Header 4 - Details

Header 5 - Fine Details
Header 6 - Smallest Header

Lists & Organization

Unordered Lists

  • First level item
    • Second level item
      • Third level item
        • Fourth level item
  • Back to first level
  • Another item

Ordered Lists

  1. First step
  2. Second step
    1. Sub-step A
    2. Sub-step B
      1. Detail 1
      2. Detail 2
  3. Third step

Task Lists

  • Completed task
  • Another finished item
  • Pending task
  • Future enhancement
    • Subtask completed
    • Subtask pending

Mixed Lists

  1. Planning Phase
    • Define requirements
    • Create mockups
    • Get stakeholder approval
  2. Development Phase
    • Set up environment
    • Code implementation
    • Write tests
  3. Deployment Phase
    • Production deployment
    • Monitor performance

Code & Technical Content

Inline Code Examples

Use npm install to install packages, then run npm start to begin development. The config file is located at ~/.config/app.json.

Code Blocks with Syntax Highlighting

JavaScript

// API client example
class QbitSparkAPI {
  constructor(apiKey) {
    this.apiKey = apiKey;
    this.baseURL = 'https://api.qbitspark.com/v1';
  }
  
  async getUsers() {
    const response = await fetch(`${this.baseURL}/users`, {
      headers: {
        'Authorization': `Bearer ${this.apiKey}`,
        'Content-Type': 'application/json'
      }
    });
    return response.json();
  }
}

Python

# Data processing script
import pandas as pd
import numpy as np

def process_user_data(df):
    """Process and clean user data"""
    # Remove duplicates
    df_clean = df.drop_duplicates(subset=['email'])
    
    # Calculate metrics
    metrics = {
        'total_users': len(df_clean),
        'active_users': len(df_clean[df_clean['status'] == 'active']),
        'signup_rate': df_clean.groupby('signup_date').size()
    }
    
    return df_clean, metrics

SQL

-- User analytics query
SELECT 
    u.id,
    u.email,
    u.created_at,
    COUNT(p.id) as project_count,
    SUM(p.revenue) as total_revenue
FROM users u
LEFT JOIN projects p ON u.id = p.user_id
WHERE u.status = 'active'
    AND u.created_at >= DATE('now', '-30 days')
GROUP BY u.id, u.email, u.created_at
HAVING project_count > 0
ORDER BY total_revenue DESC
LIMIT 50;

YAML Configuration

# Docker Compose configuration
version: '3.8'
services:
  app:
    image: qbitspark/api:latest
    environment:
      - NODE_ENV=production
      - DATABASE_URL=postgres://user:pass@db:5432/app
      - REDIS_URL=redis://redis:6379
    ports:
      - "3000:3000"
    depends_on:
      - db
      - redis
  
  db:
    image: postgres:13
    environment:
      POSTGRES_DB: app
      POSTGRES_USER: user
      POSTGRES_PASSWORD: secure_password
    volumes:
      - postgres_data:/var/lib/postgresql/data

Tables & Data

Basic Table

Feature Free Plan Pro Plan Enterprise
API Calls 1,000/day 10,000/day Unlimited
Storage 1 GB 10 GB 100 GB
Support Email Priority Phone + Dedicated
SLA None 99.9% 99.95%

Complex Table with Formatting

Method Endpoint Description Auth Required Rate Limit
GET /users List all users ✅ Yes 100/min
POST /users Create new user ✅ Yes 20/min
PUT /users/{id} Update user info ✅ Yes 50/min
DELETE /users/{id} Remove user ✅ Yes 10/min

Alignment Table

Left Aligned Center Aligned Right Aligned
Text here Centered text $1,299.00
More content Another line $2,599.99
Final row Last center $999.00

Callouts & Alerts

💡 Pro Tip: Use callouts to highlight important information that users shouldn't miss!

⚠️ Warning: This action cannot be undone. Make sure to backup your data first.

❌ Error: Invalid API key. Check your credentials and try again.

✅ Success: Your webhook has been configured successfully and is now active.

📖 Note: This feature is available in Pro and Enterprise plans only.

🔒 Security: Always use HTTPS endpoints in production environments.

Internal References

Images & Media

Image with Caption

QbitSpark API Flow Diagram Figure 1: API request/response flow diagram

Inline Images

The QbitSpark logo Logo appears throughout our documentation.

Horizontal Rules & Separators

Use horizontal rules to separate major sections:

Mathematical Expressions

Inline Math

The formula for calculating API costs is: cost = requests × $0.001

Complex Formulas (if supported)

Rate Limit = (requests_per_minute / user_tier_multiplier) × geo_factor

Special Characters & Symbols

Common Symbols

  • ✅ Checkmark (approved/working)
  • ❌ Cross (error/not supported)
  • ⚠️ Warning triangle
  • 💡 Light bulb (tip/idea)
  • 🔒 Lock (security)
  • 🚀 Rocket (performance)
  • 📊 Chart (analytics)
  • 🛠️ Tools (configuration)

Technical Symbols

  • → Arrow (flow/direction)
  • ← Back arrow
  • ↑ Up arrow (improvement)
  • ↓ Down arrow (decrease)
  • ∞ Infinity (unlimited)
  • © Copyright
  • ® Registered trademark
  • ™ Trademark

Advanced Formatting

Definition Lists

API Key : A unique identifier used to authenticate requests to the QbitSpark API.

Webhook : An HTTP callback that occurs when something happens; a simple event-notification.

Rate Limiting : A technique to limit network traffic and prevent abuse by restricting the number of requests.

Nested Blockquotes

Main Quote: This is an important concept to understand.

Sub-quote: This provides additional context to the main point.

Deep quote: Sometimes you need multiple levels of emphasis.

Mixed Content Example

  1. Setup Phase

    📋 Checklist: Make sure you have completed all prerequisites

    • API key generated
    • Development environment ready
    • Webhook endpoint configured
    # Test your setup
curl -H "Authorization: Bearer YOUR_KEY" https://api.qbitspark.com/health

  2. Implementation Phase

    Task Status Notes
    User auth ✅ Complete Working perfectly
    Data sync 🔄 In Progress ~75% done
    Error handling ❌ Pending Needs attention

Keyboard Shortcuts & UI Elements

Use these to describe user interface interactions:

  • Press Ctrl + S to save
  • Click the Save button
  • Navigate to Settings > API > Keys
  • Select the Production environment
  • Toggle the Enable Webhooks switch

Color & Emphasis Combinations

You can combine different formatting:

  • Bold and italic together: Very important information
  • Bold with code: Use the npm start command
  • Italic with links: See our documentation
  • Strikethrough with bold: Deprecated feature

🎨 Design Tip: Don't overuse formatting! Clean, readable documentation is more valuable than fancy styling. Use formatting purposefully to improve comprehension.

Admin Qbit
Admin Qbit  commented 2 months ago
#1

okay

No comments to display

Back to top