I have discovered a nice way to write Callout Blocks in my posts here on
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 , .
Linux users are hackers! Happy Hacking! 🐱💻
SOCIAL SHARE CARD GENERATOR