GitLab Flavored Markdown(GLFM)
- プラン: Free、Premium、Ultimate
- 提供形態: GitLab.com、GitLab Self-Managed、GitLab Dedicated
GitLab Flavored Markdown(GLFM)は、GitLabユーザーインターフェースでテキストを整形する強力なマークアップ言語です。GLFMでは、次のことが可能です:
- コード、図表、数式、マルチメディアをサポートするリッチコンテンツを作成する。
- イシュー、マージリクエスト、その他のGitLabコンテンツをクロスリファレンスによってリンクする。
- タスクリスト、テーブル、折りたたみ可能なセクションで情報を整理する。
- 100種類以上のプログラミング言語で、構文ハイライトをサポートする。
- セマンティックな見出し構造や画像の説明により、アクセシビリティを確保する。
GitLab UIにテキストを入力すると、GitLabはそのテキストがGitLab Flavored Markdownであると見なします。
GitLab Flavored Markdownは、以下で使用できます:
- コメント
- イシュー
- エピック
- マージリクエスト
- マイルストーン
- スニペット(スニペット名には
.md拡張子を付ける必要があります) - Wikiページ
- リポジトリ内のMarkdownドキュメント
- リリース
GitLabでは、他のリッチテキストファイルも使用できます。ただし、そうするには依存関係のインストールが必要になる場合があります。詳細については、gitlab-markup gemプロジェクトを参照してください。
このMarkdownの仕様は、GitLabでのみ有効です。ここではできる限り忠実にMarkdownをレンダリングしていますが、GitLabドキュメントサイトとGitLabハンドブックでは異なるMarkdownレンダラーを使用しています。
ここに示した例がGitLabでどのようにレンダリングされるかを正確に確認するには、次の手順に従います:
- 関連するMarkdownの例のrawテキスト(レンダリング結果ではないもの)をコピーします。
- MarkdownのプレビューをサポートするGitLab内の場所にMarkdownを貼り付けます。たとえば、イシューまたはマージリクエストのコメントや説明、新しいMarkdownファイルなどです。
- プレビューを選択し、GitLabによるMarkdownのレンダリング結果を表示します。
標準のMarkdownとの違い
GitLab Flavored Markdownは、次の機能で構成されています:
- CommonMark仕様に基づくコアMarkdown機能。
- GitHub Flavored Markdownの拡張機能。
- GitLab用に特別に作成された拡張機能。
すべての標準Markdown形式は、GitLabで期待どおりに機能します。一部の標準機能は、標準的な使用法に影響を与えることなく、追加機能によって拡張されています。
標準のMarkdownにはない機能は、次のとおりです:
- アラート
HEX、RGB、HSLで記述されたカラーチップ- 説明リスト
- 図表とフローチャート
- 絵文字
- 脚注
- フロントマター
- GitLab固有の参照
- インクルード
- プレースホルダー
- インライン差分
- LaTeXで記述された数式と記号
- 取り消し線
- 目次
- テーブル
- タスクリスト
- Wiki固有のMarkdown
次の機能は、標準のMarkdownから拡張されています:
| 標準Markdown | GitLabにおける拡張Markdown |
|---|---|
| 引用ブロック | 複数行の引用ブロック |
| コードブロック | カラーコードと構文ハイライト |
| 見出し | リンク可能な見出しID |
| 画像 | 埋め込み動画とオーディオ |
| リンク | URLの自動リンク |
Markdownとアクセシビリティ
GitLab Flavored Markdownを使用すると、デジタルコンテンツが作成されます。このコンテンツは、閲覧者にとってできるだけアクセスしやすいものである必要があります。次のリストは網羅的なものではありませんが、特に注意すべきGitLab Flavored Markdownのスタイルに関するガイダンスを提供します:
アクセスしやすい見出し
見出しの書式設定を使用して、論理的な見出し構造を作成します。ページの見出し構造は、適切な目次のように意味が通るものにする必要があります。1ページにh1要素は1つだけにし、見出しレベルをスキップせず、正しくネストされるようにします。
アクセスしやすいテーブル
テーブルをアクセスしやすく、一目で読めるようにするには、テーブルに空のセルを含めないでください。セルに特に意味のある値がない場合は、「該当しない」ことを示すN/Aまたはなしを入力することを検討してください。
アクセスしやすい画像と動画
[alt text]で画像または動画について説明します。説明は正確、簡潔、かつ一意である必要があります。説明でimage ofやvideo ofを使用しないでください。詳細については、WebAim Alternative Text(WebAimの代替テキスト)を参照してください。
見出し
#を使用して、1–6までの見出しを作成します。
# H1
## H2
### H3
#### H4
##### H5
###### H6または、H1およびH2の場合は、下線スタイルを使用します:
Alt-H1
======
Alt-H2
------見出しIDとリンク
コメントを除き、Markdownでレンダリングされたすべての見出しには、リンク可能なIDが自動的に付与されます。
マウスオーバーすると、それらのIDへのリンクが表示され、見出しへのリンクをコピーして他の場所で簡単に使用できます。
IDは、次のルールに従って見出しの内容から生成されます:
- すべてのテキストは小文字に変換されます。
- 単語以外のテキスト(句読点やHTMLなど)はすべて削除されます。
- すべてのスペースはハイフンに変換されます。
- 連続する2つ以上のハイフンは1つに変換されます。
- 同じIDを持つ見出しがすでに生成されている場合、1から始まる一意の連番が付加されます。
例:
# This heading has spaces in it
## This heading has a :thumbsup: in it
# This heading has Unicode in it: 한글
## This heading has spaces in it
### This heading has spaces in it
## This heading has 3.5 in it (and parentheses)
## This heading has multiple spaces and --- hyphens次のリンクIDが生成されます:
this-heading-has-spaces-in-itthis-heading-has-a-thumbsup-in-itthis-heading-has-unicode-in-it-한글this-heading-has-spaces-in-it-1this-heading-has-spaces-in-it-2this-heading-has-35-in-it-and-parenthesesthis-heading-has--multiple-spaces-and-----hyphens
改行
前のテキストの末尾に2つの改行コードが入ると、改行が挿入されます(新しい段落が開始されます)。たとえば、Enterキーを2回続けて押したときがこれに該当します。改行コードを1つだけ使用した(Enterを1回押した)場合、次の文は同じ段落に含まれます。長い行を折り返さずに編集可能な状態を維持する場合は、この方法を使用します:
まず、この行から始めます。
この長い行は、上の行から2つの改行コードで区切られているため、*別の段落*になります。
この行も個別の段落ですが、
これらの行は1つの改行コードでしか区切られていないため、
*改行されず*、前の行に続いて
*同じ段落*の中に含まれます。レンダリングすると、この例は次のように表示されます:
まず、この行から始めます。
この長い行は、上の行から2つの改行コードで区切られているため、別の段落になります。
この行も個別の段落ですが、これらの行は1つの改行コードでしか区切られていないため、改行されず、前の行に続いて同じ段落の中に含まれます。
改行コード
改行で説明したとおり、段落は、1行以上の連続したテキストで構成され、1行以上の空行で区切られています(次の例では、最初の段落の後に2つの改行コードが入っています)。
改行またはソフトリターンをより細かく制御する必要がある場合は、行末にバックスラッシュまたは2つ以上のスペースを入れると、1つの改行を追加できます。2つの改行コードを連続して入れると、間に空行を挟んで新しい段落が作成されます:
最初の段落。
同じ段落内の別の行。
同じ段落内の3行目。ただし、今回は行末に2つスペースがあります。<space><space>
最初の段落のすぐ下の新しい行。
2番目の段落。
別の行。今回は行末にバックスラッシュがあります。\
直前のバックスラッシュによる新しい行。レンダリングすると、この例は次のように表示されます:
最初の段落。同じ段落内の別の行。同じ段落内の3行目。ただし、今回は行末に2つスペースがあります。
最初の段落のすぐ下の新しい行。2番目の段落。別の行。今回は行末にバックスラッシュがあります。
直前のバックスラッシュによる新しい行。
この構文は、段落と改行の処理に関するMarkdownの仕様に準拠しています。
強調
テキストを強調する方法はいくつかあります。斜体、太字、取り消し線を使用するか、これらの強調スタイルを組み合わせて使用します。
例:
*アスタリスク*または_アンダースコア_を使用した強調(斜体)。
二重の**アスタリスク**または__アンダースコア__を使用した強い強調(太字)。
**アスタリスクと_アンダースコア_**を組み合わせた強調。
二重のチルダによる取り消し線。~~これを取り消します。~~レンダリングすると、この例は次のように表示されます:
アスタリスクまたは_アンダースコア_を使用した強調(斜体)。
二重のasterisks(アスタリスク)またはunderscores(アンダースコア)を使用した強い強調(太字)。
asterisks and underscores(アスタリスクとアンダースコア)を組み合わせた強調。
二重のチルダによる取り消し線。
これを取り消します。
単語を途中で強調する
単語の一部を斜体にすることは避けてください。複数のアンダースコアで表示されることが多いコードや名前を扱う場合は、特に避ける必要があります。
GitLab Flavored Markdownは、単語内の複数のアンダーライン記法を無視します。これは、コードについて説明するMarkdownドキュメントをより適切にレンダリングするためです:
perform_complicated_task
do_this_and_do_that_and_another_thing
but_emphasis is_desired _here_レンダリングすると、この例は次のように表示されます:
perform_complicated_task
do_this_and_do_that_and_another_thing
but_emphasis is_desired here
単語の一部だけを強調したい場合は、アスタリスクを使用できます:
perform*complicated*task
do*this*and*do*that*and*another thingレンダリングすると、この例は次のように表示されます:
performcomplicatedtask
dothisanddothatandanother thing
インライン差分
インライン差分タグを使用すると、{+ additions +}または[- deletions -]を表示できます。
ラップタグには、中かっこまたは角かっこを使用できます:
- {+ addition 1 +}
- [+ addition 2 +]
- {- deletion 3 -}
- [- deletion 4 -]ただし、次のようにラップタグを混在させることはできません:
- {+ addition +]
- [+ addition +}
- {- deletion -]
- [- deletion -}`inline code`内では差分ハイライトは機能しません。テキストにバッククォート(`)が含まれている場合は、各バッククォートをバックスラッシュ(\)でエスケープしてください:
- {+ Just regular text +}
- {+ Text with `backticks` inside +}
- {+ Text with escaped \`backticks\` inside +}水平線
3つ以上のハイフン、アスタリスク、またはアンダースコアを使用して水平線を作成します:
---
***
___レンダリングされると、すべての水平線は次のようになります:
リスト
順序付きリストと順序なしリストを作成できます。
順序付きリストの場合は、各行の先頭にリストの開始番号(例: 1.)を追加し、その後にスペースを入れます。最初の番号の後は、どの番号を使用してもかまいません。順序付きリストはレンダリング時に上から順に自動的に番号が付けられるため、同じリスト内のすべての項目で1.と記述するのが一般的です。1.以外の数値で始めた場合は、その数値が最初の番号として使用され、そこからカウントアップされます。
例:
1. 最初の順序付きリスト項目
2. 別の項目
- 順序なしサブリスト
1. 実際の数値は関係ありません。数値であることだけが重要です
1. 順序付きサブリスト
1. 次の順序付きサブリスト項目
4. さらに別の項目レンダリングすると、この例は次のように表示されます:
- 最初の順序付きリスト項目
- 別の項目
- 順序なしサブリスト
- 実際の数値は関係ありません。数値であることだけが重要です
- 順序付きサブリスト
- 次の順序付きサブリスト項目
- さらに別の項目
順序なしリストの場合は、各行の先頭に-、*、+のいずれかを追加し、その後にスペースを追加します。同じリスト内でこれらの記号を混在させないでください。
順序なしリストの例:
- 使用した記号は
- マイナス
順序なしリストの別の例:
* 使用した記号は
* アスタリスク
順序なしリストのさらに別の例:
+ 使用した記号は
+ プラスレンダリングすると、この例は次のように表示されます:
順序なしリストの例:
- 使用した記号は
- マイナス
順序なしリストの別の例:
- 使用した記号は
- アスタリスク
順序なしリストのさらに別の例:
- 使用した記号は
- プラス
リスト項目に複数の段落が含まれている場合、後続の各段落は、リスト項目のテキストの先頭と同じレベルにインデントする必要があります。
例:
1. 最初の順序付きリスト項目
最初の項目の2番目の段落
1. 別の項目レンダリングすると、この例は次のように表示されます:
最初の順序付きリスト項目
最初の項目の2番目の段落
別の項目
最初の項目の段落が適切な数のスペースでインデントされていない場合、その段落はリストの外側に表示されます。適切な数のスペースを使用して、リスト項目の下に続く段落を適切にインデントさせてください。例:
1. 最初の順序付きリスト項目
(最初の項目の位置がずれた段落)
1.別の項目レンダリングすると、この例は次のように表示されます:
- 最初の順序付きリスト項目
(最初の項目の位置がずれた段落)
- 別の項目
順序付きリストが、順序なしリスト項目の最初のサブ項目で、かつ1.で始まらない場合は、その前に空行を入れる必要があります。
空行を入れた例:
- 順序なしリスト項目
5. 最初の順序付きリスト項目レンダリングすると、この例は次のように表示されます:
順序なしリスト項目
- 最初の順序付きリスト項目
空行がない場合、2番目のリスト項目は最初の項目の一部としてレンダリングされます:
- 順序なしリスト項目
5. 最初の順序付きリスト項目レンダリングすると、この例は次のように表示されます:
- 順序なしリスト項目 5. 最初の順序付きリスト項目
CommonMarkは、順序付きリスト項目と順序なしリスト項目の間にある空行を無視し、それらを単一のリストの一部と見なします。項目は緩いリストとしてレンダリングされます。各リスト項目は段落タグで囲まれるため、段落のスペースやマージンが適用されます。このため、リストでは各項目の間に余分なスペースがあるように見えます。
例:
- 最初のリスト項目
- 2番目のリスト項目
- 別のリストレンダリングすると、この例は次のように表示されます:
最初のリスト項目
2番目のリスト項目
別のリスト
CommonMarkは空行を無視し、これを段落スペースを伴う単一のリストとしてレンダリングします。
説明リスト
説明リストは、用語とそれに対応する説明をまとめたリストです。各用語には複数の説明を含めることができます。HTMLでは<dl>、<dt>、<dd>タグで表現されます。
説明リストを作成するには、1行目に用語を配置し、次の行の先頭にコロンを付けて説明を記述します。
フルーツ
: りんご
: オレンジ
野菜
: ブロッコリー
: ケール
: ほうれん草用語と説明の間に空行を入れることもできます。
フルーツ
: りんご
: オレンジリッチテキストエディタは新しい説明リストの挿入に対応していません。新しい説明リストを挿入するには、プレーンテキストエディタを使用します。詳細については、イシュー535956を参照してください。
タスクリスト
タスクリストは、Markdownがサポートされている場所であればどこにでも追加できます。
- イシュー、マージリクエスト、エピック、コメントでは、チェックボックスを選択できます。
- それ以外の場所ではチェックボックスを選択できません。Markdownを手動で編集し、角かっこ内の
xを追加または削除する必要があります。
タスクは、完了および未完了の他に、inapplicable(適用不可)にすることもできます。イシュー、マージリクエスト、エピック、コメントで適用不可のチェックボックスを選択しても、効果はありません。
タスクリストを作成するには、順序付きリストまたは順序なしリストの形式に従います:
- [x] Completed task
- [~] Inapplicable task
- [ ] Incomplete task
- [x] Sub-task 1
- [~] Sub-task 2
- [ ] Sub-task 3
1. [x] 完了したタスク
1. [~] 該当しないタスク
1. [ ] 未完了のタスク
1. [x] サブタスク1
1. [~] サブタスク2
1. [ ] サブタスク3テーブルにタスクリストを含めるには、HTMLのリストタグまたはHTMLのテーブルを使用します。
リンク
リンクは複数の方法で作成できます:
- この行は[インラインスタイルのリンク](https://www.google.com)を示しています
- この行は[同じディレクトリ内のリポジトリファイルへのリンク](permissions.md)を示しています
- この行は[1つ上のディレクトリにあるファイルへの相対リンク](../_index.md)を示しています
- この行は[タイトルテキストも含むリンク](https://www.google.com "このリンクはGoogleに移動します!")を示していますレンダリングすると、これらの例は次のように表示されます:
- この行はインラインスタイルのリンクを示しています
- この行は同じディレクトリ内のリポジトリファイルへのリンクを示しています
- この行は1つ上のディレクトリにあるファイルへの相対リンクを示しています
- この行はタイトルテキストも含むリンクを示しています
相対リンクを使用して、Wikiページ内でプロジェクトファイルを参照したり、プロジェクトファイル内でWikiページを参照したりすることはできません。この制限は、GitLabではWikiが常に別のGitリポジトリに存在することによるものです。たとえば、[I'm a reference-style link](style)は、リンクがWikiのMarkdownファイル内にある場合にのみwikis/styleを指します。詳細については、Wiki固有のを参照してください。
見出しのIDアンカーを使用して、ページ内の特定のセクションにリンクします:
- この行は、[#と見出しIDを使用して、別のMarkdownページ上のセクション](permissions.md#project-members-permissions)にリンクします。
- この行は、[#と見出しIDを使用して、同じページ上の別のセクション](#heading-ids-and-links)にリンクします。レンダリングすると、これらの例は次のように表示されます:
- この行は、
##と見出しIDを使用して、別のMarkdownページ上のセクションにリンクします。- この行は、
##と見出しIDを使用して、同じページ上の別のセクションにリンクします。
リンク参照の使用:
- この行は[参照スタイルのリンク(下記参照)][大文字と小文字を区別しない任意の参照テキスト]を示しています
- [参照スタイルのリンク定義には数字を使用できます(下記参照)][1]
- または、空にして[リンクテキスト自体][]を使用します(下記参照)
参照リンクがこの後に続くことを示すテキスト。
[大文字と小文字を区別しない任意の参照テキスト]: https://www.mozilla.org/en-US/
[1]: https://slashdot.org
[リンクテキスト自体]: https://about.gitlab.com/レンダリングすると、この例は次のように表示されます:
- この行は参照スタイルのリンク(下記参照)を示しています
- 参照スタイルのリンク定義には数字を使用できます(下記参照)
- または、空にしてリンクテキスト自体を使用します(下記参照)
参照リンクがこの後に続くことを示すテキスト。
URLの自動リンク
テキストに入力したほとんどのURLは、自動的にリンクされます:
- https://www.google.com
- https://www.google.com
- ftp://ftp.us.debian.org/debian/
- smb://foo/bar/baz
- irc://irc.freenode.net/
- http://localhost:3000レンダリングすると、この例は次のように表示されます:
GitLab固有の参照
GitLab Flavored Markdownは、GitLab固有の参照をレンダリングします。たとえば、イシュー、コミット、チームメンバー、またはプロジェクトチーム全体を参照できます。GitLab Flavored Markdownは、その参照をリンクに変換し、それらの間を移動できるようにします。プロジェクトへの参照はすべて、プロジェクト名ではなくproject slug(プロジェクトのslug)を使用する必要があります。
さらに、GitLab Flavored Markdownは特定のクロスプロジェクト参照を認識します。また、同じネームスペース内にある他のプロジェクトを参照するための短縮表記も用意されています。
GitLab Flavored Markdownは、以下を認識します:
| 参照 | インプット | クロスプロジェクト参照 | 同じネームスペース内のショートカット |
|---|---|---|---|
| 特定のユーザー | @user_name | ||
| 特定のグループ | @group_name | ||
| チーム全体 | @all | ||
| プロジェクト | namespace/project> | ||
| イシュー | #123、GL-123、または[issue:123] | namespace/project#123または[issue:namespace/project/123] | project#123または[issue:project/123] |
| 作業アイテム | [work_item:123] | [work_item:namespace/project/123] | [work_item:project/123] |
| マージリクエスト | !123 | namespace/project!123 | project!123 |
| スニペット | $123 | namespace/project$123 | project$123 |
| エピック | #123、&123、[work_item:123]、または[epic:123] | group1/subgroup#123、group1/subgroup&123、[work_item:group1/subgroup/123]、または[epic:group1/subgroup/123] | |
| イテレーション | *iteration:"iteration title" | ||
| ID指定によるイテレーションケイデンス1 | [cadence:123] | ||
| タイトル指定によるイテレーションケイデンス(1語)1 | [cadence:plan] | ||
| タイトル指定によるイテレーションケイデンス(複数語)1 | [cadence:"plan a"] | ||
| 脆弱性 | [vulnerability:123] | [vulnerability:namespace/project/123] | [vulnerability:project/123] |
| 機能フラグ | [feature_flag:123] | [feature_flag:namespace/project/123] | [feature_flag:project/123] |
| ID指定によるラベル2 | ~123 | namespace/project~123 | project~123 |
| 名前指定によるラベル(1語)2 | ~bug | namespace/project~bug | project~bug |
| 名前指定によるラベル(複数語)2 | ~"feature request" | namespace/project~"feature request" | project~"feature request" |
| 名前指定によるラベル(スコープ付き)2 | ~"priority::high" | namespace/project~"priority::high" | project~"priority::high" |
| ID指定によるプロジェクトマイルストーン2 | %123 | namespace/project%123 | project%123 |
| 名前指定によるマイルストーン(1語)2 | %v1.23 | namespace/project%v1.23 | project%v1.23 |
| 名前指定によるマイルストーン(複数語)2 | %"release candidate" | namespace/project%"release candidate" | project%"release candidate" |
| コミット(特定の1つ) | 9ba12248 | namespace/project@9ba12248 | project@9ba12248 |
| コミット範囲比較 | 9ba12248...b19a04f5 | namespace/project@9ba12248...b19a04f5 | project@9ba12248...b19a04f5 |
| リポジトリファイル参照 | [README](doc/README.md) | ||
| リポジトリファイル参照(特定の行) | [README](doc/README.md#L13) | ||
| アラート | ^alert#123 | namespace/project^alert#123 | project^alert#123 |
| 連絡先 | [contact:test@example.com] | ||
| Wikiページ(ページslugがタイトルと同じ場合) | [[Home]]または[wiki_page:Home] | [wiki_page:namespace/project:Home]または[wiki_page:group1/subgroup:Home] | |
| Wikiページ(ページslugがタイトルと異なる場合) | [[How to use GitLab|how-to-use-gitlab]] |
Footnotes(脚注):
- GitLab 16.9で導入されました。イテレーションケイデンスの参照は、常に
[cadence:<ID>]形式でレンダリングされます。たとえば、テキスト参照[cadence:"plan"]は、参照先イテレーションケイデンスのIDが1の場合、[cadence:1]としてレンダリングされます。 - ラベルまたはマイルストーンを参照する場合は、
namespace/projectの前に/を追加して、特定のラベルまたはマイルストーンを明示的に指定し、あいまいさをなくします。
たとえば、#123形式でイシューを参照すると、出力は#123というテキストにイシュー番号123へのリンクが付いた形で書式設定されます。同様に、イシュー番号123へのリンクも認識され、テキスト#123として書式設定されます。#123をイシューにリンクさせたくない場合は、\#123のように先頭にバックスラッシュを追加します。
さらに、一部のオブジェクトへのリンクも認識され、書式設定されます。例:
- イシューに関するコメント:
"https://gitlab.com/gitlab-org/gitlab/-/issues/1234#note_101075757"は、#1234 (comment 101075757)としてレンダリング。 - イシューのデザインタブ:
"https://gitlab.com/gitlab-org/gitlab/-/issues/1234/designs"は、#1234 (designs)としてレンダリング。 - 個別デザインへのリンク:
"https://gitlab.com/gitlab-org/gitlab/-/issues/1234/designs/layout.png"は、#1234[layout.png]としてレンダリング。
アイテムのタイトルを表示する
イシュー、タスク、目標、主な成果、マージリクエスト、エピックのレンダリングされたリンクにタイトルを含めるには:
- 参照の末尾にプラス(
+)を追加します。
たとえば、#123+のような参照はThe issue title (#123)としてレンダリングされます。
https://gitlab.com/gitlab-org/gitlab/-/issues/1234+のようなURL参照も展開されます。
アイテムサマリーを表示する
エピック、イシュー、タスク、目標、主な成果、マージリクエストのレンダリングされたリンクに拡張サマリーを含めるには:
- 参照の末尾に
+sを追加します。
サマリーには、参照される作業アイテムの種類に応じて、該当する場合は、assignees(担当者)、マイルストーン、health status(ヘルスステータス)に関する情報が含まれます。
たとえば、#123+sのような参照はThe issue title (#123) • First Assignee, Second Assignee+ • v15.10 • Needs attentionとしてレンダリングされます。
https://gitlab.com/gitlab-org/gitlab/-/issues/1234+sのようなURL参照も展開されます。
担当者、マイルストーン、ヘルスステータスが変更された場合に、レンダリング済みの参照を更新するには:
- ページを更新します。
ホバー時のコメントプレビュー
コメントへのリンクにカーソルを合わせると、コメントの作成者と最初の行が表示されます。
可観測性ダッシュボードを埋め込む
エピック、イシュー、マージリクエストなどに、GitLab可観測性UIダッシュボードの説明とコメントを埋め込むことができます。
可観測性ダッシュボードのURLを埋め込むには:
- GitLab可観測性UIで、アドレスバーのURLをコピーします。
- コメントまたは説明にリンクを貼り付けます。GitLab Flavored MarkdownがURLを認識し、ソースを表示します。
テーブル
テーブルを作成する場合:
- 1行目にはヘッダーを記述し、パイプ文字(
|)で区切ります。 - 2行目はヘッダーとセルを区切ります。
- セルには、空白、ハイフン、および(オプションで)水平方向の配置を指定するコロンのみを含めることができます。
- 各セルには少なくとも1つのハイフンを含める必要がありますが、複数のハイフンを追加してもセルのレンダリング結果は変わりません。
- ハイフン、空白、またはコロン以外の内容は許可されません。
- 3行目以降にセルの値を記述します。
- Markdownでは、セルの内容を複数行に分けることはcan’t(できません)。セルは1行に収める必要がありますが、非常に長くすることはできます。必要に応じて、HTMLの
<br>タグで改行を強制できます。 - セルのサイズは互いにdon’t(一致している必要はありません)。サイズについては柔軟ですが、パイプ記号(
|)で区切る必要があります。 - 空のセルを作成可能。
- Markdownでは、セルの内容を複数行に分けることはcan’t(できません)。セルは1行に収める必要がありますが、非常に長くすることはできます。必要に応じて、HTMLの
- 列幅はセルの内容に基づいて動的に計算されます。
- パイプ文字(
|)を、テーブルの区切り文字ではなくテキストとして使用するには、バックスラッシュ(\|)でエスケープする必要があります。
例:
| ヘッダー1 | ヘッダー2 | ヘッダー3 |
| --- |
| セル1 | セル2 | セル3 |
| セル4 | セル5はより長い | セル6は他のセルよりもはるかに長いですが問題ありません。セルが表示サイズに対して大きすぎる場合、最終的にはテキストが折り返されます。 |
| セル7 | | セル9 |レンダリングすると、この例は次のように表示されます:
ヘッダー1 ヘッダー2 ヘッダー3 セル1 セル2 セル3 セル4 セル5はより長い セル6は他のセルよりもはるかに長いですが問題ありません。セルが表示サイズに対して大きすぎる場合、最終的にはテキストが折り返されます。 セル7 セル9
配置
さらに、2行目の「ダッシュ」行の両端にコロン(:)を追加することにより、列内のテキストの配置を選択できます。この設定は、列内のすべてのセルに影響します:
| 左揃え | 中央揃え | 右揃え |
| :----------- | :------: | ------------: |
| セル1 | セル2 | セル3 |
| セル4 | セル5 | セル6 |レンダリングすると、この例は次のように表示されます:
左揃え 中央揃え 右揃え セル1 セル2 セル3 セル4 セル5 セル6
GitLab自体では、ヘッダーはChromeとFirefoxでは常に左揃え、Safariでは中央揃えになります。
複数行を含むセル
HTMLの書式設定を使用して、テーブルのレンダリングを調整できます。たとえば、<br>タグを使用して、セルを複数行にすることが可能です:
| 名前 | 詳細 |
| ----- | ------- |
| 項目1 | このテキストは1行に表示されます |
| 項目2 | この項目の内容:<br>- 複数の項目を<br>- 個別にリスト表示します |レンダリングすると、この例は次のように表示されます:
名前 詳細 項目1 このテキストは1行に表示されます 項目2 この項目の内容:
- 複数の項目を
- 個別にリスト表示します
テーブル内のタスクリスト
チェックボックス付きのタスクリストを追加するには、HTMLの書式設定を使用します。次のいずれかを使用します:
An HTML table with Markdown in the cells(セル内にMarkdownを含むHTMLテーブル)。この方法で書式設定したテーブルは、完全に機能するタスクリストを生成します。
<table> <thead> <tr><th>ヘッダー1</th><th>ヘッダー2</th></tr> </thead> <tbody> <tr> <td>セル1</td> <td>セル2</td> </tr> <tr> <td>セル3</td> <td> - [ ] タスク1 - [ ] タスク2 </td> </tr> </tbody> </table>A Markdown table with HTML list tags(HTMLリストタグを含むMarkdownテーブル)。この方法で作成したタスクは、選択しても状態が保存されません。また、この方法で書式設定したテーブルは、
docs.gitlab.com上では正しくレンダリングされません。| ヘッダー1 | ヘッダー2 | | --- | --- | | セル1 | セル2 | | セル3 | <ul><li> - [ ] タスク1 </li><li> - [ ] タスク2 </li></ul> |
リッチテキストエディタでテーブルを作成し、タスクリストを挿入することもできます。
スプレッドシートからコピーアンドペーストする
スプレッドシートソフトウェア(例: Microsoft Excel、Googleスプレッドシート、Apple Numbers)を使用して、スプレッドシートからGitLabにコピーアンドペーストすると、Markdownテーブルが作成されます。たとえば、次のスプレッドシートがあるとします:
セルを選択してクリップボードにコピーします。GitLab Markdownエントリを開き、スプレッドシートを貼り付けます:
JSONテーブル
JSONコードブロックでテーブルをレンダリングするには、次の構文を使用します:
```json:table
{}
```この機能に関する次の動画チュートリアルをご覧ください:
items属性は、データポイントを表すオブジェクトのリストです。
```json:table
{
"items" : [
{"a": "11", "b": "22", "c": "33"}
]
}
```テーブルのラベルを指定するには、fields属性を使用します。
```json:table
{
"fields" : ["a", "b", "c"],
"items" : [
{"a": "11", "b": "22", "c": "33"}
]
}
```itemsのすべての要素でfieldsに対応する値が必須だとは限りません。
```json:table
{
"fields" : ["a", "b", "c"],
"items" : [
{"a": "11", "b": "22", "c": "33"},
{"a": "211", "c": "233"}
]
}
```fieldsが明示的に指定されていない場合、ラベルはitemsの最初の要素から取得されます。
```json:table
{
"items" : [
{"a": "11", "b": "22", "c": "33"},
{"a": "211", "c": "233"}
]
}
```fieldsにカスタムラベルを指定できます。
```json:table
{
"fields" : [
{"key": "a", "label": "AA"},
{"key": "b", "label": "BB"},
{"key": "c", "label": "CC"}
],
"items" : [
{"a": "11", "b": "22", "c": "33"},
{"a": "211", "b": "222", "c": "233"}
]
}
```fieldsの個々の要素に対してソートを有効にできます。
```json:table
{
"fields" : [
{"key": "a", "label": "AA", "sortable": true},
{"key": "b", "label": "BB"},
{"key": "c", "label": "CC"}
],
"items" : [
{"a": "11", "b": "22", "c": "33"},
{"a": "211", "b": "222", "c": "233"}
]
}
```filter属性を使用すると、ユーザーインプットによって動的にコンテンツがフィルタリングされるテーブルをレンダリングできます。
```json:table
{
"fields" : [
{"key": "a", "label": "AA"},
{"key": "b", "label": "BB"},
{"key": "c", "label": "CC"}
],
"items" : [
{"a": "11", "b": "22", "c": "33"},
{"a": "211", "b": "222", "c": "233"}
],
"filter" : true
}
```markdown属性を使用すると、項目とキャプション内でGitLab参照を含むGitLab Flavored Markdownを使用できます。フィールドはMarkdownをサポートしていません。
```json:table
{
"fields" : [
{"key": "a", "label": "AA"},
{"key": "b", "label": "BB"},
{"key": "c", "label": "CC"}
],
"items" : [
{"a": "11", "b": "**22**", "c": "33"},
{"a": "#1", "b": "222", "c": "233"}
],
"markdown" : true
}
```デフォルトでは、すべてのJSONテーブルにGenerated with JSON dataというキャプションがあります。caption属性を指定すると、このキャプションをオーバーライドできます。
```json:table
{
"items" : [
{"a": "11", "b": "22", "c": "33"}
],
"caption" : "Custom caption"
}
```JSONが無効な場合は、エラーが発生します。
```json:table
{
"items" : [
{"a": "11", "b": "22", "c": "33"}
],
}
```マルチメディア
画像、動画、オーディオを埋め込むことができます。Markdown構文を使用してマルチメディアを追加でき、ファイルへのリンク、サイズの設定、インライン表示も可能です。書式設定オプションを使用すると、タイトルのカスタマイズ、幅と高さの指定、レンダリング結果でのメディア表示方法の制御も行えます。
画像
先頭に!を付けたインラインまたは参照リンクを使用して、画像を埋め込みます。例:
画像リンクでは:
- 角かっこ(
[ ])内のテキストが画像の代替テキストになります。 - 画像リンクパスの後の二重引用符で囲まれたテキストがタイトルテキストになります。タイトルテキストを表示するには、画像にカーソルを合わせます。
アクセスしやすい代替テキストの作成については、アクセスしやすい画像と動画を参照してください。
画像を選択すると、オーバーレイで開きます。
動画
動画拡張子を持つファイルにリンクする画像タグは、自動的に動画プレーヤーに変換されます。有効な動画拡張子は、.mp4、.m4v、.mov、.webm、.ogvです:
動画の例を次に示します:
この例は、GitLab内でレンダリングした場合にのみ動作します:
画像または動画のサイズを変更する
画像の後に属性リストを追加することで、画像または動画の幅と高さを制御できます。値は整数で、単位はpx(デフォルト)または%です。
例
{width=100 height=100px}
{width=75%}この例は、GitLab内でレンダリングした場合にのみ動作します:
Markdownの代わりにHTMLのimgタグを使用し、heightおよびwidthパラメータを設定することもできます。
GitLab 17.1以降、解像度の高いPNG画像をMarkdownテキストボックスに貼り付けると、サイズが常に付加されます。サイズは、Retina(およびその他の高解像度)ディスプレイに対応するように自動的に調整されます。たとえば、144ppiの画像はサイズの50%に、96ppiの画像はサイズの75%にサイズ変更されます。
選択すると、画像は100%にスケールされるか、ウィンドウに収まる最大のスケールでオーバーレイで開きます。
オーディオ
動画と同様に、オーディオ拡張子を持つファイルのリンクタグも、自動的にオーディオプレーヤーに変換されます。有効なオーディオ拡張子は、.mp3、.oga、.ogg、.spx、.wavです:
オーディオクリップの例を次に示します:
この例は、GitLab内でレンダリングした場合にのみ動作します:
引用ブロック
引用ブロックを使用して、補足説明などの情報を強調表示します。これは、引用ブロックの行の先頭に>を付けることで生成されます:
> 引用ブロックは、返信テキストを再現するのに役立ちます。
> この行は同じ引用の一部です。
引用の区切り。
> この非常に長い行は、折り返されても適切に引用されます。どの環境でも折り返されるよう、この行の内容は十分に長くしてください。引用ブロックの中ではMarkdownを使用することもできます。レンダリングすると、この例は次のように表示されます:
引用ブロックは、返信テキストを再現するのに役立ちます。この行は同じ引用の一部です。
引用の区切り。
この非常に長い行は、折り返されても適切に引用されます。どの環境でも折り返されるよう、この行の内容は十分に長くしてください。引用ブロックの中ではMarkdownをMarkdown(使用)することもできます。
複数行の引用ブロック
>>>で囲んで複数行の引用ブロックを作成します:
>>>
他の場所から貼り付けたメッセージが
複数行にわたる場合、
各行の先頭に手動で`>`を付加しなくても引用できます!
>>>他の場所から貼り付けたメッセージが
複数行にわたる場合、
各行の先頭に手動で
>を付加しなくても引用できます!
コードスパンとコードブロック
コードとして表示すべき内容を強調し、通常のテキストと区別します。
インラインコードは、単一のバッククォート(`)で囲んで書式設定します:
インライン`code`に`back-ticks around`があります。レンダリングすると、この例は次のように表示されます:
インライン
codeが、back-ticks aroundで囲まれています。
より大きなコードの例で同様の効果を得るには、コードブロックを使用します。コードブロックを作成するには、次のいずれかを行います:
- コードブロック全体をバッククォート(
```)3つで囲みます。開始と終了のバッククォートの数が同じであれば、3つ以上のバッククォートも使用できます。 - コードブロック全体をチルダ(
~~~)3つで囲みます。 - コードブロック全体を4つ以上のスペースでインデントします。
例:
Pythonコードブロック:
```python
def function():
#フェンス付きコードブロック内でインデントは正常に機能します
s = "Pythonコード"
print s
```
4つのスペースを使用したコードブロック:
4つのスペースを使用するのは
バッククォート3つで
囲むのと同じです
チルダを使用したJavaScriptコードブロック:
~~~javascript
var s = "JavaScript構文ハイライト";
alert(s);
~~~前の3つの例は次のようにレンダリングされます:
Pythonコードブロック:
def function(): #フェンス付きコードブロック内でインデントは正常に機能します s = "Pythonコード" print s4つのスペースを使用したコードブロック:
4つのスペースを使用するのは バッククォート3つで 囲むのと同じですチルダを使用したJavaScriptコードブロック:
var s = "JavaScript構文ハイライト"; alert(s);
構文ハイライト
GitLabは、コードブロックで構文をよりカラフルにハイライトするために、Rouge Rubyライブラリを使用しています。サポートされている言語のリストについては、RougeプロジェクトのWikiをご覧ください。構文ハイライトはコードブロックでのみサポートされます。インラインコードをハイライトすることはできません。
コードブロックを囲んで構文ハイライトを適用するには、コードの開始宣言(3つのバッククォート(```)または3つのチルダ(~~~))にコード言語を追加します。
plaintextを使用するコードブロックや、コード言語が指定されていないコードブロックには、構文ハイライトは適用されません:
```
言語が指定されていないため、構文ハイライトは**適用されません**。
s = "この行はハイライトされません。"
しかし、<b>タグ</b>を追加してみましょう。
```レンダリングすると、この例は次のように表示されます:
言語が指定されていないため、構文ハイライトは**適用されません**。 s = "この行はハイライトされません。" しかし、<b>タグ</b>を追加してみましょう。
図表とフローチャート
次のツールを使用して、テキストから図表を生成できます:
Wikiでは、diagrams.netエディタで作成された図表を追加および編集することもできます。
Mermaid
詳細については、公式ページをご覧ください。Mermaid Live Editorは、Mermaidの学習やMermaidコード内の問題のデバッグに役立ちます。図表の問題を特定し、解決するために使用できます。
図表またはフローチャートを生成するには、mermaidブロック内にテキストを記述します:
```mermaid
%%{init: { "fontFamily": GitLab Sans }}%%
graph TD;
accTitle: 基本的なMermaid図の例
accDescr: ノードA、B、C、Dとそれらの間の接続を示す単純なフローチャート。
A-->B;
A-->C;
B-->D;
C-->D;
```レンダリングすると、この例は次のように表示されます:
%%{init: { "fontFamily": GitLab Sans }}%%
graph TD;
accTitle: 基本的なMermaid図の例
accDescr: ノードA、B、C、Dとそれらの間の接続を示す単純なフローチャート。
A-->B;
A-->C;
B-->D;
C-->D;
サブグラフを含めることもできます:
```mermaid
%%{init: { "fontFamily": GitLab Sans }}%%
graph TB
accTitle: サブグラフを持つMermaid図
accDescr: ノードと決定フローを含む2つのサブグラフを持つメイングラフを示すフローチャート。
SubGraph1 --> SubGraph1Flow
subgraph "SubGraph 1 Flow"
SubGraph1Flow(SubNode 1)
SubGraph1Flow -- Choice1 --> DoChoice1
SubGraph1Flow -- Choice2 --> DoChoice2
end
subgraph "Main Graph"
Node1[Node 1] --> Node2[Node 2]
Node2 --> SubGraph1[Jump to SubGraph1]
SubGraph1 --> FinalThing[Final Thing]
end
```レンダリングすると、この例は次のように表示されます:
%%{init: { "fontFamily": GitLab Sans }}%%
graph TB
accTitle: レンダリングされたサブグラフを持つMermaid図
accDescr: レンダリングされた、ノードと決定フローを含む2つのサブグラフを持つメイングラフを示すフローチャート。
SubGraph1 --> SubGraph1Flow
subgraph "SubGraph 1 Flow"
SubGraph1Flow(SubNode 1)
SubGraph1Flow -- Choice1 --> DoChoice1
SubGraph1Flow -- Choice2 --> DoChoice2
end
subgraph "Main Graph"
Node1[Node 1] --> Node2[Node 2]
Node2 --> SubGraph1[Jump to SubGraph1]
SubGraph1 --> FinalThing[Final Thing]
end
PlantUML
PlantUMLインテグレーションはGitLab.comで有効になっています。GitLab Self-ManagedのGitLabインスタンスでPlantUMLを利用可能にするには、GitLab管理者が有効にする必要があります。
PlantUMLを有効にすると、ダイアグラム区切り文字@startuml/@endumlはplantumlブロックに置き換えられるため、不要になります。例:
```plantuml
Bob -> Alice : hello
Alice -> Bob : hi
```::includeディレクティブを使用して、リポジトリ内の別のファイルからPlantUMLダイアグラムをインクルードするか埋め込むことができます。詳細については、ダイアグラムファイルをインクルードするを参照してください。
Kroki
GitLabでKrokiを利用可能にするには、GitLab管理者が有効にする必要があります。詳細については、Krokiインテグレーションページを参照してください。
数式
LaTeX構文で記述された数式はKaTeXでレンダリングされます。_KaTeXはLaTeXのサブセットのみをサポートしています。_この構文は、:stem: latexmathを使用するAsciiDoc Wikiおよびファイルでも機能します。詳細については、Asciidoctorユーザーマニュアルを参照してください。
不正行為を防ぐため、GitLabは最初の50個のインライン数式インスタンスのみをレンダリングします。この制限は、グループまたはGitLab Self-Managedインスタンス全体に対して無効にできます。
数式ブロックの数も、レンダリング時間に基づいて制限されます。制限を超えると、GitLabは超過した数式インスタンスをテキストとしてレンダリングします。Wikiファイルとリポジトリファイルには、これらの制限は適用されません。
バッククォート付きのドル記号($`...`$)または単一のドル記号($...$)で囲んだ数式は、テキスト内でインライン表示されます。
二重のドル記号($$...$$)で囲んだ数式、または言語にmathと指定したコードブロック内の数式は、別の行にレンダリングされます:
This math is inline: $`a^2+b^2=c^2`$.
この数式は、`` ```math ````ブロックを使用して別の行に表示されます:
```math
a^2+b^2=c^2
```
This math is on a separate line using inline `$$`: $$a^2+b^2=c^2$$
This math is on a separate line using a `$$...$$` block:
$$
a^2+b^2=c^2
$$レンダリングすると、この例は次のように表示されます:
リッチテキストエディタは新しい数式ブロックの挿入に対応していません。新しい数式ブロックを挿入するには、プレーンテキストエディタを使用します。詳細については、イシュー366527を参照してください。
目次
目次は、ドキュメント内のサブ見出しにリンクする順序なしリストです。イシュー、マージリクエスト、エピックには目次を追加できますが、ノートやコメントには追加できません。
サポートされているコンテンツタイプのdescription(説明)フィールドに、次のいずれかのタグを単独の行として追加します:
[[_TOC_]]
または
[TOC]- Markdownファイル。
- Wikiページ。
- イシュー。
- マージリクエスト。
- エピック。
TOCコードを単一の角かっこで使用すると、単独の行かどうかにかかわらず、目次がレンダリングされます。この動作は意図したものではありません。詳細については、イシュー359077を参照してください。
これは、私のWikiページの紹介文です。
[[_TOC_]]
## My first heading
First section content.
## My second heading
Second section content.アラート
アラートは、何かを強調したり注意を引いたりするために使用できます。アラートの構文では、Markdownの引用ブロック構文の後にアラートのタイプを指定します。Markdownをサポートするどのテキストボックスでもアラートを使用できます。
使用できるアラートのタイプは次のとおりです:
注: ざっと目を通す場合でも注意すべき情報:
> [!note] > The following information is useful.ヒント: ユーザーが成功するために役立つ任意の情報:
> [!tip] > Tip of the day.重要: ユーザーが成功するために必要不可欠な重要な情報:
> [!important] > This is something important you should know.注意: アクションによって悪影響が生じる可能性がある:
> [!caution] > You need to be very careful about the following.警告: 重大なリスクの可能性がある:
> [!warning] > The following would be dangerous.
アラートに表示されるタイトルテキストは、デフォルトではアラートの名前になります。たとえば、> [!warning]アラートのタイトルはWarningです。
アラートブロックのタイトルをオーバーライドするには、同じ行に任意のテキストを入力します。たとえば、警告の色を使用しつつタイトルをData deletionにする場合は、次のように指定します:
> [!warning] Data deletion
> 次の手順を実行すると、データは回復できなくなります。複数行の引用ブロックもアラート構文をサポートしています。これにより、大きくてより複雑なテキストをアラートで囲むことができます。
>>> [!note] 考慮事項
次の影響を考慮する必要があります:
1. 考慮事項1
1. 考慮事項2
>>>アラートは次のようにレンダリングされます:
カラー
Markdownはテキストカラーの変更をサポートしていません。
カラーコードは、HEX、RGB、HSLの形式で記述できます。
HEX:`#RGB[A]`または`#RRGGBB[AA]`RGB:`RGB[A](R, G, B[, A])`HSL:`HSL[A](H, S, L[, A])`
カラーを名前で参照することはサポートされていません。
GitLabアプリケーションでは(ただしGitLabドキュメントは除く)、カラーコードをバッククォートで囲むと、カラーコードの横にカラーチップが表示されます。例:
- `#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)`この例は、GitLab内でレンダリングした場合にのみ動作します:
#F00#F00A#FF0000#FF0000AARGB(0,255,0)RGB(0%,100%,0%)RGBA(0,255,0,0.3)HSL(540,70%,50%)HSLA(540,70%,50%,0.3)
カラーコードをエスケープする
カラーコードをインラインコードとして表示し、カラーチップを生成しないようにするには、先頭にバックスラッシュ(\)を付けます。
例:
\#FF0000\RGB(255,0,0)\HSL(0,100%,50%)
いずれの場合も、出力ではバックスラッシュが削除され、カラーチップはレンダリングされません。
これは特に、インラインコードにイシュー番号などの値を含める際に、カラーチップが誤って表示されないようにするために便利です。
絵文字
絵文字は、GitLab Flavored Markdownがサポートされている場所ならどこでも使用できます。例:
ときには、ちょっと遊び心で:monkey:いくつかの:star2:を
:speech_balloon:に加えたいことがあります。そこで、絵文字をご用意しました!
絵文字を使って:bug:を指摘したり、問題のある:speak_no_evil:パッチについて警告したりできます。
また、誰かがあなたの遅い:snail:コードを改善してくれたら、:birthday:を送りましょう。
きっと喜んでくれます:heart:。
絵文字に使い慣れてなくても、緊張する:fearful:ことはありません。絵文字の:family:に参加できます。
サポートされているコードを調べてみてください。レンダリングすると、この例は次のように表示されます:
ときには、ちょっと遊び心で
いくつかの
を
に加えたいことがあります。そこで、絵文字をご用意しました!
絵文字を使って
を指摘したり、問題のある
パッチについて警告したりできます。また、誰かがあなたの遅い
コードを改善してくれたら、
を送りましょう。きっと喜んでくれます
。
絵文字に使い慣れてなくても、緊張する
ことはありません。絵文字の
に参加できます。サポートされているコードを調べてみてください。
サポートされているすべての絵文字コードのリストについては、絵文字チートシートを参照してください。
絵文字とオペレーティングシステム
前の絵文字の例では、ハードコードされた画像を使用しています。GitLabでレンダリングされる絵文字は、使用するOSとブラウザによって表示が異なる場合があります。
ほとんどの絵文字はmacOS、Windows、iOS、Androidでネイティブにサポートされており、サポートされていない場合は画像ベースの絵文字にフォールバックします。
Linuxでは、Noto Color Emojiをダウンロードして、絵文字の完全なネイティブサポートを利用できます。Ubuntu 22.04では(多くの最新のLinuxディストリビューションと同様に)、このフォントがデフォルトでインストールされています。
カスタム絵文字の追加の詳細については、カスタム絵文字を参照してください。
フロントマター
フロントマターとは、Markdownドキュメントの先頭、コンテンツの前にあるメタデータのことです。このデータは、JekyllやHugoなどの静的サイトジェネレーターや、その他多くのアプリケーションで使用できます。
GitLabでレンダリングされたMarkdownファイルを表示すると、フロントマターはドキュメントの上部のブロックにそのまま表示されます。HTMLコンテンツは、フロントマターの後に表示されます。例を確認するには、GitLabドキュメントファイルのソースバージョンとレンダリングバージョンを切り替えてみてください。
GitLabでは、フロントマターはMarkdownファイルとWikiページでのみ使用されます。Markdownの書式設定がサポートされている他の場所では使用されません。フロントマターは必ずドキュメントの最上部に配置し、区切り文字で囲む必要があります。
次の区切り文字がサポートされています:
YAML(
---):--- title: フロントマターについて example: language: yaml ---TOML(
+++):+++ title = "フロントマターについて" [example] language = "toml" +++JSON(
;;;):;;; { "title": "フロントマターについて" "example": { "language": "json" } } ;;;
他の言語は、既存の区切り文字に指定子を追加することでサポートされます。例:
---php
$title = "フロントマターについて";
$example = array(
'language' => "php",
);
---インクルード
インクルード(インクルードディレクティブ)を使用して、ドキュメントの内容を別のドキュメント内に追加できます。
たとえば、本を複数の章に分け、各章をメインのドキュメントに含めることができます:
::include{file=chapter1.md}
::include{file=chapter2.md}GitLabでは、インクルードディレクティブはMarkdownファイルとWikiページでのみ使用されます。Markdownの書式設定がサポートされている他の場所では使用されません。
Markdownファイルでインクルードディレクティブを使用する場合:
::include{file=example_file.md}Wikiページでインクルードディレクティブを使用する場合:
::include{file=example_page.md}各::includeは行の先頭に配置し、file=でファイルまたはURLを指定する必要があります。指定したファイル(またはURL)の内容は::includeの位置に挿入され、残りのMarkdownと併せて処理されます。
挿入されたファイル内のインクルードディレクティブは無視されます。たとえば、file1がfile2を含み、file2がfile3を含んでいる場合、file1を処理した結果にはfile3の内容は反映されません。
インクルードの制限
システムパフォーマンスを確保し、悪意のあるドキュメントが問題を引き起こすのを防ぐために、GitLabでは1つのドキュメント内で処理されるインクルードディレクティブの数に上限を設けています。デフォルトでは、ドキュメントには最大32個のインクルードディレクティブを含めることができます。
処理されるインクルードディレクティブの数をカスタマイズするには、管理者がアプリケーション設定APIでasciidoc_max_includesアプリケーション設定を変更します。
外部URLからのインクルードを使用する
別のWikiページまたは外部URLからのインクルードを使用するには、管理者がwiki_asciidoc_allow_uri_includesアプリケーション設定を有効にします。
<!-- コンテンツをURIから読み込めるようにするには、アプリケーション設定wiki_asciidoc_allow_uri_includesをtrueに設定します -->
::include{file=https://example.org/installation.md}コードブロックでインクルードを使用する
コードブロック内で::includeディレクティブを使用して、リポジトリ内のファイルからコンテンツを追加できます。たとえば、リポジトリに次の内容のファイルjavascript_code.jsが含まれている場合:
var s = "JavaScript構文ハイライト";
alert(s);これを次のようにMarkdownファイルに含めることができます:
このスクリプトには以下が含まれています:
```javascript
::include{file=javascript_code.js}
```レンダリングすると、この例は次のように表示されます:
このスクリプトには以下が含まれています:
var s = "JavaScript構文ハイライト"; alert(s);
プレースホルダー
この機能の利用可否は、機能フラグによって制御されます。詳細については、履歴を参照してください。この機能はテストには利用できますが、本番環境での使用には適していません。
プレースホルダーは、プロジェクトのタイトルや最新のタグなど、特定の種類の変動するデータを表示するために使用できます。Markdownがレンダリングされるたびにプレースホルダーは対応する値に置き換わります。
構文は%{PLACEHOLDER}です。
| プレースホルダー | 値の例 | 説明 |
|---|---|---|
%{gitlab_server} | gitlab.com | プロジェクトのサーバー |
%{gitlab_pages_domain} | pages.gitlab.com | GitLab Pagesをホストするドメイン |
%{project_path} | gitlab-org/gitlab | 親グループを含むプロジェクトのパス |
%{project_name} | gitlab | プロジェクトの名前 |
%{project_id} | 278964 | プロジェクトに関連付けられたデータベースID |
%{project_namespace} | gitlab-org | プロジェクトのプロジェクトネームスペース |
%{project_title} | GitLab | プロジェクトのタイトル |
%{group_name} | gitlab-org | プロジェクトのグループ |
%{default_branch} | main | プロジェクトのリポジトリに設定されたデフォルトブランチ名 |
%{commit_sha} | ad10e011ce65492322037633ebc054efde37b143 | プロジェクトのリポジトリのデフォルトブランチへの最新コミットのID |
%{latest_tag} | v17.10.7-ee | プロジェクトのリポジトリに追加された最新のタグ |
エスケープ文字
Markdownは、ページを書式設定するために次のASCII文字を予約しています:
! " # $ % & ' ( ) * + , - . / : ; < = > ? @ [ \ ] ^ _ ` { | } ~テキスト内でこれらの予約文字のいずれかを使用するには、予約文字の直前にバックスラッシュ文字(\)を追加します。予約文字の前にバックスラッシュを配置すると、Markdownパーサーはバックスラッシュを省略し、予約文字を通常のテキストとして扱います。
例:
\# 見出しではありません
| 食べ物 | この食べ物は好きですか?(丸で囲んでください) |
|-----------------|---------------------------------|
| ピザ | はい \| いいえ |
\**太字ではなく、アスタリスクで囲まれた斜体のテキスト*\*レンダリングすると、この例は次のように表示されます:
# 見出しではありません
食べ物 この食べ物は好きですか?(丸で囲んでください) ピザ はい | いいえ *太字ではなく、アスタリスクで囲まれた斜体のテキスト*
バックスラッシュは、常にそれに続く文字をエスケープするとは限りません。バックスラッシュは、次の場合に通常のテキストとして表示されます:
- バックスラッシュが
A、3、スペースなどの予約されていない文字の前にある場合。 - バックスラッシュが次のMarkdown要素の中にある場合:
- コードブロック
- コードスパン
- 自動リンク
<kbd>などのインラインHTML
このような場合には、同等のHTMLエンティティ(]を表す]など)を使用する必要があります。
バックスラッシュとバッククォートを併用する
インラインコードサンプルの最後にバックスラッシュ(\)がある場合、そのバックスラッシュが最後のバッククォートをエスケープしてしまうことがあります。この場合、インラインコードの前後に余分なスペースを追加します。次に例を示します:
Use the backslash ` \ ` character to escape inline code that ends in a ` backslash\ `.レンダリングすると、この例は次のように表示されます:
Use the backslash
\character to escape inline code that ends in abackslash\.
脚注
脚注を使用すると、Markdownファイルの末尾にノートがレンダリングされ、そのノートへのリンクが本文に追加されます。
脚注を作成するには、参照タグと、ノートの内容を記述した別の行(ファイル内の任意の場所)の両方が必要です。
レンダリング時の番号は、タグ名にかかわらず参照タグの相対的な順序によって決まります。
ノートはどこに記述しても、レンダリング結果では常にファイルの末尾に表示されます。
例:
脚注の参照:
脚注の参照タグは次のようになります: [^1] この参照タグは文字と数字を組み合わせたものです: [^footnote-42]ファイルの別の場所で脚注を定義:
[^1]: このテキストは脚注の中にあります。 [^footnote-42]: このテキストは別の脚注です。
レンダリングすると、脚注は次のように表示されます:
脚注の参照タグは次のようになります: 1
この参照タグは文字と数字を組み合わせたものです: 2
リッチテキストエディタは新しい脚注の挿入に対応していません。新しい脚注を挿入するには、プレーンテキストエディタを使用します。詳細については、イシュー365265を参照してください。
インラインHTML
Markdownではraw HTMLを使用することもでき、通常は適切に機能します。
許可されているHTMLタグと属性のリストについては、HTML::PipelineのSanitizationFilterクラスのドキュメントを参照してください。デフォルトのSanitizationFilter許可リストに加えて、GitLabではspan、abbr、details、summary要素を許可しています。リンクではrel="license"が許可されており、Rel-Licenseマイクロフォーマットとライセンスの表示をサポートしています。
<dl>
<dt>定義リスト</dt>
<dd>ときどき使用されます。</dd>
<dt>HTML内のMarkdown</dt>
<dd>**あまり**うまく動作*しません*。HTML<em>タグ</em>はほとんどの場合、<b>動作</b>します。</dd>
</dl>レンダリングすると、この例は次のように表示されます:
- 定義リスト
- ときどき使用されます。
- HTML内のMarkdown
- **あまり**うまく動作*しません*。HTMLタグはほとんどの場合、動作します。
HTMLタグ内でMarkdownを使用することもできますが、Markdownを含む行を独立した行に分けた場合に限られます:
<dl>
<dt>HTML内のMarkdown</dt>
**あまり**うまく動作*しません*。HTMLタグはほとんどの場合、動作します。
</dd>
</dl>レンダリングすると、この例は次のように表示されます:
- HTML内のMarkdown
あまりうまく動作しません。HTMLタグはほとんどの場合、動作します。
折りたたみ可能なセクション
HTMLの<details>および<summary>タグを使用して、コンテンツを折りたたむことができます。たとえば、長いログファイルを折りたたみ、画面の占有スペースを小さくすることができます。
<details>
<summary>クリックして展開</summary>
これらの詳細は展開するまで<strong>非表示</strong>の<em>ままです</em>。
<pre><code>ここにログを貼り付けてください</code></pre>
</details>レンダリングすると、この例は次のように表示されます:
クリックして展開
これらの詳細は展開するまで非表示のままです。
ここにログを貼り付けてください
これらのタグ内ではMarkdownもサポートされています。
次の例に示すように、Markdownセクションの前後には空行を入れてください:
<details>
<summary>
クリックして_展開。_
</summary>
これらの詳細は展開するまで**非表示**の_ままです_。
```
ここにログを貼り付けてください
```
</details>レンダリングすると、この例は次のように表示されます:
クリックして展開。
これらの詳細は展開するまで非表示のままです。
ここにログを貼り付けてください
キーボードHTMLタグ
<kbd>要素は、ユーザーのキーボードインプットを表すテキストを示すために使用されます。<kbd>タグで囲んだテキストは、通常、ブラウザのデフォルトの等幅フォントで表示されます。
次のページに進むには、<kbd>Enter</kbd>を押してください。レンダリングすると、この例は次のように表示されます:
次のページに進むには、Enterを押してください。
上付き文字と下付き文字
GitLab Flavored Markdownは、Redcarpetの上付き構文(x^2)をサポートしていません。上付き文字と下付き文字には、標準のHTML構文を使用してください:
水の化学式はH<sub>2</sub>Oで、
相対性理論の式はE = mc<sup>2</sup>です。レンダリングすると、この例は次のように表示されます:
水の化学式はH2Oで、相対性理論の式はE = mc2です。
GitLab Flavored Markdownは、Redcarpetの上付き構文(x^2)をサポートしていません。
HTMLコメント
GitLab Flavored MarkdownでHTMLコメントを使用すると、レンダリング結果に表示されないノートや説明を追加できます。
HTMLコメントの用途:
- 他のコントリビューター向けのノートを追加する。
- コンテンツを削除せずに一時的に非表示にする。
- 最終的なドキュメントに含める必要のないコンテキストや説明を記載する。
- メタデータや処理手順を追加する。
HTMLコメントを使用する際の注意点:
- ソースが煩雑にならないよう、控えめに使用する。
- 内容は簡潔で関連性のあるものにする。
- 永続的なドキュメントではなく、一時的なノートに使用する。
- 機密情報や社外秘の情報は含めないこと。HTMLコメントは、Markdownのソースを閲覧できるすべての人に表示されます。
HTMLコメントは標準のHTML構文<!-- comment text -->を使用し、1行または複数行にわたって記述できます:
<!-- これは1行のコメントです -->
<!--
これは複数行のコメントです
複数行にまたがっていますが
レンダリング結果には表示されません
-->
このテキストは表示されます。
<!-- この段落の間にあるコメントは非表示です -->
このテキストも表示されます。レンダリングされると、表示されるのは以下の表示可能なテキストのみです:
このテキストは表示されます。
このテキストも表示されます。
コードブロック内のコメント
コードブロック内のHTMLコメントはリテラルテキストとして扱われ、そのまま表示されます:
```html
<!-- このコメントはコードブロック内に表示されます -->
<div>コンテンツ</div>
```








いくつかの
を
に加えたいことがあります。そこで、絵文字をご用意しました!
を指摘したり、問題のある
パッチについて警告したりできます。また、誰かがあなたの遅い
コードを改善してくれたら、
を送りましょう。きっと喜んでくれます
。
ことはありません。絵文字の
に参加できます。サポートされているコードを調べてみてください。