CSS Features Demo

Showcasing all available styles
Version v1740503848
Updated


Pandoc Monospace Web

This is a simple Pandoc based Static Site Generator based on the Monospace Web project by Oskar Wickström.

  1. Install pandoc
  2. Drop Markdown files in the src directory
  3. Execute the convert.sh script
  4. Deploy the build directory to your static site host

Given that the site generator consits of a single bash script, single html template and a css file, it’s easy to customize.

All changes to the original project are unlicensed (C0). The Monospace Web is licensed under the MIT license.


This is a demo page showcasing all the available styles for the Pandoc Monospace Web. All standard Pandoc markdown features are supported 1.

See the footer for “blog” implementation idea.


Typography

H1 Heading (Uppercase)

H2 Heading (Uppercase)

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Regular paragraph with bold text, italic text, and inline code. Here’s a link to somewhere.

Text with a subscript.

Horizontal Rules

Default horizontal rule:


Thin variant:


Lists

Unordered list:

Ordered list:

  1. First item
  2. Second item
    1. Nested numbered
    2. Another nested
  3. Third item

Tree view:

Tables

We can use regular tables that automatically adjust to the monospace grid. They’re responsive.

Name Dimensions Position
Boboli Obelisk 1.41m × 1.41m × 4.87m 43°45’50.78”N 11°15’3.34”E
Pyramid of Khafre 215.25m × 215.25m × 136.4m 29°58’34”N 31°07’51”E

Note that only one column is allowed to grow.

Forms

Here are some buttons:

And inputs:

Radio & Checkboxes

Grids

Add the grid class to a container to divide up the horizontal space evenly for the cells. Note that it maintains the monospace, so the total width might not be 100%. Here are six grids with increasing cell count:

If we want one cell to fill the remainder, we set flex-grow: 1; for that particular cell.

Code Blocks

Inline code: const example = "hello world";

Fenced code block:

function demo() {
  return {
    hello: "world",
    number: 42
  };
}

Blockquotes

This is a blockquote It can span multiple lines And can contain formatted text

Nested blockquotes > Are also possible >> And can go deeper

Details/Summary

Click to expand

Hidden content goes here

Can contain any other elements

ASCII Art & Diagrams

We can draw in <pre> tags using box-drawing characters:

╭─────────────────╮
│ MONOSPACE ROCKS │
╰─────────────────╯

To have it stand out a bit more, we can wrap it in a <figure> tag, and why not also add a <figcaption>.

┌───────┐ ┌───────┐ ┌───────┐
│Actor 1│ │Actor 2│ │Actor 3│
└───┬───┘ └───┬───┘ └───┬───┘
    │         │         │    
    │         │  msg 1  │    
    │         │────────►│    
    │         │         │    
    │  msg 2  │         │    
    │────────►│         │    
┌───┴───┐ ┌───┴───┐ ┌───┴───┐
│Actor 1│ │Actor 2│ │Actor 3│
└───────┘ └───────┘ └───────┘
Example: Message passing.

Let’s go wild and draw a chart!

                      Things I Have
                                              
    │                                     ████ Usable
15  │
    │                                     ░░░░ Broken
    │
12  │             ░            
    │             ░            
    │   ░         ░              
 9  │   ░         ░              
    │   ░         ░              
    │   ░         ░                    ░
 6  │   █         ░         ░          ░
    │   █         ░         ░          ░
    │   █         ░         █          ░
 3  │   █         █         █          ░
    │   █         █         █          ░
    │   █         █         █          ░
 0  └───▀─────────▀─────────▀──────────▀─────────────
      Socks     Jeans     Shirts   USB Drives

Product Cards

Product cards are useful for displaying items with images, descriptions, and actions:

Product image

Product Title

This is a description of the product with all its amazing features.

Price $99.99
Rating ★★★★☆

Media with Captions

Media objects are supported, like images and video with captions:

A sample image with caption (2024)

They extend to the width of the page, and add appropriate padding in the bottom to maintain the monospace grid.

Example image alt text

Theme-Aware Images

Images can adapt to light and dark themes (convert theme using lightbulb icon in the footer or system settings):

This image inverts in dark mode

This image stays the same in both modes

This image adjusts contrast in dark mode


  1. Pandoc understands an extended and slightly revised version of John Gruber’s Markdown syntax. See Pandoc’s Markdown for details.↩︎

HomeBlog©Copyright 2025