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  */

:)

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;
}