​🙆🏼 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.

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.

​📋 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.

​💻 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

‌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:

​🧮 Tables

You can add tables to better organize your information.

​🚦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. 🤗

​🔗 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:

​📘Api Methods

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
    }
  }
]

​🏷 Tabs

Tabs are also a good way to structure your content. Here is an example that lists instructions relevant to specific platforms:

​🔢 Math equation

​📄 File