feat: typography and shiki

README.md

@@ -47,6 +47,7 @@
 ### UI Frameworks
 
 - [Tailwind CSS](https://tailwindcss.com/) - with built-in dark mode!
+- [Tailwind Typography](https://github.com/tailwindlabs/tailwindcss-typography) - Typography for Tailwind
 
 ### Icons
 
@@ -60,6 +61,7 @@
 - [vite-plugin-components](https://github.com/antfu/vite-plugin-components) - components auto import
 - [vite-plugin-pwa](https://github.com/antfu/vite-plugin-pwa) - PWA
 - [vite-plugin-md](https://github.com/antfu/vite-plugin-md) - Markdown as components / components in Markdown
+  - [markdown-it-shiki](https://github.com/antfu/markdown-it-shiki) - [Shiki](https://github.com/shikijs/shiki) for syntax highlighting
 - [vue-i18n](https://github.com/intlify/vue-i18n-next) - internationalization
 - [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs
 

package.json

@@ -6,32 +6,34 @@
   },
   "dependencies": {
     "@iconify/iconify": "^2.0.0-rc.2",
-    "@vueuse/core": "^4.0.0-rc.5",
+    "@vueuse/core": "^4.0.0-rc.8",
     "nprogress": "^0.2.0",
     "vue": "^3.0.4",
     "vue-i18n": "9.0.0-beta.8",
-    "vue-router": "^4.0.0-rc.6"
+    "vue-router": "^4.0.1"
   },
   "devDependencies": {
     "@antfu/eslint-config-vue": "^0.4.3",
-    "@iconify/json": "^1.1.267",
+    "@iconify/json": "^1.1.272",
     "@purge-icons/generated": "^0.4.1",
+    "@tailwindcss/typography": "^0.3.1",
     "@types/nprogress": "^0.2.0",
-    "@typescript-eslint/eslint-plugin": "^4.9.0",
+    "@typescript-eslint/eslint-plugin": "^4.9.1",
     "@vue/compiler-sfc": "^3.0.4",
     "@vuedx/typescript-plugin-vue": "^0.2.3",
-    "autoprefixer": "^10.0.4",
-    "chromium": "^3.0.2",
+    "autoprefixer": "^10.1.0",
+    "chromium": "3.0.2",
     "cross-env": "^7.0.3",
-    "eslint": "^7.14.0",
+    "eslint": "^7.15.0",
     "esno": "^0.3.0",
-    "postcss-nested": "^5.0.1",
-    "presite": "^2.0.1",
-    "tailwindcss": "^2.0.1",
-    "typescript": "^4.1.2",
+    "markdown-it-shiki": "^0.0.2",
+    "postcss-nested": "^5.0.3",
+    "presite": "^2.0.2",
+    "tailwindcss": "^2.0.2",
+    "typescript": "^4.1.3",
     "vite": "^1.0.0-rc.13",
     "vite-plugin-components": "^0.5.0",
-    "vite-plugin-md": "^0.1.3",
+    "vite-plugin-md": "^0.1.4",
     "vite-plugin-purge-icons": "^0.4.5",
     "vite-plugin-pwa": "^0.1.7",
     "vite-plugin-voie": "^0.4.1",
@@ -39,8 +41,7 @@
   },
   "pnpm": {
     "overrides": {
-      "postcss": "8",
-      "vue-router": "next"
+      "postcss": "8"
     }
   },
   "eslintConfig": {

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.

tailwind.config.js

@@ -4,13 +4,18 @@ const colors = require('tailwindcss/colors')
 module.exports = {
   purge: {
     enabled: process.env.NODE_ENV === 'production',
-    content: [
-      './index.html',
-      './src/**/*.vue',
-      './src/**/*.js',
-      './src/**/*.ts',
-    ],
+    content: ['./index.html', './src/**/*.vue', './src/**/*.js', './src/**/*.ts'],
   },
+  variants: {
+    cursor: ['responsive', 'disabled'],
+    backgroundColor: ['dark', 'hover', 'disabled'],
+    borderColor: ['dark', 'active', 'focus', 'disabled'],
+    textColor: ['dark', 'hover', 'active', 'disabled'],
+    opacity: ['dark', 'hover', 'active', 'focus', 'disabled'],
+    typography: ['dark'],
+  },
+  darkMode: 'class',
+  plugins: [require('@tailwindcss/typography')],
   theme: {
     extend: {
       colors: {
@@ -20,14 +25,42 @@ module.exports = {
         10: '0.1',
         85: '0.85',
       },
+      typography: {
+        DEFAULT: {
+          css: {
+            color: 'inherit',
+            a: {
+              color: 'inherit',
+              opacity: 0.6,
+              '&:hover': {
+                opacity: 1,
+                color: colors.teal[600],
+              },
+            },
+            b: {
+              color: 'inherit',
+            },
+            strong: {
+              color: 'inherit',
+            },
+            em: {
+              color: 'inherit',
+            },
+            h1: {
+              color: 'inherit',
+            },
+            h2: {
+              color: 'inherit',
+            },
+            h3: {
+              color: 'inherit',
+            },
+            h4: {
+              color: 'inherit',
+            },
+          },
+        },
+      },
     },
   },
-  variants: {
-    cursor: ['responsive', 'disabled'],
-    backgroundColor: ['dark', 'hover', 'disabled'],
-    borderColor: ['dark', 'active', 'focus', 'disabled'],
-    textColor: ['dark', 'hover', 'active', 'disabled'],
-    opacity: ['dark', 'hover', 'active', 'focus', 'disabled'],
-  },
-  darkMode: 'class',
 }

vite.config.ts

@@ -4,6 +4,7 @@ import Voie from 'vite-plugin-voie'
 import PurgeIcons from 'vite-plugin-purge-icons'
 import ViteComponents from 'vite-plugin-components'
 import Markdown from 'vite-plugin-md'
+import Shiki from 'markdown-it-shiki'
 import { VitePWA } from 'vite-plugin-pwa'
 
 const alias = {
@@ -13,21 +14,30 @@ const alias = {
 const config: UserConfig = {
   alias,
   plugins: [
-
     // https://github.com/vamplate/vite-plugin-voie
     Voie({
       // load index page sync and bundled with the landing page to improve first loading time.
       // feel free to remove if you don't need it
       importMode(path: string) {
-        if (path === '/src/pages/index.vue')
-          return 'sync'
-        return 'async'
+        return path === '/src/pages/index.vue' ? 'sync' : 'async'
       },
       extensions: ['vue', 'md'],
     }),
 
     // https://github.com/antfu/vite-plugin-md
-    Markdown(),
+    Markdown({
+      // for https://github.com/tailwindlabs/tailwindcss-typography
+      wrapperClasses: 'prose prose-sm m-auto',
+      markdownItSetup(md) {
+        // https://github.com/antfu/markdown-it-shiki
+        md.use(Shiki, {
+          theme: {
+            dark: 'min-dark',
+            light: 'min-light',
+          },
+        })
+      },
+    }),
 
     // https://github.com/antfu/vite-plugin-components
     ViteComponents({
@@ -39,7 +49,9 @@ const config: UserConfig = {
       extensions: ['vue', 'md'],
 
       // allow auto import and register components used in markdown
-      customLoaderMatcher: ({ path }) => path.endsWith('.md'),
+      customLoaderMatcher({ path }) {
+        return path.endsWith('.md')
+      },
     }),
 
     // https://github.com/antfu/purge-icons