Flatmark Documentation 🔗

Flatmark tries to be a simple static site generator without too much configuration.

It is based on Pebble for templating and uses CommonMark for markdown rendering.

Most of rendering is done statically: code highlighting, math, diagrams, etc.
The only thing you usually need to add for those is CSS.

Markdown 🔗

Syntax is based on commonmark standard with some extensions:

• tables
• strikethrough with double tilde: ~~text~~
• autolink, turns plain text links into links, no need for markdown angle brackets: https://example.com
• footnotes, use [^1] to create a footnote and [1]: footnote text to define it
• ins, use ++text++ to mark text as inserted (underlined)
• task-list-items, use - [ ] for unchecked and - [x] for checked items
• image-attributes, use {width=100%} to set image width, {height=50px} for height etc.
• heading-anchor, automatically adds ids to headings

You can learn markdown in 60 seconds.

Syntax Highlighting 🔗

To use code syntax highlighting, use the code block syntax with the language specified:

```scala
val x = 5
```

Result:

val x = 5

Syntax highlighting is done via highlight.js.

Math 🔗

To use math blocks, use the math code block syntax:

```math
x = 5
```

Result:

For more details, see KaTeX.

Mermaid Diagrams 🔗

To create Mermaid diagrams, use the diagram:mermaid code block syntax:

```diagram:mermaid
sequenceDiagram
        actor Alice
        actor Bob
        Alice->>Bob: Hi Bob
        Bob->>Alice: Hi Alice
```

Result:

For more details, see Mermaid documentation.

Graphviz Diagrams 🔗

To create Graphviz diagrams, use the diagram:graphviz code block syntax:

```diagram:graphviz
digraph G {Hello->World}
```

Result:

For more details, see Graphviz documentation.