Skip to main content
ドキュメントには頻繁に更新が加えられ、その都度公開されています。本ページの翻訳はまだ未完成な部分があることをご了承ください。最新の情報については、英語のドキュメンテーションをご参照ください。本ページの翻訳に問題がある場合はこちらまでご連絡ください。

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

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

コードブロック

三連バッククォート ``` をコードのブロック前後に入力すると、コードブロックを作成できます。 ソースコードを読みやすくするために、コードブロックの前後に空の行を入れることをお勧めします。

```
function test() {
  console.log("この関数の前に空白行があるのがわかりますか?");
}
```

表示されたコードブロック

ヒント: リスト内でフォーマットを保持するために、フェンスされていないコードのブロックをスペース 8 つでインデントしてください。

To display triple backticks in a fenced code block, wrap them inside quadruple backticks.

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

Rendered fenced code with backticks block

If you are frequently editing code snippets and tables, you may benefit from enabling a fixed-width font in all comment fields on GitHub Enterprise Cloud. For more information, see "Enabling fixed-width fonts in the editor."

構文の強調表示

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

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

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

Ruby の構文を強調して表示されたコードブロック

構文強調表示のための言語検出の実行やサードパーティの文法の選択には Linguist を使用します。 どのキーワードが有効かについては言語 YAML ファイルでご覧いただけます。

Creating diagrams

You can also use code blocks to create diagrams in Markdown. GitHub supports Mermaid, geoJSON, topoJSON, and ASCII STL syntax. For more information, see "Creating diagrams."

参考リンク