Home A - Z
Menu

An Otter Wiki

Blame

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