Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
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>
);
}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>
);
}This text is also centered
This text is also right
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>
);
}// Some codeTEST_1: This is the value of TEST_1
TEST_2: This is the value of TEST_2
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 a divider:
After the divider
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.
Tab with many long tab titles:
Individual tabs can be linked or .
A mermaid block:
A GitHub file:
A linear issue
A mailchimp block
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
Text colors:
Purple
Blue
Red
Orange
Yellow
Green
Background colors:
Purple
Blue
Red
Orange
Yellow
Green
Combined:
Purple
Blue
Red
Orange
Yellow
Green
Second step
This is the second step
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.
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.
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.
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.
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.
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.
An image on the right:
Image centered:
An image on the left:
An image on the right:
Hello world
Bonjour le monde
Hola Mundo
Hello world
Bonjour le monde
Centered text
Text on the right
Hola Mundo
Hello world
Bonjour le monde
Some intro text
Short intro text
Another text
Hello world
Bonjour le monde
Hola Mundo
Some intro text
Short intro text
Another text
Embed as a card, handled by an integration:
Embed as a card, not handled by an integration
Embed of a youtube video
Embed with a caption
Embed full-width
Left hand side!
Right hand side!
Test different widths
Test different widths
A math block that should render with KaTeX:
A math block that should be rendered with MathJax:
A math inline with KaTex: and one with MathJax
Another one with MathJax:
And a bigger one with KaTeX:
Long inline math
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
A first block:
Webhooks :
Models:
First nested item
Second nested item
Third item
First item
Second item
First nested item
Second nested item
Third item
Ordered list item
Unordered list item
Text before code block
code block
a second lineDirectly, a code blockText before code block
code block
a second lineDirectly, a code blockA button with an icon:
File blocks reference a file and are used to help users download specific files.
File blocks can also have a caption:
This is a . And this is a mention .
This is a . And this is a mention .
"name": "gitbook",
"version": "0.1.0",
RND-1853•
Basic text table
A1
B1
C1
A2
B2
C2
A3
B3
C3
With header
With header hidden
With resized column (B being larger)
With text alignment (A to the right, B centered, C to the left)
Tables with different column types
Table with full-width
Table with ratings
Table with files
Table with checkbox
Table with content references
A1
B1
C1
A2
B2
C2
A3
B3
C3
A1
B1
C1
A2
B2
C2
A3
B3
C3
A1
B1
C1
A2
B2
C2
A3
B3
C3
A1
B1
C1
Pasted right-aligned paragraph
Pasted right-aligned paragraph
Pasted right-aligned paragraph
Some intro text
Short intro text
Another text
A1
B1
C1
A2
B2
C2
A3
B3
C3
R1
R2
R3
An image file
An openAPI file
No file
Checked
Not checked
Checked
Page
Page with emoji
Page with icon
16x16.png
{
"id": 1,
"name": "text",
"tag": "text"
}Add a new pet to the store.
10doggiepet status in the store
Successful operation
Invalid input
Validation exception
Unexpected error
Update an existing pet by Id.
10doggiepet status in the store
Successful operation
Invalid ID supplied
Pet not found
Validation exception
Unexpected error
Multiple status values can be provided with comma separated strings.
Status values that need to be considered for filter
availablePossible values: successful operation
Invalid status value
Unexpected error
{
"id": 10,
"name": "doggie",
"category": {
"id": 1,
"name": "Dogs"
},
"photoUrls": [
"text"
],
"tags": [
{
"id": 1,
"name": "text"
}
],
"status": "available"
}{
"id": 10,
"name": "doggie",
"category": {
"id": 1,
"name": "Dogs"
},
"photoUrls": [
"text"
],
"tags": [
{
"id": 1,
"name": "text"
}
],
"status": "available"
}[
{
"id": 10,
"name": "doggie",
"category": {
"id": 1,
"name": "Dogs"
},
"photoUrls": [
"text"
],
"tags": [
{
"id": 1,
"name": "text"
}
],
"status": "available"
}
]No content
POST /api/v3/pet HTTP/1.1
Host:
Authorization: Bearer YOUR_OAUTH2_TOKEN
Content-Type: application/json
Accept: */*
Content-Length: 133
{
"id": 10,
"name": "doggie",
"category": {
"id": 1,
"name": "Dogs"
},
"photoUrls": [
"text"
],
"tags": [
{
"id": 1,
"name": "text"
}
],
"status": "available"
}PUT /api/v3/pet HTTP/1.1
Host:
Authorization: Bearer YOUR_OAUTH2_TOKEN
Content-Type: application/json
Accept: */*
Content-Length: 133
{
"id": 10,
"name": "doggie",
"category": {
"id": 1,
"name": "Dogs"
},
"photoUrls": [
"text"
],
"tags": [
{
"id": 1,
"name": "text"
}
],
"status": "available"
}GET /api/v3/pet/findByStatus HTTP/1.1
Host:
Authorization: Bearer YOUR_OAUTH2_TOKEN
Accept: */*
DELETE /api/v3/pet/{petId} HTTP/1.1
Host:
Authorization: Bearer YOUR_OAUTH2_TOKEN
Accept: */*