Home A - Z
Page Index

An Otter Wiki

Blame

8ad060 Nuno Oliveira 2025-04-19 15:51:29 1 
---
2
draft: false
3
date: 2025-02-24
4
---
5
07e877 Nuno Oliveira 2024-11-13 22:30:19 6
# All Syntax Features
7
8ad060 Nuno Oliveira 2025-04-19 15:51:29 8
::: info
9
Please see also the [User Guide](/-/help) and [Markdown syntax](/-/help/syntax) guides
10
in the Documentation section for help on features (in top right hand side menu).
11
:::
12
07e877 Nuno Oliveira 2024-11-13 22:30:19 13
This page should be an example for all the syntax features supported
14
by An Otter Wiki. You display the markdown code via
15
<span class="help-button"><span class="btn btn-square btn-sm">
16
<i class="fas fa-ellipsis-v"></i></span> <i class="fas fa-caret-right"></i>
17
<span class="btn btn-square btn-sm"><i class="fab fa-markdown"></i></span>
18
View Source</span> or click [here](/Examples/All%20Syntax%20Features/source).
19
20
## Markdown paragraphs and text formatting
21
043ecd Nuno Oliveira 2025-04-18 23:42:06 22
In markdown paragraphs are seperated by a blank line.
07e877 Nuno Oliveira 2024-11-13 22:30:19 23
24
Without an empty
25
line, a block of
26
words will be rendered
27
as paragraph.
28
8ad060 Nuno Oliveira 2025-04-19 15:51:29 29
```mermaid
30
flowchart
31
NO_MM(["Start"])
32
MM(["End"])
33
NO_MM -- this process --> MM
34
```
35
07e877 Nuno Oliveira 2024-11-13 22:30:19 36
Individuals words or sentences can be emphasized as `monospace`, **bold**, _italic_
37
or **_bold and italic_**. Or go wild and ==mark== or ~~strike out~~ words.
38
39
An Otter Wiki stores all pages in UTF-8 in a git repository. With UTF-8 you get emojis
40
like 🥳 and 🎆, that all modern browsers can display.
41
42
If you don't want to user a header for seperating paragraphs,
43
or a header is just not enough, add a horizontal line:
44
45
---
46
47
## Links
48
49
Some example for links in the middle of a paragraph.
50
[A link to the otterwiki github project](https://github.com/redimp/otterwiki),
51
followed by an auto linked url to http://example.com, followed by a mail address
52
<mailto:mail@example.com>. Commonly used are links inside the wiki, e.g.
53
one pointing [[Home]] or to another example
54
[[Syntax Highlighting|Examples/Syntax Highlighting]].
55
56
## Footnotes
57
58
Here's a sentence with a footnote.[^1]
59
60
[^1]: This is the footnote.
61
62
## Quotes
63
64
> One quoted line.
65
66
Got more to quote?
67
68
> You can highlight paragraphs as a quote.
69
>
70
> The quote can span multiple lines!
71
>> And it can nest more quotes.
72
>>
73
>> **Markdown syntax will be rendered inside quotes.**
74
75
## List examples
76
77
Itemized lists look like
78
79
* this one
80
* with three
81
* items.
82
83
A numbered list
84
85
1. first item
86
2. second item
87
3. third item
88
89
And a task list
90
91
- [ ] a unchecked item
92
- [x] and **bold** checked item
93
94
*The task list can only be mofied by editing it, not by clicking the checkboxes while viewing it.*
95
96
## Tables
97
98
A wide table with different aligend columns:
99
100
| Very wide column without expliciit alignment | Left aligned column | Centered column | Rght aligned Column |
101
| -------------------------------------------- |:------------------- |:---------------:| -------------------:|
102
| Cell with Text | Cell with Text | Cell with Text | Cell with Text |
103
| Cell with <br> two lines. | Cell with Text | Cell with Text | Cell with Text |
104
105
106
A table with some formatting and an emoji.
107
108
| Alpha | Bravo | Charlie |
109
| -------- | ----------------- | -------- |
110
| `D`elta | Echo | Foxtrott |
111
| Golf | **Hotel** | India |
112
| Juliett | Kilo | _Lima_ |
113
| ~~Mike~~ | November | Oscar |
114
| Papa | Quebec | Romeo |
115
| Sierra | Tango | Uniform |
116
| Victor | [Whisky](#tables) | X-Ray |
117
| Yankee | Zulu | 🦦 |
118
119
120
## Code blocks
121
122
Markdown is often used for documentation, so it's not a
123
surprise that it should be excellent in displaying code and configurations.
124
For example a minimal `docker-compose.yaml` for running An Otter Wiki:
125
126
```yaml
127
version: '3'
128
services:
129
otterwiki:
130
image: redimp/otterwiki:2.0
131
ports:
132
- 8080:80
133
```
134
135
This and many other examples for syntax highlighting can be found in [[Examples/Syntax Highlighting|/Examples/Syntax Highlighting]].
136
137
## Lists can nest blocks
138
139
List can nest lists and other block.
140
141
1. For example
142
* an unordered list
143
* with two items
144
2. or
145
1. an new level
146
2. of an ordered list
147
3. with three items.
148
3. Somtimes you might have to add
149
150
an entire paragraph to a list. To do that indent it with
151
4 spaces and add an empty line before and after the paragraph.
152
153
5. Maybe you want to add a fenced block of code
154
155
```python
156
class Example:
157
"""Finding examples is hard."""
158
var = True
159
```
160
4. or a quote
161
162
> You get the concept.
163
164
## Math or LaTeX
165
166
If you want to share math formulas in your wiki, [MathJax](https://www.mathjax.org/) comes
167
to the rescue. For example:
168
169
When `$a \ne 0$`, there are two solutions to `$ax^2 + bx + c = 0$` and they are
170
```math
171
x = {-b \pm \sqrt{b^2-4ac} \over 2a}.
172
```
173
174
## Special blocks
175
176
An Otter Wiki supports also some special blocks, whose syntax is derived
177
from various dialects.
178
179
You can create spoiler blocks:
180
181
>! ![](/static/img/otterhead-100.png)
182
>! Not a massive spoiler, but useful to show that you can hide images and text inside
183
>! a spoiler block.
184
185
---
186
187
Blocks with summary, that unfold the details on click:
188
189
>| # Do you want to know more?
190
>|
191
>| Detail blocks could be used for handling spoilers, too.
192
193
---
194
195
In case you have to highligh important informations,
196
An Otter Wiki provides special blocks in different flavors.
197
198
:::info
199
# An info block
200
201
with some content.
202
:::
203
204
and in the flavor of a
205
206
:::warning
207
# Warning block (in yellow)
208
209
With _some_ `formatting` in it.
210
:::
211
212
or a
213
214
:::danger
215
# Danger block (in red)
216
217
In case a warning not warning enough.
218
:::
219
220
---
221
222
Another options are alerts:
223
224
> [!NOTE]
225
> Useful for highlighting special
226
> information.
227
228
> [!TIP]
229
> Giving pointers.
230
231
> [!IMPORTANT]
232
> Raise attention.
233
234
> [!WARNING]
235
> Add a **formatted** warning.
236
237
> [!CAUTION]
238
> If a warning is _simply_ not enough.