コードブロック

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

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がどの言語に対応しているかは

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 %}