From e1c6f4334f16ac7fd5a6c2a76c10c96d46d1bb18 Mon Sep 17 00:00:00 2001 From: Marcel Amirault Date: Thu, 27 Jun 2019 00:28:39 +0000 Subject: Markdown doc refactor - squashed Change emoji to Gitlab rendering and fix typo Use built in renderer for math Touchups to GFM Doc and bring in suggestions from MR 22122 Fix link Add epics to align docs Add epic badge Fix dashes making accidental headers, and move wikis down, add emoji note Add section explaining GitLab markdown extensions Update to incorporate recent changes Add links rendering, fix issue rendering as color chip Add links rendering, fix issue rendering as color chip Update links to GitLab rendered version of markdown doc Separate GFM extensions, reorder list, other tweaks Update code blocks and highlighting Trying to fix improper markdown rendering Fix rendering broken by triple backticks and add emoji note testing triple tildes instead of quad backticks testing rending after mermaid Various fixes to improve markdown rendering Update markdown doc after review Fix markdown doc after review, part two fix typo in markdown doc --- doc/user/img/color_inline_colorchip_render_gfm.png | Bin 4684 -> 0 bytes .../img/markdown_inline_diffs_tags_rendered.png | Bin 1804 -> 0 bytes doc/user/img/math_inline_sup_render_gfm.png | Bin 1119 -> 0 bytes doc/user/img/task_list_ordered_render_gfm.png | Bin 2855 -> 0 bytes doc/user/markdown.md | 1545 +++++++++++--------- doc/user/project/settings/index.md | 2 +- 6 files changed, 869 insertions(+), 678 deletions(-) delete mode 100644 doc/user/img/color_inline_colorchip_render_gfm.png delete mode 100644 doc/user/img/markdown_inline_diffs_tags_rendered.png delete mode 100644 doc/user/img/math_inline_sup_render_gfm.png delete mode 100644 doc/user/img/task_list_ordered_render_gfm.png diff --git a/doc/user/img/color_inline_colorchip_render_gfm.png b/doc/user/img/color_inline_colorchip_render_gfm.png deleted file mode 100644 index 6f93dbeeb10..00000000000 Binary files a/doc/user/img/color_inline_colorchip_render_gfm.png and /dev/null differ diff --git a/doc/user/img/markdown_inline_diffs_tags_rendered.png b/doc/user/img/markdown_inline_diffs_tags_rendered.png deleted file mode 100644 index 4279a20b5a0..00000000000 Binary files a/doc/user/img/markdown_inline_diffs_tags_rendered.png and /dev/null differ diff --git a/doc/user/img/math_inline_sup_render_gfm.png b/doc/user/img/math_inline_sup_render_gfm.png deleted file mode 100644 index 3ee2abb14df..00000000000 Binary files a/doc/user/img/math_inline_sup_render_gfm.png and /dev/null differ diff --git a/doc/user/img/task_list_ordered_render_gfm.png b/doc/user/img/task_list_ordered_render_gfm.png deleted file mode 100644 index 98ec791e958..00000000000 Binary files a/doc/user/img/task_list_ordered_render_gfm.png and /dev/null differ diff --git a/doc/user/markdown.md b/doc/user/markdown.md index 31c8093ced7..186fd7178d3 100644 --- a/doc/user/markdown.md +++ b/doc/user/markdown.md @@ -1,15 +1,20 @@ # GitLab Markdown -This markdown guide is **valid for GitLab's system markdown entries and files**. -It is not valid for the [GitLab documentation website](https://docs.gitlab.com) -nor [GitLab's main website](https://about.gitlab.com), as they both use -[Kramdown](https://kramdown.gettalong.org) as their markdown engine. -The documentation website uses an extended Kramdown gem, [GitLab Kramdown](https://gitlab.com/gitlab-org/gitlab_kramdown). -Consult the [GitLab Kramdown Guide](https://about.gitlab.com/handbook/product/technical-writing/markdown-guide/) for a complete Kramdown reference. +This markdown guide is **valid only for GitLab's internal markdown rendering system for entries and files**. +It is **not** valid for the [GitLab documentation website](https://docs.gitlab.com) +or [GitLab's main website](https://about.gitlab.com), as they both use +[Kramdown](https://kramdown.gettalong.org) as their markdown engine. The documentation +website uses an extended Kramdown gem, [GitLab Kramdown](https://gitlab.com/gitlab-org/gitlab_kramdown). +Consult the [GitLab Kramdown Guide](https://about.gitlab.com/handbook/product/technical-writing/markdown-guide/) +for a complete Kramdown reference. + +NOTE: **Note:** We encourage you to view this document as [rendered by GitLab itself](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md). ## GitLab Flavored Markdown (GFM) -GitLab uses "GitLab Flavored Markdown" (GFM). It extends the [CommonMark specification][commonmark-spec] (which is based on standard Markdown) in a few significant ways to add additional useful functionality. It was inspired by [GitHub Flavored Markdown](https://help.github.com/articles/basic-writing-and-formatting-syntax/). +GitLab uses "GitLab Flavored Markdown" (GFM). It extends the [CommonMark specification](https://spec.commonmark.org/current/) +(which is based on standard Markdown) in several ways to add additional useful functionality. +It was inspired by [GitHub Flavored Markdown](https://help.github.com/articles/basic-writing-and-formatting-syntax/). You can use GFM in the following areas: @@ -22,35 +27,29 @@ You can use GFM in the following areas: - Markdown documents inside repositories - Epics **[ULTIMATE]** -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. - -> **Notes:** -> -> We encourage you to view this document as [rendered by GitLab itself](markdown.md). -> -> As of 11.1, GitLab uses the [CommonMark Ruby Library][commonmarker] for Markdown -processing of all new issues, merge requests, comments, and other Markdown content -in the GitLab system. As of 11.3, wiki pages and Markdown files (`.md`) in the -repositories are also processed with CommonMark. As of 11.8, the [Redcarpet -Ruby library][redcarpet] has been removed and all issues/comments, including -those from pre-11.1, are now processed using [CommonMark Ruby -Library][commonmarker]. -> -> The documentation website had its [markdown engine migrated from Redcarpet to Kramdown](https://gitlab.com/gitlab-com/gitlab-docs/merge_requests/108) -in October 2018. -> -> _Where there are significant differences, we will try to call them out in this document._ +You can also use other rich text files in GitLab. You might have to install a dependency +to do so. Please see the [`gitlab-markup` gem project](https://gitlab.com/gitlab-org/gitlab-markup) +for more information. -### Transitioning to CommonMark +### Transition from Redcarpet to CommonMark -You may have older issues/merge requests or Markdown documents in your -repository that were written using some of the nuances of RedCarpet's version +Since 11.1, GitLab uses the [CommonMark Ruby Library](https://github.com/gjtorikian/commonmarker) +for Markdown processing of all new issues, merge requests, comments, and other Markdown +content in the GitLab system. Since 11.3, wiki pages and Markdown files (`*.md`) in +repositories are also processed with CommonMark. As of 11.8, the [Redcarpet Ruby library](https://github.com/vmg/redcarpet) +has been removed and all issues and comments, including those from pre-11.1, are now processed +using the [CommonMark Ruby Library](https://github.com/gjtorikian/commonmarker). + +The documentation website had its [markdown engine migrated from Redcarpet to Kramdown](https://gitlab.com/gitlab-com/gitlab-docs/merge_requests/108) +in October 2018. + +You may have older issues, merge requests, or Markdown documents in your +repository that were written using some of the nuances of GitLab's RedCarpet version of Markdown. Since CommonMark uses a slightly stricter syntax, these documents -may now display a little strangely since we've transitioned to CommonMark. -Numbered lists with nested lists in particular can be displayed incorrectly. +may now display a little differently since we've transitioned to CommonMark. -It is usually quite easy to fix. In the case of a nested list such as this: +It is usually quite easy to fix. For example, numbered lists with nested lists may +render incorrectly: ```markdown 1. Chocolate @@ -58,7 +57,14 @@ It is usually quite easy to fix. In the case of a nested list such as this: - milk ``` -simply add a space to each nested item: +1. Chocolate + - dark + - milk + +--- + +Simply add a space to each nested item to align the `-` with the first character of +the top list item (`C` in this case): ```markdown 1. Chocolate @@ -66,775 +72,885 @@ simply add a space to each nested item: - milk ``` -In the documentation below, we try to highlight some of the differences. +1. Chocolate + - dark + - milk + +NOTE: **Note:** We will flag any significant differences between Redcarpet and CommonMark + markdown in this document. If you have a large volume of Markdown files, it can be tedious to determine -if they will be displayed correctly or not. You can use the +if they will display correctly or not. You can use the [diff_redcarpet_cmark](https://gitlab.com/digitalmoksha/diff_redcarpet_cmark) -tool (not an officially supported product) to generate a list of files and +tool (not an officially supported product) to generate a list of files, and the differences between how RedCarpet and CommonMark render the files. It can give -you a great idea if anything needs to be changed - many times nothing will need -to changed. - -### Newlines - -> If this is not rendered correctly, see -https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#newlines - -GFM honors the markdown specification in how [paragraphs and line breaks are handled][commonmark-spec]. - -A paragraph is simply one or more consecutive lines of text, separated by one or -more blank lines. -Line-breaks, or soft returns, are rendered if you end a line with two or more spaces: +an indication if anything needs to be changed - often nothing will need +to change. + +### GFM extends standard markdown + +GitLab makes full use of the standard (CommonMark) formatting, but also includes additional +functionality useful for GitLab users. + +It makes use of [new markdown features](#new-GFM-markdown-extensions), +not found in standard markdown: + +- [Color "chips" written in HEX, RGB or HSL](#colors) +- [Diagrams and flowcharts using Mermaid](#diagrams-and-flowcharts-using-mermaid) +- [Emoji](#emoji) +- [Front matter](#front-matter) +- [Inline diffs](#inline-diff) +- [Math equations and symbols written in LaTeX](#math) +- [Special GitLab references](#special-gitlab-references) +- [Task Lists](#task-lists) +- [Wiki specific markdown](#wiki-specific-markdown) + +It also has [extended markdown features](#standard-markdown-and-extensions-in-gitlab), without +changing how standard markdown is used: + +| Standard markdown | Extended markdown in GitLab | +| ------------------------------------- | ------------------------- | +| [blockquotes](#blockquotes) | [multiline blockquotes](#multiline-blockquote) | +| [code blocks](#code-spans-and-blocks) | [colored code and syntax highlighting](#colored-code-and-syntax-highlighting) | +| [emphasis](#emphasis) | [multiple underscores in words](#multiple-underscores-in-words-and-mid-word-emphasis) +| [headers](#headers) | [linkable Header IDs](#header-ids-and-links) | +| [images](#images) | [embedded videos](#videos) | +| [linebreaks](#line-breaks) | [more linebreak control](#newlines) | +| [links](#links) | [automatically linking URLs](#url-auto-linking) | + +## New GFM markdown extensions + +### Colors - - - Roses are red [followed by two or more spaces] - Violets are blue +> If this is not rendered correctly, [view it in GitLab itself](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#colors). - Sugar is sweet +It is possible to have color written in HEX, RGB or HSL format rendered with a color +indicator. - - -Roses are red -Violets are blue +Supported formats (named colors are not supported): -Sugar is sweet +- HEX: `` `#RGB[A]` `` or `` `#RRGGBB[AA]` `` +- RGB: `` `RGB[A](R, G, B[, A])` `` +- HSL: `` `HSL[A](H, S, L[, A])` `` -### Multiple underscores in words +Color written inside backticks will be followed by a color "chip": -> If this is not rendered correctly, see -https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#multiple-underscores-in-words +```markdown +`#F00` +`#F00A` +`#FF0000` +`#FF0000AA` +`RGB(0,255,0)` +`RGB(0%,100%,0%)` +`RGBA(0,255,0,0.3)` +`HSL(540,70%,50%)` +`HSLA(540,70%,50%,0.3)` +``` -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: +`#F00` +`#F00A` +`#FF0000` +`#FF0000AA` +`RGB(0,255,0)` +`RGB(0%,100%,0%)` +`RGBA(0,255,0,0.3)` +`HSL(540,70%,50%)` +`HSLA(540,70%,50%,0.3)` - perform_complicated_task +### Diagrams and flowcharts using Mermaid - do_this_and_do_that_and_another_thing +> [Introduced](https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/15107) in +GitLab 10.3. -perform_complicated_task +It is possible to generate diagrams and flowcharts from text using [Mermaid](https://mermaidjs.github.io/). +Visit the official page for more details. -do_this_and_do_that_and_another_thing +In order to generate a diagram or flowchart, you should write your text inside the `mermaid` block: -### URL auto-linking +~~~ +```mermaid +graph TD; + A-->B; + A-->C; + B-->D; + C-->D; +``` +~~~ -> If this is not rendered correctly, see -https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#url-auto-linking +```mermaid +graph TD; + A-->B; + A-->C; + B-->D; + C-->D; +``` -GFM will autolink almost any URL you copy and paste into your text: +### Emoji - * https://www.google.com - * https://google.com/ - * ftp://ftp.us.debian.org/debian/ - * smb://foo/bar/baz - * irc://irc.freenode.net/gitlab - * http://localhost:3000 +> If this is not rendered correctly, [view it in GitLab itself](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#emoji). -* https://www.google.com -* https://google.com/ -* ftp://ftp.us.debian.org/debian/ -* smb://foo/bar/baz -* irc://irc.freenode.net/gitlab -* http://localhost:3000 +```md +Sometimes you want to :monkey: around a bit and add some :star2: to your :speech_balloon:. Well we have a gift for you: -### Multiline blockquote +:zap: You can use emoji anywhere GFM is supported. :v: -> If this is not rendered correctly, see -https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#multiline-blockquote +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. -On top of standard Markdown [blockquotes](#blockquotes), which require prepending `>` to quoted lines, -GFM supports multiline blockquotes fenced by >>>: +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. +Consult the [Emoji Cheat Sheet](https://www.emojicopy.com) for a list of all supported emoji codes. :thumbsup: ``` ->>> -If you paste a message from somewhere else -that +Sometimes you want to around a bit and add some to your . Well we have a gift for you: -spans +You can use emoji anywhere GFM is supported. -multiple lines, +You can use it to point out a or warn about patches. And if someone improves your really code, send them some . People will you for that. -you can quote that without having to manually prepend `>` to every line! ->>> -``` +If you are new to this, don't be . You can easily join the emoji . All you need to do is to look up one of the supported codes. -
-

If you paste a message from somewhere else

-

that

-

spans

-

multiple lines,

-

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

-
+Consult the [Emoji Cheat Sheet](https://www.webfx.com/tools/emoji-cheat-sheet/) for a list of all supported emoji codes. -### Code and syntax highlighting +> **Note:** The emoji example above uses hard-coded images for this documentation. The emoji, +when rendered within GitLab, may appear different depending on the OS and browser used. -> If this is not rendered correctly, see -https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#code-and-syntax-highlighting +Most emoji are natively supported on macOS, Windows, iOS, Android and will fallback to image-based emoji where there is lack of support. -_GitLab uses the [Rouge Ruby library][rouge] for syntax highlighting. For a -list of supported languages visit the Rouge website._ +NOTE: **Note:** 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. -Blocks of code are either fenced by lines with three back-ticks ```, -or are indented with four spaces. Only the fenced code blocks support syntax -highlighting: +### Front matter -``` -Inline `code` has `back-ticks around` it. -``` +> [Introduced](https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/23331) + in GitLab 11.6. -Inline `code` has `back-ticks around` it. +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/), +[Hugo](https://gohugo.io/content-management/front-matter/), and many other applications. -Example: +When you view a Markdown file rendered by GitLab, any front matter is displayed as-is, +in a box at the top of the document, before the rendered HTML content. To view an example, +you can toggle between the source and rendered version of a [GitLab documentation file](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/README.md). - ```javascript - var s = "JavaScript syntax highlighting"; - alert(s); - ``` +In GitLab, front matter is only used in Markdown files and wiki pages, not the other +places where Markdown formatting is supported. It must be at the very top of the document, +and must be between delimiters, as explained below. - ```python - def function(): - #indenting works just fine in the fenced code block - s = "Python syntax highlighting" - print s - ``` +The following delimeters are supported: - ```ruby - require 'redcarpet' - markdown = Redcarpet.new("Hello World!") - puts markdown.to_html - ``` +- YAML (`---`): - ``` - No language indicated, so no syntax highlighting. - s = "There is no highlighting for this." - But let's throw in a tag. - ``` + ~~~yaml + --- + title: About Front Matter + example: + language: yaml + --- + ~~~ -becomes: +- TOML (`+++`): -```javascript -var s = "JavaScript syntax highlighting"; -alert(s); -``` + ~~~toml + +++ + title = "About Front Matter" + [example] + language = "toml" + +++ + ~~~ -```python -def function(): - #indenting works just fine in the fenced code block - s = "Python syntax highlighting" - print s -``` +- JSON (`;;;`): -```ruby -require 'redcarpet' -markdown = Redcarpet.new("Hello World!") -puts markdown.to_html -``` + ~~~json + ;;; + { + "title": "About Front Matter" + "example": { + "language": "json" + } + } + ;;; + ~~~ -``` -No language indicated, so no syntax highlighting. -s = "There is no highlighting for this." -But let's throw in a tag. +Other languages are supported by adding a specifier to any of the existing +delimiters. For example: + +```php +---php +$title = "About Front Matter"; +$example = array( + 'language' => "php", +); +--- ``` ### Inline diff -> If this is not rendered correctly, see -https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#inline-diff +> If this is not rendered correctly, [view it in GitLab itself](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#inline-diff). -With inline diffs tags you can display {+ additions +} or [- deletions -]. +With inline diff tags you can display {+ additions +} or [- deletions -]. -The wrapping tags can be either curly braces or square brackets. +The wrapping tags can be either curly braces or square brackets: -Examples: - -``` -- {+ additions +} -- [+ additions +] -- {- deletions -} -- [- deletions -] +```markdown +- {+ addition 1 +} +- [+ addition 2 +] +- {- deletion 3 -} +- [- deletion 4 -] ``` -becomes: +- {+ addition 1 +} +- [+ addition 2 +] +- {- deletion 3 -} +- [- deletion 4 -] -![inline diffs tags rendered](img/markdown_inline_diffs_tags_rendered.png) +--- -However the wrapping tags cannot be mixed as such: +However the wrapping tags cannot be mixed: -``` -- {+ additions +] -- [+ additions +} -- {- deletions -] -- [- deletions -} +```markdown +- {+ addition +] +- [+ addition +} +- {- deletion -] +- [- deletion -} ``` -### Emoji +### Math -```md -Sometimes you want to :monkey: around a bit and add some :star2: to your :speech_balloon:. Well we have a gift for you: +> If this is not rendered correctly, [view it in GitLab itself](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#math). -:zap: You can use emoji anywhere GFM is supported. :v: +It is possible to have math written with LaTeX syntax rendered using [KaTeX](https://github.com/Khan/KaTeX). -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. +Math written between dollar signs `$` will be rendered inline with the text. Math written +inside a [code block](#code-spans-and-blocks) with the language declared as `math`, will be rendered +on a separate line: -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. +~~~ +This math is inline $`a^2+b^2=c^2`$. -Consult the [Emoji Cheat Sheet](https://www.emojicopy.com) for a list of all supported emoji codes. :thumbsup: - -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. +This is on a separate line -Ubuntu 18.04 (like many modern Linux distros) has this font installed by default. +```math +a^2+b^2=c^2 ``` +~~~ -Sometimes you want to around a bit and add some to your . Well we have a gift for you: - -You can use emoji anywhere GFM is supported. - -You can use it to point out a or warn about patches. And if someone improves your really code, send them some . People will you for that. +This math is inline $`a^2+b^2=c^2`$. -If you are new to this, don't be . You can easily join the emoji . All you need to do is to look up one of the supported codes. - -Consult the [Emoji Cheat Sheet](https://www.webfx.com/tools/emoji-cheat-sheet/) for a list of all supported emoji codes. +This is on a separate line -Most emoji are natively supported on macOS, Windows, iOS, Android and will fallback to image-based emoji where there is lack of support. +```math +a^2+b^2=c^2 +``` -On Linux, you can download [Noto Color Emoji](https://www.google.com/get/noto/help/emoji/) to get full native emoji support. +_Be advised that KaTeX only supports a [subset](https://katex.org/docs/supported.html) of LaTeX._ -Ubuntu 18.04 (like many modern Linux distros) has this font installed by default. +NOTE: **Note:** This also works for the asciidoctor `:stem: latexmath`. For details see +the [asciidoctor user manual](http://asciidoctor.org/docs/user-manual/#activating-stem-support). ### Special GitLab references -GFM recognizes special references. +GFM recognizes special GitLab related references. For example, you can easily reference +an issue, a commit, a team member or even the whole team within a project. GFM will turn +that reference into a link so you can navigate between them easily. -You can easily reference e.g. an issue, a commit, a team member or even the whole team within a project. - -GFM will turn that reference into a link so you can navigate between them easily. +Additionally, GFM recognizes certain cross-project references, and also has a shorthand +version to reference other projects from the same namespace. GFM will recognize the following: -| input | references | -|:---------------------------|:--------------------------------| -| `@user_name` | specific user | -| `@group_name` | specific group | -| `@all` | entire team | -| `namespace/project>` | project | -| `#12345` | issue | -| `!123` | merge request | -| `$123` | snippet | -| `&123` | epic **[ULTIMATE]** | -| `~123` | label by ID | -| `~bug` | one-word label by name | -| `~"feature request"` | multi-word label by name | -| `%123` | project milestone by ID | -| `%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 | - -GFM also recognizes certain cross-project references: - -| input | references | -|:----------------------------------------|:------------------------| -| `namespace/project#123` | issue | -| `namespace/project!123` | merge request | -| `namespace/project%123` | project milestone | -| `namespace/project$123` | snippet | -| `namespace/project@9ba12248` | specific commit | -| `group1/subgroup&123` | epic **[ULTIMATE]** | -| `namespace/project@9ba12248...b19a04f5` | commit range comparison | -| `namespace/project~"Some label"` | issues with given label | - -It also has a shorthand version to reference other projects from the same namespace: - -| input | references | -|:------------------------------|:------------------------| -| `project#123` | issue | -| `project!123` | merge request | -| `project%123` | project milestone | -| `project$123` | snippet | -| `project@9ba12248` | specific commit | -| `project@9ba12248...b19a04f5` | commit range comparison | -| `project~"Some label"` | issues with given label | +| references | input | cross-project reference | shortcut within same namespace | +| :------------------------------ | :------------------------- | :-------------------------------------- | :----------------------------- | +| specific user | `@user_name` | | | +| specific group | `@group_name` | | | +| entire team | `@all` | | | +| project | `namespace/project>` | | | +| issue | ``#123`` | `namespace/project#123` | `project#123` | +| merge request | `!123` | `namespace/project!123` | `project!123` | +| snippet | `$123` | `namespace/project$123` | `project$123` | +| epic **[ULTIMATE]** | `&123` | `group1/subgroup&123` | | +| label by ID | `~123` | `namespace/project~123` | `project~123` | +| one-word label by name | `~bug` | `namespace/project~bug` | `project~bug` | +| multi-word label by name | `~"feature request"` | `namespace/project~"feature request"` | `project~"feature request"` | +| project milestone by ID | `%123` | `namespace/project%123` | `project%123` | +| one-word milestone by name | `%v1.23` | `namespace/project%v1.23` | `project%v1.23` | +| multi-word milestone by name | `%"release candidate"` | `namespace/project%"release candidate"` | `project%"release candidate"` | +| specific commit | `9ba12248` | `namespace/project@9ba12248` | `project@9ba12248` | +| commit range comparison | `9ba12248...b19a04f5` | `namespace/project@9ba12248...b19a04f5` | `project@9ba12248...b19a04f5` | +| repository file references | `[README](doc/README)` | | | +| repository file line references | `[README](doc/README#L13)` | | | ### Task lists -> If this is not rendered correctly, see -https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#task-lists +> If this is not rendered correctly, [view it in GitLab itself](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#task-lists). -You can add task lists to issues, merge requests and comments. To create a task list, add a specially-formatted Markdown list, like so: +You can add task lists anywhere markdown is supported, but you can only "click" to +toggle the boxes if they are in issues, merge requests, or comments. In other places +you must edit the markdown manually to change the status by adding or removing the `x`. -``` +To create a task list, add a specially-formatted Markdown list. You can use either +unordered or ordered lists: + +```markdown - [x] Completed task - [ ] Incomplete task - - [ ] Sub-task 1 - - [x] Sub-task 2 - - [ ] Sub-task 3 + - [ ] Sub-task 1 + - [x] Sub-task 2 + - [ ] Sub-task 3 +1. [x] Completed task +1. [ ] Incomplete task + 1. [ ] Sub-task 1 + 1. [x] Sub-task 2 ``` -![alt unordered-check-list-render-gfm](img/unordered_check_list_render_gfm.png) - -Tasks formatted as ordered lists are supported as well: - -``` +- [x] Completed task +- [ ] Incomplete task + - [ ] Sub-task 1 + - [x] Sub-task 2 + - [ ] Sub-task 3 1. [x] Completed task 1. [ ] Incomplete task - 1. [ ] Sub-task 1 - 1. [x] Sub-task 2 -``` + 1. [ ] Sub-task 1 + 1. [x] Sub-task 2 -![alt task-list-ordered-render-gfm](img/task_list_ordered_render_gfm.png) +### Wiki-specific Markdown -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. +The following examples show how links inside wikis behave. -### Videos +#### Wiki - Direct page link -> If this is not rendered correctly, see -https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#videos +A link which just includes the slug for a page will point to that page, +_at the base level of the wiki_. -Image tags with a video extension are automatically converted to a video player. +This snippet would link to a `documentation` page at the root of your wiki: -The valid video extensions are `.mp4`, `.m4v`, `.mov`, `.webm`, and `.ogv`. +```markdown +[Link to Documentation](documentation) +``` - Here's a sample video: +#### Wiki - Direct file link - ![Sample Video](img/markdown_video.mp4) +Links with a file extension point to that file, _relative to the current page_. -Here's a sample video: +If the snippet below was placed on a page at `/documentation/related`, +it would link to `/documentation/file.md`: -
- -

Sample Video

-
+```markdown +[Link to File](file.md) +``` -### Math +#### Wiki - Hierarchical link -> If this is not rendered correctly, see -https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#math +A link can be constructed relative to the current wiki page using `./`, +`../`, etc. -It is possible to have math written with the LaTeX syntax rendered using [KaTeX][katex]. +If this snippet was placed on a page at `/documentation/main`, +it would link to `/documentation/related`: -Math written inside ```$``$``` will be rendered inline with the text. +```markdown +[Link to Related Page](./related) +``` -Math written inside triple back quotes, with the language declared as `math`, will be rendered on a separate line. +If this snippet was placed on a page at `/documentation/related/content`, +it would link to `/documentation/main`: -Example: +```markdown +[Link to Related Page](../main) +``` - This math is inline $`a^2+b^2=c^2`$. +If this snippet was placed on a page at `/documentation/main`, +it would link to `/documentation/related.md`: - This is on a separate line - ```math - a^2+b^2=c^2 - ``` +```markdown +[Link to Related Page](./related.md) +``` -Becomes: +If this snippet was placed on a page at `/documentation/related/content`, +it would link to `/documentation/main.md`: -This math is inline ![alt text](img/math_inline_sup_render_gfm.png). +```markdown +[Link to Related Page](../main.md) +``` -This is on a separate line +#### Wiki - Root link - +A link starting with a `/` is relative to the wiki root. -_Be advised that KaTeX only supports a [subset][katex-subset] of LaTeX._ +This snippet links to `/documentation`: ->**Note:** -This also works for the asciidoctor `:stem: latexmath`. For details see the [asciidoctor user manual][asciidoctor-manual]. +```markdown +[Link to Related Page](/documentation) +``` -### Colors +This snippet links to `/miscellaneous.md`: -> If this is not rendered correctly, see -https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#colors +```markdown +[Link to Related Page](/miscellaneous.md) +``` -It is possible to have color written in HEX, RGB or HSL format rendered with a color indicator. +## Standard markdown and extensions in GitLab -Color written inside backticks will be followed by a color "chip". +All standard markdown formatting should work as expected within GitLab. Some standard +functionality is extended with additional features, without affecting the standard usage. +If a functionality is extended, the new option will be listed as a sub-section. -Examples: +### Blockquotes - `#F00` - `#F00A` - `#FF0000` - `#FF0000AA` - `RGB(0,255,0)` - `RGB(0%,100%,0%)` - `RGBA(0,255,0,0.7)` - `HSL(540,70%,50%)` - `HSLA(540,70%,50%,0.7)` +Blockquotes are an easy way to highlight information, such as a side-note. It is generated +by starting the lines of the blockquote with `>`: -Becomes: +```markdown +> Blockquotes are very handy to emulate reply text. +> This line is part of the same quote. -![alt color-inline-colorchip-render-gfm](img/color_inline_colorchip_render_gfm.png) +Quote break. -#### Supported formats: +> 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. +``` -* HEX: `` `#RGB[A]` `` or `` `#RRGGBB[AA]` `` -* RGB: `` `RGB[A](R, G, B[, A])` `` -* HSL: `` `HSL[A](H, S, L[, A])` `` +> Blockquotes are very handy to emulate reply text. +> This line is part of the same quote. -### Mermaid +Quote break. -> [Introduced](https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/15107) in -GitLab 10.3. -> -> If this is not rendered correctly, see -https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#mermaid +> 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. -It is possible to generate diagrams and flowcharts from text using [Mermaid](https://mermaidjs.github.io/). +#### Multiline blockquote -In order to generate a diagram or flowchart, you should write your text inside the `mermaid` block. +> If this is not rendered correctly, [view it in GitLab itself](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#multiline-blockquote). -Example: +GFM extends the standard markdown standard by also supporting multiline blockquotes +fenced by `>>>`: - ```mermaid - graph TD; - A-->B; - A-->C; - B-->D; - C-->D; - ``` +``` +>>> +If you paste a message from somewhere else -Becomes: +that spans multiple lines, -```mermaid -graph TD; - A-->B; - A-->C; - B-->D; - C-->D; +you can quote that without having to manually prepend `>` to every line! +>>> ``` -For details see the [Mermaid official page](https://mermaidjs.github.io/). +>>> +If you paste a message from somewhere else -### Front matter +that spans multiple lines, -> [Introduced](https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/23331) - in GitLab 11.6. - -Front matter is metadata included at the beginning of a markdown document, preceding -its content. This data can be used by static site generators such as [Jekyll](https://jekyllrb.com/docs/front-matter/) and [Hugo](https://gohugo.io/content-management/front-matter/), -and many other applications. +you can quote that without having to manually prepend `>` to every line! +>>> -In GitLab, front matter is only used in Markdown files and wiki pages, not the other places where Markdown formatting is supported. -When you view a Markdown file rendered by GitLab, any front matter is displayed as-is, in a box at the top of the document, before the rendered HTML content. -To view an example, you can toggle between the source and rendered version of a [GitLab documentation file](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/README.md). +### Code spans and blocks -The following delimeters are supported: +You can easily highlight anything that should be viewed as code and not simple text. -- YAML (`---`): +Simple inline code is easily highlighted with single backticks `` ` ``: - ``` - --- - title: About Front Matter - example: - language: yaml - --- - ``` +```markdown +Inline `code` has `back-ticks around` it. +``` -- TOML (`+++`): +Inline `code` has `back-ticks around` it. - ``` - +++ - title = "About Front Matter" - [example] - language = "toml" - +++ - ``` +--- -- JSON (`;;;`): +Similarly, a whole block of code can be fenced with triple backticks ```` ``` ````, +triple tildes (`~~~`), or indended 4 or more spaces to achieve a similar effect for +a larger body of code. test. - ``` - ;;; - { - "title": "About Front Matter" - "example": { - "language": "json" - } - } - ;;; - ``` +~~~ +``` +def function(): + #indenting works just fine in the fenced code block + s = "Python code" + print s +``` -Other languages are supported by adding a specifier to any of the existing -delimiters. For example: + Using 4 spaces + is like using + 3-backtick fences. +~~~ ``` ----php -$title = "About Front Matter"; -$example = array( - 'language' => "php", -); ---- +~~~ +Tildes are OK too. +~~~ ``` -## Standard Markdown - -### Headers +The three examples above render as: ``` -# H1 -## H2 -### H3 -#### H4 -##### H5 -###### H6 +def function(): + #indenting works just fine in the fenced code block + s = "Python code" + print s +``` -Alternatively, for H1 and H2, an underline-ish style: + Using 4 spaces + is like using + 3-backtick fences. -Alt-H1 -====== +~~~ +Tildes are OK too. +~~~ -Alt-H2 ------- -``` +#### Colored code and syntax highlighting -#### Header IDs and links +> If this is not rendered correctly, [view it in GitLab itself](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#colored-code-and-syntax-highlighting). -All Markdown-rendered headers automatically get IDs, which can be linked to, except in comments. +GitLab uses the [Rouge Ruby library](http://rouge.jneen.net/) for more colorful syntax +highlighting in code blocks. For a list of supported languages visit the +[Rouge project wiki](https://github.com/jneen/rouge/wiki/List-of-supported-languages-and-lexers). +Syntax highlighting is only supported in code blocks, it is not possible to highlight +code when it is inline. -On hover, a link to those IDs becomes visible to make it easier to copy the link to the header to use it somewhere else. +Blocks of code are fenced by lines with three back-ticks ```` ``` ```` or three tildes `~~~`, and have +the language identified at the end of the first fence: -The IDs are generated from the content of the header according to the following rules: +~~~ +```javascript +var s = "JavaScript syntax highlighting"; +alert(s); +``` -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. -1. If a header with the same ID has already been generated, a unique - incrementing number is appended, starting at 1. +```python +def function(): + #indenting works just fine in the fenced code block + s = "Python syntax highlighting" + print s +``` -For example: +```ruby +require 'redcarpet' +markdown = Redcarpet.new("Hello World!") +puts markdown.to_html +``` ``` -# 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 -## This header has 3.5 in it (and parentheses) +No language indicated, so no syntax highlighting. +s = "There is no highlighting for this." +But let's throw in a tag. ``` +~~~ -Would generate the following link IDs: +The four examples above render as: -1. `this-header-has-spaces-in-it` -1. `this-header-has-a-in-it` -1. `this-header-has-unicode-in-it-한글` -1. `this-header-has-spaces-in-it-1` -1. `this-header-has-spaces-in-it-2` -1. `this-header-has-3-5-in-it-and-parentheses` +```javascript +var s = "JavaScript syntax highlighting"; +alert(s); +``` -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. +```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 tag. +``` ### Emphasis +There are multiple ways to emphasize text in markdown. You can italicize, bold, strikethrough, +as well as combine these emphasis styles together. + Examples: -``` +```markdown Emphasis, aka italics, with *asterisks* or _underscores_. -Strong emphasis, aka bold, with **asterisks** or __underscores__. +Strong emphasis, aka bold, with double **asterisks** or __underscores__. Combined emphasis with **asterisks and _underscores_**. Strikethrough uses two tildes. ~~Scratch this.~~ ``` -Becomes: - Emphasis, aka italics, with *asterisks* or _underscores_. -Strong emphasis, aka bold, with **asterisks** or __underscores__. +Strong emphasis, aka bold, with double **asterisks** or __underscores__. Combined emphasis with **asterisks and _underscores_**. Strikethrough uses two tildes. ~~Scratch this.~~ -### Lists +NOTE: **Note:** Strikethrough is not part of the core Markdown standard, but is part of GFM. -Examples: +#### Multiple underscores in words and mid-word emphasis -``` -1. First ordered list item -2. Another item - * Unordered sub-list. -1. Actual numbers don't matter, just that it's a number - 1. Ordered sub-list -4. And another item. +> If this is not rendered correctly, [view it in GitLab itself](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#multiple-underscores-in-words). -* Unordered list can use asterisks -- Or minuses -+ Or pluses +It is not usually useful to italicize just _part_ of a word, especially when you're +dealing with code and names that often appear with multiple underscores. As a result, +GFM extends the standard markdown standard by ignoring multiple underlines in words, +to allow better rendering of markdown documents discussing code: + +```md +perform_complicated_task + +do_this_and_do_that_and_another_thing + +but_emphasis is_desired _here_ ``` -Becomes: +perform_complicated_task + +do_this_and_do_that_and_another_thing -1. First ordered list item -2. Another item - * Unordered sub-list. -1. Actual numbers don't matter, just that it's a number - 1. Ordered sub-list -4. And another item. +but_emphasis is_desired _here_ -* Unordered list can use asterisks -- Or minuses -+ Or pluses +--- -If a list item contains multiple paragraphs, -each subsequent paragraph should be indented to the same level as the start of the list item text +If you wish to emphasize only a part of a word, it can still be done with asterisks: -Example: +```md +perform*complicated*task + +do*this*and*do*that*and*another thing +``` + +perform*complicated*task + +do*this*and*do*that*and*another thing + +### Footnotes +Footnotes add a link to a note rendered at the end of a markdown file: + +```markdown +You can add footnotes to your text as follows.[^1] + +[^1]: This is my awesome footnote (later in file). ``` -1. First ordered list item - Second paragraph of first item. +You can add footnotes to your text as follows.[^1] -2. Another item +[^1]: This is my awesome footnote (later in file). + +### Headers + +```markdown +# H1 +## H2 +### H3 +#### H4 +##### H5 +###### H6 + +Alternatively, for H1 and H2, an underline-ish style: + +Alt-H1 +====== + +Alt-H2 +------ ``` -Becomes: +#### Header IDs and links -1. First ordered list item +GFM extends the standard markdown standard so that all Markdown-rendered headers automatically +get IDs, which can be linked to, except in comments. - Paragraph of first item. +On hover, a link to those IDs becomes visible to make it easier to copy the link to +the header to use it somewhere else. -2. Another item +The IDs are generated from the content of the header according to the following rules: -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. +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. +1. If a header with the same ID has already been generated, a unique + incrementing number is appended, starting at 1. Example: ``` -1. First ordered list item - - Paragraph of first item. - -2. Another item +# 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 +## This header has 3.5 in it (and parentheses) ``` -Becomes: - -1. First ordered list item +Would generate the following link IDs: - Paragraph of first item. +1. `this-header-has-spaces-in-it` +1. `this-header-has-a-in-it` +1. `this-header-has-unicode-in-it-한글` +1. `this-header-has-spaces-in-it-1` +1. `this-header-has-spaces-in-it-2` +1. `this-header-has-3-5-in-it-and-parentheses` -2. Another item +Note that the Emoji processing happens before the header IDs are generated, so the +Emoji is converted to an image which is then removed from the ID. -### Links +### Horizontal Rule -There are two ways to create links, inline-style and reference-style. +It's very simple to create a horizontal rule, by using three or more hyphens, asterisks, +or underscores: ```markdown -[I'm an inline-style link](https://www.google.com) -[I'm a link to a repository file in the same directory](index.md) -[I am an absolute reference within the repository](/doc/user/index.md) -[I'm a relative link to the Milestones page](../README.md) +Three or more hyphens, -[I link to a section on a different markdown page, using a header ID](index.md#overview) -[I link to a different section on the same page, using the header ID](#header-ids-and-links) +--- -[I'm a reference-style link][Arbitrary case-insensitive reference text] -[You can use numbers for reference-style link definitions][1] -Or leave it empty and use the [link text itself][] +asterisks, -Some text to show that the reference links can follow later. +*** -[arbitrary case-insensitive reference text]: https://www.mozilla.org -[1]: http://slashdot.org -[link text itself]: https://www.reddit.com +or underscores + +___ ``` ->**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)` -will point the link to `wikis/style` when the link is inside of a wiki markdown file. +Three or more hyphens, + +--- + +asterisks, + +*** + +or underscores + +___ ### Images Examples: - Here's our logo (hover to see the title text): - - Inline-style: - ![alt text](img/markdown_logo.png) +```markdown +Inline-style (hover to see title text): - Reference-style: - ![alt text1][logo] +![alt text](img/markdown_logo.png "Title Text") - [logo]: img/markdown_logo.png +Reference-style (hover to see title text): -Becomes: +![alt text1][logo] -Here's our logo: +[logo]: img/markdown_logo.png "Title Text" +``` -Inline-style: +Inline-style (hover to see title text): -![alt text](img/markdown_logo.png) +![alt text](img/markdown_logo.png "Title Text") -Reference-style: +Reference-style (hover to see title text): ![alt text][logo] -[logo]: img/markdown_logo.png +[logo]: img/markdown_logo.png "Title Text" -### Blockquotes +#### Videos -Examples: +> If this is not rendered correctly, [view it in GitLab itself](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#videos). -``` -> Blockquotes are very handy in email to emulate reply text. -> This line is part of the same quote. +Image tags that link to files with a video extension are automatically converted to +a video player. The valid video extensions are `.mp4`, `.m4v`, `.mov`, `.webm`, and `.ogv`: -Quote break. +```md +Here's a sample video: -> 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. +![Sample Video](img/markdown_video.mp4) ``` -Becomes: - -> Blockquotes are very handy in email to emulate reply text. -> This line is part of the same quote. - -Quote break. +Here's a sample video: -> 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. +![Sample Video](img/markdown_video.mp4) ### Inline HTML -You can also use raw HTML in your Markdown, and it'll mostly work pretty well. +> To see the markdown rendered within HTML in the second example, [view it in GitLab itself](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#inline-html). -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. +You can also use raw HTML in your Markdown, and it'll usually work pretty well. -Examples: +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. -``` +```html
Definition list
Is something people use sometimes.
Markdown in HTML
-
Does *not* work **very** well. Use HTML tags.
+
Does *not* work **very** well. HTML tags will always work.
``` -Becomes: -
Definition list
Is something people use sometimes.
Markdown in HTML
-
Does *not* work **very** well. Use HTML tags.
+
Does *not* work **very** well. HTML tags will always work.
+
+ +--- + +It is still possible to use markdown inside HTML tags, but only if the lines containing markdown +are separated into their own lines: + +```html +
+
Markdown in HTML
+
Does *not* work **very** well. HTML tags will always work.
+ +
Markdown in HTML
+
+ + Does *not* work **very** well. HTML tags will always work. + +
+
+``` + + + +
+
Markdown in HTML
+
Does *not* work **very** well. HTML tags will always work.
+ +
Markdown in HTML
+
+ + Does not work very well. HTML tags will always work. + +
#### Details and Summary -Content can be collapsed using HTML's [`
`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) and [``](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. +> To see the markdown rendered within HTML in the second example, [view it in GitLab itself](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#details-and-summary). + +Content can be collapsed using HTML's [`
`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) +and [``](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. + +```html +

+

+Click me to collapse/fold. + +These details will remain hidden until expanded. + +
PASTE LOGS HERE
+ +
+

+```

@@ -847,7 +963,10 @@ These details will remain hidden until expanded.

-**Note:** Markdown inside these tags is supported, as long as you have a blank line after the `` tag and before the `
` tag, as shown in the example. +--- + +Markdown inside these tags is supported as well, as long as you have a blank line +after the `` tag and before the `
` tag, as shown in the example: ```html
@@ -860,232 +979,304 @@ These details _will_ remain **hidden** until expanded.
``` -### Horizontal Rule + -Examples: +
+Click me to collapse/fold. -``` -Three or more... +These details will remain hidden until expanded. ---- + PASTE LOGS HERE + +
-Hyphens +### Line Breaks -*** +A line break will be inserted (a new paragraph will start) if the previous text is +ended with two newlines, i.e. you hit Enter twice in a row. If you only +use one newline (hit Enter once), the next sentence will be part of the +same paragraph. This is useful if you want to keep long lines from wrapping, and keep +them easily editable: -Asterisks +```markdown +Here's a line for us to start with. -___ +This longer line is separated from the one above by two newlines, so it will be a *separate paragraph*. -Underscores +This line is also a separate paragraph, but... +These lines are only separated by single newlines, +so they *do not break* and just follow the previous lines +in the *same paragraph*. ``` -Becomes: - -Three or more... +Here's a line for us to start with. ---- +This longer line is separated from the one above by two newlines, so it will be a *separate paragraph*. -Hyphens +This line is also a separate paragraph, but... +These lines are only separated by single newlines, +so they *do not break* and just follow the previous lines +in the *same paragraph*. -*** +#### Newlines -Asterisks +GFM adheres to the markdown specification in how [paragraphs and line breaks are handled](https://spec.commonmark.org/current/). -___ +A paragraph is simply one or more consecutive lines of text, separated by one or +more blank lines (i.e. two newlines at the end of the first paragraph), as [explained above](#line-breaks). -Underscores +If you need more control over line-breaks or soft returns, you can add a single line-break +by ending a line with a backslash, or two or more spaces. Two newlines in a row will create a new +paragraph, with a blank line in between: -### Line Breaks +```markdown +First paragraph. +Another line in the same paragraph. +A third line in the same paragraph, but this time ending with two spaces.{space}{space} +A new line directly under the first paragraph. + +Second paragraph. +Another line, this time ending with a backslash.\ +A new line due to the previous backslash. +``` -A good way to learn how line breaks work is to experiment and discover -- hit Enter 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. + + -Here are some things to try out: +First paragraph. +Another line in the same paragraph. +A third line in the same paragraph, but this time ending with two spaces. +A new line directly under the first paragraph. -Examples: + + -``` -Here's a line for us to start with. +Second paragraph. +Another line, this time ending with a backslash. +A new line due to the previous backslash. -This line is separated from the one above by two newlines, so it will be a *separate paragraph*. +### Links -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*. +There are two ways to create links, inline-style and reference-style: -This line is also a separate paragraph, and... -This line is *on its own line*, because the previous line ends with two spaces. (but still in the *same paragraph*) +```md +- This is an [inline-style link](https://www.google.com) +- This is a [link to a repository file in the same directory](index.md) +- This is an [absolute reference within the repository](/doc/user/index.md) +- This is a [relative link to a readme one directory higher](../README.md) +- This is a [link that also has title text](https://www.google.com "This link takes you to Google!") -spaces. -``` +Using header ID anchors: -Becomes: +- This links to [a section on a different markdown page, using a "#" and the header ID](index.md#overview) +- This links to [a different section on the same page, using a "#" and the header ID](#header-ids-and-links) -Here's a line for us to start with. +Using references: -This line is separated from the one above by two newlines, so it will be a *separate paragraph*. +- This is a [reference-style link, see below][Arbitrary case-insensitive reference text] +- You can [use numbers for reference-style link definitions, see below][1] +- Or leave it empty and use the [link text itself][], see below. -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*. +Some text to show that the reference links can follow later. -This line is also a separate paragraph, and... -This line is *on its own line*, because the previous line ends with two spaces. (but still in the *same paragraph*) +[arbitrary case-insensitive reference text]: https://www.mozilla.org +[1]: http://slashdot.org +[link text itself]: https://www.reddit.com +``` -spaces. +- This is an [inline-style link](https://www.google.com) +- This is a [link to a repository file in the same directory](index.md) +- This is an [absolute reference within the repository](/doc/user/index.md) +- This is a [relative link to a readme one directory higher](../README.md) +- This is a [link that also has title text](https://www.google.com "This link takes you to Google!") -### Tables +Using header ID anchors: -Tables aren't part of the core Markdown spec, but they are part of GFM. +- This links to [a section on a different markdown page, using a "#" and the header ID](index.md#overview) +- This links to [a different section on the same page, using a "#" and the header ID](#header-ids-and-links) -Example: +Using references: -``` -| header 1 | header 2 | -| -------- | -------- | -| cell 1 | cell 2 | -| cell 3 | cell 4 | -``` +- This is a [reference-style link, see below][Arbitrary case-insensitive reference text] +- You can [use numbers for reference-style link definitions, see below][1] +- Or leave it empty and use the [link text itself][], see below. -Becomes: +Some text to show that the reference links can follow later. -| header 1 | header 2 | -| -------- | -------- | -| cell 1 | cell 2 | -| cell 3 | cell 4 | +[arbitrary case-insensitive reference text]: https://www.mozilla.org +[1]: http://slashdot.org +[link text itself]: https://www.reddit.com -**Note:** The row of dashes between the table header and body must have at least three dashes in each column. +NOTE: **Note:** Relative links do not allow the referencing of project files in a wiki +page, or a wiki page in a project file. The reason for this is that a wiki is always +in a separate Git repository in GitLab. For example, `[I'm a reference-style link](style)` +will point the link to `wikis/style` only when the link is inside of a wiki markdown file. -By including colons in the header row, you can align the text within that column. +#### URL auto-linking -Example: +GFM will autolink almost any URL you put into your text: -``` -| 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 | +```markdown +* https://www.google.com +* https://google.com/ +* ftp://ftp.us.debian.org/debian/ +* smb://foo/bar/baz +* irc://irc.freenode.net/gitlab +* http://localhost:3000 ``` -Becomes: +* https://www.google.com +* https://google.com/ +* ftp://ftp.us.debian.org/debian/ +* smb://foo/bar/baz +* irc://irc.freenode.net/gitlab +* http://localhost:3000 -| 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 | +### Lists -### Footnotes +Ordered and unordered lists can be easily created. Add the number you want the list +to start with, like `1. ` (with a space) at the start of each line for ordered lists. +After the first number, it does not matter what number you use, ordered lists will be +numbered automatically by vertical order, so repeating `1. ` for all items in the +same list is common. If you start with a number other than `1. `, it will use that as the first +number, and count up from there. -Example: +Add a `* `, `- ` or `+ ` (with a space) at the start of each line for unordered lists, but +you should not use a mix of them. +Examples: + +```md +1. First ordered list item +2. Another item + * Unordered sub-list. +1. Actual numbers don't matter, just that it's a number + 1. Ordered sub-list + 1. Next ordered sub-list item +4. And another item. + +* Unordered lists can use asterisks +- Or minuses ++ Or pluses ``` -You can add footnotes to your text as follows.[^2] -[^2]: This is my awesome footnote. -``` -Becomes: +1. First ordered list item +2. Another item + * Unordered sub-list. +1. Actual numbers don't matter, just that it's a number + 1. Ordered sub-list + 1. Next ordered sub-list item +4. And another item. + +* Unordered lists can use asterisks +- Or minuses ++ Or pluses -You can add footnotes to your text as follows.[^2] +--- -### Superscripts / Subscripts +If a list item contains multiple paragraphs, each subsequent paragraph should be indented +to the same level as the start of the list item text. -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. +Example: -``` -The formula for water is H2O -while the equation for the theory of relativity is E = mc2. -``` +```markdown +1. First ordered list item -The formula for water is H2O while the equation for the theory of relativity is E = mc2. + Second paragraph of first item. -## Wiki-specific Markdown +2. Another item +``` -The following examples show how links inside wikis behave. +1. First ordered list item -### Wiki - Direct page link + Second paragraph of first item. -A link which just includes the slug for a page will point to that page, -_at the base level of the wiki_. +2. Another item -This snippet would link to a `documentation` page at the root of your wiki: +--- -```markdown -[Link to Documentation](documentation) -``` +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. -### Wiki - Direct file link +Example: -Links with a file extension point to that file, _relative to the current page_. +``` +1. First ordered list item -If this snippet was placed on a page at `/documentation/related`, -it would link to `/documentation/file.md`: + Paragraph of first item. -```markdown -[Link to File](file.md) +2. Another item ``` -### Wiki - Hierarchical link +1. First ordered list item -A link can be constructed relative to the current wiki page using `./`, -`../`, etc. + Paragraph of first item. -- If this snippet was placed on a page at `/documentation/main`, - it would link to `/documentation/related`: +2. Another item + +### Superscripts / Subscripts - ```markdown - [Link to Related Page](related) - ``` +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: -- If this snippet was placed on a page at `/documentation/related/content`, - it would link to `/documentation/main`: +```html +The formula for water is H2O +while the equation for the theory of relativity is E = mc2. +``` - ```markdown - [Link to Related Page](../main) - ``` +The formula for water is H2O +while the equation for the theory of relativity is E = mc2. -- If this snippet was placed on a page at `/documentation/main`, - it would link to `/documentation/related.md`: +### Tables - ```markdown - [Link to Related Page](related.md) - ``` +Tables aren't part of the core Markdown spec, but they are part of GFM. -- If this snippet was placed on a page at `/documentation/related/content`, - it would link to `/documentation/main.md`: +1. The first line contains the headers, separated by "pipes" (`|`). +1. The second line separates the headers from the cells, and must contain three or more dashes. +1. The third, and any following lines, contain the cell values. + - You **can't** have cells separated over many lines in the markdown, they must be kept to single lines, + but they can be very long. You can also include HTML `
` tags to force newlines if needed. + - The cell sizes **don't** have to match each other. They are flexible, but must be separated + by pipes (`|`). + - You **can** have blank cells. - ```markdown - [Link to Related Page](../main.md) - ``` +Example: -### Wiki - Root link +```markdown +| header 1 | header 2 | header 3 | +| --- | ------ |----------| +| cell 1 | cell 2 | cell 3 | +| cell 4 | cell 5 is longer | cell 6 is much longer than the others, but that's ok. It will eventually wrap the text when the cell is too large for the display size. | +| cell 7 | | cell
9 | +``` -A link starting with a `/` is relative to the wiki root. +| header 1 | header 2 | header 3 | +| --- | ------ |---------:| +| cell 1 | cell 2 | cell 3 | +| cell 4 | cell 5 is longer | cell 6 is much longer than the others, but that's ok. It will eventually wrap the text when the cell is too large for the display size. | +| cell 7 | | cell
9 | -- This snippet links to `/documentation`: +Additionally, you can choose the alignment of text within columns by adding colons (`:`) +to the sides of the "dash" lines in the second row. This will affect every cell in the column. - ```markdown - [Link to Related Page](/documentation) - ``` +> Note that the headers are always right aligned [within GitLab itself itself](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#tables). -- This snippet links to `/miscellaneous.md`: +```markdown +| 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 | +``` - ```markdown - [Link to Related Page](/miscellaneous.md) - ``` +| 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 | ## References - This document leveraged heavily from the [Markdown-Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet). -- The original [Markdown Syntax Guide](https://daringfireball.net/projects/markdown/syntax) at Daring Fireball is an excellent resource for a detailed explanation of standard markdown. -- The detailed specification for CommonMark can be found in the [CommonMark Spec][commonmark-spec] +- The original [Markdown Syntax Guide](https://daringfireball.net/projects/markdown/syntax) + at Daring Fireball is an excellent resource for a detailed explanation of standard markdown. +- The detailed specification for CommonMark can be found in the [CommonMark Spec](https://spec.commonmark.org/current/) - The [CommonMark Dingus](http://try.commonmark.org) is a handy tool for testing CommonMark syntax. - -[^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. - -[markdown.md]: https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md -[rouge]: http://rouge.jneen.net/ "Rouge website" -[redcarpet]: https://github.com/vmg/redcarpet "Redcarpet website" -[katex]: https://github.com/Khan/KaTeX "KaTeX website" -[katex-subset]: https://katex.org/docs/supported.html "Macros supported by KaTeX" -[asciidoctor-manual]: http://asciidoctor.org/docs/user-manual/#activating-stem-support "Asciidoctor user manual" -[commonmarker]: https://github.com/gjtorikian/commonmarker -[commonmark-spec]: https://spec.commonmark.org/current/ diff --git a/doc/user/project/settings/index.md b/doc/user/project/settings/index.md index be4215b1934..2bf8d4dfe7b 100644 --- a/doc/user/project/settings/index.md +++ b/doc/user/project/settings/index.md @@ -18,7 +18,7 @@ Adjust your project's name, description, avatar, [default branch](../repository/ ![general project settings](img/general_settings.png) -The project description also partially supports [standard markdown](../../markdown.md#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. +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. ### Sharing and permissions -- cgit v1.2.1