markdown.md 31.1 KB
Newer Older
M
Marin Jankovski 已提交
1 2
# Markdown

M
Marcia Ramos 已提交
3
This markdown guide is valid for GitLab's system markdown entries and files.
B
Brett Walker 已提交
4

M
Marcia Ramos 已提交
5
## GitLab Flavored Markdown (GFM)
6

7
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 some useful functionality. It was inspired by [GitHub Flavored Markdown](https://help.github.com/articles/basic-writing-and-formatting-syntax/).
8

9
You can use GFM in the following areas:
10

11 12 13 14
- comments
- issues
- merge requests
- milestones
15
- snippets (the snippet must be named with a `.md` extension)
16 17
- wiki pages
- markdown documents inside the repository
18

19
You can also use other rich text files in GitLab. You might have to install a
M
Marcia Ramos 已提交
20 21 22 23 24 25 26 27 28 29 30 31 32 33
dependency to do so. Please see the [`github-markup` gem readme](https://github.com/gitlabhq/markup#markups) for more information.

> **Notes:**
>
> For the best result, we encourage you to check this document out as rendered
> by GitLab itself: [markdown.md]
>
> 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
repositories are also processed with CommonMark. Older content in issues/comments
are still processed using the [Redcarpet Ruby library][redcarpet].
>
> _Where there are significant differences, we will try to call them out in this document._
34

35 36
### Transitioning to CommonMark

M
Marcia Ramos 已提交
37 38 39 40 41
You may have 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.
42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

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.

M
Marcia Ramos 已提交
61 62
If you have a need to view a document using RedCarpet, you can add the token
`legacy_render=1` to the end of the url, like this:
63 64 65

https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md?legacy_render=1

M
Marcia Ramos 已提交
66 67 68 69 70 71 72
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.
73

74
### Newlines
75

76
> If this is not rendered correctly, see
C
Clement Ho 已提交
77
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#newlines
78

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

M
Marcia Ramos 已提交
81 82
A paragraph is simply one or more consecutive lines of text, separated by one or
more blank lines.
83
Line-breaks, or soft returns, are rendered if you end a line with two or more spaces:
84

85 86
<!-- (Do *NOT* remove the two ending whitespaces in the following line.) -->
<!-- (They are needed for the Markdown text to render correctly.) -->
87
    Roses are red [followed by two or more spaces]  
88 89
    Violets are blue

90 91
    Sugar is sweet

92 93
<!-- (Do *NOT* remove the two ending whitespaces in the following line.) -->
<!-- (They are needed for the Markdown text to render correctly.) -->
94
Roses are red  
95
Violets are blue
96

97 98
Sugar is sweet

99
### Multiple underscores in words
100

101
> If this is not rendered correctly, see
C
Clement Ho 已提交
102
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#multiple-underscores-in-words
103

M
Marcia Ramos 已提交
104 105 106
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:
107 108

    perform_complicated_task
109

110 111
    do_this_and_do_that_and_another_thing

S
Sytse Sijbrandij 已提交
112
perform_complicated_task
113

114 115
do_this_and_do_that_and_another_thing

116
### URL auto-linking
117

118
> If this is not rendered correctly, see
C
Clement Ho 已提交
119
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#url-auto-linking
120 121

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

123
    * https://www.google.com
124 125 126 127 128 129
    * https://google.com/
    * ftp://ftp.us.debian.org/debian/
    * smb://foo/bar/baz
    * irc://irc.freenode.net/gitlab
    * http://localhost:3000

130
* https://www.google.com
131 132
* https://google.com/
* ftp://ftp.us.debian.org/debian/
133 134
* <a href="smb://foo/bar/baz">smb://foo/bar/baz</a>
* <a href="irc://irc.freenode.net/gitlab">irc://irc.freenode.net/gitlab</a>
135
* http://localhost:3000
136

137
### Multiline Blockquote
138

139
> If this is not rendered correctly, see
C
Clement Ho 已提交
140
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#multiline-blockquote
141

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

M
Marcia Ramos 已提交
145
```
146 147 148 149 150 151 152 153 154 155 156 157 158
>>>
If you paste a message from somewhere else

that

spans

multiple lines,

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

159 160 161 162 163 164 165
<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>
166

167
### Code and Syntax Highlighting
168

169
> If this is not rendered correctly, see
C
Clement Ho 已提交
170
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#code-and-syntax-highlighting
171

172 173
_GitLab uses the [Rouge Ruby library][rouge] for syntax highlighting. For a
list of supported languages visit the Rouge website._
174

175 176 177
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:
178

M
Marcia Ramos 已提交
179
```
180 181 182 183 184 185 186 187 188 189 190
Inline `code` has `back-ticks around` it.
```

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

Example:

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

192 193 194 195 196 197
    ```python
    def function():
        #indenting works just fine in the fenced code block
        s = "Python syntax highlighting"
        print s
    ```
198

199 200 201 202 203 204 205
    ```ruby
    require 'redcarpet'
    markdown = Redcarpet.new("Hello World!")
    puts markdown.to_html
    ```

    ```
206
    No language indicated, so no syntax highlighting.
207 208 209 210 211 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
    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>.
```

237
### Inline Diff
238

239
> If this is not rendered correctly, see
C
Clement Ho 已提交
240
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#inline-diff
241

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

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

246 247 248 249 250 251 252 253 254
Examples:

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

255 256
However the wrapping tags cannot be mixed as such:

257
```
258 259 260 261
- {+ additions +]
- [+ additions +}
- {- deletions -]
- [- deletions -}
262
```
263

264
### Emoji
265

266
> If this is not rendered correctly, see
C
Clement Ho 已提交
267
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#emoji
268

M
Marcia Ramos 已提交
269 270
```
Sometimes you want to :monkey: around a bit and add some :star2: to your :speech_balloon:. Well we have a gift for you:
271

M
Marcia Ramos 已提交
272
:zap: You can use emoji anywhere GFM is supported. :v:
273

M
Marcia Ramos 已提交
274
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.
275

M
Marcia Ramos 已提交
276
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.
277

M
Marcia Ramos 已提交
278
Consult the [Emoji Cheat Sheet](https://www.emojicopy.com) for a list of all supported emoji codes. :thumbsup:
279

M
Marcia Ramos 已提交
280
Most emoji are natively supported on macOS, Windows, iOS, Android and will fallback to image-based emoji where there is lack of support.
281

M
Marcia Ramos 已提交
282
On Linux, you can download [Noto Color Emoji](https://www.google.com/get/noto/help/emoji/) to get full native emoji support.
283

M
Marcia Ramos 已提交
284 285
Ubuntu 18.04 (like many modern Linux distros) has this font installed by default.
```
286

287

288
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"> 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"> to your <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/speech_balloon.png" width="20px" height="20px">. Well we have a gift for you:
289

290
<img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/zap.png" width="20px" height="20px">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">
291

292
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"> 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"> 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"> 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">. People will <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/heart.png" width="20px" height="20px"> you for that.
293

294
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">. 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">. All you need to do is to look up one of the supported codes.
295

296
Consult the [Emoji Cheat Sheet](https://www.emojicopy.com) 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">
297

298 299 300 301 302 303
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.

304
### Special GitLab References
305

306
GFM recognizes special references.
307

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

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

GFM will recognize the following:

314 315 316 317 318
| input                      | references                      |
|:---------------------------|:--------------------------------|
| `@user_name`               | specific user                   |
| `@group_name`              | specific group                  |
| `@all`                     | entire team                     |
319
| `namespace/project>`       | project                         |
320
| `#12345`                   | issue                           |
321 322 323 324 325
| `!123`                     | merge request                   |
| `$123`                     | snippet                         |
| `~123`                     | label by ID                     |
| `~bug`                     | one-word label by name          |
| `~"feature request"`       | multi-word label by name        |
326
| `%123`                     | project milestone by ID         |
327 328 329 330 331 332
| `%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 |
333 334 335 336

GFM also recognizes certain cross-project references:

| input                                   | references              |
337
|:----------------------------------------|:------------------------|
338 339
| `namespace/project#123`                 | issue                   |
| `namespace/project!123`                 | merge request           |
340
| `namespace/project%123`                 | project milestone       |
341 342 343
| `namespace/project$123`                 | snippet                 |
| `namespace/project@9ba12248`            | specific commit         |
| `namespace/project@9ba12248...b19a04f5` | commit range comparison |
344
| `namespace/project~"Some label"`        | issues with given label |
345

346 347 348 349 350 351
It also has a shorthand version to reference other projects from the same namespace:

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

358
### Task Lists
V
Vinnie Okada 已提交
359

360
> If this is not rendered correctly, see
C
Clement Ho 已提交
361
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#task-lists
362

363
You can add task lists to issues, merge requests and comments. To create a task list, add a specially-formatted Markdown list, like so:
V
Vinnie Okada 已提交
364

M
Marcia Ramos 已提交
365
```
366 367 368 369 370
- [x] Completed task
- [ ] Incomplete task
    - [ ] Sub-task 1
    - [x] Sub-task 2
    - [ ] Sub-task 3
V
Vinnie Okada 已提交
371 372
```

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

375 376
Tasks formatted as ordered lists are supported as well:

M
Marcia Ramos 已提交
377
```
378 379 380 381 382 383
1. [x] Completed task
1. [ ] Incomplete task
    1. [ ] Sub-task 1
    1. [x] Sub-task 2
```

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

386
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.
V
Vinnie Okada 已提交
387

388
### Videos
389

390
> If this is not rendered correctly, see
C
Clement Ho 已提交
391
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#videos
392

393 394
Image tags with a video extension are automatically converted to a video player.

395
The valid video extensions are `.mp4`, `.m4v`, `.mov`, `.webm`, and `.ogv`.
396 397 398

    Here's a sample video:

399
    ![Sample Video](img/markdown_video.mp4)
400 401 402

Here's a sample video:

403 404 405 406
<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>
407

408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429
### 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:

430
This math is inline ![alt text](img/math_inline_sup_render_gfm.png).
431 432

This is on a separate line
433

M
Marcia Ramos 已提交
434
<img src="./img/math_inline_sup_render_gfm.png" >
435 436 437 438 439 440

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

441 442 443 444 445 446 447 448 449 450 451
### 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:

B
Brett Walker 已提交
452 453 454 455 456 457 458 459
    `#F00`  
    `#F00A`  
    `#FF0000`  
    `#FF0000AA`  
    `RGB(0,255,0)`  
    `RGB(0%,100%,0%)`  
    `RGBA(0,255,0,0.7)`  
    `HSL(540,70%,50%)`  
460 461
    `HSLA(540,70%,50%,0.7)`

M
Marcia Ramos 已提交
462
Becomes:
463

464
![alt color-inline-colorchip-render-gfm](img/color_inline_colorchip_render_gfm.png)
465 466 467 468 469 470 471

#### Supported formats:

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

472 473
### Mermaid

474 475
> [Introduced](https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/15107) in
GitLab 10.3.
476
>
477 478 479
> If this is not rendered correctly, see
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#mermaid

480
It is possible to generate diagrams and flowcharts from text using [Mermaid][mermaid].
481

482
In order to generate a diagram or flowchart, you should write your text inside the `mermaid` block.
483

484
Example:
485 486 487 488 489 490 491

    ```mermaid
    graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;
492
    ```
493 494 495

Becomes:

496
<img src="./img/mermaid_diagram_render_gfm.png" width="200px" height="400px">
497 498 499

For details see the [Mermaid official page][mermaid].

500
## Standard Markdown
501

502
### Headers
503

M
Marcia Ramos 已提交
504
```
505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520
# H1
## H2
### H3
#### H4
##### H5
###### H6

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

Alt-H1
======

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

521 522
### Header IDs and links

523
All Markdown-rendered headers automatically get IDs, except in comments.
524

525
On hover, a link to those IDs becomes visible to make it easier to copy the link to the header to give it to someone else.
526 527 528

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

529 530 531 532
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.
533
1. If a header with the same ID has already been generated, a unique
534
   incrementing number is appended, starting at 1.
535 536 537 538

For example:

```
539 540 541 542 543
# 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
B
Brett Walker 已提交
544
## This header has 3.5 in it (and parentheses)
545 546
```

547
Would generate the following link IDs:
548

549 550 551
1. `this-header-has-spaces-in-it`
1. `this-header-has-a-in-it`
1. `this-header-has-unicode-in-it-한글`
552
1. `this-header-has-spaces-in-it`
553
1. `this-header-has-spaces-in-it-1`
B
Brett Walker 已提交
554
1. `this-header-has-3-5-in-it-and-parentheses`
555

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

558
### Emphasis
559

560 561
Examples:

M
Marcia Ramos 已提交
562
```
563 564 565 566
Emphasis, aka italics, with *asterisks* or _underscores_.

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

S
Simon Hardt 已提交
567
Combined emphasis with **asterisks and _underscores_**.
568 569 570 571

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

M
Marcia Ramos 已提交
572
Becomes:
573

574 575 576 577 578 579 580 581
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.~~

582
### Lists
583

584 585
Examples:

M
Marcia Ramos 已提交
586
```
587 588
1. First ordered list item
2. Another item
B
Brett Walker 已提交
589
   * Unordered sub-list.
590
1. Actual numbers don't matter, just that it's a number
B
Brett Walker 已提交
591
   1. Ordered sub-list
592 593
4. And another item.

594 595 596 597 598
* Unordered list can use asterisks
- Or minuses
+ Or pluses
```

M
Marcia Ramos 已提交
599
Becomes:
600

601 602
1. First ordered list item
2. Another item
B
Brett Walker 已提交
603
   * Unordered sub-list.
604
1. Actual numbers don't matter, just that it's a number
B
Brett Walker 已提交
605
   1. Ordered sub-list
606 607
4. And another item.

608 609 610 611
* Unordered list can use asterisks
- Or minuses
+ Or pluses

612
If a list item contains multiple paragraphs,
B
Brett Walker 已提交
613
each subsequent paragraph should be indented to the same level as the start of the list item text (_Redcarpet: paragraph should be indented with four spaces._)
614

615 616
Example:

M
Marcia Ramos 已提交
617
```
B
Brett Walker 已提交
618
1. First ordered list item
619

B
Brett Walker 已提交
620 621 622
   Second paragraph of first item.

2. Another item
623 624
```

625 626
Becomes:

627 628
1.  First ordered list item

B
Brett Walker 已提交
629 630
    Paragraph of first item.

631 632
2.  Another item

B
Brett Walker 已提交
633 634
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.
635

636 637
Example:

M
Marcia Ramos 已提交
638
```
639 640
1. First ordered list item

B
Brett Walker 已提交
641 642
  Paragraph of first item.

643 644 645
2. Another item
```

646 647
Becomes:

648 649
1. First ordered list item

B
Brett Walker 已提交
650 651
  Paragraph of first item.

652 653
2. Another item

654
### Links
655

656
There are two ways to create links, inline-style and reference-style.
657 658 659 660 661

    [I'm an inline-style link](https://www.google.com)

    [I'm a reference-style link][Arbitrary case-insensitive reference text]

662
    [I'm a relative reference to a repository file](LICENSE)
663

W
Winnie 已提交
664
    [I am an absolute reference within the repository](/doc/user/markdown.md)
665

W
Winnie 已提交
666
    [I link to the Milestones page](/../milestones)
667 668 669 670 671 672 673 674 675

    [You can use numbers for reference-style link definitions][1]

    Or leave it empty and use the [link text itself][]

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

    [arbitrary case-insensitive reference text]: https://www.mozilla.org
    [1]: http://slashdot.org
676
    [link text itself]: https://www.reddit.com
677

678 679 680 681
>**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)`
682 683
will point the link to `wikis/style` when the link is inside of a wiki markdown file.

684
### Images
685

686 687
Examples:

688 689
    Here's our logo (hover to see the title text):

690
    Inline-style:
691
    ![alt text](img/markdown_logo.png)
692

693
    Reference-style:
694
    ![alt text1][logo]
695

696
    [logo]: img/markdown_logo.png
697

M
Marcia Ramos 已提交
698
Becomes:
699

700
Here's our logo:
701

702
Inline-style:
703

704
![alt text](img/markdown_logo.png)
705

706
Reference-style:
707

708 709
![alt text][logo]

710
[logo]: img/markdown_logo.png
711

712
### Blockquotes
713

714 715
Examples:

M
Marcia Ramos 已提交
716
```
717 718 719 720 721
> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

Quote break.

722
> 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.
723 724
```

M
Marcia Ramos 已提交
725
Becomes:
726

727 728 729 730 731
> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

Quote break.

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

734
### Inline HTML
735

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

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

740 741
Examples:

M
Marcia Ramos 已提交
742
```
743 744 745 746 747 748 749 750 751
<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>
```

M
Marcia Ramos 已提交
752
Becomes:
753

754 755 756 757 758 759 760 761
<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>

762 763 764 765 766 767 768
#### 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>
B
Brett Walker 已提交
769 770

These details <em>will</em> remain <strong>hidden</strong> until expanded.
771 772

<pre><code>PASTE LOGS HERE</code></pre>
B
Brett Walker 已提交
773

774 775 776
</details>
</p>

L
luci 已提交
777
**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.  _Redcarpet does not support Markdown inside these tags.  You can work around this by using HTML, for example you can use `<pre><code>` tags instead of [code fences](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#code-and-syntax-highlighting)._
778 779 780 781 782

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

B
Brett Walker 已提交
783 784 785 786
These details _will_ remain **hidden** until expanded.

    PASTE LOGS HERE

787 788 789
</details>
```

790
### Horizontal Rule
791

792 793
Examples:

794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809
```
Three or more...

---

Hyphens

***

Asterisks

___

Underscores
```

M
Marcia Ramos 已提交
810
Becomes:
811

812 813 814 815 816 817 818 819 820 821 822 823 824 825
Three or more...

---

Hyphens

***

Asterisks

___

Underscores

826
### Line Breaks
827

B
Brett Walker 已提交
828
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.
829 830 831

Here are some things to try out:

832 833
Examples:

834 835 836 837 838 839
```
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...
S
Simon Hardt 已提交
840 841
This line is only separated by a single newline, so it *does not break* and just follows the previous line in the *same paragraph*.

842
This line is also a separate paragraph, and...  
S
Simon Hardt 已提交
843
This line is *on its own line*, because the previous line ends with two spaces. (but still in the *same paragraph*)
844 845

spaces.
846 847
```

M
Marcia Ramos 已提交
848
Becomes:
849

850 851 852 853
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*.

S
Simon Hardt 已提交
854 855 856
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*.

857
This line is also a separate paragraph, and...  
S
Simon Hardt 已提交
858
This line is *on its own line*, because the previous line ends with two spaces. (but still in the *same paragraph*)
859

860 861
spaces.

862
### Tables
863

B
Brett Walker 已提交
864
Tables aren't part of the core Markdown spec, but they are part of GFM.
865

866 867
Example:

868 869 870 871 872 873 874
```
| header 1 | header 2 |
| -------- | -------- |
| cell 1   | cell 2   |
| cell 3   | cell 4   |
```

875
Becomes:
876 877 878 879 880 881

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

B
Brett Walker 已提交
882
**Note:** The row of dashes between the table header and body must have at least three dashes in each column.
883

884 885 886
By including colons in the header row, you can align the text within that column.

Example:
887 888 889 890 891 892 893 894

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

895 896
Becomes:

897 898 899 900 901
| 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       |

902
### Footnotes
B
Ben Bodenmiller 已提交
903

904 905
Example:

B
Ben Bodenmiller 已提交
906
```
907 908
You can add footnotes to your text as follows.[^2]
[^2]: This is my awesome footnote.
B
Ben Bodenmiller 已提交
909
```
910

911 912
Becomes:

913 914
You can add footnotes to your text as follows.[^2]

B
Brett Walker 已提交
915 916 917 918 919 920 921 922 923 924 925 926
### 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>.


927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960
## 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`:

961 962 963
    ```markdown
    [Link to Related Page](./related)
    ```
964 965 966 967

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

968 969 970
    ```markdown
    [Link to Related Page](../main)
    ```
971 972 973 974

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

975 976 977
    ```markdown
    [Link to Related Page](./related.md)
    ```
978 979 980 981

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

982 983 984
    ```markdown
    [Link to Related Page](../main.md)
    ```
985 986 987 988 989 990 991

### Wiki - Root link

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

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

992 993 994
    ```markdown
    [Link to Related Page](/documentation)
    ```
995 996 997

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

998 999 1000 1001
    ```markdown
    [Link to Related Page](/miscellaneous.md)
    ```

1002 1003
## References

1004
- This document leveraged heavily from the [Markdown-Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet).
1005 1006 1007
- 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.
1008

1009 1010 1011
[^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.

C
Clement Ho 已提交
1012
[markdown.md]: https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md
1013
[mermaid]: https://mermaidjs.github.io/ "Mermaid website"
1014
[rouge]: http://rouge.jneen.net/ "Rouge website"
1015
[redcarpet]: https://github.com/vmg/redcarpet "Redcarpet website"
1016 1017
[katex]: https://github.com/Khan/KaTeX "KaTeX website"
[katex-subset]: https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX "Macros supported by KaTeX"
1018
[asciidoctor-manual]: http://asciidoctor.org/docs/user-manual/#activating-stem-support "Asciidoctor user manual"
B
Brett Walker 已提交
1019
[commonmarker]: https://github.com/gjtorikian/commonmarker
1020
[commonmark-spec]: https://spec.commonmark.org/current/