質問: 本家ヘルプで次のような例が載っていますが、 ``` printf("%d\n", 42); /* what was the question again? */ ``` このサイトのヘルプでは改行が取れてしまっています。 ``` printf("%d\n", 42); /* 質問は なんでしたか? */ ``` インラインコードの例ではバッククォートも消えています。 ``` You can use a `` for this with `display: inline-block;` set. ``` ``` このために、<div> を display: inline-block; セットとともに使用できます。 ``` 大半の例がこのように崩れています。 ところどころ訳も変ですね。aboutがバージョン情報とか。
回答: 全体的に訳を見直し、ja.SO特有の説明も加えました。 Markdown や HTML を使用して投稿を書式設定するには? スタック・オーバーフローに投稿する際、ビジュアル エディター (質問・回答のみ。コメントでは使えません)、Markdown、および一部の HTMLを使用できます。Markdown の知識がない場合は、公式の Markdown 文法リファレンスを参照してください。 ここではよくある場面での書式設定や整形のヒントをご紹介します。各記法の詳細は高度な編集について書かれたヘルプ記事もご覧ください。 コードブロック 半角スペース4個でインデントすることで、エスケープされた ` ` ブロックが作られます。 ``` printf("%d\n", 42); /* What was the question again? */ ``` テキストはこれらのタグで囲まれ、等幅フォントで表示されます。行頭のスペース4つは取り除かれますが、それ以外の空白文字はそのまま表示されます。コードを範囲選択して `Ctrl`+`K` を押すことでも、このように整形することができます。 コードブロック内では Markdown と HTML も処理されません。 ``` これがコードブロック内に書かれていなければ 大変なことになっていたでしょう。 ``` インラインコード バッククォート(英字配列では `1` の左隣、日本語配列では `Shift`+`@`)でインラインの `` を挿入することができます。 ``` そういう時は `display: inline-block;` を設定した `` を使うといいですよ。 ``` これは次のように表示されます。 そういう時は `display: inline-block;` を設定した `` を使うといいですよ。 コードブロックと同様に、インラインコードも等幅フォントで表示され、Markdown や HTML は処理されません。 シンタックスハイライト コードブロックには Google Prettify を使ったシンタックスハイライトを適用することができます。ハイライトに使われる言語は質問のタグから推測されます。 言語を手動で指定したい場合は、次のような HTML コメントをコードブロックの前に挿入します。 ``` setTimeout(function () { alert("JavaScript"); }, 1000); ``` 対応する言語の一覧から `lang-cpp` や `lang-sql` といった言語コードを選んで指定するか、もしくは既に言語が設定されているタグ名を指定します。 ``` public static bool IsAwesome { get { return true; } } ``` 直後のコードブロックだけでなく、以降全てのコードブロックに適用したい時は次のようにします。 ``` ``` シンタックスハイライトを一切適用したくない場合は、次のようにします。 ``` ``` 改行 スタック・オーバーフローでは段落内の改行もそのまま表示されます。 他の Stack Exchange サイト、例えば Stack Overflow では、行末に半角スペースを2つ挿入することで `` による改行が行われます。 ``` How do I love thee? Let me count the ways ``` 斜体と太字 ``` *ここは斜体で*、_ここ_ も斜体になります。 **ここは太字で**、__ここ__ も太字になります。 ***必要なら*** 太字と斜体を ___同時に使う___ こともできます。 ``` 日本語の文中でこのような装飾を使う場合、直前・直後・またはその両方に半角スペースを挿入しないと正しく表示されないことがあります。また、メイリオなどの一部フォントでは全角文字が斜体になりません。 リンク リンクの書き方には3種類あります。 ``` これはインラインリンクです: Google. これは参照スタイルのリンクです: Google][1]. こうすると更にわかりやすいですね: [Yahoo!][yahoo]. [1]: http://www.google.com/ [yahoo]: http://www.yahoo.com/ ``` リンクの定義は文章中のどこに書いても(参照より前でも後でも)構いません。リンク定義の名前は `[1]` `[yahoo]` `[グーグル]` など、他と被らない名前なら何でも構いません。大文字小文字は区別されないので、`[yahoo]` と `[YAHOO]` は同じです。 **高度なリンク** リンクにはマウスカーソルを乗せたときに表示される title 属性を設定することができます。リンク先がわかりにくい場合にも有用です。 ``` リンク先がわかりにくいとは[こういうことです。 もちろん「[ここをクリック][^2]」なんて書かないでくださいね。 [うち][web]に遊びに来てね。 [^2]: http://www.w3.org/QA/Tips/noClickHere ("click here" を使わないようにというアドバイス記事) [web]: http://programmers.stackexchange.com/ "Programmers Stack Exchange" ``` HTML でリンクを書くこともできます。 ``` example ``` 簡単なリスト `` による箇条書き: ``` - 項目の頭にはマイナスか + プラスか * アスタリスクを置きます ``` `` による番号付きリスト: ``` 1. 番号付きリストも簡単です。 2. Markdownが番号を数えてくれるので、 7. この項目は 3 番になります。 ``` 簡単なブロック引用 行頭に `>` を書くと、`` が作られます。 ``` > これは電子メールで引用を表すときの記法を元にしています。 > メール同様、適度な長さで改行を入れると Markdown ソースは > 読みやすくなりますが、必須ではありません。 ``` というのはただの改行が `` に変換されない英語サイトの場合であり、スタック・オーバーフローでは改行がそのまま表示されます。自分が読みやすいからといって改行を多用すると、環境によっては折り返しと衝突して読みにくくなる場合もあります。 また、エディタの機能(`Ctrl`+`Q`など)でブロック引用を行うと、**元の改行が全て取り除かれ**、単語単位の適当な長さで改行が挿入されます。ソースコードやエラーメッセージなど、改行の位置が重要になる場合はこの機能を使わないようにするか、先にコードブロックを適用してください。 タグ [c++](https://ja.stackoverflow.com/questions/tagged/c%2b%2b "'c++' のタグが付いた質問を表示") など、このサイトのタグについて言及したい時は次のようにします。 ``` 詳しくは [tag:elephants] タグが付いた質問を読むといいですよ。 ``` このように書いたタグは、タグ付けされた質問の一覧にリンクされます。 コメントの書式設定 コメントでは太字、斜体、インラインコード、リンクのみが使えます。加えて、短縮リンクがいくつかあります。 ``` _斜体_ と **太字**、 バッククォートで囲んだ `インラインコード`、 そして 簡単なリンク. ``` 短縮リンクの一覧: * `[meta]` – 現在のサイトのメタにリンクします。リンクテキストはサイト名(例: スタック・オーバーフロー Meta)です。サイトにメタサイトがない場合や、メタサイトのコメント欄では機能しません。 * `[edit]` – コメント先の投稿の編集ページ(つまり /posts/{id}/edit)にリンクします。リンクテキストは「編集」です。 * `[tag:tagname]` や `[meta-tag:tagname]` – タグ付けされた質問の一覧にリンクします。リンクテキストはタグ名です。`meta-tag` はメタサイトでのみ機能します。 * `tour]` – [ツアーページにリンクします。 * `help]` – [ヘルプセンターにリンクします。 * `[chat]` - 現在のサイトに対応するチャットサイトにリンクします。リンクテキストは「スタック・オーバーフロー チャット」です。 その他の短縮リンクについては、詳細な編集ガイドをご覧ください。 画像 画像はエディタのツールバーにあるボタン !画像の挿入ツールバー ボタン から挿入します。表示された画面で、ファイルやクリップボードから(imgur に)画像をアップロードすることができます。もしくは、手動でリンクを記述することもできます。 * HTML `` * Markdown `!sample image`