feat: migrate to shikiji
This commit is contained in:
Anthony Fu committed
1 parent
1a42d7973b
commit
e834b528e0
6 files changed
+1018
-648
No files matched your search
@@ -91,7 +91,7 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
|
||||
- [`unplugin-vue-macros`](https://github.com/sxzz/unplugin-vue-macros) - Explore and extend more macros and syntax sugar to Vue.
|
||||
- [`vite-plugin-pwa`](https://github.com/antfu/vite-plugin-pwa) - PWA
|
||||
- [`unplugin-vue-markdown`](https://github.com/antfu/unplugin-vue-markdown) - 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
|
||||
- [`markdown-it-shikiji`](https://github.com/antfu/shikiji) - [Shiki](https://github.com/antfu/shikiji) for syntax highlighting
|
||||
- [Vue I18n](https://github.com/intlify/vue-i18n-next) - Internationalization
|
||||
- [`unplugin-vue-i18n`](https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n) - unplugin for Vue I18n
|
||||
- [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs
|
||||
|
||||
+19
-19
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"packageManager": "pnpm@8.8.0",
|
||||
"packageManager": "pnpm@8.9.0",
|
||||
"scripts": {
|
||||
"build": "vite-ssg build",
|
||||
"dev": "vite --port 3333 --open",
|
||||
@@ -18,50 +18,50 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@unhead/vue": "^1.7.4",
|
||||
"@unocss/reset": "^0.56.4",
|
||||
"@vueuse/core": "^10.4.1",
|
||||
"@unocss/reset": "^0.56.5",
|
||||
"@vueuse/core": "^10.5.0",
|
||||
"@vueuse/head": "^2.0.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.1.6",
|
||||
"vue": "^3.3.4",
|
||||
"vue-demi": "^0.14.6",
|
||||
"vue-i18n": "^9.4.1",
|
||||
"vue-i18n": "^9.5.0",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antfu/eslint-config": "^1.0.0-beta.12",
|
||||
"@antfu/eslint-config": "^1.0.0-beta.25",
|
||||
"@iconify-json/carbon": "^1.1.21",
|
||||
"@intlify/unplugin-vue-i18n": "^1.2.0",
|
||||
"@intlify/unplugin-vue-i18n": "^1.4.0",
|
||||
"@types/markdown-it-link-attributes": "^3.0.2",
|
||||
"@types/nprogress": "^0.2.1",
|
||||
"@unocss/eslint-config": "^0.56.4",
|
||||
"@vitejs/plugin-vue": "^4.3.4",
|
||||
"@vue-macros/volar": "^0.15.0",
|
||||
"@unocss/eslint-config": "^0.56.5",
|
||||
"@vitejs/plugin-vue": "^4.4.0",
|
||||
"@vue-macros/volar": "^0.16.1",
|
||||
"@vue/test-utils": "^2.4.1",
|
||||
"critters": "^0.0.20",
|
||||
"cross-env": "^7.0.3",
|
||||
"cypress": "^13.3.0",
|
||||
"cypress-vite": "^1.4.2",
|
||||
"eslint": "^8.50.0",
|
||||
"eslint": "^8.51.0",
|
||||
"eslint-plugin-cypress": "^2.15.1",
|
||||
"https-localhost": "^4.7.1",
|
||||
"lint-staged": "^14.0.1",
|
||||
"markdown-it-link-attributes": "^4.0.1",
|
||||
"markdown-it-shiki": "^0.9.0",
|
||||
"pnpm": "^8.8.0",
|
||||
"markdown-it-shikiji": "^0.6.10",
|
||||
"pnpm": "^8.9.0",
|
||||
"rollup": "^3.29.3",
|
||||
"shiki": "^0.14.4",
|
||||
"shikiji": "^0.6.10",
|
||||
"simple-git-hooks": "^2.9.0",
|
||||
"taze": "^0.11.3",
|
||||
"typescript": "^5.2.2",
|
||||
"unocss": "^0.56.4",
|
||||
"unocss": "^0.56.5",
|
||||
"unplugin-auto-import": "^0.16.6",
|
||||
"unplugin-vue-components": "^0.25.2",
|
||||
"unplugin-vue-macros": "^2.6.0",
|
||||
"unplugin-vue-macros": "^2.6.1",
|
||||
"unplugin-vue-markdown": "^0.24.3",
|
||||
"vite": "^4.4.9",
|
||||
"vite": "^4.4.11",
|
||||
"vite-bundle-visualizer": "^0.10.0",
|
||||
"vite-plugin-inspect": "^0.7.38",
|
||||
"vite-plugin-inspect": "^0.7.40",
|
||||
"vite-plugin-pages": "^0.31.0",
|
||||
"vite-plugin-pwa": "^0.16.5",
|
||||
"vite-plugin-vue-devtools": "^1.0.0-rc.5",
|
||||
@@ -69,8 +69,8 @@
|
||||
"vite-plugin-webfont-dl": "^3.7.6",
|
||||
"vite-ssg": "^0.23.3",
|
||||
"vite-ssg-sitemap": "^0.5.1",
|
||||
"vitest": "^0.34.5",
|
||||
"vue-tsc": "^1.8.15"
|
||||
"vitest": "^0.34.6",
|
||||
"vue-tsc": "^1.8.18"
|
||||
},
|
||||
"simple-git-hooks": {
|
||||
"pre-commit": "pnpm lint-staged"
|
||||
|
||||
Generated
+975
-608
File diff suppressed because it is too large.
Load diff
Vendored
+6
@@ -37,6 +37,7 @@ declare global {
|
||||
const h: typeof import('vue')['h']
|
||||
const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
|
||||
const inject: typeof import('vue')['inject']
|
||||
const injectLocal: typeof import('@vueuse/core')['injectLocal']
|
||||
const isDark: typeof import('./composables/dark')['isDark']
|
||||
const isDefined: typeof import('@vueuse/core')['isDefined']
|
||||
const isProxy: typeof import('vue')['isProxy']
|
||||
@@ -68,6 +69,7 @@ declare global {
|
||||
const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
|
||||
const preferredDark: typeof import('./composables/dark')['preferredDark']
|
||||
const provide: typeof import('vue')['provide']
|
||||
const provideLocal: typeof import('@vueuse/core')['provideLocal']
|
||||
const reactify: typeof import('@vueuse/core')['reactify']
|
||||
const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
|
||||
const reactive: typeof import('vue')['reactive']
|
||||
@@ -329,6 +331,7 @@ declare module 'vue' {
|
||||
readonly h: UnwrapRef<typeof import('vue')['h']>
|
||||
readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
|
||||
readonly inject: UnwrapRef<typeof import('vue')['inject']>
|
||||
readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
|
||||
readonly isDark: UnwrapRef<typeof import('./composables/dark')['isDark']>
|
||||
readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
|
||||
readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
|
||||
@@ -360,6 +363,7 @@ declare module 'vue' {
|
||||
readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
|
||||
readonly preferredDark: UnwrapRef<typeof import('./composables/dark')['preferredDark']>
|
||||
readonly provide: UnwrapRef<typeof import('vue')['provide']>
|
||||
readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
|
||||
readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
|
||||
readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
|
||||
readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
|
||||
@@ -615,6 +619,7 @@ declare module '@vue/runtime-core' {
|
||||
readonly h: UnwrapRef<typeof import('vue')['h']>
|
||||
readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
|
||||
readonly inject: UnwrapRef<typeof import('vue')['inject']>
|
||||
readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
|
||||
readonly isDark: UnwrapRef<typeof import('./composables/dark')['isDark']>
|
||||
readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
|
||||
readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
|
||||
@@ -646,6 +651,7 @@ declare module '@vue/runtime-core' {
|
||||
readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
|
||||
readonly preferredDark: UnwrapRef<typeof import('./composables/dark')['preferredDark']>
|
||||
readonly provide: UnwrapRef<typeof import('vue')['provide']>
|
||||
readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
|
||||
readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
|
||||
readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
|
||||
readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
|
||||
|
||||
+8
-11
@@ -12,17 +12,14 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.shiki-light {
|
||||
background: #f8f8f8 !important;
|
||||
}
|
||||
.shiki-dark {
|
||||
background: #0e0e0e !important;
|
||||
.shiki,
|
||||
.shiki span {
|
||||
color: var(--shiki-light);
|
||||
background: var(--shiki-light-bg);
|
||||
}
|
||||
|
||||
html.dark .shiki-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html:not(.dark) .shiki-dark {
|
||||
display: none;
|
||||
html.dark .shiki,
|
||||
html.dark .shiki span {
|
||||
color: var(--shiki-dark);
|
||||
background: var(--shiki-dark-bg);
|
||||
}
|
||||
+9
-9
@@ -13,7 +13,7 @@ import { VitePWA } from 'vite-plugin-pwa'
|
||||
import VueDevTools from 'vite-plugin-vue-devtools'
|
||||
import LinkAttributes from 'markdown-it-link-attributes'
|
||||
import Unocss from 'unocss/vite'
|
||||
import Shiki from 'markdown-it-shiki'
|
||||
import Shiki from 'markdown-it-shikiji'
|
||||
import WebfontDownload from 'vite-plugin-webfont-dl'
|
||||
|
||||
export default defineConfig({
|
||||
@@ -75,14 +75,7 @@ export default defineConfig({
|
||||
Markdown({
|
||||
wrapperClasses: 'prose prose-sm m-auto text-left',
|
||||
headEnabled: true,
|
||||
markdownItSetup(md) {
|
||||
// https://prismjs.com/
|
||||
md.use(Shiki, {
|
||||
theme: {
|
||||
light: 'vitesse-light',
|
||||
dark: 'vitesse-dark',
|
||||
},
|
||||
})
|
||||
async markdownItSetup(md) {
|
||||
md.use(LinkAttributes, {
|
||||
matcher: (link: string) => /^https?:\/\//.test(link),
|
||||
attrs: {
|
||||
@@ -90,6 +83,13 @@ export default defineConfig({
|
||||
rel: 'noopener',
|
||||
},
|
||||
})
|
||||
md.use(await Shiki({
|
||||
defaultColor: false,
|
||||
themes: {
|
||||
light: 'vitesse-light',
|
||||
dark: 'vitesse-dark',
|
||||
},
|
||||
}))
|
||||
},
|
||||
}),
|
||||
|
||||
|
||||
Reference in new issue
Block a user