Inline Include Demo

SSI's two ways to include content

Inline vs Block Includes

Learn the difference between SSI's two include modes

Two Ways to Include Content

See the Difference

Plain Text Comparison

Inline (📝): <script>alert('safe!')</script>

Block (📃): Roses are red, Violets are blue, Block includes keep formatting, Unlike inline, it's true!

Markdown Comparison

Inline (🎯): bold text and italic text in one line.

Block (📑):

Why Use Block Includes?

Block includes are ideal when you need to maintain the structure of your content:

  1. Documentation - Keep your docs organized
  2. Blog Posts - Maintain paragraph formatting
  3. Code Examples - Preserve indentation

Block includes respect your content’s natural flow and structure.

HTML Features

Inline (✨): Icons like NEW fit naturally in text.

Block (📋):

🎯 Inline Includes

Great for short text, variables, and inline formatting.

📄 Block Includes

Ideal for structured content, code, and multi-line text.

Configuration

The key difference is the options = ["inline"] setting:

[[step]]
  emoji = "📝"      # inline text
  path = "content.toml"
  processing = "include"
  type = "plain"
  options = ["inline"]
  
  [[step]]
  emoji = "📃"      # block text
  path = "content.toml"
  processing = "include"
  type = "plain"

📌 Important Note

This is a block HTML include. Notice how it maintains:

  • Multiple lines
  • Proper indentation
  • Complex structure

💡 CSS Technique: Aligning SSI-Included Code Blocks

When SSI includes a file inline (right after an opening tag), the first line of the included content lands at column 0, while continuation lines get the token line's leading whitespace prepended. For the configuration examples above, this means the first line is at col 0 and the rest are at col 2 (the token is on a 2-space-indented line in the source).

display: block; text-indent: 2ch on pre code visually shifts the first line right by 2 characters to match. All lines appear aligned in the browser, the HTML source is consistently indented, and the source files are unchanged.

For block content (the poems and feature cards above), white-space: pre-line is used instead — it preserves line breaks but collapses leading spaces, so the HTML indentation disappears without any offset tricks.