コードブロックの作成と強調表示

コードのサンプルをコードブロックにし、構文を強調表示して共有しましょう。

この機能を使用できるユーザーについて

Markdown は、GitHub Web インターフェイスで使用できます。

この記事で

フェンスされたコード ブロック

コードブロックの前後に 3 つのバックティック``` を配置すると、フェンスされたコードブロックを作成できます。 ソースコードを読みやすくするために、コードブロックの前後に空の行を入れることをお勧めします。

```
function test() {
  console.log("notice the blank line before this function?");
}
```

3 つのバッククォートを使ってコードブロックを作成する方法を示すレンダリングされた GitHub Markdown のスクリーンショット。 ブロックは "function test() {" で始まっています。

ヒント

リスト内で書式設定を保持するために、フェンスされていないコード ブロックをスペース 8 つでインデントします。

フェンスされたコード ブロックの中に 3 重のバッククォートを表示するには、4 重のバッククォートで囲みます。

````
```
Look! You can see my backticks.
```
````

4 重のバッククォート間に 3 つのバッククォートを記述際にレンダリングされたコンテンツに表示するレンダリングされた Markdown のスクリーンショット。

コード スニペットとテーブルを頻繁に編集する場合は、GitHub のすべてのコメント フィールドで固定幅フォントを有効にするとメリットが得られる場合があります。 詳しくは、「GitHubでの書き込みと書式設定について」をご覧ください。

構文の強調表示

任意の言語識別子を追加して、フェンス付きコードブロックの構文を強調表示することができます。

構文の強調表示は、ソース コードの色やスタイルを変えて読みやすくするものです。

たとえば、Ruby コードの構文を強調表示するには:

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

これは、コード ブロックを構文強調表示で表示します。

GitHub に表示された 3 行の Ruby コードのスクリーンショット。 コードの要素が紫、青、赤の文字で表示され、読み取りやすくなっています。

ヒント

また、GitHub Pages サイトで構文を強調表示するフェンスされたコード ブロックを作成する場合は、小文字の言語識別子を使用します。 詳しくは、「GitHub ページと Jekyll について」をご覧ください。

          [Linguist](https://github.com/github-linguist/linguist) を使って言語検出を行い、[サードパーティの文法](https://github.com/github-linguist/linguist/blob/main/vendor/README.md)を選んで構文の強調表示を行います。 どのキーワードが有効かは、[languages YAML ファイル](https://github.com/github-linguist/linguist/blob/main/lib/linguist/languages.yml)で確認できます。

ダイアグラムの作成

コード ブロックを使って Markdown でダイアグラムを作成することもできます。 GitHubでは、人魚、GeoJSON、TopoJSON、および ASCII STL 構文がサポートされています。 詳しくは、「ダイアグラムの作成」をご覧ください。

参考資料

  •           [GitHub Flavored Markdown の仕様](https://github.github.com/gfm/)

  •         [AUTOTITLE](/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax)