Supercharged Github Markdown

See how versatile Github's Markdown can be

Github Flavored Markdown

Hi, it’s Tom again (or your favorite WaveNet voice if you’re using read aloud for the english or german version). I’ve recently seen some nice and handy tricks for Github Markdown to use that you may not know yet. Let’s take a look!

Keyboard shortcuts

Using the tag “”, which you may recognize as a standard HTML-tag for describing keyboard shortcuts, is also available for Github Markdown. Simply put a plain text describing your shortcut between two “”-elements and Github will render it correctly.

### Keyboard shortcut

<kbd>Cmd + C</kbd>

<kbd>ESC</kbd>

Detail and summary

Let’s stay a little longer with known HTML-tags and take a look at the details and summary element. As in HTML, a details element is collapsable and hides information (the detail’s summary) until a user opens the details view. The very same is also available in Github’s Markdown.

### Summary and details

<details>
  <summary>A summary title</summary>
  And that's a summary content.
</details>

Colors

When creating a new pull request, you can put a hexadecimal color definition into backticks and Github will render it in Markdown as a special color tag. The element not only contains the color in text variant, but also shows a dot representing the defined color to quickly see how it looks.

### Colors

For your PR's pleasure:

`#3285A8`

Strikethrough

Using two tilde symbols each at the start and end of the text selection you want to strike through, will, well, apply a strikethrough. Note that the tilde symbols have to be directly appended to the first and last characters without a whitespace in between.

### Strikethrough

This a sentence. ~~This was a sentence.~~

Specific code definition

You can define a code block via three backticks at the beginning as well as the end of your Markdown code. By appending the programming language directly to the first three backticks, Github Markdown can infer the correct syntax highlighting and improve readability for your code reviews.

### Specified code language

```typescript
function add(a: number, b: number){
  return a + b;
}


### Media

Github also supports displaying images and now also videos inline in the Markdown. Nice to know: you can add media either by clicking the related button in the Markdown editor - or by simply using drag and drop.

## End of a quick article

If you’re reading this article, you’re most likely familiar with most of Github Markdown’s available elements. The few ones I’ve listed above are elements that I haven’t heard of before so I thought it makes sense to share them with you. Maybe you’ve seen them for the first time now as well and learned something new today.

Tom

Suggestions

Related

Addendum