Master GitHub markdown tables with code blocks

TableWithCodeTipsAndExamples.md

Master GitHub markdown tables with code blocks

1. Use HTML tags to define the table to get the best layout result
2. Use either backticks (```) or the HTML pre element with attribute lang
3. 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?!?

Just to mention, if you add the pre without the attribute lang kinda works, in multiple lines at least.

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, the lang is missing.

Also check this out:
https://stackoverflow.com/a/77774604/8644294