Qiitaのコードブロックの書き方｜言語指定とファイル名表示・diff記法

2026-06-15 ・ Qiita-AI+ の中の人

Qiitaのコードブロックの基本

Qiitaでコードを載せるときは、コードをバッククォート（`）3つの行で囲みます。開始行と終了行にそれぞれ```を置き、その間にコードを書くだけです。

```
function hello() {
  console.log("Hello, Qiita!");
}
```

こうすると、コードが等幅フォントの枠で囲まれて表示され、本文と区別しやすくなります。バッククォートの代わりにチルダ（~）3つで囲んでも同じ結果になります。コードの中にバッククォートを含めたいときは、囲む側を~~~にすると安全です。

言語を指定してシンタックスハイライトする

開始行の```のすぐ後ろに言語名を書くと、その言語に合わせた色付け（シンタックスハイライト）が適用されます。

```ruby
puts "Hello, Qiita!"
```

同じように```js、```python、```goのように指定できます。言語名は```と続けて、間にスペースを入れずに書きます。読者がコードの構造を追いやすくなるので、言語が決まっているときは指定しておくのがおすすめです。

言語を指定しない場合

言語名を省略すると、ハイライトなしのプレーンなコードブロックになります。シェルの出力やログ、設定値の断片など、特定の言語に当てはまらない内容はこちらが向いています。

ファイル名を表示する

Qiitaの独自拡張として、言語名の後ろにコロン（:）とファイル名を続けると、コードブロックの左上にファイル名が表示されます。

```ruby:qiita.rb
puts "The best way to share knowledge."
```

上の例では、コードの上にqiita.rbというラベルが付きます。どのファイルのコードなのかが一目で分かるため、複数のファイルにまたがる説明をするときに便利です。

書式は言語:ファイル名です。コロンの前後にスペースは入れません。拡張子を含めたファイル名（例：config.yml、App.tsx）をそのまま書けます。

diff記法で差分を表示する

変更前後の差分を見せたいときは、言語名の頭にdiff_を付けます。たとえばJavaScriptならdiff_javascriptのように書きます。

```diff_javascript
  const x = 1;
- const y = 2;
+ const y = 3;
```

行の先頭に-を書くと削除行、+を書くと追加行として色分けされます。変更していない行はそのまま書きます。diff_に続けて言語名を指定しているので、差分の色分けに加えて、その言語のシンタックスハイライトも保たれます。

なお、公式のチートシートではdiff_言語とファイル名指定（:ファイル名）を組み合わせる書き方は明記されていません。確実に表示したい場合は、ファイル名は本文や見出しで補うか、実際にプレビューで確認してから使うとよいでしょう。

書くときのポイント

囲みは半角のバッククォート3つ。全角になっていると枠が表示されません。
言語名・ファイル名は```と続けて書く。スペースを入れると正しく認識されないことがあります。
投稿前にプレビューで確認する。ハイライトやファイル名ラベルが意図どおり出ているかをその場で見られます。

基本は「バッククォート3つで囲む」「言語名で色を付ける」「コロンでファイル名を出す」「diff_で差分を見せる」の4つです。これだけ押さえれば、読みやすいコード付きの記事が書けます。

補足: 筆者はQiitaの執筆画面で使える非公式の補助ツール「Qiita-AI+」（Chrome拡張・個人開発）を作っています。執筆画面のサイドバーで、タイトル候補とLGTM予測、冒頭文3案、章立て、タグ最適化、読みやすさ評価が使えます。無料で毎日利用できます（回数の上限あり）。無制限に使いたい場合はPro（月¥980）があり、APIキーは自分のものを使うBYOK方式です。気になる方はストアページ（https://chromewebstore.google.com/detail/ahemolcehmidofoblllkpheneeaejnfj）をご覧ください。