1--- 2stage: Create 3group: Source Code 4info: "To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/engineering/ux/technical-writing/#assignments" 5type: reference, howto 6--- 7 8# GitLab Flavored Markdown **(FREE)** 9 10GitLab automatically renders Markdown content. For example, when you add a comment to an issue, 11you type the text in the Markdown language. When you save the issue, the text is rendered 12with a set of styles. These styles are described on this page. 13 14For example, in Markdown, an unordered list looks like this: 15 16```markdown 17- Cat 18- Dog 19- Turtle 20``` 21 22When this list is rendered, it looks like this: 23 24- Cat 25- Dog 26- Turtle 27 28These styles are **valid for GitLab only**. The [GitLab documentation website](https://docs.gitlab.com) 29and the [main GitLab website](https://about.gitlab.com) use [Kramdown](https://kramdown.gettalong.org) instead. 30 31You should not view this page in the documentation, but instead [view these styles as they appear on GitLab](https://gitlab.com/gitlab-org/gitlab/-/blob/master/doc/user/markdown.md). 32 33GitLab Flavored Markdown extends the [CommonMark specification](https://spec.commonmark.org/current/). 34It was inspired by [GitHub Flavored Markdown](https://docs.github.com/en/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax). 35 36## Where you can use GitLab Flavored Markdown 37 38You can use GitLab Flavored Markdown in the following areas: 39 40- Comments 41- Issues 42- Merge requests 43- Milestones 44- Snippets (the snippet must be named with a `.md` extension) 45- Wiki pages 46- Markdown documents inside repositories 47- Epics 48 49You can also use other rich text files in GitLab. You might have to install a dependency 50to do so. For more information, see the [`gitlab-markup` gem project](https://gitlab.com/gitlab-org/gitlab-markup). 51 52### Differences between GitLab Flavored Markdown and standard Markdown 53 54GitLab uses standard CommonMark formatting. However, GitLab Flavored Markdown 55extends standard Markdown with features made specifically for GitLab. 56 57Features not found in standard Markdown: 58 59- [Color chips written in `HEX`, `RGB` or `HSL`](#colors) 60- [Diagrams and flowcharts](#diagrams-and-flowcharts) 61- [Emoji](#emojis) 62- [Front matter](#front-matter) 63- [Inline diffs](#inline-diff) 64- [Math equations and symbols written in LaTeX](#math) 65- [Task Lists](#task-lists) 66- [Table of Contents](#table-of-contents) 67- [Wiki specific Markdown](#wiki-specific-markdown) 68 69Features [extended from standard Markdown](#features-extended-from-standard-markdown): 70 71| Standard Markdown | Extended Markdown in GitLab | 72| ------------------------------------- | ------------------------- | 73| [blockquotes](#blockquotes) | [multi-line blockquotes](#multiline-blockquote) | 74| [code blocks](#code-spans-and-blocks) | [colored code and syntax highlighting](#colored-code-and-syntax-highlighting) | 75| [emphasis](#emphasis) | [multiple underscores in words](#multiple-underscores-in-words-and-mid-word-emphasis) 76| [headers](#headers) | [linkable Header IDs](#header-ids-and-links) | 77| [images](#images) | [embedded videos](#videos) and [audio](#audio) | 78| [line breaks](#line-breaks) | [more line break control](#newlines) | 79| [links](#links) | [automatically linking URLs](#url-auto-linking) | 80 81## Features not found in standard Markdown 82 83The following features are not found in standard Markdown. 84 85### Colors 86 87[View this topic in GitLab](https://gitlab.com/gitlab-org/gitlab/-/blob/master/doc/user/markdown.md#colors). 88 89You can write a color in the formats: `HEX`, `RGB`, or `HSL`. 90 91- `HEX`: `` `#RGB[A]` `` or `` `#RRGGBB[AA]` `` 92- `RGB`: `` `RGB[A](R, G, B[, A])` `` 93- `HSL`: `` `HSL[A](H, S, L[, A])` `` 94 95Named colors are not supported. 96 97Colors in backticks are followed by a color indicator: 98 99```markdown 100- `#F00` 101- `#F00A` 102- `#FF0000` 103- `#FF0000AA` 104- `RGB(0,255,0)` 105- `RGB(0%,100%,0%)` 106- `RGBA(0,255,0,0.3)` 107- `HSL(540,70%,50%)` 108- `HSLA(540,70%,50%,0.3)` 109``` 110 111- `#F00` 112- `#F00A` 113- `#FF0000` 114- `#FF0000AA` 115- `RGB(0,255,0)` 116- `RGB(0%,100%,0%)` 117- `RGBA(0,255,0,0.3)` 118- `HSL(540,70%,50%)` 119- `HSLA(540,70%,50%,0.3)` 120 121### Diagrams and flowcharts 122 123You can generate diagrams and flowcharts from text by using [Mermaid](https://mermaidjs.github.io/) or [PlantUML](https://plantuml.com). 124You can also use [Kroki](https://kroki.io) to create a wide variety of diagrams. 125 126#### Mermaid 127 128Visit the [official page](https://mermaidjs.github.io/) for more details. The 129[Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/) helps you 130learn Mermaid and debug issues in your Mermaid code. Use it to identify and resolve 131issues in your diagrams. 132 133To generate a diagram or flowchart, write your text inside the `mermaid` block: 134 135````markdown 136```mermaid 137graph TD; 138 A-->B; 139 A-->C; 140 B-->D; 141 C-->D; 142``` 143```` 144 145```mermaid 146graph TD; 147 A-->B; 148 A-->C; 149 B-->D; 150 C-->D; 151``` 152 153You can also include subgraphs: 154 155````markdown 156```mermaid 157graph TB 158 159 SubGraph1 --> SubGraph1Flow 160 subgraph "SubGraph 1 Flow" 161 SubGraph1Flow(SubNode 1) 162 SubGraph1Flow -- Choice1 --> DoChoice1 163 SubGraph1Flow -- Choice2 --> DoChoice2 164 end 165 166 subgraph "Main Graph" 167 Node1[Node 1] --> Node2[Node 2] 168 Node2 --> SubGraph1[Jump to SubGraph1] 169 SubGraph1 --> FinalThing[Final Thing] 170end 171``` 172```` 173 174```mermaid 175graph TB 176 177 SubGraph1 --> SubGraph1Flow 178 subgraph "SubGraph 1 Flow" 179 SubGraph1Flow(SubNode 1) 180 SubGraph1Flow -- Choice1 --> DoChoice1 181 SubGraph1Flow -- Choice2 --> DoChoice2 182 end 183 184 subgraph "Main Graph" 185 Node1[Node 1] --> Node2[Node 2] 186 Node2 --> SubGraph1[Jump to SubGraph1] 187 SubGraph1 --> FinalThing[Final Thing] 188end 189``` 190 191#### PlantUML 192 193To make PlantUML available in GitLab, a GitLab administrator must enable it. For more information, see the 194[PlantUML & GitLab](../administration/integration/plantuml.md) page. 195 196#### Kroki 197 198To make Kroki available in GitLab, a GitLab administrator must enable it. 199For more information, see the [Kroki integration](../administration/integration/kroki.md) page. 200 201### Emojis 202 203[View this topic in GitLab](https://gitlab.com/gitlab-org/gitlab/-/blob/master/doc/user/markdown.md#emojis). 204 205```markdown 206Sometimes you want to :monkey: around a bit and add some :star2: to your :speech_balloon:. Well we have a gift for you: 207 208:zap: You can use emoji anywhere GitLab Flavored Markdown is supported. :v: 209 210You 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 :heart: you for that. 211 212If you're new to this, don't be :fearful:. You can join the emoji :family:. Just look up one of the supported codes. 213 214Consult the [Emoji Cheat Sheet](https://www.emojicopy.com) for a list of all supported emoji codes. :thumbsup: 215``` 216 217Sometimes you want to <img src="https://gitlab.com/gitlab-org/gitlab-foss/raw/master/public/-/emojis/2/monkey.png" width="20px" height="20px" style="display:inline;margin:0;border: 0"> around a bit and add some <img src="https://gitlab.com/gitlab-org/gitlab-foss/raw/master/public/-/emojis/2/star2.png" width="20px" height="20px" style="display:inline;margin:0;border: 0"> to your <img src="https://gitlab.com/gitlab-org/gitlab-foss/raw/master/public/-/emojis/2/speech_balloon.png" width="20px" height="20px" style="display:inline;margin:0;border: 0">. Well we have a gift for you: 218 219<img src="https://gitlab.com/gitlab-org/gitlab-foss/raw/master/public/-/emojis/2/zap.png" width="20px" height="20px" style="display:inline;margin:0;border: 0">You can use emoji anywhere GitLab Flavored Markdown is supported. <img src="https://gitlab.com/gitlab-org/gitlab-foss/raw/master/public/-/emojis/2/v.png" width="20px" height="20px" style="display:inline;margin:0;border: 0"> 220 221You can use it to point out a<img src="https://gitlab.com/gitlab-org/gitlab-foss/raw/master/public/-/emojis/2/bug.png" width="20px" height="20px" style="display:inline;margin:0;border: 0"> or warn about <img src="https://gitlab.com/gitlab-org/gitlab-foss/raw/master/public/-/emojis/2/speak_no_evil.png" width="20px" height="20px" style="display:inline;margin:0;border: 0"> patches. If someone improves your really <img src="https://gitlab.com/gitlab-org/gitlab-foss/raw/master/public/-/emojis/2/snail.png" width="20px" height="20px" style="display:inline;margin:0;border: 0"> code, send them some <img src="https://gitlab.com/gitlab-org/gitlab-foss/raw/master/public/-/emojis/2/birthday.png" width="20px" height="20px" style="display:inline;margin:0;border: 0">. People <img src="https://gitlab.com/gitlab-org/gitlab-foss/raw/master/public/-/emojis/2/heart.png" width="20px" height="20px" style="display:inline;margin:0;border: 0"> you for that. 222 223If you're new to this, don't be <img src="https://gitlab.com/gitlab-org/gitlab-foss/raw/master/public/-/emojis/2/fearful.png" width="20px" height="20px" style="display:inline;margin:0;border: 0">. You can join the emoji <img src="https://gitlab.com/gitlab-org/gitlab-foss/raw/master/public/-/emojis/2/family.png" width="20px" height="20px" style="display:inline;margin:0;border: 0">. Just look up one of the supported codes. 224 225Consult 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-foss/raw/master/public/-/emojis/2/thumbsup.png" width="20px" height="20px" style="display:inline;margin:0;border: 0"> 226 227#### Emojis and your operating system 228 229The previous emoji example uses hard-coded images. Rendered emojis 230in GitLab may be different depending on the OS and browser used. 231 232Most emojis are natively supported on macOS, Windows, iOS, Android, and fall back on image-based 233emojis where there is no support. 234 235<!-- vale gitlab.Spelling = NO --> 236 237On Linux, you can download [Noto Color Emoji](https://github.com/googlefonts/noto-emoji) 238to get full native emoji support. Ubuntu 18.04 (like many modern Linux distributions) has 239this font installed by default. 240 241<!-- vale gitlab.Spelling = YES --> 242 243### Front matter 244 245Front matter is metadata included at the beginning of a Markdown document, preceding 246the content. This data can be used by static site generators like [Jekyll](https://jekyllrb.com/docs/front-matter/), 247[Hugo](https://gohugo.io/content-management/front-matter/), and many other applications. 248 249When you view a Markdown file rendered by GitLab, front matter is displayed as-is, 250in a box at the top of the document. The HTML content displays after the front matter. To view an example, 251you can toggle between the source and rendered version of a 252[GitLab documentation file](https://gitlab.com/gitlab-org/gitlab/-/blob/master/doc/index.md). 253 254In GitLab, front matter is used only in Markdown files and wiki pages, not the other 255places where Markdown formatting is supported. It must be at the very top of the document 256and must be between delimiters. 257 258The following delimiters are supported: 259 260- YAML (`---`): 261 262 ```yaml 263 --- 264 title: About Front Matter 265 example: 266 language: yaml 267 --- 268 ``` 269 270- TOML (`+++`): 271 272 ```toml 273 +++ 274 title = "About Front Matter" 275 [example] 276 language = "toml" 277 +++ 278 ``` 279 280- JSON (`;;;`): 281 282 ```json 283 ;;; 284 { 285 "title": "About Front Matter" 286 "example": { 287 "language": "json" 288 } 289 } 290 ;;; 291 ``` 292 293Other languages are supported by adding a specifier to any of the existing 294delimiters. For example: 295 296```php 297---php 298$title = "About Front Matter"; 299$example = array( 300 'language' => "php", 301); 302--- 303``` 304 305### Inline diff 306 307[View this topic in GitLab](https://gitlab.com/gitlab-org/gitlab/-/blob/master/doc/user/markdown.md#inline-diff). 308 309With inline diff tags, you can display `{+ additions +}` or `[- deletions -]`. 310 311The wrapping tags can be either curly braces or square brackets: 312 313```markdown 314- {+ addition 1 +} 315- [+ addition 2 +] 316- {- deletion 3 -} 317- [- deletion 4 -] 318``` 319 320![Inline diff as rendered by the GitLab interface](img/inline_diff_01_v13_3.png) 321 322--- 323 324However, you cannot mix the wrapping tags: 325 326```markdown 327- {+ addition +] 328- [+ addition +} 329- {- deletion -] 330- [- deletion -} 331``` 332 333If your diff includes words in `` `code` `` font, make sure to escape each backtick `` ` `` with a 334backslash `\`. Otherwise the diff highlight does not render correctly: 335 336```markdown 337- {+ Just regular text +} 338- {+ Text with `backticks` inside +} 339- {+ Text with escaped \`backticks\` inside +} 340``` 341 342![Inline diff with mixed formatting, as rendered by the GitLab interface](img/inline_diff_02_v13_3.png) 343 344### Math 345 346[View this topic in GitLab](https://gitlab.com/gitlab-org/gitlab/-/blob/master/doc/user/markdown.md#math). 347 348Math written in LaTeX syntax is rendered with [KaTeX](https://github.com/KaTeX/KaTeX). 349 350Math written between dollar signs `$` is rendered inline with the text. Math written 351in a [code block](#code-spans-and-blocks) with the language declared as `math` is rendered 352on a separate line: 353 354````markdown 355This math is inline: $`a^2+b^2=c^2`$. 356 357This math is on a separate line: 358 359```math 360a^2+b^2=c^2 361``` 362```` 363 364This math is inline: $`a^2+b^2=c^2`$. 365 366This math is on a separate line: 367 368```math 369a^2+b^2=c^2 370``` 371 372_KaTeX only supports a [subset](https://katex.org/docs/supported.html) of LaTeX._ 373 374This syntax also works for the Asciidoctor `:stem: latexmath`. For details, see 375the [Asciidoctor user manual](https://asciidoctor.org/docs/user-manual/#activating-stem-support). 376 377### Task lists 378 379[View this topic in GitLab](https://gitlab.com/gitlab-org/gitlab/-/blob/master/doc/user/markdown.md#task-lists). 380 381You can add task lists anywhere Markdown is supported. 382 383- In issues, merge requests, and comments, you can click to select the boxes. 384- In all other places, you cannot click to select the boxes. You must edit the Markdown manually 385 by adding or removing an `x` in the brackets. 386 387To create a task list, follow the format of an ordered or unordered list: 388 389```markdown 390- [x] Completed task 391- [ ] Incomplete task 392 - [ ] Sub-task 1 393 - [x] Sub-task 2 394 - [ ] Sub-task 3 395 3961. [x] Completed task 3971. [ ] Incomplete task 398 1. [ ] Sub-task 1 399 1. [x] Sub-task 2 400``` 401 402![Task list as rendered by GitLab](img/completed_tasks_v13_3.png) 403 404### Table of contents 405 406A table of contents is an unordered list that links to subheadings in the document. 407You can add a table of contents to issues and merge requests, but you can't add one 408to notes or comments. Add either the `[[_TOC_]]` or `[TOC]` tag on its own line 409to the **Description** field of any of the supported content types: 410 411- Markdown files. 412- Wiki pages. 413- Issues. 414- Merge requests. 415 416```markdown 417This sentence introduces my wiki page. 418 419[[_TOC_]] 420 421## My first heading 422 423First section content. 424 425## My second heading 426 427Second section content. 428``` 429 430![Preview of an auto-generated table of contents in a Wiki](img/markdown_toc_preview_v12_9.png) 431 432### Wiki-specific Markdown 433 434The following topics show how links inside wikis behave. 435 436#### Wiki - direct page link 437 438A direct page link includes the slug for a page that points to that page, 439at the base level of the wiki. 440 441This example links to a `documentation` page at the root of your wiki: 442 443```markdown 444[Link to Documentation](documentation) 445``` 446 447#### Wiki - direct file link 448 449A direct file link points to a file extension for a file, relative to the current page. 450 451If the following example is on a page at `<your_wiki>/documentation/related`, 452it links to `<your_wiki>/documentation/file.md`: 453 454```markdown 455[Link to File](file.md) 456``` 457 458#### Wiki - hierarchical link 459 460A hierarchical link can be constructed relative to the current wiki page by using `./<page>`, 461`../<page>`, and so on. 462 463If this example is on a page at `<your_wiki>/documentation/main`, 464it links to `<your_wiki>/documentation/related`: 465 466```markdown 467[Link to Related Page](related) 468``` 469 470If this example is on a page at `<your_wiki>/documentation/related/content`, 471it links to `<your_wiki>/documentation/main`: 472 473```markdown 474[Link to Related Page](../main) 475``` 476 477If this example is on a page at `<your_wiki>/documentation/main`, 478it links to `<your_wiki>/documentation/related.md`: 479 480```markdown 481[Link to Related Page](related.md) 482``` 483 484If this example is on a page at `<your_wiki>/documentation/related/content`, 485it links to `<your_wiki>/documentation/main.md`: 486 487```markdown 488[Link to Related Page](../main.md) 489``` 490 491#### Wiki - root link 492 493A root link starts with a `/` and is relative to the wiki root. 494 495This example links to `<wiki_root>/documentation`: 496 497```markdown 498[Link to Related Page](/documentation) 499``` 500 501This example links to `<wiki_root>/miscellaneous.md`: 502 503```markdown 504[Link to Related Page](/miscellaneous.md) 505``` 506 507## GitLab-specific references 508 509GitLab Flavored Markdown renders GitLab-specific references. For example, you can reference 510an issue, a commit, a team member, or even an entire project team. GitLab Flavored Markdown turns 511that reference into a link so you can navigate between them. All references to projects should use the 512**project slug** rather than the project name. 513 514Additionally, GitLab Flavored Markdown recognizes certain cross-project references and also has a shorthand 515version to reference other projects from the same namespace. 516 517GitLab Flavored Markdown recognizes the following: 518 519| references | input | cross-project reference | shortcut inside same namespace | 520| :--------------------------------------------------- | :---------------------------- | :----------------------------------------- | :------------------------------- | 521| specific user | `@user_name` | | | 522| specific group | `@group_name` | | | 523| entire team | `@all` | | | 524| project | `namespace/project>` | | | 525| issue | ``#123`` | `namespace/project#123` | `project#123` | 526| merge request | `!123` | `namespace/project!123` | `project!123` | 527| snippet | `$123` | `namespace/project$123` | `project$123` | 528| [epic](group/epics/index.md) | `&123` | `group1/subgroup&123` | | 529| vulnerability **(ULTIMATE)** <sup>1</sup> | `[vulnerability:123]` | `[vulnerability:namespace/project/123]` | `[vulnerability:project/123]` | 530| feature flag | `[feature_flag:123]` | `[feature_flag:namespace/project/123]` | `[feature_flag:project/123]` | 531| label by ID | `~123` | `namespace/project~123` | `project~123` | 532| one-word label by name | `~bug` | `namespace/project~bug` | `project~bug` | 533| multi-word label by name | `~"feature request"` | `namespace/project~"feature request"` | `project~"feature request"` | 534| scoped label by name | `~"priority::high"` | `namespace/project~"priority::high"` | `project~"priority::high"` | 535| project milestone by ID | `%123` | `namespace/project%123` | `project%123` | 536| one-word milestone by name | `%v1.23` | `namespace/project%v1.23` | `project%v1.23` | 537| multi-word milestone by name | `%"release candidate"` | `namespace/project%"release candidate"` | `project%"release candidate"` | 538| specific commit | `9ba12248` | `namespace/project@9ba12248` | `project@9ba12248` | 539| commit range comparison | `9ba12248...b19a04f5` | `namespace/project@9ba12248...b19a04f5` | `project@9ba12248...b19a04f5` | 540| repository file references | `[README](doc/README.md)` | | | 541| repository file line references | `[README](doc/README.md#L13)` | | | 542| [alert](../operations/incident_management/alerts.md) | `^alert#123` | `namespace/project^alert#123` | `project^alert#123` | 543 5441. [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/222483) in GitLab 13.7. 545 546For example, referencing an issue by using `#123` formats the output as a link 547to issue number 123 with text `#123`. Likewise, a link to issue number 123 is 548recognized and formatted with text `#123`. If you don't want `#123` to link to an issue, 549add a leading backslash `\#123`. 550 551In addition to this, links to some objects are also recognized and formatted. Some examples of these are: 552 553- Comments on issues: `"https://gitlab.com/gitlab-org/gitlab/-/issues/1234#note_101075757"`, which are rendered as `#1234 (comment 101075757)` 554- The issues designs tab: `"https://gitlab.com/gitlab-org/gitlab/-/issues/1234/designs"`, which are rendered as `#1234 (designs)`. 555- Links to individual designs: `"https://gitlab.com/gitlab-org/gitlab/-/issues/1234/designs/layout.png"`, which are rendered as `#1234[layout.png]`. 556 557### Show the issue, merge request, or epic title in the reference 558 559> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/15694) in GitLab 14.6. 560 561To include the title in the rendered link of an issue, merge request, or epic, add a plus (`+`) 562at the end of the reference. For example, a reference like `#123+` is rendered as 563`The issue title (#123)`. 564 565URL references like `https://gitlab.com/gitlab-org/gitlab/-/issues/1234+` are also expanded. 566 567### Embedding metrics in GitLab Flavored Markdown 568 569Metric charts can be embedded in GitLab Flavored Markdown. Read 570[Embedding Metrics in GitLab flavored Markdown](../operations/metrics/embed.md) for more details. 571 572## Features extended from standard Markdown 573 574All standard Markdown formatting should work as expected in GitLab. Some standard 575functionality is extended with additional features, without affecting the standard usage. 576If a functionality is extended, the new option is listed as a sub-section. 577 578### Blockquotes 579 580Use a blockquote to highlight information, such as a side note. It's generated 581by starting the lines of the blockquote with `>`: 582 583```markdown 584> Blockquotes help you emulate reply text. 585> This line is part of the same quote. 586 587Quote break. 588 589> This very long line is still quoted properly when it wraps. Keep writing to make sure this line is long enough to actually wrap for everyone. You can also *add* **Markdown** into a blockquote. 590``` 591 592> Blockquotes help you emulate reply text. 593> This line is part of the same quote. 594 595Quote break. 596 597> This very long line is still quoted properly when it wraps. Keep writing to make sure this line is long enough to actually wrap for everyone. You can also *add* **Markdown** into a blockquote. 598 599#### Multiline blockquote 600 601If this section isn't rendered correctly, [view it in GitLab](https://gitlab.com/gitlab-org/gitlab/-/blob/master/doc/user/markdown.md#multiline-blockquote). 602 603GitLab Flavored Markdown extends the standard Markdown by also supporting multi-line blockquotes 604fenced by `>>>`: 605 606```markdown 607>>> 608If you paste a message from somewhere else 609 610that spans multiple lines, 611 612you can quote that without having to manually prepend `>` to every line! 613>>> 614``` 615 616>>> 617If you paste a message from somewhere else 618 619that spans multiple lines, 620 621you can quote that without having to manually prepend `>` to every line! 622>>> 623 624### Code spans and blocks 625 626You can highlight anything that should be viewed as code and not standard text. 627 628Inline code is highlighted with single backticks `` ` ``: 629 630```markdown 631Inline `code` has `back-ticks around` it. 632``` 633 634Inline `code` has `back-ticks around` it. 635 636--- 637 638To achieve a similar effect for a larger code example, you can: 639 640- Fence an entire block of code with triple backticks (```` ``` ````). 641- Fence an entire block of code with triple tildes (`~~~`). 642- Indent it four or more spaces. 643 644````markdown 645```python 646def function(): 647 #indenting works just fine in the fenced code block 648 s = "Python code" 649 print s 650``` 651 652 Using 4 spaces 653 is like using 654 3-backtick fences. 655```` 656 657```plaintext 658~~~ 659Tildes are OK too. 660~~~ 661``` 662 663The three examples above render as: 664 665```python 666def function(): 667 #indenting works just fine in the fenced code block 668 s = "Python code" 669 print s 670``` 671 672```plaintext 673Using 4 spaces 674is like using 6753-backtick fences. 676``` 677 678```plaintext 679Tildes are OK too. 680``` 681 682#### Colored code and syntax highlighting 683 684If this section isn't rendered correctly, 685[view it in GitLab](https://gitlab.com/gitlab-org/gitlab/-/blob/master/doc/user/markdown.md#colored-code-and-syntax-highlighting). 686 687GitLab uses the [Rouge Ruby library](http://rouge.jneen.net/) for more colorful syntax 688highlighting in code blocks. For a list of supported languages visit the 689[Rouge project wiki](https://github.com/rouge-ruby/rouge/wiki/List-of-supported-languages-and-lexers). 690Syntax highlighting is supported only in code blocks, so you can't highlight inline code. 691 692To fence and apply syntax highlighting to a block of code, append the code language 693to the opening code declaration, three back-ticks (```` ``` ````) or three tildes (`~~~`): 694 695````markdown 696```javascript 697var s = "JavaScript syntax highlighting"; 698alert(s); 699``` 700 701```python 702def function(): 703 #indenting works just fine in the fenced code block 704 s = "Python syntax highlighting" 705 print s 706``` 707 708```ruby 709require 'redcarpet' 710markdown = Redcarpet.new("Hello World!") 711puts markdown.to_html 712``` 713 714``` 715No language indicated, so no syntax highlighting. 716s = "No highlighting is shown for this line." 717But let's throw in a <b>tag</b>. 718``` 719```` 720 721The four examples above render as: 722 723```javascript 724var s = "JavaScript syntax highlighting"; 725alert(s); 726``` 727 728```python 729def function(): 730 #indenting works just fine in the fenced code block 731 s = "Python syntax highlighting" 732 print s 733``` 734 735```ruby 736require 'redcarpet' 737markdown = Redcarpet.new("Hello World!") 738puts markdown.to_html 739``` 740 741```plaintext 742No language indicated, so no syntax highlighting. 743s = "No highlighting is shown for this line." 744But let's throw in a <b>tag</b>. 745``` 746 747### Emphasis 748 749In Markdown, you can emphasize text in multiple ways. You can italicize, bold, strikethrough, 750and combine these emphasis styles together. 751Strikethrough is not part of the core Markdown standard, but is part of GitLab Flavored Markdown. 752 753Examples: 754 755```markdown 756Emphasis, aka italics, with *asterisks* or _underscores_. 757 758Strong emphasis, aka bold, with double **asterisks** or __underscores__. 759 760Combined emphasis with **asterisks and _underscores_**. 761 762Strikethrough uses two tildes. ~~Scratch this.~~ 763``` 764 765Emphasis, aka italics, with *asterisks* or _underscores_. 766 767Strong emphasis, aka bold, with double **asterisks** or __underscores__. 768 769Combined emphasis with **asterisks and _underscores_**. 770 771Strikethrough uses two tildes. ~~Scratch this.~~ 772 773#### Multiple underscores in words and mid-word emphasis 774 775If this section isn't rendered correctly, 776[view it in GitLab](https://gitlab.com/gitlab-org/gitlab/-/blob/master/doc/user/markdown.md#multiple-underscores-in-words). 777 778Avoid italicizing a portion of a word, especially when you're 779dealing with code and names that often appear with multiple underscores. 780GitLab Flavored Markdown extends the standard Markdown standard by ignoring multiple underlines in words, 781to allow better rendering of Markdown documents discussing code: 782 783```markdown 784perform_complicated_task 785 786do_this_and_do_that_and_another_thing 787 788but_emphasis is_desired _here_ 789``` 790 791perform_complicated_task 792 793do_this_and_do_that_and_another_thing 794 795but_emphasis is_desired _here_ 796 797--- 798 799If you wish to emphasize only a part of a word, it can still be done with asterisks: 800 801```markdown 802perform*complicated*task 803 804do*this*and*do*that*and*another thing 805``` 806 807perform*complicated*task 808 809do*this*and*do*that*and*another thing 810 811### Footnotes 812 813Footnotes add a link to a note that are rendered at the end of a Markdown file. 814 815To make a footnote, you need both a reference tag and a separate line (anywhere in the file) with 816the note content. 817 818Regardless of the tag names, the relative order of the reference tags determines the rendered 819numbering. 820 821<!-- 822Do not edit the following codeblock. It uses HTML to skip the Vale ReferenceLinks test. 823--> 824 825<pre class="highlight"><code>A footnote reference tag looks like this: [^1] 826 827This reference tag is a mix of letters and numbers. [^footnote-42] 828 829[^1]: This text is inside a footnote. 830 831[^footnote-42]: This text is another footnote. 832</code></pre> 833 834A footnote reference tag looks like this:[^1] 835 836This reference tag is a mix of letters and numbers.[^footnote-42] 837 838<!-- 839Do not delete the single space before the [^1] and [^footnotes] references below. 840These are used to force the Vale ReferenceLinks check to skip these examples. 841--> 842 843 [^1]: This text is inside a footnote. 844 845 [^footnote-42]: This text is another footnote. 846 847### Headers 848 849```markdown 850# H1 851## H2 852### H3 853#### H4 854##### H5 855###### H6 856 857Alternatively, for H1 and H2, an underline-ish style: 858 859Alt-H1 860====== 861 862Alt-H2 863------ 864``` 865 866#### Header IDs and links 867 868GitLab Flavored Markdown extends the standard Markdown standard so that all Markdown-rendered headers automatically 869get IDs, which can be linked to, except in comments. 870 871On hover, a link to those IDs becomes visible to make it easier to copy the link to 872the header to use it somewhere else. 873 874The IDs are generated from the content of the header according to the following rules: 875 8761. All text is converted to lowercase. 8771. All non-word text (such as punctuation or HTML) is removed. 8781. All spaces are converted to hyphens. 8791. Two or more hyphens in a row are converted to one. 8801. If a header with the same ID has already been generated, a unique 881 incrementing number is appended, starting at 1. 882 883Example: 884 885```markdown 886# This header has spaces in it 887## This header has a :thumbsup: in it 888# This header has Unicode in it: 한글 889## This header has spaces in it 890### This header has spaces in it 891## This header has 3.5 in it (and parentheses) 892``` 893 894Would generate the following link IDs: 895 8961. `this-header-has-spaces-in-it` 8971. `this-header-has-a-in-it` 8981. `this-header-has-unicode-in-it-한글` 8991. `this-header-has-spaces-in-it-1` 9001. `this-header-has-spaces-in-it-2` 9011. `this-header-has-3-5-in-it-and-parentheses` 902 903Emoji processing happens before the header IDs are generated. The 904emoji is converted to an image, which is then removed from the ID. 905 906### Horizontal Rule 907 908Create a horizontal rule by using three or more hyphens, asterisks, or underscores: 909 910```markdown 911Three or more hyphens, 912 913--- 914 915asterisks, 916 917*** 918 919or underscores 920 921___ 922``` 923 924### Images 925 926Examples: 927 928<!-- 929Do not edit the following codeblock. It uses HTML to skip the Vale ReferenceLinks test. 930--> 931 932<pre class="highlight"><code>Inline-style (hover to see title text): 933 934![alt text](img/markdown_logo.png "Title Text") 935 936Reference-style (hover to see title text): 937 938![alt text1][logo] 939 940[logo]: img/markdown_logo.png "Title Text" 941</code></pre> 942 943<!-- 944DO NOT change the name of markdown_logo.png. This file is used for a test in 945spec/controllers/help_controller_spec.rb. 946--> 947 948Inline-style (hover to see title text): 949 950![alt text](img/markdown_logo.png "Title Text") 951 952Reference-style (hover to see title text): 953 954<!-- 955The example below uses an in-line link to pass the Vale ReferenceLinks test. 956Do not change to a reference style link. 957--> 958 959![alt text](img/markdown_logo.png "Title Text") 960 961In the rare case where you must set a specific height or width for an image, 962you can use the `img` HTML tag instead of Markdown and set its `height` and 963`width` parameters. 964 965#### Videos 966 967If this section isn't rendered correctly, [view it in GitLab](https://gitlab.com/gitlab-org/gitlab/-/blob/master/doc/user/markdown.md#videos). 968 969Image tags that link to files with a video extension are automatically converted to 970a video player. The valid video extensions are `.mp4`, `.m4v`, `.mov`, `.webm`, and `.ogv`: 971 972```markdown 973Here's a sample video: 974 975![Sample Video](img/markdown_video.mp4) 976``` 977 978Here's a sample video: 979 980![Sample Video](img/markdown_video.mp4) 981 982#### Audio 983 984If this section isn't rendered correctly, [view it in GitLab](https://gitlab.com/gitlab-org/gitlab/-/blob/master/doc/user/markdown.md#audio). 985 986Similar to videos, link tags for files with an audio extension are automatically converted to 987an audio player. The valid audio extensions are `.mp3`, `.oga`, `.ogg`, `.spx`, and `.wav`: 988 989```markdown 990Here's a sample audio clip: 991 992![Sample Audio](img/markdown_audio.mp3) 993``` 994 995Here's a sample audio clip: 996 997![Sample Audio](img/markdown_audio.mp3) 998 999### Inline HTML 1000 1001> Allowing `rel="license"` [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/20857) in GitLab 14.6. 1002 1003To see the second example of Markdown rendered in HTML, 1004[view it in GitLab](https://gitlab.com/gitlab-org/gitlab/-/blob/master/doc/user/markdown.md#inline-html). 1005 1006You can also use raw HTML in your Markdown, and it usually works pretty well. 1007 1008See the documentation for HTML::Pipeline's [SanitizationFilter](https://github.com/jch/html-pipeline/blob/v2.12.3/lib/html/pipeline/sanitization_filter.rb#L42) 1009class for the list of allowed HTML tags and attributes. In addition to the default 1010`SanitizationFilter` allowlist, GitLab allows `span`, `abbr`, `details` and `summary` elements. 1011`rel="license"` is allowed on links to support the [Rel-License microformat](https://microformats.org/wiki/rel-license) and license attribution. 1012 1013```html 1014<dl> 1015 <dt>Definition list</dt> 1016 <dd>Is something people use sometimes.</dd> 1017 1018 <dt>Markdown in HTML</dt> 1019 <dd>Does *not* work **very** well. HTML <em>tags</em> do <b>work</b>, in most cases.</dd> 1020</dl> 1021``` 1022 1023<dl> 1024 <dt>Definition list</dt> 1025 <dd>Is something people use sometimes.</dd> 1026 1027 <dt>Markdown in HTML</dt> 1028 <dd>Does *not* work **very** well. HTML <em>tags</em> do <b>work</b>, in most cases.</dd> 1029</dl> 1030 1031--- 1032 1033It's still possible to use Markdown inside HTML tags, but only if the lines containing Markdown 1034are separated into their own lines: 1035 1036```html 1037<dl> 1038 <dt>Markdown in HTML</dt> 1039 <dd>Does *not* work **very** well. HTML tags work, in most cases.</dd> 1040 1041 <dt>Markdown in HTML</dt> 1042 <dd> 1043 1044 Does *not* work **very** well. HTML tags work, in most cases. 1045 1046 </dd> 1047</dl> 1048``` 1049 1050<!-- 1051The example below uses HTML to force correct rendering on docs.gitlab.com, 1052Markdown is fine in GitLab. 1053--> 1054 1055<dl> 1056 <dt>Markdown in HTML</dt> 1057 <dd>Does *not* work **very** well. HTML tags work, in most cases.</dd> 1058 1059 <dt>Markdown in HTML</dt> 1060 <dd> 1061 1062 Does <em>not</em> work <b>very</b> well. HTML tags work, in most cases. 1063 1064 </dd> 1065</dl> 1066 1067#### Collapsible section 1068 1069To see the second Markdown example rendered in HTML, 1070[view it in GitLab](https://gitlab.com/gitlab-org/gitlab/-/blob/master/doc/user/markdown.md#details-and-summary). 1071 1072Content can be collapsed using HTML's [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) 1073and [`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) 1074tags. For example, collapse a long log file so it takes up less screen space. 1075 1076```html 1077<p> 1078<details> 1079<summary>Click this to collapse/fold.</summary> 1080 1081These details <em>remain</em> <strong>hidden</strong> until expanded. 1082 1083<pre><code>PASTE LOGS HERE</code></pre> 1084 1085</details> 1086</p> 1087``` 1088 1089<p> 1090<details> 1091<summary>Click this to collapse/fold.</summary> 1092 1093These details <em>remain</em> <strong>hidden</strong> until expanded. 1094 1095<pre><code>PASTE LOGS HERE</code></pre> 1096 1097</details> 1098</p> 1099 1100--- 1101 1102Markdown inside these tags is also supported. 1103 1104NOTE: 1105If your Markdown isn't rendering correctly, try adding 1106`{::options parse_block_html="true" /}` to the top of the page, and add 1107`markdown="span"` to the opening summary tag like this: `<summary markdown="span">`. 1108 1109Remember to leave a blank line after the `</summary>` tag and before the `</details>` tag, 1110as shown in the example: 1111 1112````html 1113<details> 1114<summary>Click this to collapse/fold.</summary> 1115 1116These details _remain_ **hidden** until expanded. 1117 1118``` 1119PASTE LOGS HERE 1120``` 1121 1122</details> 1123```` 1124 1125<!-- 1126The example below uses HTML to force correct rendering on docs.gitlab.com, Markdown 1127works correctly in GitLab. 1128--> 1129 1130<details> 1131<summary>Click this to collapse/fold.</summary> 1132 1133These details <em>remain</em> <b>hidden</b> until expanded. 1134 1135<pre><code>PASTE LOGS HERE</code></pre> 1136 1137</details> 1138 1139### Line breaks 1140 1141A line break is inserted (a new paragraph starts) if the previous text is 1142ended with two newlines, like when you press <kbd>Enter</kbd> twice in a row. If you only 1143use one newline (select <kbd>Enter</kbd> once), the next sentence remains part of the 1144same paragraph. Use this approach if you want to keep long lines from wrapping, and keep 1145them editable: 1146 1147```markdown 1148Here's a line for us to start with. 1149 1150This longer line is separated from the one above by two newlines, so it is a *separate paragraph*. 1151 1152This line is also a separate paragraph, but... 1153These lines are only separated by single newlines, 1154so they *do not break* and just follow the previous lines 1155in the *same paragraph*. 1156``` 1157 1158Here's a line for us to start with. 1159 1160This longer line is separated from the one above by two newlines, so it is a *separate paragraph*. 1161 1162This line is also a separate paragraph, but... 1163These lines are only separated by single newlines, 1164so they *do not break* and just follow the previous lines 1165in the *same paragraph*. 1166 1167#### Newlines 1168 1169GitLab Flavored Markdown adheres to the Markdown specification for handling 1170[paragraphs and line breaks](https://spec.commonmark.org/current/). 1171 1172A paragraph is one or more consecutive lines of text, separated by one or 1173more blank lines (two newlines at the end of the first paragraph), as [explained above](#line-breaks). 1174 1175Need more control over line breaks or soft returns? Add a single line break 1176by ending a line with a backslash, or two or more spaces. Two newlines in a row create a new 1177paragraph, with a blank line in between: 1178 1179```markdown 1180First paragraph. 1181Another line in the same paragraph. 1182A third line in the same paragraph, but this time ending with two spaces.{space}{space} 1183A new line directly under the first paragraph. 1184 1185Second paragraph. 1186Another line, this time ending with a backslash.\ 1187A new line due to the previous backslash. 1188``` 1189 1190### Links 1191 1192You can create links two ways: inline-style and reference-style. For example: 1193 1194<!-- 1195Do not edit the following codeblock. It uses HTML to skip the Vale ReferenceLinks test. 1196--> 1197 1198<pre class="highlight"><code>- This line shows an [inline-style link](https://www.google.com) 1199- This line shows a [link to a repository file in the same directory](index.md) 1200- This line shows a [relative link to a readme one directory higher](../index.md) 1201- This line shows a [link that also has title text](https://www.google.com "This link takes you to Google!") 1202 1203Using header ID anchors: 1204 1205- This line links to [a section on a different Markdown page, using a "#" and the header ID](index.md#overview) 1206- This line links to [a different section on the same page, using a "#" and the header ID](#header-ids-and-links) 1207 1208Using references: 1209 1210- This line shows a [reference-style link, see below][Arbitrary case-insensitive reference text] 1211- You can [use numbers for reference-style link definitions, see below][1] 1212- Or leave it empty and use the [link text itself][], see below. 1213 1214Some text to show that the reference links can follow later. 1215 1216[arbitrary case-insensitive reference text]: https://www.mozilla.org/en-US/ 1217[1]: https://slashdot.org 1218[link text itself]: https://www.reddit.com 1219</code></pre> 1220 1221- This line shows an [inline-style link](https://www.google.com) 1222- This line shows a [link to a repository file in the same directory](index.md) 1223- This line shows a [relative link to a README one directory higher](../index.md) 1224- This line shows a [link that also has title text](https://www.google.com "This link takes you to Google!") 1225 1226Using header ID anchors: 1227 1228- This line links to [a section on a different Markdown page, using a "#" and the header ID](index.md#overview) 1229- This line links to [a different section on the same page, using a "#" and the header ID](#header-ids-and-links) 1230 1231Using references: 1232 1233<!-- 1234The example below uses in-line links to pass the Vale ReferenceLinks test. 1235Do not change to reference style links. 1236--> 1237 1238- This line is a [reference-style link, see below](https://www.mozilla.org/en-US/) 1239- You can [use numbers for reference-style link definitions, see below](https://slashdot.org) 1240- Or leave it empty and use the [link text itself](https://www.reddit.com), see below. 1241 1242Some text to show that the reference links can follow later. 1243 1244NOTE: 1245Relative links do not allow the referencing of project files in a wiki 1246page, or a wiki page in a project file. The reason: a wiki is always 1247in a separate Git repository in GitLab. For example, `[I'm a reference-style link](style)` 1248points the link to `wikis/style` only when the link is inside of a wiki Markdown file. 1249 1250#### URL auto-linking 1251 1252GitLab Flavored Markdown auto-links almost any URL you put into your text: 1253 1254```markdown 1255- https://www.google.com 1256- https://www.google.com 1257- ftp://ftp.us.debian.org/debian/ 1258- smb://foo/bar/baz 1259- irc://irc.freenode.net/ 1260- http://localhost:3000 1261``` 1262 1263<!-- vale gitlab.Spelling = NO --> 1264 1265- <https://www.google.com> 1266- <https://www.google.com> 1267- <ftp://ftp.us.debian.org/debian/> 1268- <smb://foo/bar/baz> 1269- <irc://irc.freenode.net/> 1270- <http://localhost:3000> 1271 1272<!-- vale gitlab.Spelling = YES --> 1273### Lists 1274 1275You can create ordered and unordered lists. 1276 1277For an ordered list, add the number you want the list 1278to start with, like `1.`, followed by a space, at the start of each line for ordered lists. 1279After the first number, it does not matter what number you use. Ordered lists are 1280numbered automatically by vertical order, so repeating `1.` for all items in the 1281same list is common. If you start with a number other than `1.`, it uses that as the first 1282number, and counts up from there. 1283 1284Examples: 1285 1286```markdown 12871. First ordered list item 12882. Another item 1289 - Unordered sub-list. 12901. Actual numbers don't matter, just that it's a number 1291 1. Ordered sub-list 1292 1. Next ordered sub-list item 12934. And another item. 1294``` 1295 1296<!-- 1297The "2." and "4." in the example above are changed to "1." below, to match the style 1298standards on docs.gitlab.com. 1299See https://docs.gitlab.com/ee/development/documentation/styleguide/index.html#lists 1300--> 1301 13021. First ordered list item 13031. Another item 1304 - Unordered sub-list. 13051. Actual numbers don't matter, just that it's a number 1306 1. Ordered sub-list 1307 1. Next ordered sub-list item 13081. And another item. 1309 1310For an unordered list, add a `-`, `*` or `+`, followed by a space, at the start of 1311each line for unordered lists, but you should not use a mix of them. 1312 1313```markdown 1314Unordered lists can: 1315 1316- use 1317- minuses 1318 1319They can also: 1320 1321* use 1322* asterisks 1323 1324They can even: 1325 1326+ use 1327+ pluses 1328``` 1329 1330<!-- 1331The "*" and "+" in the example above are changed to "-" below, to match the style 1332standards on docs.gitlab.com. 1333See https://docs.gitlab.com/ee/development/documentation/styleguide/index.html#lists 1334--> 1335 1336Unordered lists can: 1337 1338- use 1339- minuses 1340 1341They can also: 1342 1343- use 1344- asterisks 1345 1346They can even: 1347 1348- use 1349- pluses 1350 1351--- 1352 1353If a list item contains multiple paragraphs, each subsequent paragraph should be indented 1354to the same level as the start of the list item text. 1355 1356Example: 1357 1358```markdown 13591. First ordered list item 1360 1361 Second paragraph of first item. 1362 13631. Another item 1364``` 1365 13661. First ordered list item 1367 1368 Second paragraph of first item. 1369 13701. Another item 1371 1372--- 1373 1374If the first item's paragraph isn't indented with the proper number of spaces, 1375the paragraph appears outside the list, instead of properly indented under the list item. 1376For example: 1377 1378```markdown 13791. First ordered list item 1380 1381 Paragraph of first item. 1382 13831. Another item 1384``` 1385 13861. First ordered list item 1387 1388 Paragraph of first item. 1389 13901. Another item 1391 1392### Superscripts / Subscripts 1393 1394CommonMark and GitLab Flavored Markdown don't support the Redcarpet superscript syntax ( `x^2` ). 1395Use the standard HTML syntax for superscripts and subscripts: 1396 1397```html 1398The formula for water is H<sub>2</sub>O 1399while the equation for the theory of relativity is E = mc<sup>2</sup>. 1400``` 1401 1402<!-- vale gitlab.Spelling = NO --> 1403 1404The formula for water is H<sub>2</sub>O 1405while the equation for the theory of relativity is E = mc<sup>2</sup>. 1406 1407<!-- vale gitlab.Spelling = YES --> 1408 1409### Tables 1410 1411Tables are not part of the core Markdown spec, but they are part of GitLab Flavored Markdown. 1412 14131. The first line contains the headers, separated by "pipes" (`|`). 14141. The second line separates the headers from the cells. 1415 - The cells can contain only empty spaces, hyphens, and 1416 (optionally) colons for horizontal alignment. 1417 - Each cell must contain at least one hyphen, but adding more hyphens to a 1418 cell does not change the cell's rendering. 1419 - Any content other than hyphens, whitespace, or colons is not allowed 14201. The third, and any following lines, contain the cell values. 1421 - You **can't** have cells separated over many lines in the Markdown, they must be kept to single lines, 1422 but they can be very long. You can also include HTML `<br>` tags to force newlines if needed. 1423 - The cell sizes **don't** have to match each other. They are flexible, but must be separated 1424 by pipes (`|`). 1425 - You **can** have blank cells. 14261. Column widths are calculated dynamically based on the content of the cells. 1427 1428Example: 1429 1430```markdown 1431| header 1 | header 2 | header 3 | 1432| --- | --- | --- | 1433| cell 1 | cell 2 | cell 3 | 1434| cell 4 | cell 5 is longer | cell 6 is much longer than the others, but that's ok. It eventually wraps the text when the cell is too large for the display size. | 1435| cell 7 | | cell 9 | 1436``` 1437 1438| header 1 | header 2 | header 3 | 1439| --- | --- | --- | 1440| cell 1 | cell 2 | cell 3 | 1441| cell 4 | cell 5 is longer | cell 6 is much longer than the others, but that's ok. It eventually wraps the text when the cell is too large for the display size. | 1442| cell 7 | | cell 9 | 1443 1444Additionally, you can choose the alignment of text in columns by adding colons (`:`) 1445to the sides of the "dash" lines in the second row. This affects every cell in the column: 1446 1447```markdown 1448| Left Aligned | Centered | Right Aligned | 1449| :--- | :---: | ---: | 1450| Cell 1 | Cell 2 | Cell 3 | 1451| Cell 4 | Cell 5 | Cell 6 | 1452``` 1453 1454| Left Aligned | Centered | Right Aligned | 1455| :--- | :---: | ---: | 1456| Cell 1 | Cell 2 | Cell 3 | 1457| Cell 4 | Cell 5 | Cell 6 | 1458 1459[In GitLab itself](https://gitlab.com/gitlab-org/gitlab/-/blob/master/doc/user/markdown.md#tables), 1460the headers are always left-aligned in Chrome and Firefox, and centered in Safari. 1461 1462You can use HTML formatting to adjust the rendering of tables. For example, you can 1463use `<br>` tags to force a cell to have multiple lines: 1464 1465```markdown 1466| Name | Details | 1467| --- | --- | 1468| Item1 | This text is on one line | 1469| Item2 | This item has:<br>- Multiple items<br>- That we want listed separately | 1470``` 1471 1472| Name | Details | 1473| --- | --- | 1474| Item1 | This text is on one line | 1475| Item2 | This item has:<br>- Multiple items<br>- That we want listed separately | 1476 1477You can use HTML formatting in GitLab itself to add [task lists](#task-lists) with checkboxes, 1478but they do not render properly on `docs.gitlab.com`: 1479 1480```markdown 1481| header 1 | header 2 | 1482| --- | --- | 1483| cell 1 | cell 2 | 1484| cell 3 | <ul><li> - [ ] Task one </li><li> - [ ] Task two </li></ul> | 1485``` 1486 1487#### Copy from spreadsheet and paste in Markdown 1488 1489[Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/27205) in GitLab 12.7. 1490 1491If you're working in spreadsheet software (for example, Microsoft Excel, Google 1492Sheets, or Apple Numbers), GitLab creates a Markdown table when you copy-and-paste 1493from a spreadsheet. For example, suppose you have the 1494following spreadsheet: 1495 1496![Copy from spreadsheet](img/markdown_copy_from_spreadsheet_v12_7.png) 1497 1498Select the cells and copy them to your clipboard. Open a GitLab Markdown 1499entry and paste the spreadsheet: 1500 1501![Paste to Markdown table](img/markdown_paste_table_v12_7.png) 1502 1503## References 1504 1505- This document leveraged heavily from the [Markdown-Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet). 1506- The original [Markdown Syntax Guide](https://daringfireball.net/projects/markdown/syntax) 1507 at Daring Fireball is an excellent resource for a detailed explanation of standard Markdown. 1508- You can find the detailed specification for CommonMark in the [CommonMark Spec](https://spec.commonmark.org/current/). 1509- The [CommonMark Dingus](https://spec.commonmark.org/dingus/) helps you test CommonMark syntax. 1510 1511## Transition from Redcarpet to CommonMark 1512 1513- In GitLab 11.8, the [Redcarpet Ruby library](https://github.com/vmg/redcarpet) 1514 was removed. All issues and comments, including those in 11.1 and earlier, are now processed 1515 by using the [CommonMark Ruby Library](https://github.com/gjtorikian/commonmarker). 1516- In GitLab 11.3 and later, CommonMark processes wiki pages and Markdown 1517 files (`*.md`) in repositories. 1518- In GitLab 11.1 and later, the [CommonMark Ruby Library](https://github.com/gjtorikian/commonmarker) 1519 for Markdown processes all new issues, merge requests, comments, and other Markdown 1520 content. 1521 1522The documentation website migrated its Markdown engine 1523[from Redcarpet to Kramdown](https://gitlab.com/gitlab-org/gitlab-docs/-/merge_requests/108) 1524in October 2018. 1525 1526You may have older issues, merge requests, or Markdown documents in your 1527repository that relied upon nuances of the GitLab RedCarpet version 1528of Markdown. Because CommonMark uses slightly stricter syntax, these documents 1529may now appear differently after the transition to CommonMark. 1530 1531For example, numbered lists with nested lists may 1532render incorrectly: 1533 1534```markdown 15351. Chocolate 1536 - dark 1537 - milk 1538``` 1539 1540To fix this issue, add a space to each nested item. The `-` must be aligned with the first 1541character of the top list item (`C` in this case): 1542 1543```markdown 15441. Chocolate 1545 - dark 1546 - milk 1547``` 1548 15491. Chocolate 1550 - dark 1551 - milk 1552 1553We flag any significant differences between Redcarpet and CommonMark Markdown in this document. 1554 1555If you have many Markdown files, it can be tedious to determine 1556if they display correctly or not. You can use the 1557[`diff_redcarpet_cmark`](https://gitlab.com/digitalmoksha/diff_redcarpet_cmark) 1558tool to generate a list of files and the 1559differences between how RedCarpet and CommonMark render the files. It indicates 1560if any changes are needed. 1561 1562`diff_redcarpet_cmark` is not an officially supported product. 1563