Callout Blocks in a New Way

I have discovered a nice way to write Callout Blocks in my posts here on Dev.to.

The Problem

I usually enjoyed using callout blocks in other blogging platforms when writing posts.

Callout Blocks are usually html blocks rendered in the article which as we understand, are not purely markdown.

If you have always been only in here and having problem realising how does a callout block look like, look below. Here is a screenshot.

But as far as I know, we don't have them in here because dev.to uses purely markdown for writing blog posts. ( It has some extra features like embedding URLs of YouTube videos, twitter posts, stackoverflow questions etc. )

The Solution

use this syntax I've shown below.

|💡This is a callout block |
|------------| 

When rendered, it will show up like this -

💡This is a callout block

Your Reaction

Wait a minute! Isn't this, hmmmmmm, a markdown table?
Actuallly, it is the first column of the index row of a table.
Interesting....

My Answer

Yes, exactly! Effectively this is like a table which has only 1 row and 1 column. (singleton matrix for the mathematicians ;D)

While with html blocks you also get the power of inline css so you can customise that to your own liking, where the customizability theoretically has no limits, making it more shiny and beautiful. But I think this table hack isn't anyhow bad either.

I love it!

The beauty of this approach is that you do get some options (few different ways to customise it).

Look below. These are the ways I have tried to create a callout block till now. Get some ideas. After that, who knows? You may bring some fresh new cool ideas here too.

Let's see.
1.

|💡This is a callout block |
|------------|

💡This is a callout block

2.

|💡Caution! |
|------------|
| This is a callout block |

💡Caution!
This is a callout block

3.

|💡 | This is a callout block |
|----| --------|

💡	This is a callout block

4.

|💡 |
|------------|
| This is a callout block |

💡
This is a callout block

So, these are the four ways I write callouts here in Dev Community Posts.

Callout Blocks with Custom Vibe

Well, you may have already figured out that the emoji and text we place there are totally dependent on what we decide. So, Based on different contexts we can produce different looking callouts. What I mean is shown below. -

For example, using the 2nd method, we will show some tips in a callout.

| 💯 😎 Pro Tip |
| -------------- |
| Write the tip here |

💯 😎 Pro Tip
Write the tip here

In The End

So, this is all about it. Let me know which one is your favourite way among the four.
Also if you've got some cool ideas, let me know in the comments.

If you found it useful, please consider to share this article with your other developer friends.

Feel free to connect with me on Twitter, LinkedIn, and GitHub.

Linux users are hackers! Happy Hacking! 🐱‍💻