Styling marked text as callouts

6 Jun 2025

New season, new theme! I've been picking at my theme CSS again, which means many of my prior #bearblog posts are now outdated. I wanted to add update notes to these posts and visually emphasize them.

mgx's notion-like callouts for bear blog is a good option for this, but Markdown formatting syntax is not processed within block-level HTML tags,¹ which I intend to use. So I'm using the <mark> element (== in Markdown) for my callouts instead.² Normally, marked text displays as highlighted, but since I don't use highlights, I styled mine to sit within a colored box.

Here's what my callouts look like, including the Markdown and CSS, for anyone interested in something similar.

Callout style

==This is a callout.==

==This is a callout with bold text and a link.==

Markdown for callout

==This is a callout.==

==This is a callout with **bold text** and [a link](#).==

Theme CSS

mark {
  display: block;
  padding: 1.25em;
  margin: 1.5em 0; /* Space above and below the box */
  color: #000; /* Text color, change to match design */
  background-color: #eee; /* Box color, change to match design */
  border-radius: .5em;
}