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 | ::: |