feat: typography and shiki

src/main.postcss

@@ -15,23 +15,6 @@ html.dark {
   background: #222;
 }
 
-.markdown-body {
-  max-width: 300px;
-  @apply m-auto text-left;
-
-  h3 {
-    @apply text-center;
-  }
-
-  a {
-    @apply opacity-50 hover:opacity-100 hover:text-teal-600;
-  }
-
-  p {
-    @apply my-4;
-  }
-}
-
 #nprogress {
   pointer-events: none;
 
@@ -60,3 +43,19 @@ html.dark {
     opacity-75 transition duration-200 ease-in-out
     hover:opacity-100 hover:text-teal-600;
 }
+
+.shiki {
+  text-align: left;
+}
+
+.shiki-light {
+  background: #fafafa !important;
+}
+
+html.dark .shiki-light {
+  display: none;
+}
+
+html:not(.dark) .shiki-dark {
+  display: none;
+}

src/pages/about.md

@@ -5,7 +5,14 @@
 
 ### About
 
-[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. It has file-based routing, components auto importing, markdown support, i18n, PWA and uses Tailwind v2 for UI.
+[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. It has **file-based routing**, **components auto importing**, **markdown support**, i18n, PWA and uses **Tailwind** v2 for UI.
 
+```js
+// syntax highlighting example
+function vitesse() {
+  const foo = 'bar'
+  console.log(foo)
+}
+```
 
 Check out the [GitHub repo](https://github.com/antfu/vitesse) for more details.