11

質問や回答にソースコードを記載するとき、どうしたら以下のようにきれいに表示できますか?

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

類似の質問

  • HTMLを記載したら一部が見えなくなってしまいました
  • シンタックスハイライトがおかしい、機能していない

←FAQ目次に戻る

1

1 件の回答 1

13

このサイトの投稿ではMarkdown記法やHTMLを使うことができますが、そのためにいくつかの記号は特殊な意味を持ち、また連続した半角スペースは省略されてしまいます。このような場合、

  • 文中に当該文字列がある場合: ` で囲む
  • 複数行にわたる場合:半角スペース4つでインデント

とすることで、書いたまま表示させることが可能です。

簡単な方法としては、整形したい範囲を選択した上で {} ボタンをクリックすると、上記の記法を適用できます。ショートカットキー Ctrl+K+K を押すことでも同じことが可能です。

画像の説明をここに入力

ソースコードの一部が既にインデントされていると、その部分だけ勝手に整形表示されることがあります。この場合も、コード全体を選択した上で改めて上記の操作を行ってください。

こうすることで、行数が多い場合にスクロールバーが表示されるという利点もあります。ソースコード以外にも、コマンドの出力やログを貼り付ける際に使うと便利です。

注意: Github や Qiita で用いられる Github Flavored Markdown などでは ``` で囲む構文もありますが、現時点では対応していません

サンプル:インラインの整形済みブロック

行内のコードは `<a href="">` といった感じにシングルクオートで囲みます。

行内のコードは <a href=""> といった感じにシングルクオートで囲みます。

サンプル:改行を含む整形済みブロック

複数行にわたる場合はスペースでインデントします。

    <ul>
      <li><a href="/">TOP</a></li>
      <li>...</li>
    </ul>

※インデントした行の前後には空行が必要です

複数行にわたる場合はスペースでインデントします。

<ul>
  <li><a href="/">TOP</a></li>
  <li>...</li>
</ul>

※インデントした行の前後には空行が必要です

シンタックスハイライト

複数行のコードブロックにはには、シンタックスハイライトを適用することができます。

質問につけられたタグに言語の設定が行われていれば自動的に行われますが、そうでない場合や言語を切り替えたい場合、当該コードの直前にHTMLコメントを書きます。

<!-- language: タグ名 or lang-xxx -->

指定できる lang-xxxこちらの投稿Google Code Prettify の対応言語一覧 を参照してください。

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

    <a href=""></a>

<!-- language: lang-php -->

    echo "このように、言語指定コメントはインデントせず、必ず前後に空行をいれてください。";

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

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