Typography

This section provides examples of all style elements available to documentation authors and the guidelines on using them.

Links

We have special types of links to refer readers to:

• definitions of terms in the Glossary
• schemas in the Reference

Input:

Raw data is stored in {{<term "slices" "data-slice">}} that are linked from {{<schema "MetadataBlock">}}s.

Result:

Raw data is stored in slices that are linked from MetadataBlock s.

Code Blocks

Input:

```js
const client = OdfClient::new("odf+https://localhost:8080");
```

Result:

const client = OdfClient::new("odf+https://localhost:8080");

Text Blocks

Input:

{{<tip>}}
Tip block
{{</tip>}}

{{<note>}}
Note block
{{</note>}}

{{<info>}}
Info block
{{</info>}}

{{<warning>}}
Warning block
{{</warning>}}

{{<danger>}}
Danger block
{{</danger>}}

Result:

Tables

Input:

| Name | Description |
| ---- | :---------: |
| Foo  |    Test     |
| Bar  |    Test     |

Result:

Tabs

Input:

{{<tabs
    tabTotal="3"
    tabID="1"
    tabName1="Tab 1"
    tabName2="Tab 2"
    tabName3="Tab 3">}} 

{{<tab tabNum="1">}}
Tab 1 content as text
{{</tab>}}

{{< tab tabNum="2">}}
Tab 2 content
- as
- list
{{</tab>}}

{{< tab tabNum="3">}}
{{<info>}}
Tab 3 content as rich elements
{{</info>}}
{{</tab>}}

{{</tabs>}}

Result:

Static Image

Input:

{{<image filename="/images/kamu_logo.svg" alt="Kamu logo" width="30%">}}

Result:

YouTube Video

Input:

{{<youtube hN_vpHYmwi0>}}

Result:

YouTube Playlist

Input:

{{<youtube-list PLV91cS45lwVG20Hicztbv7hsjN6x69MJk>}}

Result:

GOAT Diagrams

Input:

```goat
      .               .                .               .--- 1          .-- 1     / 1
     / \              |                |           .---+            .-+         +
    /   \         .---+---.         .--+--.        |   '--- 2      |   '-- 2   / \ 2
   +     +        |       |        |       |    ---+            ---+          +
  / \   / \     .-+-.   .-+-.     .+.     .+.      |   .--- 3      |   .-- 3   \ / 3
 /   \ /   \    |   |   |   |    |   |   |   |     '---+            '-+         +
 1   2 3   4    1   2   3   4    1   2   3   4         '--- 4          '-- 4     \ 4
```

Result:

See more examples here.

Mermaid Diagrams

Input:

```mermaid
sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

```

Result:

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

See more examples here.