Code blocks

Add a code block to a page to include sample code, configurations, code snippets and more

You can add code to your GitBook pages using code blocks.

When you add a code block, you can choose to set the syntax, show line numbers, show a caption, and wrap the lines. It’s also easy to copy the contents of a code block to the clipboard, so you can use it elsewhere

A code block may be useful for:

• Sharing configurations
• Adding code snippets
• Sharing code files
• Showing usage examples of command line utilities
• Showing how to call API endpoints
• And much more!

Add a code block

1. To add a code block, place your cursor on an empty line and type /.
2. In the quick insert menu, select Code block.
3. GitBook inserts the block and places your cursor inside it, ready for you to paste or type code.

Example of a code block

index.js

‌import * as React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, window.document.getElementById('root'));

You can also combine code blocks with a tabs block to offer the same code example in multiple different languages:

JavaScript

let greeting = function (name) {
  console.log(`Hello, ${name}!`);
};
greeting("Anna");

Ruby

Elixir

Code block options

When you click on the Options menu next to the code block, or the Actions menu in the block itself, you’ll see a number of options you can set.

Set syntax…

You can set the syntax in your code block to any of the supported languages. This will enable syntax highlighting in that language, too.

We use Prism for syntax highlighting. You can use Test Drive Prism to check which languages Prism supports. If you notice a mismatch between GitBook and Prism, there’s a chance we’re a version or two behind. We’ll catch up soon!

filename.txt

// Some code

With line numbers

This will toggle line numbers for your code on and off.

Showing line numbers is useful when the code represents the contents of a file as a whole, or when you have long code blocks with lots of lines. Hiding line numbers is useful for snippets, usage instructions for command line or terminal expressions and similar scenarios.

With caption

This will toggle a caption that sits at the top of the block, above your lines of code.

The caption is often the name of a file as shown in our example above, but you can also use it as a title, description, or anything else you’d like.

Wrap code

This will toggle code wrapping on and off, so long lines of code will wrap to all be visible on the page at once.

Wrapping lines is useful when your code is long and you want to avoid having the viewer scroll back and forth to read it. If you toggle Wrap code on, you may also want to show line numbers — this will make it easier to read the code and understand where new lines start.

Expandable

This will toggle showing the code in full (when the toggle is off) or a collapsed window of the code which the user can expand (when the toggle is on).

The collapsed view defaults to showing 10 lines of code with an button to expand to show the full code block. If there are less than 10 lines of code, all the content will be shown.

Code block actions

As well as the options above, you can also change the language the code block displays, and copy your code instantly.

Copy the code

Hover over a code block and a number of icons will appear. Click the middle icon to copy the contents of the code block to your clipboard.

Representation in Markdown

{% code title="index.js" overflow="wrap" lineNumbers="true" %}

```javascript
‌import * as React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, window.document.getElementById('root'));
```

{% endcode %}