CSS Features DemoShowcasing all available styles |
Version | v1740503848 | |
---|---|---|---|
Updated |
This is a simple Pandoc based Static Site Generator based on the Monospace Web project by Oskar Wickström.
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.
Regular paragraph with bold text, italic
text, and inline code
. Here’s a link to somewhere.
Text with a subscript.
Default horizontal rule:
Thin variant:
Unordered list:
Ordered list:
Tree view:
/dev/nvme0n1p2
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.
Here are some buttons:
And inputs:
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.
Inline code: const example = "hello world";
Fenced code block:
function demo() {
return {
hello: "world",
number: 42
;
} }
This is a blockquote It can span multiple lines And can contain formatted text
Nested blockquotes > Are also possible >> And can go deeper
Hidden content goes here
Can contain any other elements
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│ └───────┘ └───────┘ └───────┘
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 are useful for displaying items with images, descriptions, and actions:
This is a description of the product with all its amazing features.
Price | $99.99 |
---|---|
Rating | ★★★★☆ |
Media objects are supported, like images and video with captions:
They extend to the width of the page, and add appropriate padding in the bottom to maintain the monospace grid.
Images can adapt to light and dark themes (convert theme using lightbulb icon in the footer or system settings):
Pandoc understands an extended and slightly revised version of John Gruber’s Markdown syntax. See Pandoc’s Markdown for details.↩︎
Home • Blog • ©Copyright 2025 • |