Search

Everything You Need to Know About KaTex Equation for Notion Aesthetic

post type
notion
aesthetic
status
published
author
created time
2024/05/22 04:33
3 more properties
Everything You Need to Know About Using KaTex Equation for Aesthetic Purposes in Notion
Hey guys!
Welcome back to my blog!
In Notion, the default options for customizing text font and color are limited, but did you know that you can gain more customization option using the KaTeX equation? KaTex is primarily used to render complex math equations and symbols. It supports various functions for this purpose. Additionally, it also provides options to style, color, and resize the text, as well as change its font.
In this blog, I will introduce some extra features of KaTeX that you can use to enhance your Notion aesthetic
Scroll down to find out more.

How to use Katex equation

1.
To use the KaTeX Equation, first, type in the KaTeX function.
It typically has the format \function {input 1} {input 2}
•
example: \color {blue} {Hello World}
2.
Next, select the text and on the menu bar either click on Equation or use the shortcut Shift + Cmd + E.
3.
If you're aiming to apply multiple functions, here's how to do that:
•
Let's say you have two functions: \function1 and \function2 {input-1}
◦
You can combine them as follows:
\function1 \function2 {input-1}
•
If you have a function \function1 {input-1} {input-2} and \function2 {input-2}. (input-2 is the same type of input)
◦
You can combine them as follows: \function1 {input-1} {\function2 {input 2}}
◦
In contrast to the first example where the functions are joined together, in this case, \function2 s nested at the shared input
•
Example:
◦
Let’s say we are applying \tiny and \colorbox{color-input}{text-input} togehter. We will set color-input to lightblue and text-input to “hi”
▪
Type in \tiny \colorbox{lightblue}{hi} → hi\tiny \colorbox{lightblue}{hi}
◦
Let's say we are applying \textsf{hi} and \color{color-input}{text-input}. We will set color-input to lightblue and text-input to “hi”
▪
Type in \colorbox{lightblue}{\textsf{hi}} → hi\colorbox{lightblue}{\textsf{hi}}
▪
Type in \colorbox{maroon}{\color{white}{hello~world}} → hello world\colorbox{maroon}{\color{white}{hello~world}}

Styling fonts

Font Family
KaTeX function
Output
remark
Roman (serif)
\textrm{hello~world}, \textup{hello~world}, \text{hello~world}, \rm {hello~world}, \textnormal{hello~world}, \textmd{hello~world}
hello world\mathrm{hello~world}
upright
Roman (serif)
\textbf{hello~world}, \bf{hello~world}
hello world\mathbf{hello~world}
bold, upright
Roman (serif)
\textit{hello~world}, \it{hello~world}
hello world\mathit{hello~world}
Italic
Sans-serif
\textsf{hello~world}, \sf{hello~world}
hello world\mathsf{hello~world}
Typewriter
\texttt{hello~world}, \tt{hello~world}
hello world\mathtt{hello~world}
Calligraphic
\cal{HELLO~world}
HELLO world\mathcal{HELLO~world}
Use captial letter
Script
\mathscr{HELLO~world}
HELLO world\mathscr{HELLO~world}
Use captial letter, cannot be joined with \colorbox
Fraktur
\mathfrak{hello~world}, \frak{Ab0}
hello world\mathfrak{hello~world}
Use captial letter, cannot be joined with \colorbox
Blackboard Bold
\Bbb{HELLO~world} \mathbb{HELLO~world}
HELLO world\Bbb{HELLO~world}
Use captial letter, cannot be joined with \colorbox

Sizing font

KaTeX function
Output
\Huge{Hello~World}
Hello World\Huge{Hello~World}
\huge{Hello~World}
Hello World\huge{Hello~World}
\LARGE{Hello~World}
Hello World\LARGE{Hello~World}
\Large{Hello~World}
Hello World\Large{Hello~World}
\large{Hello~World}
Hello World\large{Hello~World}
\normalsize{Hello~World}
Hello World\normalsize{Hello~World}
\small{Hello~World}
Hello World\small{Hello~World}
\footnotesize{Hello~World}
Hello World\footnotesize{Hello~World}
\scriptsize{Hello~World}
Hello World\scriptsize{Hello~World}
\tiny{Hello~World}
Hello World\tiny{Hello~World}

Colored font

Use this function to add font colour
\color{color-input}{text-input}
YAML
복사
•
The color-input can be default colors set by KaTeX (refer to the table below) or any hex color value. The link will direct you to a color hex value
•
For the text input, use '~' to insert spaces between words.
Here are some example:
•
\color{hotpink}{hello~world} → Hello World\color{hotpink}{Hello~World}
•
\color{#60d6ca}{hello~world} → Hello World\color{#60d6ca}{Hello~World}

Colored box

Use this fucntion to place your font in a colored box
\colorbox{color-input}{text-input}
YAML
복사
+ Want to add border around the colorbox? Use KaTex function?
\fcolorbox{border-color-input}{color-input}{text-input}
YAML
복사
•
Similar to \color, The color-input can be default colors set by KaTeX (refer to the table below) or any hex color value. The link will direct you to a color hex value
•
For the text input, use '~' to insert spaces between words.
Here are some examples:
•
\colorbox{gold}{hello~world} → hello world\colorbox{gold}{hello~world}
•
\fcolorbox{darksalmon}{lightyellow}{hello~world} → hello world\fcolorbox{darksalmon}{lightyellow}{hello~world}
•
\colorbox{maroon}{\color{white}{hello~world}} → hello world\colorbox{maroon}{\color{white}{hello~world}}

Text Decor

here are some lists of text decors you can use to decorate your text!
Katex function
Output
Katex function
Output
Katex function
Output
\diamond
⋄\diamond
\Diamond
◊\Diamond
\blacklozenge
⧫\blacklozenge
\diamondsuit
♢\diamondsuit
\clubsuit
♣\clubsuit
\star
⋆\star
\bigstar
★\bigstar
\spades
♠\spades
\hearts
\utilde{hello~world}
hello world~\utilde{hello~world}

Default named color

here is the list of default named CSS colors!
color name
sample
color name
sample
color name
sample
color name
sample
White
       \colorbox{White}{~~~~~~~}
Snow
       \colorbox{Snow}{~~~~~~~}
Ivory
       \colorbox{Ivory}{~~~~~~~}
Linen
       \colorbox{Linen}{~~~~~~~}
LavenderBlush
       \colorbox{LavenderBlush}{~~~~~~~}
MintCream
       \colorbox{MintCream}{~~~~~~~}
AliceBlue
       \colorbox{AliceBlue}{~~~~~~~}
GhostWhite
       \colorbox{GhostWhite}{~~~~~~~}
WhiteSmoke
       \colorbox{WhiteSmoke}{~~~~~~~}
Seashell
       \colorbox{Seashell}{~~~~~~~}
Beige
       \colorbox{Beige}{~~~~~~~}
OldLace
       \colorbox{OldLace}{~~~~~~~}
FloralWhite
       \colorbox{FloralWhite}{~~~~~~~}
AntiqueWhite
       \colorbox{AntiqueWhite}{~~~~~~~}
PapayaWhip
       \colorbox{PapayaWhip}{~~~~~~~}
BlanchedAlmond
       \colorbox{BlanchedAlmond}{~~~~~~~}
Bisque
       \colorbox{Bisque}{~~~~~~~}
PeachPuff
       \colorbox{PeachPuff}{~~~~~~~}
NavajoWhite
       \colorbox{NavajoWhite}{~~~~~~~}
Moccasin
       \colorbox{Moccasin}{~~~~~~~}
Cornsilk
       \colorbox{Cornsilk}{~~~~~~~}
LemonChiffon
       \colorbox{LemonChiffon}{~~~~~~~}
LightGoldenRodYellow
       \colorbox{LightGoldenRodYellow}{~~~~~~~}
LightYellow
       \colorbox{LightYellow}{~~~~~~~}
Yellow
       \colorbox{Yellow}{~~~~~~~}
Gold
       \colorbox{Gold}{~~~~~~~}
LightYellow
       \colorbox{LightYellow}{~~~~~~~}
PaleGoldenRod
       \colorbox{PaleGoldenRod}{~~~~~~~}
Khaki
       \colorbox{Khaki}{~~~~~~~}
DarkKhaki
       \colorbox{DarkKhaki}{~~~~~~~}
Orange
       \colorbox{Orange}{~~~~~~~}
DarkOrange
       \colorbox{DarkOrange}{~~~~~~~}
Coral
       \colorbox{Coral}{~~~~~~~}
Tomato
       \colorbox{Tomato}{~~~~~~~}
OrangeRed
       \colorbox{OrangeRed}{~~~~~~~}
Red
       \colorbox{Red}{~~~~~~~}
Crimson
       \colorbox{Crimson}{~~~~~~~}
DeepPink
       \colorbox{DeepPink}{~~~~~~~}
HotPink
       \colorbox{HotPink}{~~~~~~~}
Pink
       \colorbox{Pink}{~~~~~~~}
LightPink
       \colorbox{LightPink}{~~~~~~~}
PaleVioletRed
       \colorbox{PaleVioletRed}{~~~~~~~}
Maroon
       \colorbox{Maroon}{~~~~~~~}
DarkRed
       \colorbox{DarkRed}{~~~~~~~}
Brown
       \colorbox{Brown}{~~~~~~~}
FireBrick
       \colorbox{FireBrick}{~~~~~~~}
IndianRed
       \colorbox{IndianRed}{~~~~~~~}
RosyBrown
       \colorbox{RosyBrown}{~~~~~~~}
LightCoral
       \colorbox{LightCoral}{~~~~~~~}
Salmon
       \colorbox{Salmon}{~~~~~~~}
DarkSalmon
       \colorbox{DarkSalmon}{~~~~~~~}
LightSalmon
       \colorbox{LightSalmon}{~~~~~~~}
Sienna
       \colorbox{Sienna}{~~~~~~~}
Peru
       \colorbox{Peru}{~~~~~~~}
BurlyWood
       \colorbox{BurlyWood}{~~~~~~~}
SandyBrown
       \colorbox{SandyBrown}{~~~~~~~}
Chocolate
       \colorbox{Chocolate}{~~~~~~~}
SaddleBrown
       \colorbox{SaddleBrown}{~~~~~~~}
Wheat
       \colorbox{Wheat}{~~~~~~~}
DarkGoldenRod
       \colorbox{DarkGoldenRod}{~~~~~~~}
GoldenRod
       \colorbox{Olive}{~~~~~~~}
Olive
       \colorbox{Olive}{~~~~~~~}
YellowGreen
       \colorbox{YellowGreen}{~~~~~~~}
OliveDrab
       \colorbox{OliveDrab}{~~~~~~~}
GreenYellow
       \colorbox{GreenYellow}{~~~~~~~}
Chartreuse
       \colorbox{Chartreuse}{~~~~~~~}
LawnGreen
       \colorbox{LawnGreen}{~~~~~~~}
Lime
       \colorbox{Lime}{~~~~~~~}
LimeGreen
       \colorbox{LimeGreen}{~~~~~~~}
PaleGreen
       \colorbox{PaleGreen}{~~~~~~~}
LightGreen
       \colorbox{LightGreen}{~~~~~~~}
MediumSpringGreen
       \colorbox{MediumSpringGreen}{~~~~~~~}
SpringGreen
       \colorbox{SpringGreen}{~~~~~~~}
MediumSeaGreen
       \colorbox{MediumSeaGreen}{~~~~~~~}
SeaGreen
       \colorbox{SeaGreen}{~~~~~~~}
ForestGreen
       \colorbox{ForestGreen}{~~~~~~~}
Green
       \colorbox{Green}{~~~~~~~}
DarkGreen
       \colorbox{DarkGreen}{~~~~~~~}
Cyan
       \colorbox{Cyan}{~~~~~~~}
LightCyan
       \colorbox{LightCyan}{~~~~~~~}
PaleTurquoise
       \colorbox{PaleTurquoise}{~~~~~~~}
Aquamarine
       \colorbox{Aquamarine}{~~~~~~~}
Turquoise
       \colorbox{Turquoise}{~~~~~~~}
MediumTurquoise
       \colorbox{MediumTurquoise}{~~~~~~~}
DarkTurquoise
       \colorbox{DarkTurquoise}{~~~~~~~}
LightSeaGreen
       \colorbox{LightSeaGreen}{~~~~~~~}
CadetBlue
       \colorbox{CadetBlue}{~~~~~~~}
DarkCyan
       \colorbox{DarkCyan}{~~~~~~~}
Teal
       \colorbox{Teal}{~~~~~~~}
Aqua
       \colorbox{Aqua}{~~~~~~~}
DarkSlateGray
       \colorbox{DarkSlateGray}{~~~~~~~}
DarkSlateBlue
       \colorbox{DarkSlateBlue}{~~~~~~~}
CornflowerBlue
       \colorbox{CornflowerBlue}{~~~~~~~}
RoyalBlue
       \colorbox{RoyalBlue}{~~~~~~~}
LightSteelBlue
       \colorbox{LightSteelBlue}{~~~~~~~}
LightSkyBlue
       \colorbox{LightSkyBlue}{~~~~~~~}
SkyBlue
       \colorbox{SkyBlue}{~~~~~~~}
DeepSkyBlue
       \colorbox{DeepSkyBlue}{~~~~~~~}
DodgerBlue
       \colorbox{DodgerBlue}{~~~~~~~}
SteelBlue
       \colorbox{SteelBlue}{~~~~~~~}
LightSlateGray
       \colorbox{LightSlateGray}{~~~~~~~}
SlateGray
       \colorbox{SlateGray}{~~~~~~~}
SlateBlue
       \colorbox{SlateBlue}{~~~~~~~}
MidnightBlue
       \colorbox{MidnightBlue}{~~~~~~~}
Navy
       \colorbox{Navy}{~~~~~~~}
MediumBlue
       \colorbox{MediumBlue}{~~~~~~~}
Blue
       \colorbox{Blue}{~~~~~~~}
MediumSlateBlue
       \colorbox{MediumSlateBlue}{~~~~~~~}
Purple
       \colorbox{Purple}{~~~~~~~}
BlueViolet
       \colorbox{BlueViolet}{~~~~~~~}
Indigo
       \colorbox{Indigo}{~~~~~~~}
DarkOrchid
       \colorbox{DarkOrchid}{~~~~~~~}
DarkViolet
       \colorbox{DarkViolet}{~~~~~~~}
MediumOrchid
       \colorbox{MediumOrchid}{~~~~~~~}
Thistle
       \colorbox{Thistle}{~~~~~~~}
Plum
       \colorbox{Plum}{~~~~~~~}
Violet
       \colorbox{Violet}{~~~~~~~}
Orchid
       \colorbox{Orchid}{~~~~~~~}
Magenta
       \colorbox{Magenta}{~~~~~~~}
Fuchsia
       \colorbox{Fuchsia}{~~~~~~~}
MediumPurple
       \colorbox{MediumPurple}{~~~~~~~}
RebeccaPurple
       \colorbox{RebeccaPurple}{~~~~~~~}
Lavender
       \colorbox{Lavender}{~~~~~~~}

Conclusion

Thank you for reading this tutorial! If you found it helpful, consider subscribing to my newsletter to not miss any updates. Also, feel free to follow me on social media for more updates.
Happy Notion(ing)!