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...
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
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 .
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.
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 a divider:
After the divider
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>
);
}A mermaid block:
A GitHub file:
A linear issue
A mailchimp block
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
And with a link !
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
Left hand side!
Right hand side!
An image on the right:
Image centered:
An image on the left:
An image on the right:
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
This is a link to a heading. This is a mention of a heading A heading.
This is a link to a heading in a different page. And this a mention Heading 3.
This is a link to a page. And this is a mention: Text page
This is a link to the current space. And this is a mention Test GitBook Open
This is a (public). And this is a mention
This is a . And this is a mention
This is a . And this is a mention .
This is a . And this is a mention .
Link to another page
Link to a file
Link to another space
Link to a private space
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
File blocks reference a file and are used to help users download specific files.
File blocks can also have a caption:
A first block:
Webhooks :
Models:
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
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 blockText colors:
Purple
Blue
Red
Orange
Yellow
Green
Background colors:
Purple
Blue
Red
Orange
Yellow
Green
Combined:
Purple
Blue
Red
Orange
Yellow
Green
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
"name": "gitbook",
"version": "0.1.0",
RND-1853•
10doggiepet status in the store
Successful operation
Invalid input
Validation exception
Unexpected error
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"
}10doggiepet status in the store
Successful operation
Invalid ID supplied
Pet not found
Validation exception
Unexpected error
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"
}Status values that need to be considered for filter
availablePossible values: successful operation
Invalid status value
Unexpected error
GET /api/v3/pet/findByStatus HTTP/1.1
Host:
Authorization: Bearer YOUR_OAUTH2_TOKEN
Accept: */*
Pet id to delete
Pet deleted
Invalid pet value
Unexpected error
DELETE /api/v3/pet/{petId} HTTP/1.1
Host:
Authorization: Bearer YOUR_OAUTH2_TOKEN
Accept: */*
No content
{
"id": 1,
"name": "text",
"tag": "text"
}{
"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"
}
]