Markdown Features

Zerodown leverages standard Markdown syntax and extends it with useful features like front matter for metadata and shortcodes for dynamic content.

Front Matter

Each Markdown file (.md) can optionally start with a YAML front matter block enclosed by triple dashes (---). This block defines metadata for the page.

---
title: "My Awesome Post"                # Page title (used in templates, <title> tag)
date: 2024-04-09                    # Publication date (useful for sorting)
description: "A brief summary of this post." # Page description (used for meta tags)
author: "Jane Doe"                      # Optional author name
image: "/assets/images/hero.jpg"      # Optional featured image path (relative to content dir)
featured: true                      # Custom flag (e.g., for highlighting)
tags: ["python", "static site"]        # Custom list of tags
template: "custom-post.html"          # Optional: Override default template for this page
---

# Your Markdown Content Starts Here

Regular Markdown content follows the front matter block.

This metadata is accessible within Jinja templates (e.g., {{ title }}, {{ date }}) and can be used for sorting, filtering, and displaying page-specific information.

Links and Images

Use standard Markdown syntax for creating links and embedding images.

# Link to another Markdown page within your site
[Read the Getting Started guide](getting-started.md)

# Link to an external website
[Visit PicoCSS](https://picocss.com)

# Embed an image from your assets directory
![Diagram showing Zerodown flow](../assets/diagram.png)

Important: Zerodown automatically processes relative paths in links (href) and image sources (src) to ensure they work correctly in the final built site, regardless of how deeply nested your content files are. You should generally use paths relative to the current Markdown file.

Image Dimensions (Special Syntax)

You can optionally specify image width and/or height directly in the image alt text using curly braces {}:

![Logo {width=100 height=50}](../assets/logo.png)
![Thumbnail {width=150}](../assets/thumb.jpg) 

This adds width="..." and height="..." attributes to the generated <img> tag. If dimensions aren't specified, Pico.css provides sensible responsive defaults.

Shortcodes

Shortcodes allow you to embed dynamic content or complex HTML generated by Python functions directly into your Markdown.

They use a simple bracket syntax: [ shortcode_name argument="value" ] (note: spaces added to prevent actual processing)

## Latest Blog Posts

Here are the latest posts:
[ latest_posts count="5" section="blog" ] 

## Explore Our Sections

[ section_list ]

## Featured Content

Check out these highlights:
[ featured_items count="3" ]

Available Shortcodes

• [ latest_posts ]: Displays a list of the most recent items from a specified section.
  • count: (Optional) Number of items to display (default: 3).
  • section: (Optional) Section key (from config.yaml) to pull items from (default: "posts").
• [ section_list ]: Displays a list of links to all content sections defined in config.yaml.
  • section: (Optional) If provided, lists items within that specific section instead of listing all sections.
• [ featured_items ]: Displays items that have featured: true set in their front matter.
  • count: (Optional) Number of items to display (default: 3).
  • section: (Optional) Limit featured items to those within a specific section.

(Note: More shortcodes might be available or added in the future. Custom shortcodes are also possible.)