2023-03-04 22:38:38 +05:30
<!DOCTYPE html>
<!-- NOTE: Styling is based on the CommonMark specification template: -->
<!-- - https://github.com/commonmark/commonmark - spec/blob/master/tools/make_spec.lua -->
<!-- - https://github.com/commonmark/commonmark - spec/blob/master/tools/template.html -->
<!-- -->
<!-- NOTE: 'TODO:' comments will be followed up as task(s) on this issue: -->
<!-- - https://gitlab.com/gitlab - org/gitlab/ - /issues/361241 -->
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title > GitLab Flavored Markdown Official Specification< / title >
< style type = "text/css" >
body {
font-family: Helvetica, arial, freesans, clean, sans-serif;
line-height: 1.4;
max-width: 48em;
margin: auto;
padding: 0 0.5em 4em;
color: #333333;
background-color: #ffffff;
font-size: 13pt;
}
div#TOC ul { list-style: none; }
h1 {
font-size: 140%;
font-weight: bold;
border-top: 1px solid gray;
padding-top: 0.5em;
}
h2 {
font-size: 120%;
font-weight: bold;
}
h3 {
font-size: 110%;
font-weight: bold;
}
h4 {
font-size: 100%;
font-weight: bold;
}
/* NOTE: "font-weight: bold" was applied to "a.definition" class in original CommonMark */
/* template, but in practice it was applied to all anchors */
a {
font-weight: bold;
}
/* TODO: Format whitespace in examples. This will require preprocessing to insert spans around them. */
/*span.space { position: relative; }*/
/*span.space:after {*/
/* content: "·";*/
/* position: absolute;*/
/* !* create a mark that indicates a space (trick from D. Greenspan) *!*/
/* top: 0; bottom: 7px; left: 1px; right: 1px;*/
/* color: #aaaaaa;*/
/*}*/
/*@media print {*/
/* a.dingus { display: none; }*/
/*}*/
div.example {
overflow: hidden;
}
p {
text-align: justify;
}
pre {
padding: 0.5em;
margin: 0.2em 0 0.5em;
font-size: 88%;
}
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
code {
font-family: monospace;
background-color: #d3e1e4;
}
pre > code {
background-color: transparent;
}
.example {
font-size: 0; /* hack to get width: 50% to work on inline-block */
padding-bottom: 6pt;
}
2023-01-13 00:05:48 +05:30
2023-03-04 22:38:38 +05:30
.column pre {
font-size: 11pt;
padding: 2pt 6pt;
}
div.examplenum {
font-size: 11pt;
text-align: left;
margin-bottom: 10px;
}
div.column {
display: inline-block;
width: 50%;
vertical-align: top;
}
div.example > div:nth-child(2) {
clear: left;
background-color: #d3e1e4;
}
div.example > div:nth-child(3) {
clear: right;
background-color: #c9cace;
}
@media print {
@page {
size: auto;
margin: 1.2in 1.2in 1.2in 1.2in;
}
body {
margin: 0;
line-height: 1.2;
font-size: 10pt;
}
.column pre {
font-size: 9pt;
}
div.examplenum {
font-size: 9pt;
}
}
< / style >
<!-- TODO: Extract this javascript out to a separate file and unit test it -->
< script type = "text/javascript" >
/* NOTE: The following code performs many of the pre-processing steps originally handled */
/* in https://github.com/commonmark/commonmark-spec/blob/master/tools/make_spec.lua */
/* Adds a div.example wrapper around each pair of example code blocks. */
function addAttributesToExampleWrapperDivs() {
const exampleAnchorTags = document.querySelectorAll("a[href^=\"#example-\"]");
for (const exampleAnchorTag of exampleAnchorTags) {
const examplenumDiv = exampleAnchorTag.parentElement;
examplenumDiv.classList.add("examplenum");
const exampleDiv = examplenumDiv.parentElement;
exampleDiv.classList.add("example");
exampleDiv.id = exampleAnchorTag.getAttribute("href").substring(1);
}
}
function addColumnClassToMarkdownDivs() {
const markdownCodeBlockDivs = document.querySelectorAll("div.markdown-code-block");
for (const markdownCodeBlockDiv of markdownCodeBlockDivs) {
markdownCodeBlockDiv.classList.add("column");
}
}
function addNumbersToHeaders() {
const headers = document.querySelectorAll('h1,h2,h3');
let h1Index = -1; // NOTE: -1 because we don't assign a number to the title
let h2Index = 0;
let h3Index = 0;
const tocEntries = [];
for (const header of headers) {
if (h1Index === -1) {
h1Index++;
continue;
}
const originalHeaderTextContent = header.textContent.trim();
const headerAnchor = originalHeaderTextContent.toLowerCase().replaceAll(' ', '-');
header.id = headerAnchor;
let indent;
let headerTextContent;
if (header.tagName === 'H1') {
h1Index++;
h2Index = 0;
h3Index = 0;
header.textContent = headerTextContent = h1Index + ' ' + originalHeaderTextContent;
indent = 0;
} else if (header.tagName === 'H2') {
h2Index++;
h3Index = 0;
header.textContent =
headerTextContent = h1Index + '.' + h2Index + ' ' + originalHeaderTextContent;
indent = 1;
} else if (header.tagName === 'H3') {
h3Index++;
header.textContent = headerTextContent =
h1Index + '.' + h2Index + '.' + h3Index + ' ' + originalHeaderTextContent;
indent = 2;
}
tocEntries.push({headerAnchor, headerTextContent, indent});
}
}
document.addEventListener("DOMContentLoaded", function(_event) {
addAttributesToExampleWrapperDivs();
addColumnClassToMarkdownDivs();
const tocEntries = addNumbersToHeaders();
addToc(tocEntries);
});
/* NOTE: The following code is to support the "Try it" interactive "dingus", which */
/* we do not yet support. But it is being left here for comparison context with the */
/* original CommonMark template. */
// $$(document).ready(function() {
// $$("div.example").each(function(e) {
// var t = $$(this).find('code.language-markdown').text();
// $$(this).find('a.dingus').click(function(f) {
// window.open('/dingus/?text=' +
// encodeURIComponent(t.replace(/→/g,"\t")));
// });
// });
// $$("code.language-markdown").dblclick(function(e) { window.open('/dingus/?text=' +
// encodeURIComponent($$(this).text()));
// });
// });
< / script >
< / head >
< body >
< h1 class = "title" > GitLab Flavored Markdown Official Specification< / h1 >
< div class = "version" > Version alpha< / div >
< ul class = "section-nav" >
< li > < a href = "#introduction" > Introduction< / a > < / li >
< li >
< a href = "#gitlab-official-specification-markdown" > GitLab Official Specification Markdown< / a > < ul >
< li > < a href = "#footnotes" > Footnotes< / a > < / li >
< li > < a href = "#task-list-items" > Task list items< / a > < / li >
< li > < a href = "#front-matter" > Front matter< / a > < / li >
< li > < a href = "#table-of-contents" > Table of contents< / a > < / li >
< / ul >
< / li >
< / ul >
< h1 data-sourcepos = "3:1-3:14" dir = "auto" >
< a id = "user-content-introduction" class = "anchor" href = "#introduction" aria-hidden = "true" > < / a > Introduction< / h1 >
< p data-sourcepos = "5:1-5:84" dir = "auto" > TODO: Write a GitLab-specific version of the GitHub Flavored Markdown intro section.< / p >
< p data-sourcepos = "7:1-10:75" dir = "auto" > NOTE: The example numbering in this document does not start at "1", because this official specification
only contains a subset of all the examples which are supported by GitLab Flavored Markdown. See
< a href = "https://gitlab.com/gitlab-org/gitlab/-/blob/master/glfm_specification/output_example_snapshots/snapshot_spec.html" rel = "nofollow noreferrer noopener" target = "_blank" > < code > snapshot_spec.html< / code > < / a >
for a complete list of all examples, which are a superset of examples from:< / p >
< ul data-sourcepos = "12:1-16:0" dir = "auto" >
< li data-sourcepos = "12:1-12:12" > CommonMark< / li >
< li data-sourcepos = "13:1-13:26" > GitHub Flavored Markdown< / li >
< li data-sourcepos = "14:1-14:88" > GitLab Flavored Markdown Official Specification (the same ones from this specifiation)< / li >
< li data-sourcepos = "15:1-16:0" > GitLab Flavored Markdown Internal Extensions.< / li >
< / ul >
<!-- BEGIN TESTS -->
< h1 data-sourcepos = "18:1-18:40" dir = "auto" >
2023-01-13 00:05:48 +05:30
< a id = "user-content-gitlab-official-specification-markdown" class = "anchor" href = "#gitlab-official-specification-markdown" aria-hidden = "true" > < / a > GitLab Official Specification Markdown< / h1 >
2023-03-04 22:38:38 +05:30
< p data-sourcepos = "20:1-23:104" dir = "auto" > Currently, only some of the GitLab-specific markdown features are
2023-01-13 00:05:48 +05:30
listed in this section. We may eventually add all
GitLab-specific features currently listed as supported in the
< a href = "https://docs.gitlab.com/ee/user/markdown.html" rel = "nofollow noreferrer noopener" target = "_blank" > user-facing documentation for GitLab Flavored Markdown< / a > .< / p >
2023-03-04 22:38:38 +05:30
< p data-sourcepos = "25:1-26:69" dir = "auto" > There is currently only this single top-level heading, but the
2023-01-13 00:05:48 +05:30
examples may be split into multiple top-level headings in the future.< / p >
2023-03-04 22:38:38 +05:30
< h2 data-sourcepos = "28:1-28:12" dir = "auto" >
2023-01-13 00:05:48 +05:30
< a id = "user-content-footnotes" class = "anchor" href = "#footnotes" aria-hidden = "true" > < / a > Footnotes< / h2 >
2023-03-04 22:38:38 +05:30
< p data-sourcepos = "30:1-31:143" dir = "auto" > See
2023-01-13 00:05:48 +05:30
< a href = "https://docs.gitlab.com/ee/user/markdown.html#footnotes" rel = "nofollow noreferrer noopener" target = "_blank" > the footnotes section of the user-facing documentation for GitLab Flavored Markdown< / a > .< / p >
2023-03-04 22:38:38 +05:30
< div >
< div > < a href = "#example-674" > Example 674< / a > < / div >
2023-01-13 00:05:48 +05:30
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "36:1-40:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "example" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > footnote reference tag [^fortytwo]< / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > < / span >
< span id = "LC3" class = "line" lang = "plaintext" > [^fortytwo]: footnote text< / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "42:1-62:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > < p> < / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > footnote reference tag< / span >
< span id = "LC3" class = "line" lang = "plaintext" > < sup> < / span >
< span id = "LC4" class = "line" lang = "plaintext" > < a href="#fn-fortytwo-42" id="fnref-fortytwo-42" data-footnote-ref> < / span >
< span id = "LC5" class = "line" lang = "plaintext" > 1< / span >
< span id = "LC6" class = "line" lang = "plaintext" > < /a> < / span >
< span id = "LC7" class = "line" lang = "plaintext" > < /sup> < / span >
< span id = "LC8" class = "line" lang = "plaintext" > < /p> < / span >
< span id = "LC9" class = "line" lang = "plaintext" > < section data-footnotes> < / span >
< span id = "LC10" class = "line" lang = "plaintext" > < ol> < / span >
< span id = "LC11" class = "line" lang = "plaintext" > < li id="fn-fortytwo-42"> < / span >
< span id = "LC12" class = "line" lang = "plaintext" > < p> < / span >
< span id = "LC13" class = "line" lang = "plaintext" > footnote text< / span >
< span id = "LC14" class = "line" lang = "plaintext" > < a href="#fnref-fortytwo-42" data-footnote-backref> < / span >
< span id = "LC15" class = "line" lang = "plaintext" > < /a> < / span >
< span id = "LC16" class = "line" lang = "plaintext" > < /p> < / span >
< span id = "LC17" class = "line" lang = "plaintext" > < /li> < / span >
< span id = "LC18" class = "line" lang = "plaintext" > < /ol> < / span >
< span id = "LC19" class = "line" lang = "plaintext" > < /section> < / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
2023-03-04 22:38:38 +05:30
< / div >
< h2 data-sourcepos = "65:1-65:18" dir = "auto" >
2023-01-13 00:05:48 +05:30
< a id = "user-content-task-list-items" class = "anchor" href = "#task-list-items" aria-hidden = "true" > < / a > Task list items< / h2 >
2023-03-04 22:38:38 +05:30
< p data-sourcepos = "67:1-68:117" dir = "auto" > See
2023-01-13 00:05:48 +05:30
< a href = "https://docs.gitlab.com/ee/user/markdown.html#task-lists" rel = "nofollow noreferrer noopener" target = "_blank" > Task lists< / a > in the GitLab Flavored Markdown documentation.< / p >
2023-03-04 22:38:38 +05:30
< p data-sourcepos = "70:1-73:39" dir = "auto" > Task list items (checkboxes) are defined as a GitHub Flavored Markdown extension in a section above.
2023-01-13 00:05:48 +05:30
GitLab extends the behavior of task list items to support additional features.
Some of these features are in-progress, and should not yet be considered part of the official
GitLab Flavored Markdown specification.< / p >
2023-03-04 22:38:38 +05:30
< p data-sourcepos = "75:1-75:85" dir = "auto" > Some of the behavior of task list items is implemented as client-side JavaScript/CSS.< / p >
< p data-sourcepos = "77:1-77:80" dir = "auto" > The following are some basic examples; more examples may be added in the future.< / p >
< p data-sourcepos = "79:1-79:16" dir = "auto" > Incomplete task:< / p >
< div >
< div > < a href = "#example-675" > Example 675< / a > < / div >
2023-01-13 00:05:48 +05:30
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "84:1-86:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "example" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > - [ ] incomplete< / span > < / code > < / pre >
2023-01-13 00:05:48 +05:30
< copy-code > < / copy-code >
< / div >
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "88:1-96:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > < ul> < / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > < li> < / span >
< span id = "LC3" class = "line" lang = "plaintext" > < task-button/> < / span >
< span id = "LC4" class = "line" lang = "plaintext" > < input type="checkbox" disabled/> < / span >
< span id = "LC5" class = "line" lang = "plaintext" > incomplete< / span >
< span id = "LC6" class = "line" lang = "plaintext" > < /li> < / span >
< span id = "LC7" class = "line" lang = "plaintext" > < /ul> < / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
2023-03-04 22:38:38 +05:30
< / div >
< p data-sourcepos = "99:1-99:15" dir = "auto" > Completed task:< / p >
< div >
< div > < a href = "#example-676" > Example 676< / a > < / div >
2023-01-13 00:05:48 +05:30
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "104:1-106:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "example" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > - [x] completed< / span > < / code > < / pre >
2023-01-13 00:05:48 +05:30
< copy-code > < / copy-code >
< / div >
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "108:1-116:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > < ul> < / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > < li> < / span >
< span id = "LC3" class = "line" lang = "plaintext" > < task-button/> < / span >
< span id = "LC4" class = "line" lang = "plaintext" > < input type="checkbox" checked disabled/> < / span >
< span id = "LC5" class = "line" lang = "plaintext" > completed< / span >
< span id = "LC6" class = "line" lang = "plaintext" > < /li> < / span >
< span id = "LC7" class = "line" lang = "plaintext" > < /ul> < / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
2023-03-04 22:38:38 +05:30
< / div >
< p data-sourcepos = "119:1-119:18" dir = "auto" > Inapplicable task:< / p >
< div >
< div > < a href = "#example-677" > Example 677< / a > < / div >
2023-01-13 00:05:48 +05:30
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "124:1-126:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "example" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > - [~] inapplicable< / span > < / code > < / pre >
2023-01-13 00:05:48 +05:30
< copy-code > < / copy-code >
< / div >
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "128:1-138:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > < ul> < / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > < li> < / span >
< span id = "LC3" class = "line" lang = "plaintext" > < task-button/> < / span >
< span id = "LC4" class = "line" lang = "plaintext" > < input type="checkbox" data-inapplicable disabled> < / span >
< span id = "LC5" class = "line" lang = "plaintext" > < s> < / span >
< span id = "LC6" class = "line" lang = "plaintext" > inapplicable< / span >
< span id = "LC7" class = "line" lang = "plaintext" > < /s> < / span >
< span id = "LC8" class = "line" lang = "plaintext" > < /li> < / span >
< span id = "LC9" class = "line" lang = "plaintext" > < /ul> < / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
2023-03-04 22:38:38 +05:30
< / div >
< p data-sourcepos = "141:1-142:50" dir = "auto" > Inapplicable task in a "loose" list. Note that the < code > < del> < / code > tag is not applied to the
2023-01-13 00:05:48 +05:30
loose text; it has strikethrough applied with CSS.< / p >
2023-03-04 22:38:38 +05:30
< div >
< div > < a href = "#example-678" > Example 678< / a > < / div >
2023-01-13 00:05:48 +05:30
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "147:1-151:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "example" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > - [~] inapplicable< / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > < / span >
< span id = "LC3" class = "line" lang = "plaintext" > text in loose list< / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "153:1-168:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > < ul> < / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > < li> < / span >
< span id = "LC3" class = "line" lang = "plaintext" > < p> < / span >
< span id = "LC4" class = "line" lang = "plaintext" > < task-button/> < / span >
< span id = "LC5" class = "line" lang = "plaintext" > < input type="checkbox" data-inapplicable disabled> < / span >
< span id = "LC6" class = "line" lang = "plaintext" > < s> < / span >
< span id = "LC7" class = "line" lang = "plaintext" > inapplicable< / span >
< span id = "LC8" class = "line" lang = "plaintext" > < /s> < / span >
< span id = "LC9" class = "line" lang = "plaintext" > < /p> < / span >
< span id = "LC10" class = "line" lang = "plaintext" > < p> < / span >
< span id = "LC11" class = "line" lang = "plaintext" > text in loose list< / span >
< span id = "LC12" class = "line" lang = "plaintext" > < /p> < / span >
< span id = "LC13" class = "line" lang = "plaintext" > < /li> < / span >
< span id = "LC14" class = "line" lang = "plaintext" > < /ul> < / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
2023-03-04 22:38:38 +05:30
< / div >
< h2 data-sourcepos = "171:1-171:15" dir = "auto" >
2023-01-13 00:05:48 +05:30
< a id = "user-content-front-matter" class = "anchor" href = "#front-matter" aria-hidden = "true" > < / a > Front matter< / h2 >
2023-03-04 22:38:38 +05:30
< p data-sourcepos = "173:1-174:121" dir = "auto" > See
2023-01-13 00:05:48 +05:30
< a href = "https://docs.gitlab.com/ee/user/markdown.html#front-matter" rel = "nofollow noreferrer noopener" target = "_blank" > Front matter< / a > in the GitLab Flavored Markdown documentation.< / p >
2023-03-04 22:38:38 +05:30
< p data-sourcepos = "176:1-177:95" dir = "auto" > Front matter is metadata included at the beginning of a Markdown document, preceding the content.
2023-01-13 00:05:48 +05:30
This data can be used by static site generators like Jekyll, Hugo, and many other applications.< / p >
2023-03-04 22:38:38 +05:30
< p data-sourcepos = "179:1-179:18" dir = "auto" > YAML front matter:< / p >
< div >
< div > < a href = "#example-679" > Example 679< / a > < / div >
2023-01-13 00:05:48 +05:30
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "184:1-188:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "example" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > ---< / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > title: YAML front matter< / span >
< span id = "LC3" class = "line" lang = "plaintext" > ---< / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "190:1-196:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > < pre> < / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > < code> < / span >
< span id = "LC3" class = "line" lang = "plaintext" > title: YAML front matter< / span >
< span id = "LC4" class = "line" lang = "plaintext" > < /code> < / span >
< span id = "LC5" class = "line" lang = "plaintext" > < /pre> < / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
2023-03-04 22:38:38 +05:30
< / div >
< p data-sourcepos = "199:1-199:18" dir = "auto" > TOML front matter:< / p >
< div >
< div > < a href = "#example-680" > Example 680< / a > < / div >
2023-01-13 00:05:48 +05:30
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "204:1-208:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "example" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > +++< / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > title: TOML front matter< / span >
< span id = "LC3" class = "line" lang = "plaintext" > +++< / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "210:1-216:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > < pre> < / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > < code> < / span >
< span id = "LC3" class = "line" lang = "plaintext" > title: TOML front matter< / span >
< span id = "LC4" class = "line" lang = "plaintext" > < /code> < / span >
< span id = "LC5" class = "line" lang = "plaintext" > < /pre> < / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
2023-03-04 22:38:38 +05:30
< / div >
< p data-sourcepos = "219:1-219:18" dir = "auto" > JSON front matter:< / p >
< div >
< div > < a href = "#example-681" > Example 681< / a > < / div >
2023-01-13 00:05:48 +05:30
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "224:1-230:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "example" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > ;;;< / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > {< / span >
< span id = "LC3" class = "line" lang = "plaintext" > "title": "JSON front matter"< / span >
< span id = "LC4" class = "line" lang = "plaintext" > }< / span >
< span id = "LC5" class = "line" lang = "plaintext" > ;;;< / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "232:1-240:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > < pre> < / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > < code> < / span >
< span id = "LC3" class = "line" lang = "plaintext" > {< / span >
< span id = "LC4" class = "line" lang = "plaintext" > "title": "JSON front matter"< / span >
< span id = "LC5" class = "line" lang = "plaintext" > }< / span >
< span id = "LC6" class = "line" lang = "plaintext" > < /code> < / span >
< span id = "LC7" class = "line" lang = "plaintext" > < /pre> < / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
2023-03-04 22:38:38 +05:30
< / div >
< p data-sourcepos = "243:1-243:66" dir = "auto" > Front matter blocks should be inserted at the top of the document:< / p >
< div >
< div > < a href = "#example-682" > Example 682< / a > < / div >
2023-01-13 00:05:48 +05:30
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "248:1-254:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "example" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > text< / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > < / span >
< span id = "LC3" class = "line" lang = "plaintext" > ---< / span >
< span id = "LC4" class = "line" lang = "plaintext" > title: YAML front matter< / span >
< span id = "LC5" class = "line" lang = "plaintext" > ---< / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "256:1-260:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > < p> text< /p> < / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > < hr> < / span >
< span id = "LC3" class = "line" lang = "plaintext" > < h2> title: YAML front matter< /h2> < / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
2023-03-04 22:38:38 +05:30
< / div >
< p data-sourcepos = "263:1-263:74" dir = "auto" > Front matter block delimiters shouldn’ < / p >
< div >
< div > < a href = "#example-683" > Example 683< / a > < / div >
2023-01-13 00:05:48 +05:30
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "268:1-272:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "example" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > ---< / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > title: YAML front matter< / span >
< span id = "LC3" class = "line" lang = "plaintext" > ---< / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "274:1-277:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > < hr> < / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > < h2> title: YAML front matter< /h2> < / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
2023-03-04 22:38:38 +05:30
< / div >
< h2 data-sourcepos = "280:1-280:20" dir = "auto" >
2023-01-13 00:05:48 +05:30
< a id = "user-content-table-of-contents" class = "anchor" href = "#table-of-contents" aria-hidden = "true" > < / a > Table of contents< / h2 >
2023-03-04 22:38:38 +05:30
< p data-sourcepos = "282:1-284:46" dir = "auto" > See
2023-01-13 00:05:48 +05:30
< a href = "https://docs.gitlab.com/ee/user/markdown.html#table-of-contents" rel = "nofollow noreferrer noopener" target = "_blank" > table of contents< / a >
in the GitLab Flavored Markdown documentation.< / p >
2023-03-04 22:38:38 +05:30
< p data-sourcepos = "286:1-290:23" dir = "auto" > NOTE: Because of this bug (< a href = "https://gitlab.com/gitlab-org/gitlab/-/issues/359077" rel = "nofollow noreferrer noopener" target = "_blank" > https://gitlab.com/gitlab-org/gitlab/-/issues/359077< / a > ),
we cannot actually include the < code > TOC< / code > tag with single brackets in backticks
in this Markdown document, otherwise it would render a table of contents inline
right here. So, it's been switched to < code > [< / code > + < code > TOC< / code > + < code > ]< / code > instead. This can be reverted
once that bug is fixed.< / p >
< p data-sourcepos = "292:1-293:76" dir = "auto" > A table of contents is an unordered list that links to subheadings in the document.
Add either the < code > [[_TOC_]]< / code > tag or the < code > [< / code > + < code > TOC< / code > + < code > ]< / code > tag on its own line.< / p >
< div >
< div > < a href = "#example-684" > Example 684< / a > < / div >
2023-01-13 00:05:48 +05:30
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "298:1-304:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "example" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > [TOC]< / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > < / span >
< span id = "LC3" class = "line" lang = "plaintext" > # Heading 1< / span >
< span id = "LC4" class = "line" lang = "plaintext" > < / span >
< span id = "LC5" class = "line" lang = "plaintext" > ## Heading 2< / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "306:1-317:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > < nav> < / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > < ul> < / span >
< span id = "LC3" class = "line" lang = "plaintext" > < li> < a href="#heading-1"> Heading 1< /a> < /li> < / span >
< span id = "LC4" class = "line" lang = "plaintext" > < ul> < / span >
< span id = "LC5" class = "line" lang = "plaintext" > < li> < a href="#heading-2"> Heading 2< /a> < /li> < / span >
< span id = "LC6" class = "line" lang = "plaintext" > < /ul> < / span >
< span id = "LC7" class = "line" lang = "plaintext" > < /ul> < / span >
< span id = "LC8" class = "line" lang = "plaintext" > < /nav> < / span >
< span id = "LC9" class = "line" lang = "plaintext" > < h1> Heading 1< /h1> < / span >
< span id = "LC10" class = "line" lang = "plaintext" > < h2> Heading 2< /h2> < / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
2023-03-04 22:38:38 +05:30
< / div >
< div >
< div > < a href = "#example-685" > Example 685< / a > < / div >
2023-01-13 00:05:48 +05:30
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "323:1-329:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "example" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > [[_TOC_]]< / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > < / span >
< span id = "LC3" class = "line" lang = "plaintext" > # Heading 1< / span >
< span id = "LC4" class = "line" lang = "plaintext" > < / span >
< span id = "LC5" class = "line" lang = "plaintext" > ## Heading 2< / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "331:1-342:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > < nav> < / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > < ul> < / span >
< span id = "LC3" class = "line" lang = "plaintext" > < li> < a href="#heading-1"> Heading 1< /a> < /li> < / span >
< span id = "LC4" class = "line" lang = "plaintext" > < ul> < / span >
< span id = "LC5" class = "line" lang = "plaintext" > < li> < a href="#heading-2"> Heading 2< /a> < /li> < / span >
< span id = "LC6" class = "line" lang = "plaintext" > < /ul> < / span >
< span id = "LC7" class = "line" lang = "plaintext" > < /ul> < / span >
< span id = "LC8" class = "line" lang = "plaintext" > < /nav> < / span >
< span id = "LC9" class = "line" lang = "plaintext" > < h1> Heading 1< /h1> < / span >
< span id = "LC10" class = "line" lang = "plaintext" > < h2> Heading 2< /h2> < / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
2023-03-04 22:38:38 +05:30
< / div >
< p data-sourcepos = "345:1-346:5" dir = "auto" > A table of contents is a block element. It should preceded and followed by a blank
2023-01-13 00:05:48 +05:30
line.< / p >
2023-03-04 22:38:38 +05:30
< div >
< div > < a href = "#example-686" > Example 686< / a > < / div >
2023-01-13 00:05:48 +05:30
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "351:1-357:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "example" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > [[_TOC_]]< / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > text< / span >
< span id = "LC3" class = "line" lang = "plaintext" > < / span >
< span id = "LC4" class = "line" lang = "plaintext" > text< / span >
< span id = "LC5" class = "line" lang = "plaintext" > [TOC]< / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "359:1-362:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > < p> [[< em> TOC< /em> ]]text< /p> < / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > < p> text[TOC]< /p> < / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
2023-03-04 22:38:38 +05:30
< / div >
< p data-sourcepos = "365:1-365:60" dir = "auto" > A table of contents can be indented with up to three spaces.< / p >
< div >
< div > < a href = "#example-687" > Example 687< / a > < / div >
2023-01-13 00:05:48 +05:30
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "370:1-374:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "example" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > [[_TOC_]]< / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > < / span >
< span id = "LC3" class = "line" lang = "plaintext" > # Heading 1< / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
< div class = "gl-relative markdown-code-block js-markdown-code" >
2023-03-04 22:38:38 +05:30
< pre data-sourcepos = "376:1-383:32" lang = "plaintext" class = "code highlight js-syntax-highlight language-plaintext" data-canonical-lang = "" v-pre = "true" > < code > < span id = "LC1" class = "line" lang = "plaintext" > < nav> < / span >
2023-01-13 00:05:48 +05:30
< span id = "LC2" class = "line" lang = "plaintext" > < ul> < / span >
< span id = "LC3" class = "line" lang = "plaintext" > < li> < a href="#heading-1"> Heading 1< /a> < /li> < / span >
< span id = "LC4" class = "line" lang = "plaintext" > < /ul> < / span >
< span id = "LC5" class = "line" lang = "plaintext" > < /nav> < / span >
< span id = "LC6" class = "line" lang = "plaintext" > < h1> Heading 1< /h1> < / span > < / code > < / pre >
< copy-code > < / copy-code >
< / div >
2023-03-04 22:38:38 +05:30
< / div >
<!-- END TESTS -->
< / body >
< / html >
2023-01-13 00:05:48 +05:30
