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

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 breaks are ignored, but insert two blank spaces here ->
and they are not!

A blank line separates paragraphs.

Line breaks
are 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
  1. Item
  2. Subitem
    1. Subsubitem
  3. Subitem
  4. Item
  5. Item
* Item  
  * Subitem
     * Subsubitem
  * Subitem
* Item
* Item
7. Item
   21. Subitem
       2. Subsubitem
   3. Subitem 
 58125. Item
3. Item

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: ![title of image](URL). 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

cc-by-sa

![cc-by-sa](http://i.creativecommons.org/l/by-sa/4.0/88x31.png)

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 %%f%% can be given by $$f(x) := x^2.$$

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

%%x%%

1

2

3

4

5

%%x^2%%

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.

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

> Veni, vidi, vici.
> > Alea iacta est.

Masking signs

In Markdown, to use a sign that has a special meaning a \ has to be placed in front of it.

Example

without masking signs

  • is an arithmetic operator.

with masking signs

- is an arithmetic operator.

  1. derivation

2. derivation

- is an arithmetic operator.

 2. derivation
\- is an arithmetic operator.

2\. derivation

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.