Markdown

The fixed type scale is used with GitLab Flavored Markdown (GLFM) and for content such as tables, task lists, and code blocks. This includes styling for the following GLFM components.

Blockquote

TODO:
Add blockquote Create an issue

Code

Code blocks

Wrap a block of <code> within a <pre> element. For example, multi-line code that has syntax highlighting. The size of the text will adjust based on the parent text size.

A code block fits the width of the parent container and its content scrolls horizontally if it overflows the block.

View in Pajamas UI Kit →

Inline code

Highlight inline text as <code>. For example, a short line of code, a CSS class, or a variable. The size of the text will adjust based on the parent text size.

View in Pajamas UI Kit →

Inline diffs

TODO:
Add inline diffs Create an issue

Syntax highlight code block

TODO:
Add syntax highlight code block Create an issue

Collapsible content

TODO:
Add collapsible content Create an issue

Color chips

TODO:
Add color chips Create an issue

Diagrams (mermaid)

TODO:
Add mermaid diagrams Create an issue

Emoji

TODO:
Add emoji Create an issue

Footnotes

TODO:
Add footnotes Create an issue

Horizontal rule

TODO:
Add horizontal rule Create an issue

Labels

TODO:
Add labels Create an issue

Lists

Unordered list

TODO:
Add unordered lists Create an issue

Ordered list

TODO:
Add ordered lists Create an issue

Table

TODO:
Add tables Create an issue

Task list

TODO:
Add task lists Create an issue

Definition list

TODO:
Add definition lists Create an issue

Math (KaTeX)

TODO:
Add KaTeX math Create an issue

Media

Images

TODO:
Add images Create an issue

Embedded video

TODO:
Add embedded video Create an issue

Embedded audio

TODO:
Add embedded audio Create an issue

Table of contents

TODO:
Add horizontal rule Create an issue

Super/subscript

TODO:
Add super/subscript Create an issue

User/group mentions

TODO:
Add user/group mentions Create an issue

Code reference

The GlMarkdown component styles markdown-generated HTML following the Pajamas Documentation Markdown styling specifications.

You can use the GlMarkdown component in two ways.

GlMarkdown

<script>
import { GlMarkdown } from '@gitlab/ui';

export default {
  components: {
    GlMarkdown,
  }
}
</script>
<template>
  <gl-markdown>
    <!-- All the content inside gl-markdown will inherit the documentation markdown styles -->
  </gl-markdown>
</template>

gl-markdown class selector

Follow the GitLab UI CSS guidelines to include GitLab UI CSS in your application. Afterwards, you can apply the gl-markdown class selector to the root element that contains the markdown-generated HTML.

<body class="gl-markdown">
  <!-- All the content inside body.gl-markdown will inherit the documentation markdown styles -->
</body>

Compact markdown

Set the compact property to true in GlMarkdown to apply the compact markdown styles.

<gl-markdown compact></gl-compact>

You can also append the gl-compact-markdown class selector after gl-markdown in markdown-generated HTML.

<body class="gl-markdown gl-compact-markdown">
</body>
Loading story...

Last updated at: