Syntax reference
Every markdown form webolator understands. Standard markdown gets a quick summary, and the special forms are shown with their source and how they render on this page.
Standard markdown
Everything in GitHub-flavored markdown works as expected: headings, bold, italic, strikethrough, inline code, lists, - [x] task lists, tables (with :---: alignment), block quotes, footnotes1, images, horizontal rules, and autolinks for bare https://… and www.… URLs.
Raw HTML such as <details>, <kbd>, <sup> and <img width=…> is passed through as is, and its href and src attributes are rewritten like markdown links.
A few details specific to webolator:
- The first
#heading is the page title. - Every heading gets a GitHub-style anchor id, so
## Step twobecomes#step-two. ##and###headings fill the "On this page" sidebar.- Clicking an image zooms it.
- Images are inlined in
--singleoutput.
Emoji
Shortcodes use GitHub's names: :rocket: :tada: :+1: becomes 🚀 🎉 👍. A shortcode that isn't recognized is left as typed.
Links
| Form | Source |
|---|---|
| Link to another page | [Usage](01-usage.md) |
| Link to a heading | [ordering](01-usage.md#ordering), or [text](#links) on the same page |
| Link to a folder | [features](03-features/) goes to that folder's index page |
| Root-relative link | [x](/01-usage.md), relative to the docs root |
| Wikilink | [[Usage]], [[03-features/01-mermaid]], [[Usage|custom text]], [[Usage#Ordering]], [[#Links]] |
| Any other file | [log](build.log), [spec](spec.pdf), [report](report.html) |
For example, [[Usage#Ordering]] renders as Usage#Ordering. See Links for how each form is rewritten and Wikilinks for how names are matched.
Alerts
GitHub-style callouts, in five types:
Note
> [!NOTE]: useful information.
Tip
> [!TIP]: a helpful suggestion.
Important
> [!IMPORTANT]: something the reader must know.
Warning
> [!WARNING]: needs attention.
Caution
> [!CAUTION]: a risk of something going wrong.
Code blocks
The word after the fence can be a language name or a file extension. It's case-insensitive, so python, py, Rust and rs all work. These languages are highlighted:
ActionScript, AppleScript, ASP, Batch (bat, cmd), BibTeX, Bash (bash, sh, zsh), C, C#, C++, Clojure, CSS, D, Diff (diff, patch), Erlang, Go, Graphviz (dot), Groovy, Haskell, HTML, Java, Java properties, JavaScript (js), JSON, LaTeX (tex), Lisp, Lua, Makefile, Markdown, MATLAB, Objective-C, OCaml, Pascal, Perl, PHP, Python (py), R, reStructuredText, Ruby, Rust (rs), Scala, SQL, Tcl, Textile, XML, YAML (yml).
Anything else, including TypeScript, TOML, Dockerfile, Kotlin and Swift, is shown as plain text. Every code block gets a copy button.
Diagrams
A ```mermaid block is drawn with Mermaid: flowcharts, sequence, class, state and ER diagrams, Gantt charts and more.
flowchart LR A --> B
Math
| Form | Source |
|---|---|
| Inline | $e^{i\pi} + 1 = 0$ |
| Display | $$\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}$$ |
| Display block | a ```math fenced block |
\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
\begin{aligned}
f(x) &= (x + 1)^2 \\
&= x^2 + 2x + 1
\end{aligned}
Math is rendered with KaTeX. As on GitHub, a $ followed by a digit doesn't close math, so "costs $5 and $10" stays plain text.
Front matter
An optional block at the very top of a file:
---
title: Shown in the sidebar and browser tab
order: 3
hidden: true
---
These are the only fields, and any others are ignored. See Front matter. This page uses it (title and order: 3) to sit between Links and the features folder.
Special file names
| Name | Meaning |
|---|---|
README.md, index.md |
the folder's home page (index.md wins if both exist) |
01-name.md, 02-folder/ |
number prefix: sets the order, hidden from labels and URLs |
webolator.css (in the root) |
custom styles, applied automatically |
.webolatorignore |
files to leave out, in gitignore syntax |
.gitignore, .ignore |
honored by default, --no-ignore turns them off |
To show a folder as a plain file list instead, see --files.
-
Like this one. ↩