.png&blockId=9d7f44c1-9a1b-4d22-b046-ef72eb5e68cb)
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} →
◦
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}} →
▪
Type in \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} | upright | |
Roman (serif) | \textbf{hello~world}, \bf{hello~world} | bold, upright | |
Roman (serif) | \textit{hello~world},
\it{hello~world} | Italic | |
Sans-serif | \textsf{hello~world},
\sf{hello~world} | ||
Typewriter | \texttt{hello~world},
\tt{hello~world} | ||
Calligraphic | \cal{HELLO~world} | Use captial letter | |
Script | \mathscr{HELLO~world} | Use captial letter, cannot be joined with \colorbox | |
Fraktur | \mathfrak{hello~world},
\frak{Ab0} | Use captial letter, cannot be joined with \colorbox | |
Blackboard Bold | \Bbb{HELLO~world}
\mathbb{HELLO~world} | Use captial letter, cannot be joined with \colorbox |
Sizing font
KaTeX function | Output |
\Huge{Hello~World} | |
\huge{Hello~World} | |
\LARGE{Hello~World} | |
\Large{Hello~World} | |
\large{Hello~World} | |
\normalsize{Hello~World} | |
\small{Hello~World} | |
\footnotesize{Hello~World} | |
\scriptsize{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} →
•
\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} →
•
\fcolorbox{darksalmon}{lightyellow}{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 | \blacklozenge | |||
\diamondsuit | \clubsuit | \star | |||
\bigstar | \spades | \hearts | |||
\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 | Snow | Ivory | Linen | ||||
LavenderBlush | MintCream | AliceBlue | GhostWhite | ||||
WhiteSmoke | Seashell | Beige | OldLace | ||||
FloralWhite | AntiqueWhite | PapayaWhip | BlanchedAlmond | ||||
Bisque | PeachPuff | NavajoWhite | Moccasin | ||||
Cornsilk | LemonChiffon | LightGoldenRodYellow | LightYellow | ||||
Yellow | Gold | LightYellow | PaleGoldenRod | ||||
Khaki | DarkKhaki | Orange | DarkOrange | ||||
Coral | Tomato | OrangeRed | Red | ||||
Crimson | DeepPink | HotPink | Pink | ||||
LightPink | PaleVioletRed | Maroon | DarkRed | ||||
Brown | FireBrick | IndianRed | RosyBrown | ||||
LightCoral | Salmon | DarkSalmon | LightSalmon | ||||
Sienna | Peru | BurlyWood | SandyBrown | ||||
Chocolate | SaddleBrown | Wheat | DarkGoldenRod | ||||
GoldenRod | Olive | YellowGreen | OliveDrab | ||||
GreenYellow | Chartreuse | LawnGreen | Lime | ||||
LimeGreen | PaleGreen | LightGreen | MediumSpringGreen | ||||
SpringGreen | MediumSeaGreen | SeaGreen | ForestGreen | ||||
Green | DarkGreen | Cyan | LightCyan | ||||
PaleTurquoise | Aquamarine | Turquoise | MediumTurquoise | ||||
DarkTurquoise | LightSeaGreen | CadetBlue | DarkCyan | ||||
Teal | Aqua | DarkSlateGray | DarkSlateBlue | ||||
CornflowerBlue | RoyalBlue | LightSteelBlue | LightSkyBlue | ||||
SkyBlue | DeepSkyBlue | DodgerBlue | SteelBlue | ||||
LightSlateGray | SlateGray | SlateBlue | MidnightBlue | ||||
Navy | MediumBlue | Blue | MediumSlateBlue | ||||
Purple | BlueViolet | Indigo | DarkOrchid | ||||
DarkViolet | MediumOrchid | Thistle | Plum | ||||
Violet | Orchid | Magenta | Fuchsia | ||||
MediumPurple | RebeccaPurple | 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)!
links
Search
