コードブロック

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

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

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

コードブロックは、次のような用途に便利です：

• 設定を共有する

• コードスニペットを追加する

• コードファイルを共有する

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

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

• ほかにもたくさんあります！

コードブロックの例

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

// 一部のコード

行番号付き

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

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

キャプション付き

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

キャプションは、次の例のようにファイル名であることが多いです： 上の例、ただしタイトル、説明、その他好きな内容にも使えます。

コードを折り返す

これにより、コードの折り返しの有無を切り替えられるため、長いコード行も折り返されてページ上で一度にすべて表示されます。

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

折りたたみ

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

折りたたみ表示では、既定で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 %}