Flatmark 🔗

Flatmark strives to be the most static ⚡ site generator with sensible defaults.

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

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

Markdown 🔗

Syntax is based on commonmark standard with some extensions:

• GitHub-style tables
• strikethrough with double tilde: ~~text~~
• autolink, turns plain text links into links, no need for markdown angle brackets, just write 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 (<h1>, <h2>, etc.)

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.