3

「Markdown や HTML を使用して投稿を書式設定するには?」というヘルプページがあります: https://ja.stackoverflow.com/help/formatting

このページをモデレーターが編集できるよう Stack Exchange の社員さんに変えていただいたので、古くなっている記述を改めたいです。

たとえば以下の記述が気になっています:

  • Google Prettify を利用していると書いてありますが、現在は highlight.js が使われています。
  • 行頭 4 つスペースのタイプのコードブロックが紹介されていますが、今なら code fence を使ったタイプのコードブロックも紹介すべきでしょう。
  • コードスニペットの紹介がありません。
  • 日本語版のスタック・オーバーフローでは、ビジュアル・エディターは未実装……のはずです。

このように古くなっている部分は、英語版のヘルプを翻訳する形で直していくのが良いのかな、と考えています: https://stackoverflow.com/help/formatting。ただし改行の処理など、日本語版独自で変更している部分もあるので注意が必要です。また Prettify の部分については英語版も古かったので、自分の方で Stack Overflow Meta に更新を提案してみました: https://meta.stackoverflow.com/q/407669/5989200

現在の記述をコミュニティ wiki 回答として投稿しますので、私も含め皆さんで編集いただけないでしょうか。ある程度落ち着いたところで更新をかけたく思います。

更新に反対の場合は、この質問にマイナス投票し、別途理由を回答していただきたいです。「更新したくない」という回答の方に投票が集まれば、更新せずにそのまま置いておきます。

1 件の回答 1

3

https://ja.stackoverflow.com/help/formatting の改善案です。変更点については編集履歴をご覧ください。

英語版はこちら: https://stackoverflow.com/help/formatting


スタック・オーバーフローに投稿する際、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)
4
  • アイコン画像が変更されたため現在のエディタと異なっています。アイコン画像が使用されているところは「コードスニペット」と「画像」の項目です。
    – raccy
    Commented 2023年4月15日 0:13
  • 最初の「一部のHTML」のURLですが、ホスト名を省略したパスであるため、メタでは無くスタックオーバーフロー内のヘルプではリンク切れを起こしてしまっています。
    – raccy
    Commented 2023年4月15日 0:17
  • @raccy さん、指摘ありがとうございます。こちらの質問の内容はもう fix してしまっているため、新しくメタ質問として投稿いただけますでしょうか。TODO 管理としてもその方がやりやすく、ありがたいです。お手数おかけします。
    – nekketsuuu モデレーター
    Commented 2023年4月15日 2:59
  • 最初質問を書いていたのですが、似たような質問であがったこちらの質問がまだ「未承認」状態だったので、こちらの方が良いのかとコメントしました。質問で書きなおします。
    – raccy
    Commented 2023年4月15日 3:01

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。