Home A - Z
Menu

An Otter Wiki

Blame

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