Code blocks | GitBook Documentation https://docs.gitbook.
com/creating-content/blocks/code-block
Homepage Community
Documentation Developers Guides Changelog Help Center
CREATING CONTENT BLOCKS
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!
Example of a code block
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'));
1 sur 4 12/02/2025 22:27
Code blocks | GitBook Documentation https://docs.gitbook.com/creating-content/blocks/code-block
You can also combine code blocks with a tabs block to offer the same code example in
multiple different languages:
JavaScript Ruby Elixir
let greeting = function (name) {
console.log(`Hello, ${name}!`);
};
greeting("Anna");
You can make code blocks span the full width of your window by clicking on the
Options menu next to the block and choosing Full width.
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.
2 sur 4 12/02/2025 22:27
Code blocks | GitBook Documentation https://docs.gitbook.com/creating-content/blocks/code-block
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.
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
3 sur 4 12/02/2025 22:27
Code blocks | GitBook Documentation https://docs.gitbook.com/creating-content/blocks/code-block
{% 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 %}
Last updated 1 month ago Was this helpful?
Resources Company Policies
Showcase Careers Subprocessors
Enterprise Blog Terms of Service
Pricing
4 sur 4 12/02/2025 22:27
