DEV Community

Cover image for Callout Blocks in a New Way
Debajyati Dey
Debajyati Dey

Posted on

3 2 2 2 2

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.

Callout Block Image Example

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 |
|------------| 
Enter fullscreen mode Exit fullscreen mode

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 |
|------------|
Enter fullscreen mode Exit fullscreen mode
💡This is a callout block

2.

|💡Caution! |
|------------|
| This is a callout block |
Enter fullscreen mode Exit fullscreen mode
💡Caution!
This is a callout block

3.

|💡 | This is a callout block |
|----| --------|
Enter fullscreen mode Exit fullscreen mode
💡 This is a callout block

4.

|💡 |
|------------|
| This is a callout block |
Enter fullscreen mode Exit fullscreen mode
💡
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 |
Enter fullscreen mode Exit fullscreen mode
💯 😎 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.

Happy Blogging! 🐱‍💻

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay