Skip to Content

Wiki source code of Wikisyntax

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