MarcoEidinger/TableWithCodeTipsAndExamples.md

## TableWithCodeTipsAndExamples.md

      
    Raw
  

              TableWithCodeTipsAndExamples.md
            
          
    Master GitHub markdown tables with code blocks


Use HTML tags to define the table to get the best layout result
Use either backticks (```) or the HTML pre element with attribute lang
Keep a blank line before and after a code block for correct formatting and syntax highlighting

Good

Example: nice looking table to show HTTP Responses


 Status   Response 


 200 

{
  "id": 10,
  "username": "marcoeidinger",
  "created_at": "2021-02-097T20:45:26.433Z",
  "updated_at": "2015-02-10T19:27:16.540Z"
}


 400 

Error, what the hell is going on?!?


 500 

Internal Server Error    


Example: nice looking table to compare code changes


 Before   After 


struct Hello {
   public var test: String = "World" // original
}


struct Hello {
   public var test: String = "Universe" // changed
}


Bad

Markdown defined table

Some markdown editors show correct layout and syntax highlighting if you use <br> tags in your code block. But this is very cumbersome and akward. And finally GitHub itself will show the code block on a single line :(


Status
Response


200
{  "id": 10,  "username": "alanpartridge",  "email": "alan@alan.com",  "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"}


400
Error, what the hell is going on?!?


Using HTML code element to wrap code

You won't get syntax highlighting :(


 Status   Response 


 200 


{
  "id": 10,
  "username": "marcoeidinger",
  "email": "alan@alan.com",
  "created_at": "2021-02-097T20:45:26.433Z",
  "updated_at": "2015-02-10T19:27:16.540Z"
}


 400 

Error, what the hell is going on?!?


No blank line before/after a code block

You just lost line breaks AND syntax highlighting :((


 Status   Response 


 200 

```json
{
  "id": 10,
  "username": "marcoeidinger",
  "email": "alan@alan.com",
  "created_at": "2021-02-097T20:45:26.433Z",
  "updated_at": "2015-02-10T19:27:16.540Z"
}
```


 400 

Error, what the hell is going on?!?
Status	Response
200	{ "id": 10, "username": "marcoeidinger", "created_at": "2021-02-097T20:45:26.433Z", "updated_at": "2015-02-10T19:27:16.540Z" }
400	Error, what the hell is going on?!?
500	Internal Server Error
Before	After
struct Hello { public var test: String = "World" // original }	struct Hello { public var test: String = "Universe" // changed }
Status	Response
200	`{ "id": 10, "username": "marcoeidinger", "email": "alan@alan.com", "created_at": "2021-02-097T20:45:26.433Z", "updated_at": "2015-02-10T19:27:16.540Z" }`
400	Error, what the hell is going on?!?
Status	Response
200	```json { "id": 10, "username": "marcoeidinger", "email": "alan@alan.com", "created_at": "2021-02-097T20:45:26.433Z", "updated_at": "2015-02-10T19:27:16.540Z" } ```
400	Error, what the hell is going on?!?