# コードブロック
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 %}
コードブロックは、次のものと組み合わせることもできます [タブブロック](/docs/documentation/ja-gitbook-documentation/creating-content/blocks/tabs.md) 同じコード例を複数の異なる言語で提供できます:
{% 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" %}
私たちは [Prism](https://github.com/PrismJS/prism) コードブロックの構文は、対応している言語のいずれかに設定できます。これにより、その言語のシンタックスハイライトも有効になります。 [Test Drive Prism](https://prismjs.com/test.html#language=markup) はシンタックスハイライトに使われます。Prismがどの言語に対応しているかは
{% endhint %}
{% code title="filename.txt" %}
```
// Some code
```
{% endcode %}
#### 行番号付き
これにより、コードの行番号の表示/非表示を切り替えられます。
コード全体が1つのファイルの内容を表している場合や、行数の多い長いコードブロックの場合は、行番号を表示すると便利です。スニペットや、コマンドラインまたはターミナルの式の使用方法などのシナリオでは、行番号を非表示にすると便利です。
#### キャプション付き
これにより、コード行の上、ブロックの最上部に表示されるキャプションの表示/非表示を切り替えられます。
キャプションは、多くの場合 [上の例](#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 %}
````
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://gitbook.com/docs/documentation/ja-gitbook-documentation/creating-content/blocks/code-block.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.