Skip to main content

Markdown や HTML を使用して投稿を書式設定するには?

スタック・オーバーフローに投稿する際、Markdown一部の HTML を使用できます。Markdown をご存じない場合は、公式の Markdown 文法リファレンスを参照してください。

ここではよくある場面での書式設定や整形のヒントをご紹介します。各記法の詳細は高度な編集について書かれたヘルプ記事もご覧ください。

コードブロック

半角スペース4個でインデントすることで、エスケープされた <pre> <code> ブロックが作られます。

printf("%d\n", 42);  /* What was the
                        question again? */

テキストはこれらのタグで囲まれ、等幅フォントで表示されます。行頭のスペース4つは取り除かれますが、それ以外の空白文字はそのまま表示されます。自分でスペースを入力する代わりに、コードを範囲選択して Ctrl+K を押すことでもこのように整形することができます。

スペース4つの代わりに、特定の記号でコードを囲うことでも整形ができます。コードの最初と最後に3つ以上のバッククォート(```)かチルダ(~~~)を入れてください:

```
console.log("Hello, World");
```

(バッククォートを入力するには、日本語配列では Shift+@、英字配列では 1 の左隣を押してください。)

コードブロック内では Markdown と HTML が処理されません。

    <blink>
      これがコードブロックにラップされていなければ
      大変なことになっていたでしょう。
    </blink>

コードスニペット

HTML、CSS、JavaScript に限っては、その場で実行可能なコードスニペットを投稿の中に埋め込むことが可能です。ツールバーにあるスニペット用のアイコン コードスニペット用のツールバーアイコン をクリックするか、ctrl+M を押してください。

インラインコード

バッククォートで囲うことで、インラインの <code> を挿入することができます。

そういう時は `display: inline-block;` を設定した `<div>` を使うといいですよ。

これは次のように表示されます。

そういう時は display: inline-block; を設定した <div> を使うといいですよ。

コードブロックと同様に、インラインコードも等幅フォントで表示され、Markdown や HTML は処理されません。

シンタックスハイライト

コードブロックには highlight.js を使ったシンタックスハイライトを適用することができます。ハイライトに使われる言語は質問のタグから推測されます

言語を手動で指定したい場合は、コードを囲っている始まりの部分でこのように書いてください:

```lang-js
setTimeout(function () { alert("JavaScript"); }, 1000);
```

この部分では、対応する言語の一覧から lang-cpplang-sql といった言語コードを選んで指定するか、もしくは既に言語が設定されているタグ名を指定することができます。

```c#
public static bool IsAwesome { get { return true; } }
```

直後のコードブロックだけでなく、以降全てのコードブロックに適用したい時は次のようにします。

<!-- language-all: lang-html -->

シンタックスハイライトを一切適用したくない場合は、次のようにします。

<!-- language-all: lang-none -->

改行

スタック・オーバーフローでは段落内の改行もそのまま表示されます。

他の Stack Exchange サイト、例えば英語版の Stack Overflow では、行末に半角スペースを2つ挿入することで <br/> による改行が行われます。

どのようにあなたを愛しているか  
私に数えさせてください

斜体と太字

*ここは斜体で*、_ここ_ も斜体になります。
**ここは太字で**、__ここ__ も太字になります。
***必要なら*** 太字と斜体を ___同時に使う___ こともできます。

日本語の文中でこのような装飾を使う場合、直前・直後・またはその両方に半角スペースを挿入しないと正しく表示されないことがあります。また、メイリオなどの一部フォントでは全角文字が斜体になりません。

リンク

リンクの書き方には3種類あります。

これはインラインリンクです: [Google](http://www.google.com/).
これは参照スタイルのリンクです: [Google][1].
こうすると更にわかりやすいですね: [Yahoo!][yahoo].

[1]: http://www.google.com/
[yahoo]: http://www.yahoo.com/

リンクの定義は文章中のどこに書いても(参照より前でも後でも)構いません。リンク定義の名前は [1] [yahoo] [グーグル] など、他と被らない名前なら何でも構いません。大文字小文字は区別されないので、[yahoo][YAHOO] は同じです。

高度なリンク

リンクにはマウスカーソルを乗せたときに表示される title 属性を設定することができます。リンク先がわかりにくい場合にも有用です。

リンク先がわかりにくいとは[こういう](http://www.google.com/ "Google")ことです。
「[ここをクリック][^2]」と書くのも分かりにくいですね。
入り口は[こちら][web]、というのも。

[^2]: http://www.w3.org/QA/Tips/noClickHere
      ("click here" を使わないようにというアドバイス記事)
[web]: http://programmers.stackexchange.com/ "Programmers Stack Exchange"

HTML でリンクを書くこともできます。

<a href="http://example.com" title="example">example</a>

簡単なリスト

<ul> による箇条書き:

- 項目の頭にはマイナスか
+ プラスか
* アスタリスクを置きます

<ol> による番号付きリスト:

1. 番号付きリストも簡単です。
2. Markdownが番号を数えてくれるので、
7. この項目は 3 番になります。

簡単なブロック引用

行頭に > を書くと、<blockquote> が作られます。

> これはメールで引用を表すときの記法を元にしています。
> メール同様、適度な長さで改行を入れても良いですが、
> 環境によって画面幅で折り返しされてしまうので気を付けてください。

なお、> の中での改行がそのまま表示上も改行になるのはスタック・オーバーフローでの特別な設定であり、他のサイト、たとえば英語版 Stack Overflow では > の中の改行は無視されます。

また、エディタの機能(Ctrl+Qなど)でブロック引用を行うと、元の改行が全て取り除かれ、単語単位の適当な長さで改行が挿入されます。ソースコードやエラーメッセージなど、改行の位置が重要になる場合はこの機能を使わないようにするか、先にコードブロックを適用してください。

タグ

など、このサイトのタグについて言及したい時は次のようにします。

詳しくは [tag:elephants] タグが付いた質問を読むといいですよ。

このように書いたタグは、タグ付けされた質問の一覧にリンクされます。

コメントの書式設定

コメントでは太字、斜体、インラインコード、リンクのみが使えます。加えて、短縮リンクがいくつかあります。

_斜体_ と **太字**、
バッククォートで囲んだ `インラインコード`、
そして [簡単なリンク](http://example.com).

短縮リンクの一覧:

  • [meta] – 現在のサイトのメタにリンクします。リンクテキストはサイト名(例: スタック・オーバーフロー Meta)です。サイトにメタサイトがない場合や、メタサイトのコメント欄では機能しません。
  • [edit] – コメント先の投稿の編集ページ(つまり /posts/{id}/edit)にリンクします。リンクテキストは「編集」です。
  • [tag:tagname][meta-tag:tagname] – タグ付けされた質問の一覧にリンクします。リンクテキストはタグ名です。meta-tag はメタサイトでのみ機能します。
  • [tour]ツアーページにリンクします。
  • [help]ヘルプセンターにリンクします。
  • [chat] - 現在のサイトに対応するチャットサイトにリンクします。リンクテキストは「スタック・オーバーフロー チャット」です。

その他の短縮リンクについては、詳細な編集ガイドをご覧ください。

画像

画像はエディタのツールバーにあるボタン 画像挿入用のツールバーアイコン から挿入します。表示された画面で、ファイルやクリップボードから(imgur に)画像をアップロードすることができます。もしくは、手動でリンクを記述することもできます。

  • HTML <img src="https://example.com/img.jpg">
  • Markdown ![sample image](https://example.com/img.jpg)