Markdown is a simple Markup language which is easy to write as well as to read. The text is tagged with signs that have a particular meaning, for example changing the format or adding links. The commands which are accepted by the Serlo-editor will be introduced on this page.
Headings
In Markdown headings are preceded with #. The number of # indicates the heading's level. Headings of the second level are introduced with ## and their subheadings of the third level with ###, etc. According to the guidelines the headings in articles start on the second level.
Example
The hierarchy of headings
Arithmetic and calculating
Veni, vidi, vici.
Basic arithmetic operations
Serlo is great.
Addition exercises
It's very simple.
Substraction exercises
Only the hash.
Fractions and decimal fractions
More about the content…
Number line and real line
Alea iacta est
Analysis
Continue with analysis…
looks like this in markdown:
##Arithmetic and calculatingVeni, vidi, vici.###Basic arithmetic operationsSerlo is great.####Addition exercisesIt's very simple.####Substraction exercisesOnly the hash.### Fractions and decimal fractionsMore about the content...###Number line and real lineAlea iacta est##AnalysisContinue with analysis...
Paragraphs and line breaks
Line breaks in the source code are ignored. Writing two blank characters at the end of a line will create a line break without introducing a new paragraph. A new paragraph is introduced by adding one or more blank lines [code guidelines].
Example
Line breaksare ignored, but insert two blank spaces here -> and they are not!
A blank line separates paragraphs.
Line breaksare ignored, but insert two blank spaces here -> and they are not!A blank line separates paragraphs.
Text formatting
Important terms can be displayed italic, bold or ~~crossed out~~ by surrounding the words respectively with *,** or ~ ~ (without blank characters).
Example
italic, bold or ~~crossed out~~.
*italic*, **bold** or ~ ~crossed out~ ~.
Lists
For bullet points use *, - or +, followed by a space. For numbered lists, use 1. followed by a space. Subitems are indented using blank characters. In the process it is insignificant which numbers are used since the elements will be numbered in the right order automatically.
Example
Item
Subitem
Subsubitem
Subitem
Item
Item
Item
Subitem
Subsubitem
Subitem
Item
Item
Item
Subitem
Subsubitem
Subitem
Item
Item
Item
Subitem
Subsubitem
Subitem
Item
Item
Links
Links are added as [title](URL). External as well as internal URLs are possible.
External pages
To hyperlink pages which are not a part of Serlo, the complete address in the browser's address bar is inserted as URL (including http:// ).
Example
The Khan Academy is an educational page too.
The [Khan Academy](https://de.khanacademy.org/) is an educational page too.
Internal pages
Internal pages (this includes articles, exercise, etc.) are hyperlinked by giving a URL in the pattern /id. id represents the page's unambiguous ID. This can be found for example in the address of the page history. For instance the history of the tutorials page is https://en.serlo.org/page/revision/revisions/35589, the last row of numbers is the ID.
Example
Tutorials is an internal link.
[Tutorials](35589) is an internal link.
Internal pages / other language versions
This is only a temporary solution.
You can also create links to content on serlo that is part of a version in a different language. The abbreviation before the URL tells you the content's language version: http://en.serlo.org or http://de.serlo.org. The Link is composed of the language version's URL and the content's id.
Here's the German version on serlo.
Here's the [German version](/18922) on serlo.
Images
Images are added in a similar way to links. Where images differ is the inclusion of ! placed in front: `
`. A dialog box appears when you move the cursor over the brackets in the source code. In the dialog you can upload images from your own computer.
Example
Math mode
For mathematical formula Latex is used. Latex code is surrounded by either two % or two $. The percentage signs lead to a formula that is embedded in a text, for example a variable in the continuous text. In contrast, dollar signs are used for distinct formulas and are given their own line.
If the formula is surrounded by ** it will be highlighted.
Example
The function can be given by
The function <span class="mathInline">%%f%%</span> can be given by <span class="math">$$f(x) := x^2.$$</span>
Table
Data can be organised in tables. In doing this bear in mind that tables are not supposed to be used as layouts (for this purpose there are the [layouts]), but only for tabular data, e.g. lookup tables.
Tables principally begin with a header, in which the columns are separated with | , followed by a line of - . The header may stay empty.
Example
| 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|---|
| 1 | 4 | 9 | 16 | 25 |
| | | | | | |
|---------|---|---|---|----|----|
| %%x%% | 1 | 2 | 3 | 4 | 5 |
| %%x^2%% | 1 | 4 | 9 | 16 | 25 |Spoiler
Spoilers are pieces of text which are hidden when the page is called up, and become visible only after clicking. They are surrounded by /// , with the title in the first line:
/// Title///
It is important not to precede the /// with blank characters.
Example
/// Click me This text is hidden at first. ///
Horizontal lines
Three - , separated by blank spaces, create a horizontal line which occupies the whole page width.
Example
This sentence is separated by
a horizontal line.
This sentence is separated by- - -a horizontal line.
Quotations
When lines begin with a > , then they will be formatted as quotation blocks. Quotes within quotes are preceded with another > , and so on.
Example
Veni, vidi, vici.
Alea iacta est.
without masking signs
is an arithmetic operator.
with masking signs
- is an arithmetic operator.
derivation
2. derivation
is an arithmetic operator.
derivation
- is an arithmetic operator.
2\. derivation
Masking signs
In Markdown, to use a sign that has a special meaning a \ has to be placed in front of it.
Example
Features of the serlo-editor
The Serlo-editor's preview field divides the text into different sections to which different layouts can be assigned. It should be noted that these sections form individual objects. For example, it is not possible to spread a spoiler on several layout-sections. Likewise, the numbering of a list will begin again in a new section.
