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: {