Block-level content

Headings
GitBook offers 3 levels of headings, which should be enough to properly structure your content. Headings structure your documents. Heading levels 1 and 2 will appear in the outline on the right.
All headings have anchor links, which are links that you can use to point to a particular section of your documentation.
You can see the anchors of a title when your content is in a reading mode. If you want to add an anchor to some text, just add a relative link.
Good to know: Reading on a screen is less comfortable than reading on paper. Make sure your content is not too long with too many titles. Sometimes splitting your content into different pages creates a better overview! 🤓
Lists
You can add bullet lists, numbered lists and task lists to your content:‌
This is a bullet list.
You can use Tab to indent…
…and Shift+Tab to outdent.
1.A number list comes in handy when trying to prioritize.
1.You can use Tab to indent…
2.and Shift+Tab to outdent.
Here's a task that hasn't been done
And here's a subtask that has been done, indented using Tab.
Aaaaand, here's a subtask that hasn't been done.
Code blocks
You can insert some code on GitBook by using code blocks. Each code block can have a language set, and syntax highlighting will be applied automatically based on this language.
index.js
1
‌import * as React from 'react';
2
import ReactDOM from 'react-dom';
3
import App from './App';
4
​
5
ReactDOM.render(<App />, window.document.getElementById('root'));
Copied!
We use Prism for syntax highlighting. Here's an easy way to check which languages Prism supports: Test Drive Prism. If you notice a mismatch between GitBook and Prism, there's a chance we are a version or two behind. We'll eventually catch up.
Quote
Hello world!
Image block
The most common type of images is an "image block". They are full-width images containing a caption. You can center or align them to the left. You can insert them like this:
Image blocks can display a gallery of images.
Each image
can have its
own caption
Drawings
Drawings / sketches can be inserted from the insertion palette and are editable directly through GitBook using the integrated Excalidraw editor.
Drawings are stored as special SVG files in the space. Those files have an extension of drawing.svg.
Tables
You can add tables to better organize your information.
Company
Status
Contact
MRR
Ace AI – Design
​[email protected]​
$420
Discrete Data – API
​[email protected]​
$69
Table columns can have the following data types, which apply restrictions or embellishments to every cell in the column:
Text: standard text. Can be formatted.
Number: a number, with or without floating digits.
Checkbox: a checkbox that can be checked or unchecked.
Select: data can be selected from a pre-defined list of options. Can be single-choice or multiple-choice.
Users: data can be selected from a list of the organization's members. Can be single-choice or multiple-choice.
Files: data is a reference to a file in the space. New files can be uploaded when populating cells in the column.
Rating: A star rating, with a configurable maximum.
Changing a column type
You can use the column dropdown menu to change a column's type. Select the new type and hit save. You'll be prompted to confirm this change, as column data could be deleted or malformed by this action.
Resizing columns
You can drag from a column's edge to resize it. Column resizing is stored as a percentage of the overall width, which allows for relative sizing based on the overall width of the table.
Scrolling tables
Tables that are wider than the editor container will be horizontally scrollable.
Good to know: You can drag and drop columns and rows to reorder them, and delete columns or rows using their respective context menus.
Hints & Callouts
Hints are a great way to bring the reader's attention to specific elements in your documentation. Hints can be inserted in the UI, or when running the GitHub sync in the markdown file.‌
There are 4 different types of hints, you have already seen some of them in this documentation.
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.
Page link
A page link is the best way to create relations between different pages.
Markdown
API Methods & OpenAPI Integration
An API Method block is used to manually document an HTTP API endpoint.
get
https://api.example.com/v1
/user
Get a user
You can also sync with an OpenAPI or Swagger file or URL to include auto-generated methods in your documentation.
get
https://petstore.swagger.io/v2
/pet/{petId}
Find pet by ID
Tabs
Tabs are also a good way to structure your content. Here is an example that lists instructions relevant to specific platforms:
Windows
OSX
Linux
Here are the instructions concerning Windows
Here are the instructions concerning OSX
Here are the instructions concerning Linux
Equations and formulae
Math & Tex blocks support displaying mathematical formulae in the MathTex format​
s=1N−1∑i=1N(xi−x‾)2s = \sqrt{\frac{1}{N-1} \sum_{i=1}^N (x_i - \overline{x})^2}s=N−11​i=1∑N​(xi​−x)2​
Files
hello-world.pdf
4KB
PDF
Hello world