Highlight Specific Segment Block as Notice, Tip, Caution, Important & Warning in Markdown
Tags: markdown, github
Published: 2024-06-09 12:01:14

Markdown is a very popular scripting language. It is used starting from writing documentation to even creating a complete website. Therefore, almost all of us frequently use this scripting language every once in a while.

However, there are some limitations to this language as well. In some cases, we can not add that much styling or modification to the writing in it. Luckily for us, there are 5 highlighting features for specific segment blocks as Notice, Tip, Caution, Important, and Warning. It is also applicable in GitHub MarkDown as well. In this article, I am going to talk about it in detail.

## Video Walkthrough
If you like to watch a complete video with step-by-step guidelines, then you can watch the video right now!

{% embed https://www.youtube.com/watch?v=HMeCXobi90E %}

## "Note" Specific Block

If you want to highlight information that users should take into account, even when skimming, then it is appropriate for you!

### Syntax

```
> [!NOTE]
> I want the readers to read it carefully as it contains many important docs.
```

Output:

![Note](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w65y73enhazebw10u072.png)

You see that the preview already has a nice "Note" related symbol also!

If you want to write any Note related segment, then you need to start it with an angle bracket ( `>` ), and then you need to specify the highlighting block as Note with `[!NOTE]`.
After that, you need to add an angle bracket ( `>` ) in each new line that you want to include in your specific "Note" block.

If you want to close the Note block, then simply remove the additional angle bracket in the new line. That's all!

## "Tip" Specific Block
If you want to provide optional information to help a user to be more successful, then it is appropriate in those scenarios.

### Syntax

```
> [!TIP]
> Use the command line to detect and resolve the errors!
```

Output:


![TIP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qlqn5yxlo288q65ihjm7.png)

You see that the preview already has a nice "Tip" related symbol also!

If you want to write any Tip related segment, then you need to start it with an angle bracket ( `>` ), and then you need to specify the highlighting block as Tip with `[!TIP]`.

After that, you need to add an angle bracket ( `>` ) in each new line that you want to include in your specific "Tip" block.

If you want to close the Tip block, then simply remove the additional angle bracket in the new line. That's all!


## "Warning" Specific Block

If you want to provide critical content demanding immediate user attention due to potential risks, then it is an appropriate block for you.

## Syntax

```
> [!WARNING]
> DON'T DELETE THE `package.json` file!
```

Output:


![WARNING](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0rc4htki4r2ldly18d4.png)

You see that the preview already has a nice "Warning" related symbol also!

If you want to write any Warning related segment, then you need to start it with an angle bracket ( `>` ), and then you need to specify the highlighting block as Warning with `[!WARNING]`.

After that you need to add an angle bracket ( `>` ) in each new line that you want to include in your specific "Warning" block.

If you want to close the Warning block, then simply remove the additional angle bracket in the new line. That's all!

## "Caution" Specific Block

If you want to provide negative potential consequences of an action, then you can use this.

### Syntax

```
> [!CAUTION]
> Don't execute the code without commenting on the test cases.
```

Output:


![CAUTION](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vsz2rgc2zgbwlqighsk.png)

You see that the preview already has a nice "Caution" related symbol also!

If you want to write any Caution related segment, then you need to start it with an angle bracket ( `>` ), and then you need to specify the highlighting block as Warning with `[!CAUTION]`.

After that you need to add an angle bracket ( `>` ) in each new line that you want to include in your specific "Caution" block.

If you want to close the Caution block, then simply remove the additional angle bracket in the new line. That's all!

## "Important" Specific Block

If you want to provide crucial information necessary for users to succeed, then you can use this.

### Syntax

```
> [!IMPORTANT]  
> Read the contribution guideline before adding a pull request.
```

Output:


![IMPORTANT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eot0a0frrowhlxlndhej.png)

You see that the preview already has a nice "Important" related symbol also!

If you want to write any Important related segment, then you need to start it with an angle bracket ( `>` ), and then you need to specify the highlighting block as Warning with `[!IMPORTANT]`.

After that you need to add an angle bracket ( `>` ) in each new line that you want to include in your specific "Important" block.

If you want to close the Important block, then simply remove the additional angle bracket in the new line. That's all!

## Conclusion
Thank you for reading the entire article. I hope you have learned something new here.
If you have enjoyed the procedures step-by-step, then don't forget to let me know on [Twitter/X](https://twitter.com/Fahim_FBA) or [LinkedIn](https://www.linkedin.com/in/fahimfba/). I would appreciate it if you could endorse me for some relevant skillsets on LinkedIn. I would also recommend you to subscribe to my [YouTube channel](https://youtube.com/@FahimAmin) for regular programming related content.
You can follow me on [GitHub](https://github.com/FahimFBA) as well if you are interested in open source. Make sure to check my [website](https://fahimbinamin.com/) (https://fahimbinamin.com/) as well.
Thank you so much! 😀