コードブロック

サンプルコード、設定、コードスニペットなどを含めるために、ページにコードブロックを追加します

コードブロックを使ってGitBookページにコードを追加できます。

コードブロックを追加すると、次のように設定できます 構文を設定する, 行番号を表示する, キャプションを表示する、そして 行を折り返す。また、簡単に コードブロックの内容をクリップボードにコピーできますので、ほかの場所でも使えます

コードブロックは次のような用途に役立ちます：

• 設定の共有

• コードスニペットの追加

• コードファイルの共有

• コマンドラインユーティリティの使用例を示す

• APIエンドポイントの呼び出し方を示す

• ほかにもさまざまな用途があります！

コードブロックを追加

1. コードブロックを追加するには、空行にカーソルを置いて次を入力します /.

2. クイック挿入メニューで次を選択します コードブロック.

3. GitBookがブロックを挿入し、その中にカーソルを配置するので、コードを貼り付けたり入力したりできます。

コードブロックの例

index.js

‌import * as React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, window.document.getElementById('root'));

コードブロックは次のものと組み合わせることもできます タブブロック を使うと、同じコード例を複数の異なる言語で提示できます：

JavaScript

let greeting = function (name) {
  console.log(`Hello, ${name}!`);
};
greeting("Anna");

Ruby

Elixir

コードブロックのオプション

次をクリックすると オプションメニュー コードブロックの横にある、または アクションメニュー ブロック内のメニューから、設定できるさまざまなオプションが表示されます。

構文を設定…

コードブロックの構文は、サポートされている任意の言語に設定できます。これにより、その言語のシンタックスハイライトも有効になります。

私たちは Prism をシンタックスハイライトに使用しています。次を使って Test Drive Prism で、Prismがサポートしている言語を確認できます。GitBookとPrismの間に不一致があっても、当方のバージョンが1、2つ古い可能性があります。すぐに追いつきます！

filename.txt

// Some code

行番号付き

これにより、コードの行番号の表示と非表示を切り替えます。

行番号の表示は、コード全体が1つのファイルの内容を表している場合や、行数の多い長いコードブロックがある場合に便利です。行番号を非表示にするのは、スニペット、コマンドラインやターミナルの式の使用手順、その他同様のシナリオに便利です。

キャプション付き

これにより、ブロックの上部、コード行の上に表示されるキャプションの表示と非表示を切り替えます。

キャプションは、多くの場合 上の例にあるようなファイル名ですが、タイトル、説明など自由に使うこともできます。

コードを折り返す

これにより、コードの折り返しの表示と非表示を切り替え、長いコード行も折り返してページ上で一度にすべて見えるようになります。

行の折り返しは、コードが長く、閲覧者が読むために左右にスクロールするのを避けたい場合に便利です。 コードを折り返す をオンにすると、行番号も表示するとよいでしょう。そうすると、コードが読みやすくなり、新しい行の始まりも把握しやすくなります。

展開可能

これにより、コード全体を表示する（トグルがオフの場合）か、ユーザーが展開できる折りたたまれたコードウィンドウを表示する（トグルがオンの場合）かを切り替えます。

折りたたみ表示では、既定で10行のコードが表示され、完全なコードブロックを表示するための展開ボタンがあります。コードが10行未満の場合は、すべての内容が表示されます。

コードブロックのアクション

上記のオプションに加えて、コードブロックに表示する言語を変更したり、コードをすぐにコピーしたりできます。

コードをコピー

コードブロックにカーソルを重ねると、いくつかのアイコンが表示されます。中央のアイコンをクリックすると、コードブロックの内容をクリップボードにコピーできます。

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(<App />, window.document.getElementById('root'));
```

{% endcode %}