# コードブロック
GitBookのページには、コードブロックを使ってコードを追加できます。
コードブロックを追加すると、次のことを選べます： [構文を設定する](#set-syntax...), [行番号を表示する](#with-line-numbers), [キャプションを表示する](#with-caption)、および [行を折り返す](#wrap-code)。また、簡単に [コードブロックの内容をクリップボードにコピーして](#copying-the-code)、ほかの場所で使うこともできます
コードブロックは、次のような用途に便利です：
* 設定を共有する
* コードスニペットを追加する
* コードファイルを共有する
* コマンドラインユーティリティの使用例を示す
* APIエンドポイントの呼び出し方法を示す
* ほかにもたくさんあります！
### コードブロックの例
{% 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(, window.document.getElementById('root'));
```
{% endcode %}
コードブロックは、次のものと組み合わせることもできます： [タブブロック](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/creating-content/blocks/tabs) これにより、同じコード例を複数の異なる言語で表示できます：
{% tabs %}
{% tab title="JavaScript" %}
```javascript
let greeting = function (name) {
console.log(`Hello, ${name}!`);
};
greeting("Anna");
```
{% endtab %}
{% tab title="Ruby" %}
```ruby
greeting = lambda {|name| puts "Hello, #{name}!"}
greeting.("Anna")
```
{% endtab %}
{% tab title="Elixir" %}
```elixir
greeting = fn name -> IO.puts("Hello, #{name}!") end
greeting.("Anna")
```
{% endtab %}
{% endtabs %}
{% hint style="info" %}
コードブロックを [ウィンドウ幅いっぱいに広げる](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/creating-content/blocks/..#full-width-blocks) には、ブロックの横にある **オプションメニュー** 
をクリックして **全幅**.
{% endhint %}
### コードブロックのオプション
次のものをクリックすると **オプションメニュー** コードブロックの横にある、または **アクションメニュー** 
ブロック内にあるものについて、設定できるいくつかのオプションが表示されます。
#### 構文を設定…
コードブロックの構文は、対応している言語のいずれかに設定できます。これにより、その言語のシンタックスハイライトも有効になります。
{% hint style="info" %}
私たちは [Prism](https://github.com/PrismJS/prism) をシンタックスハイライトに使用しています。 [Test Drive Prism](https://prismjs.com/test.html#language=markup) を使って、Prismがどの言語をサポートしているか確認できます。GitBookとPrismの間に不一致が見つかった場合、私たちのほうが1、2バージョン遅れている可能性があります。すぐに追いつきます！
{% endhint %}
{% code title="filename.txt" %}
```
// 一部のコード
```
{% endcode %}
#### 行番号付き
これにより、コードの行番号の表示・非表示を切り替えられます。
行番号の表示は、コードがファイル全体の内容を表す場合や、行数の多い長いコードブロックがある場合に便利です。行番号を非表示にするのは、スニペット、コマンドラインやターミナルの式の使い方の説明、その他同様の場面で便利です。
#### キャプション付き
これにより、ブロックの上部、コード行の上に表示されるキャプションの表示・非表示を切り替えられます。
キャプションは、次の例のようにファイル名であることが多いです： [上の例](#example-of-a-code-block)、ただしタイトル、説明、その他好きな内容にも使えます。
#### コードを折り返す
これにより、コードの折り返しの有無を切り替えられるため、長いコード行も折り返されてページ上で一度にすべて表示されます。
行を折り返すのは、コードが長く、閲覧者が読むために左右にスクロールするのを避けたい場合に便利です。 **コードを折り返す** をオンにすると、行番号も表示するとよいでしょう。これにより、コードが読みやすくなり、新しい行の始まりも把握しやすくなります。
#### 折りたたみ
これにより、コードを全文表示（トグルがオフのとき）するか、ユーザーが展開できる折りたたみ表示（トグルがオンのとき）にするかを切り替えられます。
折りたたみ表示では、既定で10行のコードが表示され、ボタンを押すと全文表示のコードブロックに展開できます。コードが10行未満の場合は、すべての内容が表示されます。
### コードブロックの操作
上記のオプションに加えて、コードブロックで表示する言語を変更したり、コードをすぐにコピーしたりすることもできます。
#### コードをコピー
コードブロックにカーソルを合わせると、いくつかのアイコンが表示されます。中央のアイコンをクリックすると、コードブロックの内容をクリップボードにコピーできます。
### Markdownでの表現
````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(, window.document.getElementById('root'));
```
{% endcode %}
````