Skip to content

Note structure

Jump to bottom
Andrea Oggioni edited this page Dec 4, 2025 · 2 revisions

Note structure

Here on TiTilda we support pandoc-flavour markdown along with a set of custom extension (read that as "client-side rendered stuff") to make notes able to include diagrams, callouts, collapsible paragraphs and more (coming in the future).

Due to how this repository is structured, a few precautions must be used when writing, for example, links between notes. See below for more information.

Metadata

All the notes must start with some metadata. An example is shown:

---md
title: "Title"
author:
- "Name Surname"
- "Name Surname"
---

This metadata will be shown near the footer of the page. It was once needed to also manually update the "last modified" date: it is not needed anymore as the "last commit" date of the file is used.

Headings and TOC

When the notes are rendered, a table of contents (TOC) is automatically generated: any manually updated TOC will be redundant and useless.

The TOC is generated starting from all the headings in the file. To each heading, a "link" icon is automatically added. That icon functions as an hyperlink to the associated heading so that it is possible to have a link to specific parts of each note.

Custom extensions

A number of customized sections can be used to make notes more dynamic and readable. Here follows a list of the ones that can be used in this repository.

Diagrams

All the diagrams supported by mermaid are automatically supported by us. To include a diagram, use a code block and specify mermaid as the language.

```mermaid

```

Callouts

Callouts can be added in the nodes using fenced divs. Five different types of callouts have been defined (for the time being) with different colors, one for each type, in order to keep styling consistent across all the notes.

::: {.callout .callout-<type> title="callout title"}
Callout content
:::

The five types of callout are .callout-definition, .callout-example, .callout-note, .callout-property and .callout-theorem.

Collapsible paragraphs

Collapsible paragraphs are a section (that is collapsed by default) that can be expanded with a click by the user. Fenced divs are used to insert collapsible paragraphs.

::: {.collapsible title="Collapsible title"}
Collapsible content
:::

Image caption

Alt text used for images is also used to display a caption under the same image. The syntax used is the standard markdown syntax.

![Caption](link/to/image.png)

Inline markdown, katex and html are all supported inside the alt text.

Precautions

  • When adding links between notes, use the .html extension instead of .md, otherwise the lino wont work once the notes are rendered and displayed on a web browser.

Clone this wiki locally