With command palette

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 mini Table of Content on the right.

When scrolling down a page, each title is highlighted on the mini Table of Content

All headings have anchor links which is are links that your readers 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.

Tips: 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 go one level deeper, and Shift+Tab to go up.

  1. A number list comes in handy when trying to prioritize.

    1. You can use Tab to go one level deeper, and Shift+Tab to go up.

  • Non checked task list.

    • Checked and you can go on a deeper level.

Tips: You can add a list automatically by using markdown.

Code blocks

You can insert some code on GitBook with code blocks and add different tabs with its own language. You can choose the syntax highlighting for the language shown in your tab.index.jsApp.jsindex.html

index.js
app.js
index.html
import * as React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, window.document.getElementById('root'));
import * as React from 'react';
function App() {
return <h1>Hey there!</h1>;
}
export default App;
<div id="root"></div>

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:

Here is where you can add a caption

Tables

You can add tables to better organize your information.

name

value px

value rem

use cases

L

60 px

3.75 rem

Button large

M

40 px

2.5 rem

Button medium, input medium

S

30 px

1.875 rem

Button small, input small

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.

You can change the type of a hint in 2 different ways

Tips: Use the success hint to show an achievement. Use the info hint to provide some tips or extra information. Use the warning hint for important things to keep in mind. Use the danger hint to raise attention to important information.

Page link

A page link is the best way to create relations between different pages.

You can change the path to a page link like this:

You can change the path of a page link by focusing on it

Tips: You can delete a page link by just focusing on it like there.

Api Methods

You can find a live example of what an API method block looks like below.

get
List your repositories

https://api.github.com/user/repos
List repositories that the authenticated user has explicit permission (:read, :write, or :admin) to access.
Request
Response
Query Parameters
sort
optional
string
Can be one of "created", "updated", "pushed", "full_name". Default: "full_name".
visibility
optional
string
Can be one of "all", "public", or "private". Default: "all".
200: OK
[
{
"id": 1296269,
"node_id": "MDEwOlJlcG9zaXRvcnkxMjk2MjY5",
"name": "Hello-World",
"full_name": "octocat/Hello-World",
"owner": {
"login": "octocat",
"id": 1,
"node_id": "MDQ6VXNlcjE=",
"avatar_url": "https://github.com/images/error/octocat_happy.gif",
"gravatar_id": "",
"url": "https://api.github.com/users/octocat",
"html_url": "https://github.com/octocat",
"followers_url": "https://api.github.com/users/octocat/followers",
"following_url": "https://api.github.com/users/octocat/following{/other_user}",
"gists_url": "https://api.github.com/users/octocat/gists{/gist_id}",
"starred_url": "https://api.github.com/users/octocat/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/octocat/subscriptions",
"organizations_url": "https://api.github.com/users/octocat/orgs",
"repos_url": "https://api.github.com/users/octocat/repos",
"events_url": "https://api.github.com/users/octocat/events{/privacy}",
"received_events_url": "https://api.github.com/users/octocat/received_events",
"type": "User",
"site_admin": false
}
}
]

Tips: Notice how it becomes accessible from the page's mini table of content on the right side

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

Tips: When switching to an other tab on the same page all other tabs with the same title will stay in sync and show the same tab.

Windows
OSX
Linux

Here are more instructions concerning Windows

If you picked OSX earlier, this should become the default active tab.

If you picked Linux earlier, this should become the default active tab.

Math equation

67=426*7=42

File