Blocks

Loading...

Code

Code block with lines and no wrapping

function CodeHighlightLine(props: {
    block: DocumentBlockCode;
    line: HighlightLine;
    lineIndex: number;
    isLast: boolean;
    withLineNumbers: boolean;
    withWrap: boolean;
    context: ContentRefContext;
}) {
    const { block, line, isLast, withLineNumbers, context } = props;

    return (
        <span
            className={tcls(
                'flex',
                'flex-row',
                'px-4',
                line.highlighted ? 'bg-slate-200' : null,
                withLineNumbers
                    ? [
                          'before:shrink-0',
                          'before:absolute',
                          'before:left-0',
                          'before:pl-4',
                          line.highlighted ? 'before:bg-slate-200' : 'before:bg-slate-100',
                          'before:text-slate-400',
                          'before:content-[counter(line)]',
                          '[counter-increment:line]',
                          getLineNumberGutterWidth(block),
                      ]
                    : [],
            )}
        >
            <span className="flex-1">
                <CodeHighlightTokens tokens={line.tokens} context={context} />
                {isLast ? null : !withLineNumbers && line.tokens.length === 0 && 0 ? (
                    <span className="ew">{'\u200B'}</span>
                ) : (
                    '\n'
                )}
            </span>
        </span>
    );
}

Code block with line numbers and wrapping

function CodeHighlightLine(props: {
    block: DocumentBlockCode;
    line: HighlightLine;
    lineIndex: number;
    isLast: boolean;
    withLineNumbers: boolean;
    withWrap: boolean;
    context: ContentRefContext;
}) {
    const { block, line, isLast, withLineNumbers, context } = props;

    return (
        <span
            className={tcls(
                'flex',
                'flex-row',
                'px-4',
                line.highlighted ? 'bg-slate-200' : null,
                withLineNumbers
                    ? [
                          'before:shrink-0',
                          'before:absolute',
                          'before:left-0',
                          'before:pl-4',
                          line.highlighted ? 'before:bg-slate-200' : 'before:bg-slate-100',
                          'before:text-slate-400',
                          'before:content-[counter(line)]',
                          '[counter-increment:line]',
                          getLineNumberGutterWidth(block),
                      ]
                    : [],
            )}
        >
            <span className="flex-1">
                <CodeHighlightTokens tokens={line.tokens} context={context} />
                {isLast ? null : !withLineNumbers && line.tokens.length === 0 && 0 ? (
                    <span className="ew">{'\u200B'}</span>
                ) : (
                    '\n'
                )}
            </span>
        </span>
    );
}

Code block with wrapping but no line numbers

Code block with full-width option

Loading...

Annotations

This paragraph contains an . It can be opened by clicking it.

In codeblocks

// Some code
and an .

Loading...

Tabs

A single tab:

Tab with content:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in mauris nisi. Fusce suscipit hendrerit ex nec laoreet. Mauris dolor diam, posuere non accumsan at, auctor a lectus. Maecenas porttitor purus ipsum, bibendum volutpat metus tristique in. Fusce et quam sed purus pulvinar dignissim id ut nisi. Fusce malesuada nec leo quis laoreet. Sed elit ligula, porta sed lobortis at, porttitor porttitor sem.

Donec id pulvinar ex, ac consequat odio. Nulla eu ante bibendum, aliquet sapien nec, facilisis metus. Duis non convallis neque, accumsan iaculis risus. Nulla sed ultrices ex, et interdum tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse porta felis imperdiet ante congue vestibulum. Sed eu mattis turpis. Praesent pharetra turpis eu ligula finibus, non interdum dui posuere. Vivamus facilisis, diam ac luctus lacinia, turpis odio pharetra ex, vitae suscipit orci turpis tincidunt massa.

This tab contains headings that can be linked to:

First heading

Content

Second heading

Content

Tab with many long tab titles:

Links & tabs

Individual tabs can be linked or .

Loading...

Hints

Colors

Info hints are great for showing general information, or providing tips and tricks.

Success hints are good for showing positive actions or achievements.

Warning hints are good for showing important information or non-critical warnings.

Danger hints are good for highlighting destructive actions or raising attention to critical information.

With blocks in it

First paragraph

Second paragraph

List item
Second list item

With a divider:

After the divider

With a header

This is the hint content after the header

Loading...

Integrations

A mermaid block:

A GitHub file:

A linear issue

A mailchimp block

An Arcade block:

Loading...

Tables

Basic text table

A1

B1

C1

A2

B2

C2

A3

B3

C3

With header

A

B

C

With header hidden

With resized column (B being larger)

A

B

C

With text alignment (A to the right, B centered, C to the left)

A

B

C

Tables with different column types

Table with full-width

Table with ratings

Rating A

Rating B

Table with files

Table with checkbox

Checkbox

Table with content references

Link

Loading...

Cards

2 basic cards with text:

Cards with cover

Cards with centered text and images

Cards with different column types

Cards full-width

Cards with different column types and headers

Intro text

Enum values

Intro text

Enum values

Intro text

Enum values

Loading...

Headings

Heading 1

Heading 2

Heading 3

Title 1

Title 2

Title 3

Heading centered

This text is also centered

Heading on the right

This text is also right

Loading...

Expandables

Empty

This is an empty expandable (body)

Loading...

Inline Images

his paragraph contains inline images, this first one was using the "original" size, and then this one is using the line size.

This image has intrinsic 400px width, but renders as 300px:

Some customers add Cards with inline images instead of Cover images. When they do, we should still respect the 300px width despite the Card being under 250px. The contents of the images should be centered.

Finally, we should make sure to render tiny inline images correctly:

11x11

16x16

22x22

Loading...

Block Images

Large image

Alignment

Image centered:

An image on the left:

Loading...

Marks

The following text is bold and italic. Styles can also be ~~combined~~.

Keyboard maks X + ~~Y~~ + Ctrl + ⌘

Other styles includes code text and colored text.

And super^script and sub_script.

Loading...

Emojis

This text contains some 😇 emojis!!

Emojis can also be used in 🎉 headings!

Diversity: 👩

And other emojis: man detective🕵️, women detective🕵️‍♀️

Loading...

Icons

This text contains some icons!!

Icons can also be used in headings!

Loading...

Links

This is a . This is a mention of a heading .

This is a in a different page. And this a mention .

This is a . And this is a mention:

This is a . And this is a mention

This is a (public). And this is a mention

This is a . And this is a mention

Loading...

Buttons

Some text with a button and

2 buttons next to each other:

With text alignment

Centeted:

On the right:

Loading...

Page links

Link to another page

Link to a file

20KB

openapi.yaml

Link to another space

Link to a private space

Loading...

API blocks

A first block:

Webhooks :

Models:

Loading...

Math

A math block that should render with KaTeX:

f(x) = x * e^{2 pi i \xi x}

A math block that should be rendered with MathJax:

A math inline with KaTex: $f(x) = x * e^{2 pi i \xi x}$ and one with MathJax

Another one with MathJax:

And a bigger one with KaTeX:

\displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }

Long inline math $\displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } } \displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } } \displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } } \displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } } \displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } } \displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }$