Code block
Show code snippets or whole files with syntax highlighting using code blocks. We are using Prism for syntax highlighting.
You can show code on GitBook using code blocks. You can choose to set the syntax, show line numbers, show a caption, and wrap the lines. There is also a convenient way to copy the contents of a code block to the clipboard.
A code block may be useful for:
- Sharing configuration
- Code snippets
- Code files
- Showing usage examples of command line utilities
- Showing how to call API endpoints
- and for many more scenarios...
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'));
You can also combine code blocks with the tabs content block to offer the same example in multiple languages:
JavaScript
Ruby
Elixir
let greeting = function(name) { console.log(`Hello, ${name}!`); };
greeting("Anna");
greeting = lambda {|name| puts "Hello, #{name}!"}
greeting.("Anna")
greeting = fn name -> IO.puts("Hello, #{name}!") end
greeting.("Anna")
You can set the syntax to any of the supported languages and that will enable syntax highlighting in that language.
We use Prism for syntax highlighting. Here's an easy way to check which languages Prism supports: Test Drive Prism. If you notice a mismatch between GitBook and Prism, there's a chance we are a version or two behind. We'll catch up soon!
Toggle showing line numbers. Showing line numbers is useful when the code represents the contents of a file as a whole and it makes sense to have them shown. Hiding line numbers is useful for snippets, usage instructions for command line or terminal expressions and similar scenarios.
A code block can have a caption. The caption is often the name of a file as shown in our example, but it can be used as a title, or anything else you'd like.
Depending on what the code snippet represents you may or may not want to wrap lines. Wrapping lines is useful when your code is long and you want to avoid having the viewer scroll back and forth to read it. Wrapping often goes well with showing line numbers as that makes it easier to read the code and understand where each new line starts.
You can hover over a code block and see an icon that allows you to copy the contents of the code block to the clipboard in one click:
Copy code block contents to the clipboard
{% 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 modified 16d ago