markdown.md 33.3 KB
Newer Older
1
# GitLab Markdown
2

3 4 5 6 7
This markdown guide is **valid for GitLab's system markdown entries and files**.
It is not valid for the [GitLab documentation website](https://docs.gitlab.com)
nor [GitLab's main website](https://about.gitlab.com), as they both use
[Kramdown](https://kramdown.gettalong.org) as their markdown engine.
The documentation website uses an extended Kramdown gem, [GitLab Kramdown](https://gitlab.com/gitlab-org/gitlab_kramdown).
8
Consult the [GitLab Kramdown Guide](https://about.gitlab.com/handbook/product/technical-writing/markdown-guide/) for a complete Kramdown reference.
9

Marcia Ramos's avatar
Marcia Ramos committed
10
## GitLab Flavored Markdown (GFM)
11

12
GitLab uses "GitLab Flavored Markdown" (GFM). It extends the [CommonMark specification][commonmark-spec] (which is based on standard Markdown) in a few significant ways to add additional useful functionality. It was inspired by [GitHub Flavored Markdown](https://help.github.com/articles/basic-writing-and-formatting-syntax/).
13

14
You can use GFM in the following areas:
15

16 17 18 19 20 21 22
- Comments
- Issues
- Merge requests
- Milestones
- Snippets (the snippet must be named with a `.md` extension)
- Wiki pages
- Markdown documents inside repositories
23
- Epics **[ULTIMATE]**
24

25
You can also use other rich text files in GitLab. You might have to install a
Marcia Ramos's avatar
Marcia Ramos committed
26 27 28 29
dependency to do so. Please see the [`github-markup` gem readme](https://github.com/gitlabhq/markup#markups) for more information.

> **Notes:**
>
30
> We encourage you to view this document as [rendered by GitLab itself](markdown.md).
Marcia Ramos's avatar
Marcia Ramos committed
31 32 33 34
>
> As of 11.1, GitLab uses the [CommonMark Ruby Library][commonmarker] for Markdown
processing of all new issues, merge requests, comments, and other Markdown content
in the GitLab system. As of 11.3, wiki pages and Markdown files (`.md`) in the
35 36 37 38
repositories are also processed with CommonMark. As of 11.8, the [Redcarpet
Ruby library][redcarpet] has been removed and all issues/comments, including
those from pre-11.1, are now processed using [CommonMark Ruby
Library][commonmarker].
Marcia Ramos's avatar
Marcia Ramos committed
39
>
40 41 42
> The documentation website had its [markdown engine migrated from Redcarpet to Kramdown](https://gitlab.com/gitlab-com/gitlab-docs/merge_requests/108)
in October 2018.
>
Marcia Ramos's avatar
Marcia Ramos committed
43
> _Where there are significant differences, we will try to call them out in this document._
44

45 46
### Transitioning to CommonMark

47 48 49 50 51
You may have older issues/merge requests or Markdown documents in your
repository that were written using some of the nuances of RedCarpet's version
of Markdown. Since CommonMark uses a slightly stricter syntax, these documents
may now display a little strangely since we've transitioned to CommonMark.
Numbered lists with nested lists in particular can be displayed incorrectly.
52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

It is usually quite easy to fix.  In the case of a nested list such as this:

```markdown
1. Chocolate
  - dark
  - milk
```

simply add a space to each nested item:

```markdown
1. Chocolate
   - dark
   - milk
```

In the documentation below, we try to highlight some of the differences.

Marcia Ramos's avatar
Marcia Ramos committed
71 72 73 74 75 76 77
If you have a large volume of Markdown files, it can be tedious to determine
if they will be displayed correctly or not. You can use the
[diff_redcarpet_cmark](https://gitlab.com/digitalmoksha/diff_redcarpet_cmark)
tool (not an officially supported product) to generate a list of files and
differences between how RedCarpet and CommonMark render the files. It can give
you a great idea if anything needs to be changed - many times nothing will need
to changed.
78

79
### Newlines
80

81
> If this is not rendered correctly, see
82
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#newlines
83

84
GFM honors the markdown specification in how [paragraphs and line breaks are handled][commonmark-spec].
85

Marcia Ramos's avatar
Marcia Ramos committed
86 87
A paragraph is simply one or more consecutive lines of text, separated by one or
more blank lines.
88
Line-breaks, or soft returns, are rendered if you end a line with two or more spaces:
89

90 91
<!-- (Do *NOT* remove the two ending whitespaces in the following line.) -->
<!-- (They are needed for the Markdown text to render correctly.) -->
92
    Roses are red [followed by two or more spaces]  
93 94
    Violets are blue

95 96
    Sugar is sweet

97 98
<!-- (Do *NOT* remove the two ending whitespaces in the following line.) -->
<!-- (They are needed for the Markdown text to render correctly.) -->
99
Roses are red  
100
Violets are blue
101

102 103
Sugar is sweet

104
### Multiple underscores in words
105

106
> If this is not rendered correctly, see
107
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#multiple-underscores-in-words
108

Marcia Ramos's avatar
Marcia Ramos committed
109 110 111
It is not reasonable to italicize just _part_ of a word, especially when you're
dealing with code and names that often appear with multiple underscores.
Therefore, GFM ignores multiple underscores in words:
112 113

    perform_complicated_task
114

115 116
    do_this_and_do_that_and_another_thing

117
perform_complicated_task
118

119 120
do_this_and_do_that_and_another_thing

121
### URL auto-linking
122

123
> If this is not rendered correctly, see
124
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#url-auto-linking
125 126

GFM will autolink almost any URL you copy and paste into your text:
127

128
    * https://www.google.com
129 130 131 132 133 134
    * https://google.com/
    * ftp://ftp.us.debian.org/debian/
    * smb://foo/bar/baz
    * irc://irc.freenode.net/gitlab
    * http://localhost:3000

135
* https://www.google.com
136 137
* https://google.com/
* ftp://ftp.us.debian.org/debian/
138 139
* <a href="smb://foo/bar/baz">smb://foo/bar/baz</a>
* <a href="irc://irc.freenode.net/gitlab">irc://irc.freenode.net/gitlab</a>
140
* http://localhost:3000
141

142
### Multiline blockquote
143

144
> If this is not rendered correctly, see
145
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#multiline-blockquote
146

147
On top of standard Markdown [blockquotes](#blockquotes), which require prepending `>` to quoted lines,
148
GFM supports multiline blockquotes fenced by <code>>>></code>:
149

Marcia Ramos's avatar
Marcia Ramos committed
150
```
151 152 153 154 155 156 157 158 159 160 161 162 163
>>>
If you paste a message from somewhere else

that

spans

multiple lines,

you can quote that without having to manually prepend `>` to every line!
>>>
```

164 165 166 167 168 169 170
<blockquote dir="auto">
<p>If you paste a message from somewhere else</p>
<p>that</p>
<p>spans</p>
<p>multiple lines,</p>
<p>you can quote that without having to manually prepend <code>&gt;</code> to every line!</p>
</blockquote>
171

172
### Code and syntax highlighting
173

174
> If this is not rendered correctly, see
175
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#code-and-syntax-highlighting
176

177 178
_GitLab uses the [Rouge Ruby library][rouge] for syntax highlighting. For a
list of supported languages visit the Rouge website._
179

180 181 182
Blocks of code are either fenced by lines with three back-ticks <code>```</code>,
or are indented with four spaces. Only the fenced code blocks support syntax
highlighting:
183

Marcia Ramos's avatar
Marcia Ramos committed
184
```
185 186 187 188 189 190 191 192 193 194 195
Inline `code` has `back-ticks around` it.
```

Inline `code` has `back-ticks around` it.

Example:

    ```javascript
    var s = "JavaScript syntax highlighting";
    alert(s);
    ```
196

197 198 199 200 201 202
    ```python
    def function():
        #indenting works just fine in the fenced code block
        s = "Python syntax highlighting"
        print s
    ```
203

204 205 206 207 208 209 210
    ```ruby
    require 'redcarpet'
    markdown = Redcarpet.new("Hello World!")
    puts markdown.to_html
    ```

    ```
211
    No language indicated, so no syntax highlighting.
212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241
    s = "There is no highlighting for this."
    But let's throw in a <b>tag</b>.
    ```

becomes:

```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```

```python
def function():
    #indenting works just fine in the fenced code block
    s = "Python syntax highlighting"
    print s
```

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

```
No language indicated, so no syntax highlighting.
s = "There is no highlighting for this."
But let's throw in a <b>tag</b>.
```

242
### Inline diff
243

244
> If this is not rendered correctly, see
245
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#inline-diff
246

247 248
With inline diffs tags you can display {+ additions +} or [- deletions -].

249
The wrapping tags can be either curly braces or square brackets: [+ additions +] or {- deletions -}.
250

251 252 253 254 255 256 257 258 259
Examples:

```
- {+ additions +}
- [+ additions +]
- {- deletions -}
- [- deletions -]
```

260 261
However the wrapping tags cannot be mixed as such:

262
```
263 264 265 266
- {+ additions +]
- [+ additions +}
- {- deletions -]
- [- deletions -}
267
```
268

269
### Emoji
270

271
```md
Marcia Ramos's avatar
Marcia Ramos committed
272
Sometimes you want to :monkey: around a bit and add some :star2: to your :speech_balloon:. Well we have a gift for you:
273

Marcia Ramos's avatar
Marcia Ramos committed
274
:zap: You can use emoji anywhere GFM is supported. :v:
275

Marcia Ramos's avatar
Marcia Ramos committed
276
You can use it to point out a :bug: or warn about :speak_no_evil: patches. And if someone improves your really :snail: code, send them some :birthday:. People will :heart: you for that.
277

Marcia Ramos's avatar
Marcia Ramos committed
278
If you are new to this, don't be :fearful:. You can easily join the emoji :family:. All you need to do is to look up one of the supported codes.
279

Marcia Ramos's avatar
Marcia Ramos committed
280
Consult the [Emoji Cheat Sheet](https://www.emojicopy.com) for a list of all supported emoji codes. :thumbsup:
281

Marcia Ramos's avatar
Marcia Ramos committed
282
Most emoji are natively supported on macOS, Windows, iOS, Android and will fallback to image-based emoji where there is lack of support.
283

Marcia Ramos's avatar
Marcia Ramos committed
284
On Linux, you can download [Noto Color Emoji](https://www.google.com/get/noto/help/emoji/) to get full native emoji support.
285

Marcia Ramos's avatar
Marcia Ramos committed
286 287
Ubuntu 18.04 (like many modern Linux distros) has this font installed by default.
```
288

289
Sometimes you want to <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/monkey.png" width="20px" height="20px" style="display:inline;margin:0"> around a bit and add some <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/star2.png" width="20px" height="20px" style="display:inline;margin:0"> to your <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/speech_balloon.png" width="20px" height="20px" style="display:inline;margin:0">. Well we have a gift for you:
290

291
<img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/zap.png" width="20px" height="20px" style="display:inline;margin:0">You can use emoji anywhere GFM is supported. <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/v.png" width="20px" height="20px" style="display:inline;margin:0">
292

293
You can use it to point out a <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/bug.png" width="20px" height="20px" style="display:inline;margin:0"> or warn about <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/speak_no_evil.png" width="20px" height="20px" style="display:inline;margin:0"> patches. And if someone improves your really <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/snail.png" width="20px" height="20px" style="display:inline;margin:0"> code, send them some <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/birthday.png" width="20px" height="20px" style="display:inline;margin:0">. People will <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/heart.png" width="20px" height="20px" style="display:inline;margin:0"> you for that.
294

295
If you are new to this, don't be <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/fearful.png" width="20px" height="20px" style="display:inline;margin:0">. You can easily join the emoji <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/family.png" width="20px" height="20px" style="display:inline;margin:0">. All you need to do is to look up one of the supported codes.
296

297
Consult the [Emoji Cheat Sheet](https://www.webfx.com/tools/emoji-cheat-sheet/) for a list of all supported emoji codes. <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/thumbsup.png" width="20px" height="20px" style="display:inline;margin:0">
298

299 300 301 302 303 304
Most emoji are natively supported on macOS, Windows, iOS, Android and will fallback to image-based emoji where there is lack of support.

On Linux, you can download [Noto Color Emoji](https://www.google.com/get/noto/help/emoji/) to get full native emoji support.

Ubuntu 18.04 (like many modern Linux distros) has this font installed by default.

305
### Special GitLab references
306

307
GFM recognizes special references.
308

309
You can easily reference e.g. an issue, a commit, a team member or even the whole team within a project.
310

311 312 313 314
GFM will turn that reference into a link so you can navigate between them easily.

GFM will recognize the following:

315 316 317 318 319
| input                      | references                      |
|:---------------------------|:--------------------------------|
| `@user_name`               | specific user                   |
| `@group_name`              | specific group                  |
| `@all`                     | entire team                     |
320
| `namespace/project>`       | project                         |
321
| `#12345`                   | issue                           |
322 323
| `!123`                     | merge request                   |
| `$123`                     | snippet                         |
324
| `&123`                     | epic **[ULTIMATE]**             |
325 326 327
| `~123`                     | label by ID                     |
| `~bug`                     | one-word label by name          |
| `~"feature request"`       | multi-word label by name        |
328
| `%123`                     | project milestone by ID         |
329 330 331 332 333 334
| `%v1.23`                   | one-word milestone by name      |
| `%"release candidate"`     | multi-word milestone by name    |
| `9ba12248`                 | specific commit                 |
| `9ba12248...b19a04f5`      | commit range comparison         |
| `[README](doc/README)`     | repository file references      |
| `[README](doc/README#L13)` | repository file line references |
335 336 337 338

GFM also recognizes certain cross-project references:

| input                                   | references              |
339
|:----------------------------------------|:------------------------|
340 341
| `namespace/project#123`                 | issue                   |
| `namespace/project!123`                 | merge request           |
342
| `namespace/project%123`                 | project milestone       |
343 344
| `namespace/project$123`                 | snippet                 |
| `namespace/project@9ba12248`            | specific commit         |
345
| `group1/subgroup&123`                   | epic **[ULTIMATE]**     |
346
| `namespace/project@9ba12248...b19a04f5` | commit range comparison |
347
| `namespace/project~"Some label"`        | issues with given label |
348

349 350 351 352 353 354
It also has a shorthand version to reference other projects from the same namespace:

| input                         | references              |
|:------------------------------|:------------------------|
| `project#123`                 | issue                   |
| `project!123`                 | merge request           |
355
| `project%123`                 | project milestone       |
356 357 358 359 360
| `project$123`                 | snippet                 |
| `project@9ba12248`            | specific commit         |
| `project@9ba12248...b19a04f5` | commit range comparison |
| `project~"Some label"`        | issues with given label |

361
### Task lists
362

363
> If this is not rendered correctly, see
364
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#task-lists
365

366
You can add task lists to issues, merge requests and comments. To create a task list, add a specially-formatted Markdown list, like so:
367

Marcia Ramos's avatar
Marcia Ramos committed
368
```
369 370 371 372 373
- [x] Completed task
- [ ] Incomplete task
    - [ ] Sub-task 1
    - [x] Sub-task 2
    - [ ] Sub-task 3
374 375
```

376
![alt unordered-check-list-render-gfm](img/unordered_check_list_render_gfm.png)
377

378 379
Tasks formatted as ordered lists are supported as well:

Marcia Ramos's avatar
Marcia Ramos committed
380
```
381 382 383 384 385 386
1. [x] Completed task
1. [ ] Incomplete task
    1. [ ] Sub-task 1
    1. [x] Sub-task 2
```

387
![alt task-list-ordered-render-gfm](img/task_list_ordered_render_gfm.png)
388

389
Task lists can only be created in descriptions, not in titles. Task item state can be managed by editing the description's Markdown or by toggling the rendered check boxes.
390

391
### Videos
392

393
> If this is not rendered correctly, see
394
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#videos
395

396 397
Image tags with a video extension are automatically converted to a video player.

398
The valid video extensions are `.mp4`, `.m4v`, `.mov`, `.webm`, and `.ogv`.
399 400 401

    Here's a sample video:

402
    ![Sample Video](img/markdown_video.mp4)
403 404 405

Here's a sample video:

406 407 408 409
<div class="video-container">
   <video src="img/markdown_video.mp4" width="400" controls="true" data-setup="{}" data-title="Sample Video"></video>
   <p><a href="img/markdown_video.mp4" target="_blank" rel="noopener noreferrer" title="Download 'Sample Video'">Sample Video</a></p>
</div>
410

411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432
### Math

> If this is not rendered correctly, see
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#math

It is possible to have math written with the LaTeX syntax rendered using [KaTeX][katex].

Math written inside ```$``$``` will be rendered inline with the text.

Math written inside triple back quotes, with the language declared as `math`, will be rendered on a separate line.

Example:

    This math is inline $`a^2+b^2=c^2`$.

    This is on a separate line
    ```math
    a^2+b^2=c^2
    ```

Becomes:

433
This math is inline ![alt text](img/math_inline_sup_render_gfm.png).
434 435

This is on a separate line
436

Marcia Ramos's avatar
Marcia Ramos committed
437
<img src="./img/math_inline_sup_render_gfm.png" >
438 439 440 441 442 443

_Be advised that KaTeX only supports a [subset][katex-subset] of LaTeX._

>**Note:**
This also works for the asciidoctor `:stem: latexmath`. For details see the [asciidoctor user manual][asciidoctor-manual].

444 445 446 447 448 449 450 451 452 453 454
### Colors

> If this is not rendered correctly, see
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#colors

It is possible to have color written in HEX, RGB or HSL format rendered with a color indicator.

Color written inside backticks will be followed by a color "chip".

Examples:

455 456 457 458 459 460 461 462
    `#F00`
    `#F00A`
    `#FF0000`
    `#FF0000AA`
    `RGB(0,255,0)`
    `RGB(0%,100%,0%)`
    `RGBA(0,255,0,0.7)`
    `HSL(540,70%,50%)`
463 464
    `HSLA(540,70%,50%,0.7)`

Marcia Ramos's avatar
Marcia Ramos committed
465
Becomes:
466

467
![alt color-inline-colorchip-render-gfm](img/color_inline_colorchip_render_gfm.png)
468 469 470 471 472 473 474

#### Supported formats:

* HEX: `` `#RGB[A]` `` or `` `#RRGGBB[AA]` ``
* RGB: `` `RGB[A](R, G, B[, A])` ``
* HSL: `` `HSL[A](H, S, L[, A])` ``

blackst0ne's avatar
blackst0ne committed
475 476
### Mermaid

477 478
> [Introduced](https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/15107) in
GitLab 10.3.
479
>
blackst0ne's avatar
blackst0ne committed
480 481 482
> If this is not rendered correctly, see
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#mermaid

483
It is possible to generate diagrams and flowcharts from text using [Mermaid](https://mermaidjs.github.io/).
blackst0ne's avatar
blackst0ne committed
484

485
In order to generate a diagram or flowchart, you should write your text inside the `mermaid` block.
blackst0ne's avatar
blackst0ne committed
486

487
Example:
blackst0ne's avatar
blackst0ne committed
488 489 490 491 492 493 494

    ```mermaid
    graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;
495
    ```
blackst0ne's avatar
blackst0ne committed
496 497 498

Becomes:

499 500 501 502 503 504 505
```mermaid
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
```
blackst0ne's avatar
blackst0ne committed
506

507
For details see the [Mermaid official page](https://mermaidjs.github.io/).
blackst0ne's avatar
blackst0ne committed
508

509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568
### Front matter

> [Introduced](https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/23331)
  in GitLab 11.6.

Front matter is metadata included at the beginning of a markdown document, preceding
its content. This data can be used by static site generators such as [Jekyll](https://jekyllrb.com/docs/front-matter/) and [Hugo](https://gohugo.io/content-management/front-matter/),
and many other applications.

In GitLab, front matter is only used in Markdown files and wiki pages, not the other places where Markdown formatting is supported.
When you view a Markdown file rendered by GitLab, any front matter is displayed as-is, in a box at the top of the document, before the rendered HTML content.
To view an example, you can toggle between the source and rendered version of a [GitLab documentation file](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/README.md).

The following delimeters are supported:

- YAML (`---`):

  ```
  ---
  title: About Front Matter
  example:
    language: yaml
  ---
  ```

- TOML (`+++`):

  ```
  +++
  title = "About Front Matter"
  [example]
  language = "toml"
  +++
  ```

- JSON (`;;;`):

  ```
  ;;;
  {
    "title": "About Front Matter"
    "example": {
      "language": "json"
    }
  }
  ;;;
  ```

Other languages are supported by adding a specifier to any of the existing
delimiters. For example:

```
---php
$title = "About Front Matter";
$example = array(
  'language' => "php",
);
---
```

569
## Standard Markdown
570

571
### Headers
572

Marcia Ramos's avatar
Marcia Ramos committed
573
```
574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589
# H1
## H2
### H3
#### H4
##### H5
###### H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1
======

Alt-H2
------
```

590
#### Header IDs and links
591

592
All Markdown-rendered headers automatically get IDs, which can be linked to, except in comments.
593

594
On hover, a link to those IDs becomes visible to make it easier to copy the link to the header to use it somewhere else.
595 596 597

The IDs are generated from the content of the header according to the following rules:

598 599 600 601
1. All text is converted to lowercase.
1. All non-word text (e.g., punctuation, HTML) is removed.
1. All spaces are converted to hyphens.
1. Two or more hyphens in a row are converted to one.
602
1. If a header with the same ID has already been generated, a unique
603
   incrementing number is appended, starting at 1.
604 605 606 607

For example:

```
608 609 610 611 612
# This header has spaces in it
## This header has a :thumbsup: in it
# This header has Unicode in it: 한글
## This header has spaces in it
### This header has spaces in it
613
## This header has 3.5 in it (and parentheses)
614 615
```

616
Would generate the following link IDs:
617

618 619 620 621
1. `this-header-has-spaces-in-it`
1. `this-header-has-a-in-it`
1. `this-header-has-unicode-in-it-한글`
1. `this-header-has-spaces-in-it-1`
622
1. `this-header-has-spaces-in-it-2`
623
1. `this-header-has-3-5-in-it-and-parentheses`
624

625
Note that the Emoji processing happens before the header IDs are generated, so the Emoji is converted to an image which then gets removed from the ID.
626

627
### Emphasis
628

629 630
Examples:

Marcia Ramos's avatar
Marcia Ramos committed
631
```
632 633 634 635
Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Simon Hardt's avatar
Simon Hardt committed
636
Combined emphasis with **asterisks and _underscores_**.
637 638 639 640

Strikethrough uses two tildes. ~~Scratch this.~~
```

Marcia Ramos's avatar
Marcia Ramos committed
641
Becomes:
642

643 644 645 646 647 648 649 650
Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Combined emphasis with **asterisks and _underscores_**.

Strikethrough uses two tildes. ~~Scratch this.~~

651
### Lists
652

653 654
Examples:

Marcia Ramos's avatar
Marcia Ramos committed
655
```
656 657
1. First ordered list item
2. Another item
658
   * Unordered sub-list.
659
1. Actual numbers don't matter, just that it's a number
660
   1. Ordered sub-list
661 662
4. And another item.

663 664 665 666 667
* Unordered list can use asterisks
- Or minuses
+ Or pluses
```

Marcia Ramos's avatar
Marcia Ramos committed
668
Becomes:
669

670 671
1. First ordered list item
2. Another item
672
   * Unordered sub-list.
673
1. Actual numbers don't matter, just that it's a number
674
   1. Ordered sub-list
675 676
4. And another item.

677 678 679 680
* Unordered list can use asterisks
- Or minuses
+ Or pluses

681
If a list item contains multiple paragraphs,
682
each subsequent paragraph should be indented to the same level as the start of the list item text
683

684 685
Example:

Marcia Ramos's avatar
Marcia Ramos committed
686
```
687
1. First ordered list item
688

689 690 691
   Second paragraph of first item.

2. Another item
692 693
```

694 695
Becomes:

696 697
1.  First ordered list item

698 699
    Paragraph of first item.

700 701
2.  Another item

702 703
If the paragraph of the first item is not indented with the proper number of spaces,
the paragraph will appear outside the list, instead of properly indented under the list item.
704

705 706
Example:

Marcia Ramos's avatar
Marcia Ramos committed
707
```
708 709
1. First ordered list item

710 711
  Paragraph of first item.

712 713 714
2. Another item
```

715 716
Becomes:

717 718
1. First ordered list item

719 720
  Paragraph of first item.

721 722
2. Another item

723
### Links
724

725
There are two ways to create links, inline-style and reference-style.
726

727 728 729 730 731
```markdown
[I'm an inline-style link](https://www.google.com)
[I'm a link to a repository file in the same directory](index.md)
[I am an absolute reference within the repository](/doc/user/index.md)
[I'm a relative link to the Milestones page](../README.md)
732

733 734
[I link to a section on a different markdown page, using a header ID](index.md#overview)
[I link to a different section on the same page, using the header ID](#header-ids-and-links)
735

736 737 738
[I'm a reference-style link][Arbitrary case-insensitive reference text]
[You can use numbers for reference-style link definitions][1]
Or leave it empty and use the [link text itself][]
739

740
Some text to show that the reference links can follow later.
741

742 743 744 745
[arbitrary case-insensitive reference text]: https://www.mozilla.org
[1]: http://slashdot.org
[link text itself]: https://www.reddit.com
```
746

747 748 749 750
>**Note:**
Relative links do not allow referencing project files in a wiki page or wiki
page in a project file. The reason for this is that, in GitLab, wiki is always
a separate Git repository. For example, `[I'm a reference-style link](style)`
751 752
will point the link to `wikis/style` when the link is inside of a wiki markdown file.

753
### Images
754

755 756
Examples:

757 758
    Here's our logo (hover to see the title text):

759
    Inline-style:
760
    ![alt text](img/markdown_logo.png)
761

762
    Reference-style:
763
    ![alt text1][logo]
764

765
    [logo]: img/markdown_logo.png
766

Marcia Ramos's avatar
Marcia Ramos committed
767
Becomes:
768

769
Here's our logo:
770

771
Inline-style:
772

773
![alt text](img/markdown_logo.png)
774

775
Reference-style:
776

777 778
![alt text][logo]

779
[logo]: img/markdown_logo.png
780

781
### Blockquotes
782

783 784
Examples:

Marcia Ramos's avatar
Marcia Ramos committed
785
```
786 787 788 789 790
> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

Quote break.

791
> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
792 793
```

Marcia Ramos's avatar
Marcia Ramos committed
794
Becomes:
795

796 797 798 799 800
> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

Quote break.

801
> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
802

803
### Inline HTML
804

805
You can also use raw HTML in your Markdown, and it'll mostly work pretty well.
806

807
See the documentation for HTML::Pipeline's [SanitizationFilter](http://www.rubydoc.info/gems/html-pipeline/1.11.0/HTML/Pipeline/SanitizationFilter#WHITELIST-constant) class for the list of allowed HTML tags and attributes.  In addition to the default `SanitizationFilter` whitelist, GitLab allows `span`, `abbr`, `details` and `summary` elements.
808

809 810
Examples:

Marcia Ramos's avatar
Marcia Ramos committed
811
```
812 813 814 815 816 817 818 819 820
<dl>
  <dt>Definition list</dt>
  <dd>Is something people use sometimes.</dd>

  <dt>Markdown in HTML</dt>
  <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>
```

Marcia Ramos's avatar
Marcia Ramos committed
821
Becomes:
822

823 824 825 826 827 828 829 830
<dl>
  <dt>Definition list</dt>
  <dd>Is something people use sometimes.</dd>

  <dt>Markdown in HTML</dt>
  <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>

831 832 833 834 835 836 837
#### Details and Summary

Content can be collapsed using HTML's [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) and [`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) tags. This is especially useful for collapsing long logs so they take up less screen space.

<p>
<details>
<summary>Click me to collapse/fold.</summary>
838 839

These details <em>will</em> remain <strong>hidden</strong> until expanded.
840 841

<pre><code>PASTE LOGS HERE</code></pre>
842

843 844 845
</details>
</p>

846
**Note:** Markdown inside these tags is supported, as long as you have a blank line after the `</summary>` tag and before the `</details>` tag, as shown in the example.
847 848 849 850 851

```html
<details>
<summary>Click me to collapse/fold.</summary>

852 853 854 855
These details _will_ remain **hidden** until expanded.

    PASTE LOGS HERE

856 857 858
</details>
```

859
### Horizontal Rule
860

861 862
Examples:

863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878
```
Three or more...

---

Hyphens

***

Asterisks

___

Underscores
```

Marcia Ramos's avatar
Marcia Ramos committed
879
Becomes:
880

881 882 883 884 885 886 887 888 889 890 891 892 893 894
Three or more...

---

Hyphens

***

Asterisks

___

Underscores

895
### Line Breaks
896

897
A good way to learn how line breaks work is to experiment and discover -- hit <kbd>Enter</kbd> once (i.e., insert one newline), then hit it twice (i.e., insert two newlines), see what happens. You'll soon learn to get what you want. The "Preview" tab is your friend.
898 899 900

Here are some things to try out:

901 902
Examples:

903 904 905 906 907 908
```
Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a *separate paragraph*.

This line is also a separate paragraph, but...
Simon Hardt's avatar
Simon Hardt committed
909 910
This line is only separated by a single newline, so it *does not break* and just follows the previous line in the *same paragraph*.

911
This line is also a separate paragraph, and...  
Simon Hardt's avatar
Simon Hardt committed
912
This line is *on its own line*, because the previous line ends with two spaces. (but still in the *same paragraph*)
913 914

spaces.
915 916
```

Marcia Ramos's avatar
Marcia Ramos committed
917
Becomes:
918

919 920 921 922
Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a *separate paragraph*.

Simon Hardt's avatar
Simon Hardt committed
923 924 925
This line is also a separate paragraph, but...
This line is only separated by a single newline, so it *does not break* and just follows the previous line in the *same paragraph*.

926
This line is also a separate paragraph, and...  
Simon Hardt's avatar
Simon Hardt committed
927
This line is *on its own line*, because the previous line ends with two spaces. (but still in the *same paragraph*)
928

929 930
spaces.

931
### Tables
932

933
Tables aren't part of the core Markdown spec, but they are part of GFM.
934

935 936
Example:

937 938 939 940 941 942 943
```
| header 1 | header 2 |
| -------- | -------- |
| cell 1   | cell 2   |
| cell 3   | cell 4   |
```

944
Becomes:
945 946 947 948 949 950

| header 1 | header 2 |
| -------- | -------- |
| cell 1   | cell 2   |
| cell 3   | cell 4   |

951
**Note:** The row of dashes between the table header and body must have at least three dashes in each column.
952

953 954 955
By including colons in the header row, you can align the text within that column.

Example:
956 957 958 959 960 961 962 963

```
| Left Aligned | Centered | Right Aligned | Left Aligned | Centered | Right Aligned |
| :----------- | :------: | ------------: | :----------- | :------: | ------------: |
| Cell 1       | Cell 2   | Cell 3        | Cell 4       | Cell 5   | Cell 6        |
| Cell 7       | Cell 8   | Cell 9        | Cell 10      | Cell 11  | Cell 12       |
```

964 965
Becomes:

966 967 968 969 970
| Left Aligned | Centered | Right Aligned | Left Aligned | Centered | Right Aligned |
| :----------- | :------: | ------------: | :----------- | :------: | ------------: |
| Cell 1       | Cell 2   | Cell 3        | Cell 4       | Cell 5   | Cell 6        |
| Cell 7       | Cell 8   | Cell 9        | Cell 10      | Cell 11  | Cell 12       |

971
### Footnotes
972

973 974
Example:

975
```
976 977
You can add footnotes to your text as follows.[^2]
[^2]: This is my awesome footnote.
978
```
979

980 981
Becomes:

982 983
You can add footnotes to your text as follows.[^2]

984 985 986 987 988 989 990 991 992 993 994
### Superscripts / Subscripts

CommonMark and GFM currently do not support the superscript syntax ( `x^2` ) that Redcarpet does.  You can use the standard HTML syntax for superscripts and subscripts.

```
The formula for water is H<sub>2</sub>O
while the equation for the theory of relativity is E = mc<sup>2</sup>.
```

The formula for water is H<sub>2</sub>O while the equation for the theory of relativity is E = mc<sup>2</sup>.

995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028
## Wiki-specific Markdown

The following examples show how links inside wikis behave.

### Wiki - Direct page link

A link which just includes the slug for a page will point to that page,
_at the base level of the wiki_.

This snippet would link to a `documentation` page at the root of your wiki:

```markdown
[Link to Documentation](documentation)
```

### Wiki - Direct file link

Links with a file extension point to that file, _relative to the current page_.

If this snippet was placed on a page at `<your_wiki>/documentation/related`,
it would link to `<your_wiki>/documentation/file.md`:

```markdown
[Link to File](file.md)
```

### Wiki - Hierarchical link

A link can be constructed relative to the current wiki page using `./<page>`,
`../<page>`, etc.

- If this snippet was placed on a page at `<your_wiki>/documentation/main`,
  it would link to `<your_wiki>/documentation/related`:

1029 1030 1031
    ```markdown
    [Link to Related Page](./related)
    ```
1032 1033 1034 1035

- If this snippet was placed on a page at `<your_wiki>/documentation/related/content`,
  it would link to `<your_wiki>/documentation/main`:

1036 1037 1038
    ```markdown
    [Link to Related Page](../main)
    ```
1039 1040 1041 1042

- If this snippet was placed on a page at `<your_wiki>/documentation/main`,
  it would link to `<your_wiki>/documentation/related.md`:

1043 1044 1045
    ```markdown
    [Link to Related Page](./related.md)
    ```
1046 1047 1048 1049

- If this snippet was placed on a page at `<your_wiki>/documentation/related/content`,
  it would link to `<your_wiki>/documentation/main.md`:

1050 1051 1052
    ```markdown
    [Link to Related Page](../main.md)
    ```
1053 1054 1055 1056 1057 1058 1059

### Wiki - Root link

A link starting with a `/` is relative to the wiki root.

- This snippet links to `<wiki_root>/documentation`:

1060 1061 1062
    ```markdown
    [Link to Related Page](/documentation)
    ```
1063 1064 1065

- This snippet links to `<wiki_root>/miscellaneous.md`:

1066 1067 1068 1069
    ```markdown
    [Link to Related Page](/miscellaneous.md)
    ```

1070 1071
## References

1072
- This document leveraged heavily from the [Markdown-Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet).
1073 1074 1075
- The original [Markdown Syntax Guide](https://daringfireball.net/projects/markdown/syntax) at Daring Fireball is an excellent resource for a detailed explanation of standard markdown.
- The detailed specification for CommonMark can be found in the [CommonMark Spec][commonmark-spec]
- The [CommonMark Dingus](http://try.commonmark.org) is a handy tool for testing CommonMark syntax.
1076

1077 1078 1079
[^1]: This link will be broken if you see this document from the Help page or docs.gitlab.com
[^2]: This is my awesome footnote.

1080
[markdown.md]: https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md
1081
[rouge]: http://rouge.jneen.net/ "Rouge website"
1082
[redcarpet]: https://github.com/vmg/redcarpet "Redcarpet website"
1083
[katex]: https://github.com/Khan/KaTeX "KaTeX website"
1084
[katex-subset]: https://katex.org/docs/supported.html "Macros supported by KaTeX"
1085
[asciidoctor-manual]: http://asciidoctor.org/docs/user-manual/#activating-stem-support "Asciidoctor user manual"
1086
[commonmarker]: https://github.com/gjtorikian/commonmarker
1087
[commonmark-spec]: https://spec.commonmark.org/current/