Skip to Content

Wiki source code of Wikisyntax

Last modified by Carina Enke on 17.11.2025
Show last authors
1 With the help of the extensive wiki syntax and additional buttons in the page's editing mode, it is possible to customise articles. For example, you can set text elements to bold or italic and add headers, links, or formulas.
2
3 [[image:attach:Kursrun - Wiki Syntax_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
4
5 {{expand title="Overview of the wiki syntax and additional buttons ..."}}
6 Certain keyboard characters, such as quotes, apostrophes, equal signs, or asterisks, allow you to format the text of the wiki article. Alternatively, you can also use the usual formatting buttons, which become available when switching to the editing mode of the article.
7
8 {{expand title="Formatting with buttons or input fields ..."}}
9 (% class="wrapped" %)
10 |=(% colspan="1" %)(% colspan="1" %)
11 (((
12 Formatting buttons
13 )))|=(% colspan="1" %)(% colspan="1" %)
14 (((
15 Input with formatting characters
16 )))|=(% colspan="1" %)(% colspan="1" %)
17 (((
18 Explanation including an example in the article
19 )))
20 |(((
21 (% class="content-wrapper" %)
22 (((
23 [[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_fett.png]] [[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_kursiv.png]]
24 )))
25 )))|(((
26 '''bold"
27
28 ''italic''
29 )))|(((
30 **bold **text
31
32 //italic //text
33 )))
34 |(((
35 (% class="content-wrapper" %)
36 (((
37 [[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_Überschrift.png]]
38 )))
39 )))|(((
40 ~==header text==
41 )))|(((
42 (% class="TableParagraph" %)
43 This is how you can mark **headers **(level 2).
44 )))
45 |(((
46 (% class="content-wrapper" %)
47 (((
48 [[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_Listen.png]]
49 )))
50 )))|(((
51 (% style="color:#000000; text-decoration:none" %)* unsorted
52 ~* unsorted
53 \\# sorted(%%)
54 (% style="color:#000000; text-decoration:none" %)# sorted
55 )))|(((
56 * **unsorted**
57 * lists
58
59 1. **sorted**
60 1. lists
61 )))
62 |(((
63 (% class="content-wrapper" %)
64 (((
65 [[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_Formel einbinden.png]]
66 )))
67 )))|(((
68 (% style="color:#000000; text-decoration:none" %)<math><formula></math>
69
70 (% style="color:#000000; text-decoration:none" %)(e.g. <math>c = a + b</math>)
71
72
73 alternatives:
74
75 $$<formula>$$  (z.B $$(% style="color:#000000; text-decoration:none" %)c = a + b(%%)$$)
76
77 \(<formula>\)
78 (e.g. \((% style="color:#000000; text-decoration:none" %)c = a + b(%%)\) )
79 )))|(((
80 (% class="content-wrapper" %)
81 (((
82 You can use this symbol to enter **mathematical formulas** so that the following code
83
84
85 {{code}}
86 <math>\sqrt[3]{x-1}</math>  
87 {{/code}}
88
89 (% style="text-align: left;" %)
90 results in this formula:
91
92 [[image:attach:Kursrun - Formel im Wiki.png]]
93
94 (% style="color:#000000; text-decoration:none" %)By clicking the [[image:attach:Icon_Formel einbinden.png]]button, sample content is inserted first. Adjust it and fill in the required formula.
95
96
97 (% style="color:#000000; text-decoration:none" %)Formulas are displayed centred by default. If you want the formula to be displayed in the running text, please use the scheme \(<formula>\).
98
99
100 (% class="TableParagraph" %)
101
102 )))
103 )))
104 |(((
105 (% class="content-wrapper" %)
106 (((
107 [[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_Link intern.png]]
108 )))
109 )))|(((
110 ~[~[index]]
111 )))|(((
112 (% class="TableParagraph" %)
113 Use this button to embed a **link to an internal page**:
114
115 (% class="TableParagraph" %)
116 If an article with this title (e.g. Index) exists already, you can refer to it from the currently opened article. Just put the title of the article to be referred to in square brackets.
117
118 Alternatively, you can also use the button **Insert link **to display a list of existing articles. By clicking //on// the title of an article in this list, a link is automatically embedded in the article.
119
120 If you wish to use an **alternative link text** instead of the page name, enter a pipe (|) after the actual link text and then the text to be displayed, e.g. ~[~[index|Home page]]. Further formatting options for links are given in the overview below.
121 )))
122 |(% colspan="1" %)(% colspan="1" %)
123 (((
124 (% class="content-wrapper" %)
125 (((
126 [[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_Link extern.png]]
127 )))
128 )))|(% colspan="1" %)(% colspan="1" %)
129 (((
130 (% style="color:#000000; text-decoration:none" %)~[[[http:~~/~~/www.bps-system.de/>>url:http://www.bps-system.de/||shape="rect"]] link text]
131 )))|(% colspan="1" %)(% colspan="1" %)
132 (((
133 (% class="TableParagraph" %)
134 Use this button to embed a** link to an** **external page**. A sample text will be inserted.(% style="color:#333333" %) Adjust its URL and alternative link text.
135
136
137
138 )))
139 |(% colspan="1" %)(% colspan="1" %)
140 (((
141 (% class="content-wrapper" %)
142 (((
143 [[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_unformatierter Text.png]]
144 )))
145 )))|(% colspan="1" %)(% colspan="1" %)
146 (((
147 <nowiki>enter the unformatted text here</nowiki>
148 )))|(% colspan="1" %)(% colspan="1" %)
149 (((
150 With this button, you can display unformatted text.
151 )))
152 |(% colspan="1" %)(% colspan="1" %)
153 (((
154 (% class="content-wrapper" %)
155 (((
156 [[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_Trennlinie.png]]
157 )))
158 )))|(% colspan="1" %)(% colspan="1" %)
159 (((
160 ~-~-~-~-
161 )))|(% colspan="1" %)(% colspan="1" %)
162 (((
163 This is how you add a **horizontal separator**.
164 )))
165 |(% colspan="1" %)(% colspan="1" %)
166 (((
167 (% class="content-wrapper" %)
168 (((
169 [[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_Datei hochladen_en.png]]
170 )))
171 )))|(% colspan="1" %)(% colspan="1" %)
172 (((
173
174 )))|(% colspan="1" %)(% colspan="1" %)
175 (((
176 This button will open the upload function. It allows you to upload files from your computer to the Wiki via drag-and-drop.
177 )))
178 |(% colspan="1" %)(% colspan="1" %)
179 (((
180 (% class="content-wrapper" %)
181 (((
182 [[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_Link einfügen_en.png]]
183 )))
184 )))|(% colspan="1" %)(% colspan="1" %)
185 (((
186
187 )))|(% colspan="1" %)(% colspan="1" %)
188 (((
189 This button will open a list of all the articles within the Wiki. By clicking on an entry, this article will be inserted as a link in the current article.
190 )))
191 |(% colspan="1" %)(% colspan="1" %)
192 (((
193 (% class="content-wrapper" %)
194 (((
195 [[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_Datei einfügen_en.png]]
196 )))
197 )))|(% colspan="1" %)(% colspan="1" %)
198 (((
199
200 )))|(% colspan="1" %)(% colspan="1" %)
201 (((
202 (% class="content-wrapper" %)
203 (((
204 (% class="TableParagraph" %)
205 This button will open a list of all the files uploaded to the Wiki. By clicking on an entry, this file will be inserted into the article.
206
207 {{info}}
208 (% class="TableParagraph" %)
209 While images are directly displayed in the article, other file formats such as PDF, Word or HTML files will be displayed as a link to be downloaded.
210 {{/info}}
211
212 {{expand title="Add an image or a file to the article ..."}}
213
214
215 {{includeplus spaceKey="LMS" scrollPageId="8AC9158F0160FDF5F11ECDA30036B95B"/}}
216 {{/expand}}
217 )))
218 )))
219 |(% colspan="1" %)(% colspan="1" %)
220 (((
221 (% class="content-wrapper" %)
222 (((
223 [[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_Kategorie einfügen_en.png]]
224 )))
225 )))|(% colspan="1" %)(% colspan="1" %)
226 (((
227
228 )))|(% colspan="1" %)(% colspan="1" %)
229 (((
230 This button will open a list of all Wiki categories. By clicking on an entry, this category will be added to the current article.
231 )))
232 {{/expand}}
233
234 {{expand title="Further formatting options with input fields ..."}}
235 (% class="wrapped" %)
236 |=(((
237 Information about the creator
238 )))|(((
239 ~~~~~~
240
241 ~~~~~~~~
242 )))|(((
243 Insert **three tilde characters** to display the **name of the page creator** in this position. You can also insert **four tilde characters** for a **time stamp**.
244 )))|(((
245 (% class="content-wrapper" %)
246 (((
247 [[image:attach:Kursrun - Wikisyntax Ersteller_de.png]]
248 )))
249 )))
250 |=(((
251 Underline
252 )))|(((
253 <u>underline</u>
254 )))|(((
255 This is how you underline words.
256 )))|(% rowspan="3" %)(% rowspan="3" %)
257 (((
258 (% class="content-wrapper" %)
259 (((
260 [[image:attach:Kursrun - Wikisyntax Text_de.png]]
261 )))
262 )))
263 |=(((
264 Text colour
265 )))|(((
266 <span style="color:#006400"> text</span>
267 )))|(((
268 This is how you change the text colour. You will find a simple colour table at [[https:~~/~~/en.wikipedia.org/wiki/Web_colors>>url:https://en.wikipedia.org/wiki/Web_colors||shape="rect"]])
269 )))
270 |=(((
271 Line break
272 )))|(((
273 </br>
274 )))|(((
275 This is how to create a line break only. You do not create a new paragraph. A new paragraph (with larger line spacing) is created by an empty line.
276 )))
277 |=(((
278 Right-aligned text
279 )))|(((
280 <div align="right">right-aligned text</div>
281 )))|(((
282 Align text to right
283 )))|(((
284
285 )))
286 |=(((
287 Left-aligned text
288 )))|(((
289 <div align="left">left-aligned text</div>
290 )))|(((
291 Align text to left
292 )))|(((
293
294 )))
295 |=(((
296 Centered text
297 )))|(((
298 <div align="center">centered text</div>
299 )))|(((
300 Align text to center
301 )))|(((
302
303 )))
304 |=(((
305 Superscript
306 )))|(((
307 text<sup>superscript</sup>
308 )))|(((
309 This is how to superscript a text.
310 )))|(((
311
312 )))
313 |=(((
314 Subscript
315 )))|(((
316 text<sub>subscript</sub>
317 )))|(((
318 This is how to subscript a text.
319 )))|(((
320
321 )))
322 |=(((
323 List of definitions
324 )))|(((
325 ;term 1
326
327 ~: definition 1
328
329 ;term 2
330
331 ~: definition 2-1
332
333 ~: definition 2-2
334 )))|(((
335 To create a list of terms.
336 )))|(((
337
338 )))
339 |=(((
340 Indentation without bullet list
341 )))|(((
342 :single indentation
343
344 ::double indentation
345
346 ~::::: multiple indentation
347
348
349 )))|(((
350 By entering the colon, the line can be indented according to the colons used.
351 )))|(((
352
353 )))
354 |=(((
355 Bullet list without numbers
356 )))|(((
357 *one
358
359 *two
360
361 ~*~*one-two
362
363 ~*~*two-two
364
365 *three
366 )))|(((
367 This is how you create an unnumbered list.
368 )))|(((
369
370 )))
371 |=(((
372 Bullet list with numbers
373 )))|(((
374 #one
375
376 #two
377
378 ~#~#one-two
379
380 ~#~#two-two
381
382 #three
383 )))|(((
384 This is how you create a numbered list.
385 )))|(((
386
387 )))
388 |=(((
389 Coloured paragraph
390 )))|(((
391 <p style="color:red;"> This is a whole paragraph </p>
392 )))|(((
393 This is how you create a colored paragraph.
394 )))|(((
395
396 )))
397 |=(((
398 Background for one or a few words
399 )))|(((
400 <span style="background-color: yellow;">example</span>
401 )))|(((
402 With this code you can adjust the background color.
403 )))|(((
404 (% class="content-wrapper" %)
405 (((
406 [[image:attach:image2020-10-15_17-13-2.png]]
407 )))
408 )))
409 |=(((
410 Coloured text + background of a paragraph
411 )))|(((
412 (% class="content-wrapper" %)
413 (((
414 <p>Lorem ipsum <span style="background-color: yellow;">example </span> dolor sit amet, consetetur sadipscing elitr.</p>
415 )))
416 )))|(((
417 Use this code to color text and its background.
418
419 (% class="content-wrapper" %)
420 (((
421
422 )))
423 )))|(((
424 (% class="content-wrapper" %)
425 (((
426
427 )))
428 )))
429 {{/expand}}
430
431 {{expand title="Formatting of tables ..."}}
432 (% class="wrapped" %)
433 |=(((
434 Add table
435 )))|(((
436 {|
437 ~|cell 1
438 ~|cell 2
439 ~|-
440 ~|cell 3
441 ~|cell 4
442 ~|}
443 )))|(((
444 To create a **table** in the article, you can use brackets and hyphens.
445
446 (% class="wrapped" %)
447 |(((
448 cell 1
449 )))|(((
450 cell 2
451 )))
452 |(((
453 cell 3
454 )))|(((
455 cell 4
456 )))
457 )))
458 |=(% scope="col" %)(((
459 Border around table
460 )))|(((
461 {| border ="1"
462 ~|cell 1
463 ~|cell 2
464 ~|-
465 ~|cell 3
466 ~|cell 4
467 ~|}
468 )))|(((
469
470 )))
471 |=(((
472 Table (column width (Percent))
473 )))|(((
474 {| border = "1"
475 ! width = "10%"|column 1
476 ! width = "20%"|column 2
477
478 ! width = "40%"|column 3
479
480 ~|-
481 ~|cell 1
482 ~|cell 2
483
484 ~|cell 3
485 ~|-
486 ~|cell 4
487 ~|cell 5
488
489 ~|cell 6
490 ~|}
491 )))|(((
492 Possible by specifying percent values. A line that starts with ! is automatically displayed bold and centered.
493 )))
494 |=(% colspan="1" %)(% colspan="1" %)
495 (((
496 Table (column width (Pixels))
497 )))|(((
498 {| border = "1"
499 ! width = "50px" |column 1
500 ! width = "100px"|column 2
501 ! width = "400px"|column 3
502 ~|-
503 ~|cell 1
504 ~|cell 2
505 ~|cell 3
506 ~|-
507 ~|cell 4
508 ~|cell 5
509 ~|cell 6
510 ~|}
511 )))|(% colspan="1" %)(% colspan="1" %)
512 (((
513 Possible by specifying pixel values. A line that starts with ! is automatically displayed bold and centered.
514 )))
515 {{/expand}}
516
517
518
519 {{id name="formatting"/}}
520
521 {{expand title="Formatting options for images and links"}}
522 (% class="wrapped" %)
523 |=(% colspan="1" %)(% colspan="1" %)
524 (((
525 Internal link
526 )))|(% colspan="1" %)(% colspan="1" %)
527 (((
528 ~[~[Wiki page]]
529 )))|(% colspan="1" %)(% colspan="1" %)
530 (((
531 Links are underlined by default.
532 )))
533 |=(% colspan="1" %)(% colspan="1" %)
534 (((
535 External link
536 )))|(% colspan="1" %)(% colspan="1" %)
537 (((
538 [[https:~~/~~/www.abc.de>>url:https://www.abc.de||shape="rect"]]
539 )))|(% colspan="1" %)(% colspan="1" %)
540 (((
541 Links are underlined by default.
542 )))
543 |=(% colspan="1" %)(% colspan="1" %)
544 (((
545 Image description (when hovering the mouse pointer over the image)
546 )))|(% colspan="1" %)(% colspan="1" %)
547 (((
548 [(% style="color:#333333" %)[Image:name of the image.png|description of the image|200px]]
549
550 ~[~[Image:name of the image.png||d(% style="color:#333333" %)escription of the image|200px]]
551
552 ~[~[Image:BPS_Logo.png|| d(% style="color:#333333" %)escription of the image|200px]]
553
554
555 (% style="color:#333333" %)Text before the picture
556
557 (% style="color:#333333" %)<span>~[~[Image:BPS_Logo.png|right|20px|BPS Logo with more text]]</span>
558
559 (% style="color:#333333" %)<div style="clear: both;"></div>
560
561 (% style="color:#333333" %)some more text
562 )))|(% colspan="1" %)(% colspan="1" %)
563 (((
564 Enter your favourite text after the pipe (|). If you start the text with a space, it will be displayed with a border and at a greater distance from the image.
565
566
567 If the text extends beyond the width of the image, it gets wrapped. In this case, overlapping can occur. This can be avoided by using the HTML additions span and div.
568 )))
569 |=(% colspan="1" %)(% colspan="1" %)
570 (((
571 Thumbnail
572 )))|(% colspan="1" %)(% colspan="1" %)
573 (((
574 ~[~[Image:BPS.png|right|thumb]]
575
576 ~[~[Image:BPS.png|right|30px|thumb]]
577
578 ~[~[Image:(% style="color:#333333" %)name of the image.jpg|thumb|description of the image]]
579 )))|(% colspan="1" %)(% colspan="1" %)
580 (((
581 Enter **thumb** to create a thumbnail. In the article view, the user will see a smaller image. If they click on it, the image will be enlarged to its original or specified size.
582 )))
583 |=(((
584 Alignment
585 )))|(((
586 ~[~[Image:BPS.png|right]]
587 )))|(% colspan="1" %)(% colspan="1" %)
588 (((
589 Enter "left" or "right" after the pipe (|).
590 )))
591 |=(((
592 Image size
593 )))|(((
594 ~[~[Image:BPS.png|120px]]
595 )))|(% colspan="1" %)(% colspan="1" %)
596 (((
597 Enter your favourite size after the pipe (|).
598 )))
599 |=(((
600 Caption
601 )))|(((
602 ~[~[Image:BPS.png|Das ist das BPS-Logo.]]
603 )))|(% colspan="1" %)(% colspan="1" %)
604 (((
605 Enter your favourite text after the pipe (|).
606 )))
607 |=(% colspan="1" %)(% colspan="1" %)
608 (((
609 Multiple formats
610 )))|(% colspan="1" %)(% colspan="1" %)
611 (((
612 ~[~[Image:BPS.png|right|30px|thumb|(% style="color:#333333" %)This is the BPS logo.(%%)]]
613 )))|(% colspan="1" %)(% colspan="1" %)
614 (((
615 Separate multiple formats by using a pipe (|).
616 )))
617 {{/expand}}
618
619
620 {{/expand}}