embed files inline within markdown pages. inspired by iA Writer content blocks.

syntax options

path from site root

reference a file path on its own line:

/path/to/file.md

paths are relative to your site root:

/docs/intro.md       → embeds docs/intro.md
/images/photo.jpg    → embeds images/photo.jpg
/game-design/fly-swat.jpg → embeds game-design/Fly Swat.jpg

filename in same folder

if the file is in the same folder as your markdown file, just use the filename:

photo.jpg

bracket syntax

bracket syntax also works, useful for adding captions:

[photo.jpg]
[photo.jpg] "my caption"
[photo.jpg] (my caption)

examples

embed another markdown file:

/snippets/bio.md

embed an image:

/images/diagram.png

embed a code file:

/examples/script.js

supported file types

  • markdown (.md) - renders as formatted content
  • images (.jpg, .png, .gif, .webp) - displays the image
  • text/code (.txt, .js, .css, .html) - syntax highlighted code block
  • other files - shows download link

use cases

  • reuse content across multiple pages (bio, footer, disclaimer)
  • split long documents into smaller files
  • embed code examples from actual source files
  • include images with consistent sizing

nested content blocks

embedded markdown files can contain their own content blocks. tinydot resolves them recursively.

related