The following features are not found in standard Markdown.
### Colors
### Colors
If this section isn't rendered correctly, [view it in GitLab](https://gitlab.com/gitlab-org/gitlab/blob/master/doc/user/markdown.md#colors).
[View this topic in GitLab](https://gitlab.com/gitlab-org/gitlab/blob/master/doc/user/markdown.md#colors).
It's possible to have color written in HEX, RGB, or HSL format rendered with a color
You can write a color in the formats: `HEX`, `RGB`, or `HSL`.
indicator.
Supported formats (named colors are not supported):
-`HEX`: `` `#RGB[A]` `` or `` `#RRGGBB[AA]` ``
-`RGB`: `` `RGB[A](R, G, B[, A])` ``
-`HSL`: `` `HSL[A](H, S, L[, A])` ``
- HEX: `` `#RGB[A]` `` or `` `#RRGGBB[AA]` ``
Named colors are not supported.
- RGB: `` `RGB[A](R, G, B[, A])` ``
- HSL: `` `HSL[A](H, S, L[, A])` ``
Color written inside backticks is followed by a color "chip":
Colors in backticks are followed by a color indicator:
```markdown
```markdown
-`#F00`
-`#F00`
...
@@ -175,8 +120,8 @@ Color written inside backticks is followed by a color "chip":
...
@@ -175,8 +120,8 @@ Color written inside backticks is followed by a color "chip":
### Diagrams and flowcharts
### Diagrams and flowcharts
It's possible to generate diagrams and flowcharts from text in GitLab using [Mermaid](https://mermaidjs.github.io/) or [PlantUML](https://plantuml.com).
You can generate diagrams and flowcharts from text by using [Mermaid](https://mermaidjs.github.io/) or [PlantUML](https://plantuml.com).
It's also possible to use [Kroki](https://kroki.io) to create a wide variety of diagrams.
You can also use [Kroki](https://kroki.io) to create a wide variety of diagrams.
#### Mermaid
#### Mermaid
...
@@ -207,7 +152,7 @@ graph TD;
...
@@ -207,7 +152,7 @@ graph TD;
C-->D;
C-->D;
```
```
Subgraphs can also be included:
You can also include subgraphs:
````markdown
````markdown
```mermaid
```mermaid
...
@@ -247,16 +192,17 @@ end
...
@@ -247,16 +192,17 @@ end
#### PlantUML
#### PlantUML
To make PlantUML available in GitLab, a GitLab administrator needs to enable it first. Read more in [PlantUML & GitLab](../administration/integration/plantuml.md).
To make PlantUML available in GitLab, a GitLab administrator must enable it. For more information, see the
To make Kroki available in GitLab, a GitLab administrator needs to enable it first.
To make Kroki available in GitLab, a GitLab administrator must enable it.
Read more in the [Kroki integration](../administration/integration/kroki.md) page.
For more information, see the [Kroki integration](../administration/integration/kroki.md) page.
### Emoji
### Emojis
If this section isn't rendered correctly, [view it in GitLab](https://gitlab.com/gitlab-org/gitlab/blob/master/doc/user/markdown.md#emoji).
[View this topic in GitLab](https://gitlab.com/gitlab-org/gitlab/blob/master/doc/user/markdown.md#emojis).
```markdown
```markdown
Sometimes you want to :monkey: around a bit and add some :star2: to your :speech_balloon:. Well we have a gift for you:
Sometimes you want to :monkey: around a bit and add some :star2: to your :speech_balloon:. Well we have a gift for you:
...
@@ -280,13 +226,13 @@ If you're new to this, don't be <img src="https://gitlab.com/gitlab-org/gitlab-f
...
@@ -280,13 +226,13 @@ If you're new to this, don't be <img src="https://gitlab.com/gitlab-org/gitlab-f
Consult the [Emoji Cheat Sheet](https://www.webfx.com/tools/emoji-cheat-sheet/) for a list of all supported emoji codes. <imgsrc="https://gitlab.com/gitlab-org/gitlab-foss/raw/master/app/assets/images/emoji/thumbsup.png"width="20px"height="20px"style="display:inline;margin:0;border: 0">
Consult the [Emoji Cheat Sheet](https://www.webfx.com/tools/emoji-cheat-sheet/) for a list of all supported emoji codes. <imgsrc="https://gitlab.com/gitlab-org/gitlab-foss/raw/master/app/assets/images/emoji/thumbsup.png"width="20px"height="20px"style="display:inline;margin:0;border: 0">
#### Emoji and your OS
#### Emojis and your operating system
The emoji example above uses hard-coded images for this documentation. Rendered emoji
The previous emoji example uses hard-coded images. Rendered emojis
in GitLab may appear different depending on the OS and browser used.
in GitLab may be different depending on the OS and browser used.
Most emoji are natively supported on macOS, Windows, iOS, Android, and fall back on image-based
Most emojis are natively supported on macOS, Windows, iOS, Android, and fall back on image-based
emoji where there is no support.
emojis where there is no support.
<!-- vale gitlab.Spelling = NO -->
<!-- vale gitlab.Spelling = NO -->
...
@@ -301,17 +247,17 @@ this font installed by default.
...
@@ -301,17 +247,17 @@ this font installed by default.
> [Introduced](https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/23331) in GitLab 11.6.
> [Introduced](https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/23331) in GitLab 11.6.
Front matter is metadata included at the beginning of a Markdown document, preceding
Front matter is metadata included at the beginning of a Markdown document, preceding
its content. This data can be used by static site generators such as[Jekyll](https://jekyllrb.com/docs/front-matter/),
the content. This data can be used by static site generators like[Jekyll](https://jekyllrb.com/docs/front-matter/),
[Hugo](https://gohugo.io/content-management/front-matter/), and many other applications.
[Hugo](https://gohugo.io/content-management/front-matter/), and many other applications.
When you view a Markdown file rendered by GitLab, any front matter is displayed as-is,
When you view a Markdown file rendered by GitLab, front matter is displayed as-is,
in a box at the top of the document. The HTML content displays after the front matter. To view an example,
in a box at the top of the document. The HTML content displays after the front matter. To view an example,
you can toggle between the source and rendered version of a
you can toggle between the source and rendered version of a
1. [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/222483) in GitLab 13.7.
For example, referencing an issue by using `#123` formats the output as a link
to issue number 123 with text `#123`. Likewise, a link to issue number 123 is
recognized and formatted with text `#123`. If you don't want `#123` to link to an issue,
add a leading backslash `\#123`.
In addition to this, links to some objects are also recognized and formatted. Some examples of these are:
- Comments on issues: `"https://gitlab.com/gitlab-org/gitlab/-/issues/1234#note_101075757"`, which are rendered as `#1234 (comment 101075757)`
- The issues designs tab: `"https://gitlab.com/gitlab-org/gitlab/-/issues/1234/designs"`, which are rendered as `#1234 (designs)`.
- Links to individual designs: `"https://gitlab.com/gitlab-org/gitlab/-/issues/1234/designs/layout.png"`, which are rendered as `#1234[layout.png]`.
### Task lists
### Task lists
If this section isn't rendered correctly, [view it in GitLab itself](https://gitlab.com/gitlab-org/gitlab/blob/master/doc/user/markdown.md#task-lists).
If this section isn't rendered correctly, [view it in GitLab itself](https://gitlab.com/gitlab-org/gitlab/blob/master/doc/user/markdown.md#task-lists).
...
@@ -605,12 +502,61 @@ This snippet links to `<wiki_root>/miscellaneous.md`:
...
@@ -605,12 +502,61 @@ This snippet links to `<wiki_root>/miscellaneous.md`:
[Link to Related Page](/miscellaneous.md)
[Link to Related Page](/miscellaneous.md)
```
```
## GitLab-specific references
GitLab Flavored Markdown renders GitLab-specific references. For example, you can reference
an issue, a commit, a team member, or even an entire project team. GitLab Flavored Markdown turns
that reference into a link so you can navigate between them.
Additionally, GitLab Flavored Markdown recognizes certain cross-project references and also has a shorthand
version to reference other projects from the same namespace.
GitLab Flavored Markdown recognizes the following:
The project description also partially supports [standard Markdown](../../markdown.md#standard-markdown-and-extensions-in-gitlab). You can use [emphasis](../../markdown.md#emphasis), [links](../../markdown.md#links), and [line-breaks](../../markdown.md#line-breaks) to add more context to the project description.
The project description also partially supports [standard Markdown](../../markdown.md#features-extended-from-standard-markdown). You can use [emphasis](../../markdown.md#emphasis), [links](../../markdown.md#links), and [line-breaks](../../markdown.md#line-breaks) to add more context to the project description.