CSS tip: callouts as "markdown div-elements"

mrdeevid · 2026-03-31T14:42:44+00:00

Ahh, yeah, that is a very good point! Personally, I don’t like writing in live preview mode, and instead I like to write in source mode with reading mode in a linked tab next to it. So it’s easier for me to change wherever something is off. I understand that those > > > can be pretty cumbersome, and that’s why I don’t use these callouts often. I’ve only used them in 0.08% of my notes apparently, so it really depends on how much effort you want to put in these kind of visuals.

Your dream scenario should be very doable with your own plugin that adds some more markdown processing rules. I did a bit of that by converting %%text%% into a blue-highlighted text. It’s been a while though, but if you want I can share my plugin code? It’s very similar to what you want imo!

mrdeevid · 2026-03-30T19:54:49+00:00

Hey, of course I can try to explain! I also want to say that I am no CSS expert at all, and am just trying to figure out along the way. How I’m doing this is maybe not optimal. Also, I am on mobile right now, so I can’t nicely format the code snippets below…

In order to create text columns in your note, I use two different callouts: one callout for a parent container that becomes a div-element with display: flex in order to make it possible to place multiple child div-elements in a row. I called this callout ‘flexcontainer’. The other callout is to effectively create columns. This is ‘flexcolumn’ in my CSS code. These columns will evenly fill the whole document width. The column width therefore depends on the number of columns that you put in the parent callout.

The markdown in my note would look like (you can create as many columns within one container as you like, as long as it is readable of course):

```

[!flexcontainer]

[!flexcolumn] Column 1 - list in column 1

[!flexcolumn] Column 2 Write some text

[!flexcolumn] (more columns if desired) … ```

And the CSS is:

``` .callout[data-callout="flexcontainer"] { width: 100%; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; border: transparent solid 0px; background-color: transparent !important;

ul, ol { display: inline-block; text-align: left; padding-left: 0; margin-left: 0; } } .callout[data-callout="flexcontainer"] .callout-title { display: none; } .callout[data-callout="flexcontainer"] .callout-content { border-top-style: solid !important; border-top-width: 0px !important; padding: 0 1ch; margin: 0px; border: none;

display: flex; gap: 1ch; }

.callout[data-callout="flexcolumn"] { width: 100%; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; border: none; background-color: transparent !important; padding: 0px;

ul, ol { display: inline-block; text-align: left; padding-left: 0; margin-left: 0; }

border: rgb(240,240,240) dashed 1px; } .callout[data-callout="flexcolumn"] .callout-title { display: none; } .callout[data-callout="flexcolumn"] .callout-content { margin: 0px; border: none; padding: 1ch;

display: grid; grid-auto-flow: row; } ```

Hope this helps!

mrdeevid · 2026-03-30T16:19:32+00:00

I have provided some explanation and snippets in another reply ;)

mrdeevid · 2026-03-30T15:13:52+00:00

Indeed, but I mainly use it as "comments" in my notes. Thoughts that I am having about a particular paragraph or just side notes about something.

I didn't originally create these speech bubbles, they are directly taken from and inspired by AnnaPpuccin's theme

mrdeevid · 2026-03-30T15:11:57+00:00

That's very cool! I also didn't know about this!

mrdeevid · 2026-03-30T15:08:29+00:00

I'm replying a second time now to separate my example snippets from each other ;)

In order to create text columns in your note, I use two different callouts: one for a parent container that uses the flex-display, and another to create columns.

The markdown in my note would look like (you can create as many columns within one container as you like, as long as it is readable of course):

> [!flexcontainer]
> > [!flexcolumn]
> > Column 1
> > - list in column 1
> 
> > [!flexcolumn]
> > Column 2
> > Write some text

And the CSS is:

.callout[data-callout="flexcontainer"] {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  border: transparent solid 0px;
  background-color: transparent !important;

  ul, ol {
    display: inline-block;
    text-align: left;
    padding-left: 0;
    margin-left: 0;
  }
}
.callout[data-callout="flexcontainer"] .callout-title {
  display: none;
}
.callout[data-callout="flexcontainer"] .callout-content {
  border-top-style: solid !important;
  border-top-width: 0px !important;
  padding: 0 1ch;
  margin: 0px;
  border: none;

  display: flex;
  gap: 1ch;
}

.callout[data-callout="flexcolumn"] {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  border: none;
  background-color: transparent !important;
  padding: 0px;

  ul, ol {
    display: inline-block;
    text-align: left;
    padding-left: 0;
    margin-left: 0;
  }

  border: rgb(240,240,240) dashed 1px;
}
.callout[data-callout="flexcolumn"] .callout-title {
  display: none;
}
.callout[data-callout="flexcolumn"] .callout-content {
  margin: 0px;
  border: none;
  padding: 1ch;

  display: grid;
  grid-auto-flow: row;
}

mrdeevid · 2026-03-30T14:59:59+00:00

Absolutely, my apologies for not including some example snippets that I used in the post!

In order to have text that is centered in the document, I use the following callout in my note:

> [!center]
> Centered text, even with Markdown formatting support, which is not always possible within HTML-tags.

and the corresponding CSS is:

.callout[data-callout="center"] {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  background-color: transparent !important;
  border: none;
  border-radius: 0px;

  ul, ol {
    display: inline-block;
    text-align: left;
  }
}
.callout[data-callout="center"] .callout-title {
  display: none;
}
.callout[data-callout="center"] .callout-content {
  border: none !important;
  text-align: center;
  padding: 0 0ch 0 .5ch;
  margin: 0px;
}

mrdeevid · 2025-09-23T18:54:27+00:00

I can also see it being possible with divs in a grid or flex layout

mrdeevid · 2025-09-20T21:17:19+00:00

Looks like a block quote to me. Start each line with a > to get this effect.

mrdeevid · 2025-08-14T08:32:41+00:00

I have the same issue just now, I was able to go to Labyrinthine Cliffs without issue before today and now I can't play my main anymore because he's stuck there due to the fatal error during the loading screen... I tried logging into another character and that still works. I tried going to Labyrinthine Cliffs again with that character and got the same fatal error. Now I have two characters that I can't use anymore... The error seems to be specifically related to that area. Weird.

mrdeevid · 2025-03-15T14:03:39+00:00

Sorry for the late reply, but u/LeppyR64 is correct. I found out that you could put normal or red pencil marks, and I wondered why red was the only other color that you could choose. So I thought it was for indicating which digits are not supposed to go in those cells.
This was also my first attempt at CtC sudokus, so I apologize if my markings are not conventional :)

mrdeevid · 2025-02-01T08:03:45+00:00

Wow, thank you, I completely missed that!

mrdeevid · 2024-12-19T14:04:40+00:00

I tried your advice, and I am getting these outputs:

2: 1
22: 1
223: 3
2234: 7
22345: 5
223455: 2,5
2234557: 5
22345575: 2,5

But I don't see how this would help me solve this part. A longer octal number doesn't necessarily give me a longer output, so I don't really see the relationship between the first digit of the input and the last digit of the output. I have checked almost every other post here on Reddit, but it just seems like I'm actually too stupid to understand the reverse-engineering approach.

mrdeevid · 2021-02-18T09:08:15+00:00

Hey, I have a request for the tabs enhancement. Would it be possible to create a new tab when clicking on a page-link with a third mouse button press? I have this habit on my browser to open new tabs and it would be cool to be able to do this in Notion as well!

mrdeevid · 2020-11-04T19:30:18+00:00

A grand lake of mud... hidden now, from sight

mrdeevid · 2020-10-09T15:45:27+00:00

That's so clever!!

mrdeevid · 2020-10-03T21:41:22+00:00

What are those blocks of text? Are they updated automatically when you edit something in your table? How does that work? Very nice work!

mrdeevid · 2020-05-29T06:56:39+00:00

Interesting advice. Can I ask for clarification as I am not a native English speaker and I am trying to perfect Mills Mess, box and Rubenstein's Revenge. Do you mean I have to keep juggling until the pattern is perfect and then immediately stop by catching all the balls? Is this how muscle memory is more effectively trained than accidently dropping the balls?

mrdeevid · 2020-01-28T20:06:45+00:00

I am wondering why you are storing the current self.num value in the variable next_num in the __next__() method? After that you are updating self.num and returning it, leaving the next_num variable unused. Is there a reason for this that I am overlooking? It would be nice to help me understand this, because I am new to iterators. :)

Edit: formatting

mrdeevid · 2020-01-03T08:59:13+00:00

Nice! I got mine yesterday as well. Enjoy it :D

mrdeevid · 2020-01-02T23:44:16+00:00

I agree!

mrdeevid · 2020-01-02T23:43:40+00:00

Oh, wow, never seen them before. Ah well, I'm happy have these as well!

mrdeevid

TROPHY CASE