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
157
## Special blocks
158
159
An Otter Wiki supports also some special blocks, whose syntax is derived
160
from various dialects.
161
162
You can create spoiler blocks:
163
164
>! ![](/static/img/otterhead-100.png)
165
>! Not a massive spoiler, but useful to show that you can hide images and text inside
166
>! a spoiler block.
167
168
---
169
170
Blocks with summary, that unfold the details on click:
171
172
>| # Do you want to know more?
173
>|
174
>| Detail blocks could be used for handling spoilers, too.
175
176
---
177
178
In case you have to highligh important informations,
179
An Otter Wiki provides special blocks in different flavors.
180
181
:::info
182
# An info block
183
184
with some content.
185
:::
186
187
and in the flavor of a
188
189
:::warning
190
# Warning block (in yellow)
191
192
With _some_ `formatting` in it.
193
:::
194
195
or a
196
197
:::danger
198
# Danger block (in red)
199
200
In case a warning not warning enough.
201
:::
c6b747 Ralph Thesen 2024-10-15 21:46:48 202
203
---
204
205
Another options are alerts:
206
207
> [!NOTE]
208
> Useful for highlighting special
209
> information.
210
211
> [!TIP]
212
> Giving pointers.
213
214
> [!IMPORTANT]
215
> Raise attention.
216
217
> [!WARNING]
218
> Add a **formatted** warning.
219
220
> [!CAUTION]
221
> If a warning is _simply_ not enough.