Making Notion style callout in Typora using custom CSS

1_Typora_Callout.md

Making Notion style callout in Typora using custom CSS

Do you want this type of callouts in typora?

It's simple.

• Copy the contents of callout.css at the bottom of your user base.user.css file.
  • You'll the find the base.user.css in typora theme folder. (Preference > Appearance > "Open theme folder")
  • If no base.user.css file is found in that folder, create one.
• Write callouts in html blockquote, with a special style property.

<blockquote style="-x-type: success;">Done! You have completed all the steps!</blockquote>
<blockquote style="-x-type: info;">This is an information that may help you. </blockquote>
<blockquote style="-x-type: warning;">Double check your ID. There's no undo.</blockquote>
<blockquote style="-x-type: error;">You are not eligible for this feature.</blockquote>

Done!

2_callout.css

/* Make callouts from blockquote { */
#write blockquote[style*="-x-type:"] {
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 1px 3px #bbb;
}

#write blockquote[style*="-x-type: success"] {
    background-color: #f0fff0;
    color: #004d00;
    border-color: #004d00;
}

#write blockquote[style*="-x-type: info"] {
    background-color: aliceblue;
    color: darkblue;
    border-color: darkblue;
}

#write blockquote[style*="-x-type: warning"] {
    background-color: #fefee9;
    color: darkred;
    border-color: darkred;
}

#write blockquote[style*="-x-type: error"] {
    background-color: #faf4f4;
    color: #bf1717;
    border-color: #bf1717;
}

/* } Make callouts from blockquote  */

Thanks! I was missing callouts and kept looking for a solution. This works just fine for me. I replaced blockquote by span though and added display: block;. This stops Typora from treating it as an HTML block and it's easier to edit I think (you can directly select the position you want to edit and don't have to select the whole block first).
Combining this with AutoKey, which lets you specify a cursor position inside the tags and which is able to restrict the macros to Typora, I can simply press Alt+Number now to add one of the callouts. Super handy. 🙂

Edit: Oh and by using span, you can use markdown inside the callouts, which won't work in HTML blocks.

@0x7969 Thanks a lot.
I am really feeling awesome to know it helped you :)

BTW, How did you do this?

I replaced blockquote by span though and added display: block;

:)

BTW, How did you do this?

Just replace blockquote with span and add display: block; to the first declaration like this:

#write span[style*="-x-type:"] {
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 1px 3px #bbb;
    display: block;
}

#write span[style*="-x-type: success"] {
    background-color: #f0fff0;
    color: #004d00;
    border-color: #004d00;
}

#write span[style*="-x-type: info"] {
    background-color: aliceblue;
    color: darkblue;
    border-color: darkblue;
}

#write span[style*="-x-type: warning"] {
    background-color: #fefee9;
    color: darkred;
    border-color: darkred;
}

#write span[style*="-x-type: error"] {
    background-color: #faf4f4;
    color: #bf1717;
    border-color: #bf1717;
}