diff --git a/README.md b/README.md
index 664a3db..67eed40 100644
--- a/README.md
+++ b/README.md
@@ -84,8 +84,7 @@ Mocking up web app with Vitesse(speed)
- [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Directly use Vue Composition API and others without importing
- [`vite-plugin-pwa`](https://github.com/antfu/vite-plugin-pwa) - PWA
- [`vite-plugin-vue-markdown`](https://github.com/antfu/vite-plugin-vue-markdown) - Markdown as components / components in Markdown
- - [`markdown-it-prism`](https://github.com/jGleitz/markdown-it-prism) - [Prism](https://prismjs.com/) for syntax highlighting
- - [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars) - customizable Prism.js theme using CSS variables
+ - [`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
- [`vite-plugin-vue-i18n`](https://github.com/intlify/vite-plugin-vue-i18n) - Vite plugin for Vue I18n
- [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs
diff --git a/package.json b/package.json
index 1dc2efb..57f3661 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,6 @@
"@vueuse/head": "^0.7.7",
"nprogress": "^0.2.0",
"pinia": "^2.0.16",
- "prism-theme-vars": "^0.2.4",
"vue": "^3.2.37",
"vue-demi": "^0.13.5",
"vue-i18n": "^9.1.10",
@@ -38,8 +37,9 @@
"eslint-plugin-cypress": "^2.12.1",
"https-localhost": "^4.7.1",
"markdown-it-link-attributes": "^4.0.0",
- "markdown-it-prism": "^2.2.4",
+ "markdown-it-shiki": "^0.5.1",
"pnpm": "^7.6.0",
+ "shiki": "^0.10.1",
"typescript": "^4.7.4",
"unocss": "^0.44.5",
"unplugin-auto-import": "^0.10.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f4023b0..aeaeb2a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,10 +18,12 @@ specifiers:
https-localhost: ^4.7.1
markdown-it-link-attributes: ^4.0.0
markdown-it-prism: ^2.2.4
+ markdown-it-shiki: ^0.5.1
nprogress: ^0.2.0
pinia: ^2.0.16
pnpm: ^7.6.0
prism-theme-vars: ^0.2.4
+ shiki: ^0.10.1
typescript: ^4.7.4
unocss: ^0.44.5
unplugin-auto-import: ^0.10.0
@@ -68,7 +70,9 @@ devDependencies:
https-localhost: 4.7.1
markdown-it-link-attributes: 4.0.0
markdown-it-prism: 2.2.4
+ markdown-it-shiki: 0.5.1
pnpm: 7.6.0
+ shiki: 0.10.1
typescript: 4.7.4
unocss: 0.44.5_vite@3.0.2
unplugin-auto-import: 0.10.0_t6tsspf322mfsdpw2mn2hux5pq
@@ -1595,6 +1599,18 @@ packages:
fastq: 1.13.0
dev: true
+ /@pkgr/utils/2.3.0:
+ resolution: {integrity: sha512-7dIJ9CRVzBnqyEl7diUHPUFJf/oty2SeoVzcMocc5PeOUDK9KGzvgIBjGRRzzlRDaOjh3ADwH0WeibQvi3ls2Q==}
+ engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+ dependencies:
+ cross-spawn: 7.0.3
+ is-glob: 4.0.3
+ open: 8.4.0
+ picocolors: 1.0.0
+ tiny-glob: 0.2.9
+ tslib: 2.4.0
+ dev: true
+
/@polka/url/1.0.0-next.21:
resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
dev: true
@@ -3206,6 +3222,11 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
+ /define-lazy-prop/2.0.0:
+ resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
+ engines: {node: '>=8'}
+ dev: true
+
/define-properties/1.1.4:
resolution: {integrity: sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==}
engines: {node: '>= 0.4'}
@@ -4483,6 +4504,10 @@ packages:
type-fest: 0.20.2
dev: true
+ /globalyzer/0.1.0:
+ resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==}
+ dev: true
+
/globby/11.1.0:
resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
engines: {node: '>=10'}
@@ -4495,6 +4520,10 @@ packages:
slash: 3.0.0
dev: true
+ /globrex/0.1.2:
+ resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
+ dev: true
+
/graceful-fs/4.2.10:
resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
dev: true
@@ -4837,6 +4866,12 @@ packages:
resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
dev: true
+ /is-docker/2.2.1:
+ resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
+ engines: {node: '>=8'}
+ hasBin: true
+ dev: true
+
/is-extendable/0.1.1:
resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
engines: {node: '>=0.10.0'}
@@ -4989,6 +5024,13 @@ packages:
get-intrinsic: 1.1.1
dev: true
+ /is-wsl/2.2.0:
+ resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
+ engines: {node: '>=8'}
+ dependencies:
+ is-docker: 2.2.1
+ dev: true
+
/isarray/1.0.0:
resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
dev: true
@@ -5381,6 +5423,16 @@ packages:
prismjs: 1.28.0
dev: true
+ /markdown-it-shiki/0.5.1:
+ resolution: {integrity: sha512-cidjLEt5C6x/bmhyO+JqOy92M1qPF/bu6BN8nxaah/8YpOB4gA168NoLfnSSZATf6Btr/qxn3r1Ihy75b894zw==}
+ dependencies:
+ debug: 4.3.4
+ shiki: 0.10.1
+ synckit: 0.7.3
+ transitivePeerDependencies:
+ - supports-color
+ dev: true
+
/markdown-it/13.0.1:
resolution: {integrity: sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==}
hasBin: true
@@ -5702,6 +5754,15 @@ packages:
mimic-fn: 2.1.0
dev: true
+ /open/8.4.0:
+ resolution: {integrity: sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==}
+ engines: {node: '>=12'}
+ dependencies:
+ define-lazy-prop: 2.0.0
+ is-docker: 2.2.1
+ is-wsl: 2.2.0
+ dev: true
+
/optionator/0.8.3:
resolution: {integrity: sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==}
engines: {node: '>= 0.8.0'}
@@ -6447,6 +6508,14 @@ packages:
engines: {node: '>=8'}
dev: true
+ /shiki/0.10.1:
+ resolution: {integrity: sha512-VsY7QJVzU51j5o1+DguUd+6vmCmZ5v/6gYu4vyYAhzjuNQU6P/vmSy4uQaOhvje031qQMiW0d2BwgMH52vqMng==}
+ dependencies:
+ jsonc-parser: 3.0.0
+ vscode-oniguruma: 1.6.2
+ vscode-textmate: 5.2.0
+ dev: true
+
/side-channel/1.0.4:
resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
dependencies:
@@ -6731,6 +6800,14 @@ packages:
resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
dev: true
+ /synckit/0.7.3:
+ resolution: {integrity: sha512-jNroMv7Juy+mJ/CHW5H6TzsLWpa1qck6sCHbkv8YTur+irSq2PjbvmGnm2gy14BUQ6jF33vyR4DPssHqmqsDQw==}
+ engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+ dependencies:
+ '@pkgr/utils': 2.3.0
+ tslib: 2.4.0
+ dev: true
+
/temp-dir/2.0.0:
resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
engines: {node: '>=8'}
@@ -6769,6 +6846,13 @@ packages:
resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
dev: true
+ /tiny-glob/0.2.9:
+ resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
+ dependencies:
+ globalyzer: 0.1.0
+ globrex: 0.1.2
+ dev: true
+
/tinypool/0.2.4:
resolution: {integrity: sha512-Vs3rhkUH6Qq1t5bqtb816oT+HeJTXfwt2cbPH17sWHIYKTotQIFPk3tf2fgqRrVyMDVOc1EnPgzIxfIulXVzwQ==}
engines: {node: '>=14.0.0'}
@@ -6854,6 +6938,10 @@ packages:
resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
dev: true
+ /tslib/2.4.0:
+ resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
+ dev: true
+
/tsutils/3.21.0_typescript@4.7.4:
resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
engines: {node: '>= 6'}
@@ -7396,6 +7484,14 @@ packages:
- terser
dev: true
+ /vscode-oniguruma/1.6.2:
+ resolution: {integrity: sha512-KH8+KKov5eS/9WhofZR8M8dMHWN2gTxjMsG4jd04YhpbPR91fUj7rYQ2/XjeHCJWbg7X++ApRIU9NUwM2vTvLA==}
+ dev: true
+
+ /vscode-textmate/5.2.0:
+ resolution: {integrity: sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ==}
+ dev: true
+
/vue-demi/0.13.5_vue@3.2.37:
resolution: {integrity: sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw==}
engines: {node: '>=12'}
diff --git a/src/styles/main.css b/src/styles/main.css
index b1b8214..a9b54e6 100755
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -10,6 +10,7 @@ body,
html.dark {
background: #121212;
+ color-scheme: dark;
}
#nprogress {
diff --git a/src/styles/markdown.css b/src/styles/markdown.css
index 37eb4fa..df79499 100644
--- a/src/styles/markdown.css
+++ b/src/styles/markdown.css
@@ -1,58 +1,28 @@
-/* https://github.com/antfu/prism-theme-vars */
-@import 'prism-theme-vars/base.css';
+.prose pre:not(.shiki) {
+ padding: 0;
+}
-.prose {
- --prism-font-family: 'DM Mono', monospace;
+.prose .shiki {
+ font-family: 'DM Mono', monospace;
+ font-size: 1.2em;
+ line-height: 1.4;
}
.prose img {
width: 100%;
}
-html:not(.dark) .prose {
- --prism-foreground: #393a34;
- --prism-background: #fbfbfb;
- --prism-comment: #a0ada0;
- --prism-string: #b56959;
- --prism-literal: #2f8a89;
- --prism-number: #296aa3;
- --prism-keyword: #1c6b48;
- --prism-function: #6c7834;
- --prism-boolean: #1c6b48;
- --prism-constant: #a65e2b;
- --prism-deleted: #a14f55;
- --prism-class: #2993a3;
- --prism-builtin: #ab5959;
- --prism-property: #b58451;
- --prism-namespace: #b05a78;
- --prism-punctuation: #8e8f8b;
- --prism-decorator: #bd8f8f;
- --prism-regex: #ab5e3f;
- --prism-json-property: #698c96;
+.shiki-light {
+ background: #f8f8f8 !important;
+}
+.shiki-dark {
+ background: #0e0e0e !important;
}
-html.dark .prose {
- --prism-foreground: #d4cfbf;
- --prism-background: #151515;
- --prism-comment: #758575;
- --prism-string: #d48372;
- --prism-literal: #429988;
- --prism-keyword: #4d9375;
- --prism-boolean: #1c6b48;
- --prism-number: #6394bf;
- --prism-variable: #c2b36e;
- --prism-function: #a1b567;
- --prism-deleted: #a14f55;
- --prism-class: #54b1bf;
- --prism-builtin: #e0a569;
- --prism-property: #dd8e6e;
- --prism-namespace: #db889a;
- --prism-punctuation: #858585;
- --prism-decorator: #bd8f8f;
- --prism-regex: #ab5e3f;
- --prism-json-property: #6b8b9e;
- --prism-line-number: #888888;
- --prism-line-number-gutter: #eeeeee;
- --prism-line-highlight-background: #444444;
- --prism-selection-background: #444444;
+html.dark .shiki-light {
+ display: none;
+}
+
+html:not(.dark) .shiki-dark {
+ display: none;
}
diff --git a/vite.config.ts b/vite.config.ts
index 5743d84..1097f32 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -10,11 +10,9 @@ import Markdown from 'vite-plugin-vue-markdown'
import { VitePWA } from 'vite-plugin-pwa'
import VueI18n from '@intlify/vite-plugin-vue-i18n'
import Inspect from 'vite-plugin-inspect'
-import Prism from 'markdown-it-prism'
import LinkAttributes from 'markdown-it-link-attributes'
import Unocss from 'unocss/vite'
-
-const markdownWrapperClasses = 'prose prose-sm m-auto text-left'
+import Shiki from 'markdown-it-shiki'
export default defineConfig({
resolve: {
@@ -71,11 +69,16 @@ export default defineConfig({
// https://github.com/antfu/vite-plugin-vue-markdown
// Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
Markdown({
- wrapperClasses: markdownWrapperClasses,
+ wrapperClasses: 'prose prose-sm m-auto text-left',
headEnabled: true,
markdownItSetup(md) {
// https://prismjs.com/
- md.use(Prism)
+ md.use(Shiki, {
+ theme: {
+ light: 'vitesse-light',
+ dark: 'vitesse-dark',
+ },
+ })
md.use(LinkAttributes, {
matcher: (link: string) => /^https?:\/\//.test(link),
attrs: {