Skip to content

Instantly share code, notes, and snippets.

@ajaxray
Last active May 23, 2024 19:06
Show Gist options
  • Save ajaxray/d5302dfe1418ef1c5b41e758225d8215 to your computer and use it in GitHub Desktop.
Save ajaxray/d5302dfe1418ef1c5b41e758225d8215 to your computer and use it in GitHub Desktop.
Making Notion style callout in Typora using custom CSS

Making Notion style callout in Typora using custom CSS

Do you want this type of callouts in typora? CleanShot 2022-12-03 at 19 02 01@2x

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!

/* 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 */
@0x7969
Copy link

0x7969 commented Dec 7, 2022

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.

@ajaxray
Copy link
Author

ajaxray commented Dec 11, 2022

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

@0x7969
Copy link

0x7969 commented Jan 2, 2023

:)

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment