Improve your markdown mastery in github

Posted last year
Return to overview

Adding rich notes

Did you know you can easily create callout panels with the following options:

> [!NOTE] > This will be a note and gets marked as blue text with an information icon > [!TIP] > This will be a tip and gets marked as green text with a light bulb icon > [!IMPORTANT] > This will be important and gets marked as purple text and a text balloon with information icon > [!WARNING] > This will be a warning and gets marked as yellow text and a exclamation mark in triangle icon > [!CAUTION] > This will be cautioning and gets marked as red text and a exclamation mark in an octagonal shape icon

Collapsible content

Did you know you can even add some native HTML elements to your markdown? The `<details />` element is great for hiding some content from initial scanning of a document.

Simply use as this:

<details> <summary>Markdown is not supported in the title</summary> Markdown **is** supported here </details>

Leveraging different types of markup makes the content more easily scannable and readable by users. This is especially helpful when dealing with instructions and documents.

Enjoyed this tutorial? I’m available for part-time remote work helping teams with architecture, web development (Vue/Nuxt preferred), performance and advocacy.

Return to overview