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

3
## GitLab Flavored Markdown (GFM)
4

5
> **Note:**
B
Brett Walker 已提交
6 7
> Not all of the GitLab-specific extensions to Markdown that are described in
> this document currently work on our documentation website.
8
>
B
Brett Walker 已提交
9
> For the best result, we encourage you to check this document out as rendered
10 11
by GitLab: [markdown.md]

12
_GitLab uses (as of 11.1) the [CommonMark Ruby Library][commonmarker] for Markdown processing of all new issues, merge requests, comments, and other Markdown content in the GitLab system.  Previous content, wiki pages and Markdown files (`.md`) in the repositories are still processed using the [Redcarpet Ruby library][redcarpet]._
B
Brett Walker 已提交
13 14

_Where there are significant differences, we will try to call them out in this document._
15

16
GitLab uses "GitLab Flavored Markdown" (GFM). It extends the 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/).
17

18
You can use GFM in the following areas:
19

20 21 22 23
- comments
- issues
- merge requests
- milestones
24
- snippets (the snippet must be named with a `.md` extension)
25
- wiki pages (currently only rendered by Redcarpet)
B
Brett Walker 已提交
26
- markdown documents inside the repository (currently only rendered by Redcarpet)
27

28 29
You can also use other rich text files in GitLab. You might have to install a
dependency to do so. Please see the [github-markup gem readme](https://github.com/gitlabhq/markup#markups) for more information.
30

31
### Newlines
32

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

36
GFM honors the markdown specification in how [paragraphs and line breaks are handled](https://daringfireball.net/projects/markdown/syntax#p).
37

S
Sytse Sijbrandij 已提交
38
A paragraph is simply one or more consecutive lines of text, separated by one or more blank lines.
39
Line-breaks, or soft returns, are rendered if you end a line with two or more spaces:
40

41 42 43
[//]: # (Do *NOT* remove the two ending whitespaces in the following line.)
[//]: # (They are needed for the Markdown text to render correctly.)
    Roses are red [followed by two or more spaces]  
44 45
    Violets are blue

46 47
    Sugar is sweet

48 49 50
[//]: # (Do *NOT* remove the two ending whitespaces in the following line.)
[//]: # (They are needed for the Markdown text to render correctly.)
Roses are red  
51
Violets are blue
52

53 54
Sugar is sweet

55
### Multiple underscores in words
56

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

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:
61 62

    perform_complicated_task
63

64 65
    do_this_and_do_that_and_another_thing

S
Sytse Sijbrandij 已提交
66
perform_complicated_task
67

68 69
do_this_and_do_that_and_another_thing

70
### URL auto-linking
71

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

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

77
    * https://www.google.com
78 79 80 81 82 83
    * https://google.com/
    * ftp://ftp.us.debian.org/debian/
    * smb://foo/bar/baz
    * irc://irc.freenode.net/gitlab
    * http://localhost:3000

84
* https://www.google.com
85 86 87 88 89
* https://google.com/
* ftp://ftp.us.debian.org/debian/
* smb://foo/bar/baz
* irc://irc.freenode.net/gitlab
* http://localhost:3000
90

91
### Multiline Blockquote
92

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

96
On top of standard Markdown [blockquotes](#blockquotes), which require prepending `>` to quoted lines,
97
GFM supports multiline blockquotes fenced by <code>>>></code>:
98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124

```no-highlight
>>>
If you paste a message from somewhere else

that

spans

multiple lines,

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

>>>
If you paste a message from somewhere else

that

spans

multiple lines,

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

125
### Code and Syntax Highlighting
126

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

130 131
_GitLab uses the [Rouge Ruby library][rouge] for syntax highlighting. For a
list of supported languages visit the Rouge website._
132

133 134 135
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:
136 137 138 139 140 141 142 143 144 145 146 147 148

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

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

Example:

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

150 151 152 153 154 155
    ```python
    def function():
        #indenting works just fine in the fenced code block
        s = "Python syntax highlighting"
        print s
    ```
156

157 158 159 160 161 162 163
    ```ruby
    require 'redcarpet'
    markdown = Redcarpet.new("Hello World!")
    puts markdown.to_html
    ```

    ```
164
    No language indicated, so no syntax highlighting.
165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194
    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>.
```

195
### Inline Diff
196

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

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

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

204 205 206 207 208 209 210 211 212
Examples:

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

213 214
However the wrapping tags cannot be mixed as such:

215
```
216 217 218 219
- {+ additions +]
- [+ additions +}
- {- deletions -]
- [- deletions -}
220
```
221

222
### Emoji
223

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

227
	Sometimes you want to :monkey: around a bit and add some :star2: to your :speech_balloon:. Well we have a gift for you:
228

229
	:zap: You can use emoji anywhere GFM is supported. :v:
230

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

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

N
Norike Abe 已提交
235
	Consult the [Emoji Cheat Sheet](https://www.emojicopy.com) for a list of all supported emoji codes. :thumbsup:
236

237 238 239 240 241 242
	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.

243

244
Sometimes you want to :monkey: around a bit and add some :star2: to your :speech_balloon:. Well we have a gift for you:
245

246
:zap: You can use emoji anywhere GFM is supported. :v:
247

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

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

N
Norike Abe 已提交
252
Consult the [Emoji Cheat Sheet](https://www.emojicopy.com) for a list of all supported emoji codes. :thumbsup:
253

254 255 256 257 258 259 260
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.


261

262
### Special GitLab References
263

264
GFM recognizes special references.
265

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

268 269 270 271
GFM will turn that reference into a link so you can navigate between them easily.

GFM will recognize the following:

272 273 274 275 276
| input                      | references                      |
|:---------------------------|:--------------------------------|
| `@user_name`               | specific user                   |
| `@group_name`              | specific group                  |
| `@all`                     | entire team                     |
277
| `namespace/project>`       | project                         |
278
| `#12345`                   | issue                           |
279 280 281 282 283
| `!123`                     | merge request                   |
| `$123`                     | snippet                         |
| `~123`                     | label by ID                     |
| `~bug`                     | one-word label by name          |
| `~"feature request"`       | multi-word label by name        |
284
| `%123`                     | project milestone by ID         |
285 286 287 288 289 290
| `%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 |
291 292 293 294

GFM also recognizes certain cross-project references:

| input                                   | references              |
295
|:----------------------------------------|:------------------------|
296 297
| `namespace/project#123`                 | issue                   |
| `namespace/project!123`                 | merge request           |
298
| `namespace/project%123`                 | project milestone       |
299 300 301
| `namespace/project$123`                 | snippet                 |
| `namespace/project@9ba12248`            | specific commit         |
| `namespace/project@9ba12248...b19a04f5` | commit range comparison |
302
| `namespace/project~"Some label"`        | issues with given label |
303

304 305 306 307 308 309
It also has a shorthand version to reference other projects from the same namespace:

| input                         | references              |
|:------------------------------|:------------------------|
| `project#123`                 | issue                   |
| `project!123`                 | merge request           |
310
| `project%123`                 | project milestone       |
311 312 313 314 315
| `project$123`                 | snippet                 |
| `project@9ba12248`            | specific commit         |
| `project@9ba12248...b19a04f5` | commit range comparison |
| `project~"Some label"`        | issues with given label |

316
### Task Lists
V
Vinnie Okada 已提交
317

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

321
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 已提交
322 323

```no-highlight
324 325 326 327 328
- [x] Completed task
- [ ] Incomplete task
    - [ ] Sub-task 1
    - [x] Sub-task 2
    - [ ] Sub-task 3
V
Vinnie Okada 已提交
329 330
```

331 332 333 334 335 336
- [x] Completed task
- [ ] Incomplete task
    - [ ] Sub-task 1
    - [x] Sub-task 2
    - [ ] Sub-task 3

337 338 339 340 341 342 343 344 345 346 347 348 349 350
Tasks formatted as ordered lists are supported as well:

```no-highlight
1. [x] Completed task
1. [ ] Incomplete task
    1. [ ] Sub-task 1
    1. [x] Sub-task 2
```

1. [x] Completed task
1. [ ] Incomplete task
    1. [ ] Sub-task 1
    1. [x] Sub-task 2

351
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 已提交
352

353
### Videos
354

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

358 359
Image tags with a video extension are automatically converted to a video player.

360
The valid video extensions are `.mp4`, `.m4v`, `.mov`, `.webm`, and `.ogv`.
361 362 363

    Here's a sample video:

364
    ![Sample Video](img/markdown_video.mp4)
365 366 367

Here's a sample video:

368
![Sample Video](img/markdown_video.mp4)
369

370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403
### 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:

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

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

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

404 405 406 407 408 409 410 411 412 413 414
### 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 已提交
415 416 417 418 419 420 421 422
    `#F00`  
    `#F00A`  
    `#FF0000`  
    `#FF0000AA`  
    `RGB(0,255,0)`  
    `RGB(0%,100%,0%)`  
    `RGBA(0,255,0,0.7)`  
    `HSL(540,70%,50%)`  
423 424
    `HSLA(540,70%,50%,0.7)`

425
Become:
426 427 428 429 430 431 432 433 434

`#F00`  
`#F00A`  
`#FF0000`  
`#FF0000AA`  
`RGB(0,255,0)`  
`RGB(0%,100%,0%)`  
`RGBA(0,255,0,0.7)`  
`HSL(540,70%,50%)`  
B
Brett Walker 已提交
435
`HSLA(540,70%,50%,0.7)`
436 437 438 439 440 441 442

#### Supported formats:

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

443 444
### Mermaid

445 446 447
> [Introduced](https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/15107) in
GitLab 10.3.

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

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

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

455
Example:
456 457 458 459 460 461 462

    ```mermaid
    graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;
463
    ```
464 465 466 467 468 469 470 471 472

Becomes:

```mermaid
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
473
```
474 475 476

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

477
## Standard Markdown
478

479
### Headers
480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497

```no-highlight
# H1
## H2
### H3
#### H4
##### H5
###### H6

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

Alt-H1
======

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

498 499
### Header IDs and links

500
All Markdown-rendered headers automatically get IDs, except in comments.
501

502
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.
503 504 505

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

506 507 508 509
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.
510
1. If a header with the same ID has already been generated, a unique
511
   incrementing number is appended, starting at 1.
512 513 514 515

For example:

```
516 517 518 519 520
# 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 已提交
521
## This header has 3.5 in it (and parentheses)
522 523
```

524
Would generate the following link IDs:
525

526 527 528
1. `this-header-has-spaces-in-it`
1. `this-header-has-a-in-it`
1. `this-header-has-unicode-in-it-한글`
529
1. `this-header-has-spaces-in-it`
530
1. `this-header-has-spaces-in-it-1`
B
Brett Walker 已提交
531
1. `this-header-has-3-5-in-it-and-parentheses`
532

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

535
### Emphasis
536

537 538
Examples:

539 540 541 542 543
```no-highlight
Emphasis, aka italics, with *asterisks* or _underscores_.

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

S
Simon Hardt 已提交
544
Combined emphasis with **asterisks and _underscores_**.
545 546 547 548

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

549 550
Become:

551 552 553 554 555 556 557 558
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.~~

559
### Lists
560

561 562
Examples:

563 564 565
```no-highlight
1. First ordered list item
2. Another item
B
Brett Walker 已提交
566
   * Unordered sub-list.
567
1. Actual numbers don't matter, just that it's a number
B
Brett Walker 已提交
568
   1. Ordered sub-list
569 570
4. And another item.

571 572 573 574 575
* Unordered list can use asterisks
- Or minuses
+ Or pluses
```

576 577
Become:

578 579
1. First ordered list item
2. Another item
B
Brett Walker 已提交
580
   * Unordered sub-list.
581
1. Actual numbers don't matter, just that it's a number
B
Brett Walker 已提交
582
   1. Ordered sub-list
583 584
4. And another item.

585 586 587 588
* Unordered list can use asterisks
- Or minuses
+ Or pluses

589
If a list item contains multiple paragraphs,
B
Brett Walker 已提交
590
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._)
591

592 593
Example:

594
```no-highlight
B
Brett Walker 已提交
595
1. First ordered list item
596

B
Brett Walker 已提交
597 598 599
   Second paragraph of first item.

2. Another item
600 601
```

602 603
Becomes:

604 605
1.  First ordered list item

B
Brett Walker 已提交
606 607
    Paragraph of first item.

608 609
2.  Another item

B
Brett Walker 已提交
610 611
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.
612

613 614
Example:

615 616 617
```no-highlight
1. First ordered list item

B
Brett Walker 已提交
618 619
  Paragraph of first item.

620 621 622
2. Another item
```

623 624
Becomes:

625 626
1. First ordered list item

B
Brett Walker 已提交
627 628
  Paragraph of first item.

629 630
2. Another item

631
### Links
632

633
There are two ways to create links, inline-style and reference-style.
634 635 636 637 638

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

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

639
    [I'm a relative reference to a repository file](LICENSE)
640

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

W
Winnie 已提交
643
    [I link to the Milestones page](/../milestones)
644 645 646 647 648 649 650 651 652

    [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
653
    [link text itself]: https://www.reddit.com
654

655 656 657 658
>**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)`
659 660
will point the link to `wikis/style` when the link is inside of a wiki markdown file.

661
### Images
662

663 664
Examples:

665 666
    Here's our logo (hover to see the title text):

667
    Inline-style:
668
    ![alt text](img/markdown_logo.png)
669

670
    Reference-style:
671
    ![alt text1][logo]
672

673
    [logo]: img/markdown_logo.png
674

675 676
Become:

677
Here's our logo:
678

679
Inline-style:
680

681
![alt text](img/markdown_logo.png)
682

683
Reference-style:
684

685 686
![alt text][logo]

687
[logo]: img/markdown_logo.png
688

689
### Blockquotes
690

691 692
Examples:

693 694 695 696 697 698
```no-highlight
> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

Quote break.

699
> 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.
700 701
```

702 703
Become:

704 705 706 707 708
> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

Quote break.

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

711
### Inline HTML
712

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

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

717 718
Examples:

719 720 721 722 723 724 725 726 727 728
```no-highlight
<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>
```

729 730
Become:

731 732 733 734 735 736 737 738
<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>

739 740 741 742 743 744 745
#### 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 已提交
746 747

These details <em>will</em> remain <strong>hidden</strong> until expanded.
748 749

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

751 752 753
</details>
</p>

B
Brett Walker 已提交
754
**Note:** Markdown inside these tags is supported, as long as you have a blank link 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)._
755 756 757 758 759

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

B
Brett Walker 已提交
760 761 762 763
These details _will_ remain **hidden** until expanded.

    PASTE LOGS HERE

764 765 766
</details>
```

767
### Horizontal Rule
768

769 770
Examples:

771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786
```
Three or more...

---

Hyphens

***

Asterisks

___

Underscores
```

787 788
Become:

789 790 791 792 793 794 795 796 797 798 799 800 801 802
Three or more...

---

Hyphens

***

Asterisks

___

Underscores

803
### Line Breaks
804

B
Brett Walker 已提交
805
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.
806 807 808

Here are some things to try out:

809 810
Examples:

811 812 813 814 815 816
```
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 已提交
817 818
This line is only separated by a single newline, so it *does not break* and just follows the previous line in the *same paragraph*.

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

spaces.
823 824
```

825 826
Become:

827 828 829 830
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 已提交
831 832 833
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*.

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

837 838
spaces.

839
### Tables
840

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

843 844
Example:

845 846 847 848 849 850 851
```
| header 1 | header 2 |
| -------- | -------- |
| cell 1   | cell 2   |
| cell 3   | cell 4   |
```

852
Becomes:
853 854 855 856 857 858

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

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

861 862 863
By including colons in the header row, you can align the text within that column.

Example:
864 865 866 867 868 869 870 871

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

872 873
Becomes:

874 875 876 877 878
| 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       |

879
### Footnotes
B
Ben Bodenmiller 已提交
880

881 882
Example:

B
Ben Bodenmiller 已提交
883
```
884 885
You can add footnotes to your text as follows.[^2]
[^2]: This is my awesome footnote.
B
Ben Bodenmiller 已提交
886
```
887

888 889
Becomes:

890 891
You can add footnotes to your text as follows.[^2]

B
Brett Walker 已提交
892 893 894 895 896 897 898 899 900 901 902 903
### 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>.


904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937
## 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`:

938 939 940
    ```markdown
    [Link to Related Page](./related)
    ```
941 942 943 944

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

945 946 947
    ```markdown
    [Link to Related Page](../main)
    ```
948 949 950 951

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

952 953 954
    ```markdown
    [Link to Related Page](./related.md)
    ```
955 956 957 958

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

959 960 961
    ```markdown
    [Link to Related Page](../main.md)
    ```
962 963 964 965 966 967 968

### Wiki - Root link

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

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

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

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

975 976 977 978
    ```markdown
    [Link to Related Page](/miscellaneous.md)
    ```

979 980
## References

981
- This document leveraged heavily from the [Markdown-Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet).
982
- The [Markdown Syntax Guide](https://daringfireball.net/projects/markdown/syntax) at Daring Fireball is an excellent resource for a detailed explanation of standard markdown.
983
- [Dillinger.io](http://dillinger.io) is a handy tool for testing standard markdown.
984

985 986 987
[^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 已提交
988
[markdown.md]: https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md
989
[mermaid]: https://mermaidjs.github.io/ "Mermaid website"
990
[rouge]: http://rouge.jneen.net/ "Rouge website"
991
[redcarpet]: https://github.com/vmg/redcarpet "Redcarpet website"
992 993
[katex]: https://github.com/Khan/KaTeX "KaTeX website"
[katex-subset]: https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX "Macros supported by KaTeX"
994
[asciidoctor-manual]: http://asciidoctor.org/docs/user-manual/#activating-stem-support "Asciidoctor user manual"
B
Brett Walker 已提交
995
[commonmarker]: https://github.com/gjtorikian/commonmarker