web-dev-qa-db-ja.com

Markdownのテーブル行内のコードブロック

GithubフレーバーのMarkdownでいくつかのドキュメントをまとめていますが、2行のテーブルをまとめたいと思います。 1つは単純なテキストで、もう1つはJSONコードブロックです。例を示します。

| Status | Response  |
|---|---|
| 200 |  |
| 400 |   |

応答行内でこのコードを取得したいのですが、それを試みると完全に壊れてしまいます。

json
  {
    "id": 10,
    "username": "alanpartridge",
    "email": "[email protected]",
    "password_hash": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.CPCWCZsyqqa8./whhfzBZydX7yvahHS",
    "password_salt": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.",
    "created_at": "2015-02-14T20:45:26.433Z",
    "updated_at": "2015-02-14T20:45:26.540Z"
}

私はマークダウンが初めてであり、誰かが私を正しい方向に向けることができれば、とても感謝しています。

33
DMH

Github markdown docには、テーブルセル内にインライン/スパンマークダウンタグを含めることができると記載されています。これは、テーブルレイアウトをより詳細に制御しようとしている少数のマークダウンを除き、ほとんどの種類のマークダウンで同じです。

インラインコード要素を使用して親しくなりますが、構文の色付けや行のインデントを使用した書式設定はできません。

| Status | Response  |
| ------ | --------- |
| 200    | `json`                          |
|        | `   {`                          |
|        | ` "id": 10,`                    |
|        | ` "username": "alanpartridge",` |
|        | ` more code...`                 |
|        | `}`                             |
| 400    |                                 |

または、htmlを使用して昔ながらの方法でテーブルを作成します。これにより、rowspanを使用してレイアウトをより細かく制御できます。

17
Neil Dixon

GithubフレーバーMarkdownはHTMLタグをサポートします

簡単に言えば(StackOverflowはサポートしません)-

<table>
<tr>
<th>
Status
</th>
<th>
Response
</th>
</tr>

<tr>

<td>
<pre>
<br/><br/><br/>200<br/><br/><br/><br/><br/>400<br/>
</pre>
</td>

<td>
<pre>
json
  {
    "id": 10,
    "username": "alanpartridge",
    "email": "[email protected]",
    "password_hash": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.CPCWCZsyqqa8./whhfzBZydX7yvahHS",
    "password_salt": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.",
    "created_at": "2015-02-14T20:45:26.433Z",
    "updated_at": "2015-02-14T20:45:26.540Z"
}
</pre>
</td>

</tr>
</table>

出力:

github markdown table-code


このようなテキストベースのテーブルを試すこともできます(StackOverflowに適しています)-

+---------------+--------+---------+
|       \       | Rating | Comment |
+---------------+--------+---------+
| One Piece     |  A | B |       ♢ |
+---------------+----+---+---------+
| Naruto        |  A | C |       ♧ |
+---------------+----+---+---------+
| One Punch Man |  A | A |       ♥ |
+---------------+----+---+---------+
| Death Note    |  A | B |       ♠ |
+---------------+----+---+---------+

Text Tables Generatorは、この目的のための素晴らしいサイトです。

8
Minhas Kamal