diff --git a/src/css/_highlight.scss b/src/css/_highlight.scss
new file mode 100644
index 0000000..7d51026
--- /dev/null
+++ b/src/css/_highlight.scss
@@ -0,0 +1,66 @@
+/* Keywords, control flow, etc. */
+.token.keyword,
+.token.selector,
+.token.important,
+.token.atrule,
+.token.bold {
+  color: var(--primary);
+  font-weight: bold;
+}
+
+/* Tags, attributes */
+.token.tag,
+.token.attr-name,
+.token.property {
+  color: var(--tertiary);
+}
+
+/* Strings, functions, built-ins */
+.token.string,
+.token.function,
+.token.builtin,
+.token.symbol,
+.token.char {
+  color: var(--secondary);
+}
+
+/* Inserted (addition) */
+.token.inserted {
+  background-color: color-mix(
+    in srgb,
+    var(--tertiaryContainer) 40%,
+    transparent
+  );
+  color: var(--onTertiaryContainer);
+}
+
+/* Deleted (deletion) */
+.token.deleted {
+  background-color: color-mix(in srgb, var(--errorContainer) 40%, transparent);
+  color: var(--onErrorContainer);
+}
+
+/* Comments */
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: var(--outline);
+  font-style: italic;
+}
+
+/* Meta, decorators, annotations */
+.token.decorator,
+.token.annotation {
+  color: var(--tertiary);
+}
+
+/* Italic emphasis */
+.token.italic {
+  font-style: italic;
+}
+
+/* Bold emphasis */
+.token.bold {
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/src/css/_typography.scss b/src/css/_typography.scss
index aa86823..3fb172c 100644
--- a/src/css/_typography.scss
+++ b/src/css/_typography.scss
@@ -1,3 +1,7 @@
+@use "highlight";
+
+// ------- Highlight End -------
+
 // Cantarell
 @font-face {
   font-family: "Cantarell";
@@ -31,6 +35,8 @@
   --fontMonaspaceRadon: "Monaspace Radon";
 }
 
+// ------- Fonts End -------
+
 body {
   font-family: var(--fontCantarell), sans-serif;