コードブロック

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

コードブロックを使用して、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'));

コードブロックを次と組み合わせることもできます tabs ブロック 同じコード例を複数の異なる言語で提供するために：

JavaScript

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

Ruby

Elixir

コードブロックを作成できます ウィンドウの全幅に広げる には、ブロックの隣にある オプションメニュー をクリックして 全幅.

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

次をクリックすると オプションメニュー コードブロックの横、またはブロック内の 操作メニュー いくつかの設定できるオプションが表示されます。

構文を設定…

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

私たちは Prism を構文ハイライトに使用しています。利用可能な言語を確認するには、 Prismをテストドライブする を使用できます。GitBookとPrismの間に不一致がある場合、私たちの方がバージョンが一つか二つ遅れている可能性があります。すぐに追いつきます！

filename.txt

// Some code

行番号付き

これにより、コードの行番号をオンおよびオフに切り替えます。

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

キャプション付き

これにより、コード行の上、ブロックの上部に配置されるキャプションをオン/オフできます。

キャプションはしばしばファイル名であり、次のように表示されます 上の例、しかしキャプションはタイトル、説明、またはその他任意のものとして使用することもできます。

コードを折り返す

これによりコードの折り返しをオン/オフでき、長い行のコードもページ上で一度にすべて表示されるように折り返されます。

行を折り返すことは、コードが長くて読み返すために閲覧者が前後にスクロールするのを避けたい場合に便利です。もし コードを折り返す をオンに切り替えると、行番号を表示することも検討してください — これによりコードが読みやすくなり、新しい行の開始位置が把握しやすくなります。

展開可能

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

折りたたまれたビューはデフォルトでコードの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 %}