> For the complete documentation index, see [llms.txt](https://gitbook-open-v2-preview.gitbook.workers.dev/url/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-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/ja-gitbook-documentation/creating-content/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 %}
コードブロックは次のものと組み合わせることもできます [タブブロック](/url/gitbook.com/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がサポートしている言語を確認できます。GitBookとPrismの間に不一致があっても、当方のバージョンが1、2つ古い可能性があります。すぐに追いつきます！
{% 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
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:
```
GET https://gitbook-open-v2-preview.gitbook.workers.dev/url/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.