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.
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! 🤓
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.
A number list comes in handy when trying to prioritize.
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.
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.
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>
Hello world!
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:
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 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. 🤗
🧙♂ 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.
A page link is the best way to create relations between different pages.
You can change the path to a page link like this:
🧙♂ Tips: You can delete a page link by just focusing on it like there. 👆
You can find a live example of what an API method block looks like below.
[{"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 are also a good way to structure your content. Here is an example that lists instructions relevant to specific platforms:
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.
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.