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