> For the complete documentation index, see [llms.txt](https://gitbook.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gitbook.com/docs/documentation/ja-gitbook-documentation/kontentsuwosuru/blocks/code-block.md).
# コードブロック
コードブロックを使って、GitBook のページにコードを追加できます。
コードブロックを追加すると、次のことを選べます [構文を設定する](#set-syntax...), [行番号を表示する](#with-line-numbers), [キャプションを表示する](#with-caption)、および [行を折り返す](#wrap-code)。また、簡単に [コードブロックの内容をクリップボードにコピーすることもできます](#copying-the-code)ので、別の場所で使えます
コードブロックは次のような用途に役立ちます：
* 設定の共有
* コードスニペットの追加
* コードファイルの共有
* コマンドラインユーティリティの使用例の表示
* API エンドポイントの呼び出し方法の表示
* ほかにもいろいろ！
### コードブロックを追加する
1. コードブロックを追加するには、空行にカーソルを置いて `/`.
2. クイック挿入メニューで **コードブロック**.
3. GitBook がブロックを挿入し、その中にカーソルを置くので、すぐにコードを貼り付けたり入力したりできます。
### コードブロックの例
{% 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/kontentsuwosuru/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 がサポートしている言語を確認できます。GitBook と Prism の間に不一致が見つかった場合、私たちのほうが 1〜2 バージョン古い可能性があります。すぐに追いつきます！
{% endhint %}
{% code title="filename.txt" %}
```
// Some code
```
{% 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 %}
````
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://gitbook.com/docs/documentation/ja-gitbook-documentation/kontentsuwosuru/blocks/code-block.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.