Merge branch 'main' into pr/KermanX/2026

CONTRIBUTING.md

@@ -80,7 +80,7 @@ packages
   parser/          - parser for Slidev's extended Markdown format
   create-app/      - scripts and template for `npm init slidev`
   create-theme/    - scripts and template for `npm init slidev-theme`
-  theme-*/         - official themes
+  vscode/          - the VSCode extension
 ```
 
 ## Code Style

docs/builtin/cli.md

@@ -39,6 +39,7 @@ Start a local server for Slidev.
 Options:
 
 - `--port`, `-p` (`number`, default: `3030`): port number.
+- `--base` (`string`, default: `/`): base URL (see https://vitejs.dev/config/shared-options.html#base).
 - `--open`, `-o` (`boolean`, default: `false`): open in the browser.
 - `--remote [password]` (`string`): listen to the public host and enable remote control, if a value is passed then the presenter mode is private and only accessible by passing the given password in the URL query `password` parameter.
 - `--bind` (`string`, default: `0.0.0.0`): specify which IP addresses the server should listen on in the remote mode.

docs/custom/config-fonts.md

@@ -18,7 +18,7 @@ fonts:
 
 And that's all.
 
-Fonts will be **imported automatically from [Google Fonts](https://fonts.google.com/)**. That means you can use any fonts available on Google Fonts directly.
+Fonts will be **imported automatically from a provider via CDN, by default it is [Google Fonts](https://fonts.google.com/)**. That means you can use any fonts available on Google Fonts directly.
 
 ## Local Fonts
 
@@ -92,10 +92,10 @@ fonts:
 
 ## Providers
 
-- Options: `google` | `none`
+- Options: `google` | `coollabs` | `none`
 - Default: `google`
 
-Currently, only Google Fonts is supported, we are planning to add more providers in the future. Specify to `none` will disable the auto-importing feature entirely and treat all the fonts locally.
+Currently, only [Google Fonts](https://fonts.google.com/) and [coolLabs](https://fonts.coollabs.io/) supported, we are planning to add more providers in the future. Specify to `none` will disable the auto-importing feature entirely and treat all the fonts locally.
 
 ```yaml
 ---

docs/features/remote-access.md

@@ -14,13 +14,13 @@ You can run your presentation with remote access by using the `--remote` flag:
 
 ::: code-group
 
-```bash [npm]
-npm run dev -- --remote
+```bash [pnpm]
+pnpm dev --remote
 # i.e. slidev --remote
 ```
 
-```bash [pnpm]
-pnpm dev -- --remote
+```bash [npm]
+npm run dev -- --remote
 # i.e. slidev --remote
 ```
 
@@ -41,13 +41,13 @@ You can open a [Cloudflare Quick Tunnels](https://developers.cloudflare.com/clou
 
 ::: code-group
 
-```bash [npm]
-npm run dev -- --remote --tunnel
+```bash [pnpm]
+pnpm dev -- --remote --tunnel
 # i.e. slidev --remote --tunnel
 ```
 
-```bash [pnpm]
-pnpm dev -- --remote --tunnel
+```bash [npm]
+npm run dev -- --remote --tunnel
 # i.e. slidev --remote --tunnel
 ```
 

docs/features/vscode-extension.md

@@ -63,3 +63,18 @@ You can add glob patterns to the `slidev.include` configuration to include files
   "slidev.include": ["**/presentation.md"]
 }
 ```
+
+#### Dev Command {#dev-command}
+
+You can customize the command to start dev server by setting the `slidev.dev-command` configuration. The default value is `npm exec -c 'slidev ${args}'`.
+
+The configured command can contain placeholders:
+
+- `${args}`: All CLI arguments. e.g. `slides.md --port 3000 --remote`
+- `${port}`: The port number. e.g. `3000`
+
+Examples:
+
+- Global installation: `slidev ${args}`
+- For PNPM users, you can set it to `pnpm slidev ${args}`.
+- For [code-server](https://coder.com/docs/code-server/) users, you can set it to `pnpm slidev ${args} --base /proxy/${port}/`. This will make the dev server accessible at `http://localhost:8080/proxy/3000/`.

docs/guide/exporting.md

@@ -26,14 +26,14 @@ Exporting to PDF, PPTX, or PNG relies on [Playwright](https://playwright.dev) fo
 
 ::: code-group
 
-```bash [npm]
-$ npm i -D playwright-chromium
-```
-
 ```bash [pnpm]
 $ pnpm add -D playwright-chromium
 ```
 
+```bash [npm]
+$ npm i -D playwright-chromium
+```
+
 ```bash [yarn]
 $ yarn add -D playwright-chromium
 ```

docs/guide/index.md

@@ -46,14 +46,21 @@ Run the following command to create a new Slidev project locally:
 
 ::: code-group
 
-```bash [npm]
-npm init slidev@latest
-```
-
 ```bash [pnpm]
+# If you haven't installed pnpm
+npm i -g pnpm
+
 pnpm create slidev
 ```
 
+```bash [npm]
+# Not recommended -
+# NPM will download the packages each time you create a new project,
+# which is slow and takes up a lot of space
+
+npm init slidev@latest
+```
+
 ```bash [yarn]
 yarn create slidev
 ```
@@ -68,14 +75,14 @@ If you prefer to have a single Markdown file as your slides, you can install the
 
 ::: code-group
 
-```bash [npm]
-npm i -g @slidev/cli
-```
-
 ```bash [pnpm]
 pnpm i -g @slidev/cli
 ```
 
+```bash [npm]
+npm i -g @slidev/cli
+```
+
 ```bash [yarn]
 yarn global add @slidev/cli
 ```

docs/guide/write-theme.md

@@ -8,14 +8,14 @@ To get started, we recommend you use our generator for scaffolding your first th
 
 ::: code-group
 
-```bash [npm]
-$ npm init slidev-theme@latest
-```
-
 ```bash [pnpm]
 $ pnpm create slidev-theme
 ```
 
+```bash [npm]
+$ npm init slidev-theme@latest
+```
+
 ```bash [yarn]
 $ yarn create slidev-theme
 ```

docs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docs",
   "type": "module",
-  "version": "51.0.2",
+  "version": "51.1.0",
   "private": true,
   "packageManager": "[email protected]",
   "scripts": {

package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "51.0.2",
+  "version": "51.1.0",
   "private": true,
   "packageManager": "[email protected]",
   "engines": {

packages/client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "51.0.2",
+  "version": "51.1.0",
   "description": "Presentation slides for developers",
   "author": "antfu <[email protected]>",
   "license": "MIT",

packages/create-app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-slidev",
   "type": "module",
-  "version": "51.0.2",
+  "version": "51.1.0",
   "description": "Create starter template for Slidev",
   "author": "antfu <[email protected]>",
   "license": "MIT",

packages/create-app/template/README.md

@@ -2,8 +2,8 @@
 
 To start the slide show:
 
-- `npm install`
-- `npm run dev`
+- `pnpm install`
+- `pnpm dev`
 - visit <http://localhost:3030>
 
 Edit the [slides.md](./slides.md) to see the changes.

packages/create-app/template/package.json

@@ -8,7 +8,7 @@
     "export": "slidev export"
   },
   "dependencies": {
-    "@slidev/cli": "^51.0.2",
+    "@slidev/cli": "^51.1.0",
     "@slidev/theme-default": "latest",
     "@slidev/theme-seriph": "latest",
     "vue": "^3.5.13"

packages/create-theme/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-slidev-theme",
   "type": "module",
-  "version": "51.0.2",
+  "version": "51.1.0",
   "description": "Create starter theme template for Slidev",
   "author": "antfu <[email protected]>",
   "license": "MIT",

packages/create-theme/template/package.json

@@ -14,10 +14,10 @@
     "screenshot": "slidev export example.md --format png"
   },
   "dependencies": {
-    "@slidev/types": "^51.0.2"
+    "@slidev/types": "^51.1.0"
   },
   "devDependencies": {
-    "@slidev/cli": "^51.0.2"
+    "@slidev/cli": "^51.1.0"
   },
   "//": "Learn more: https://sli.dev/guide/write-theme.html",
   "slidev": {

packages/parser/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/parser",
-  "version": "51.0.2",
+  "version": "51.1.0",
   "description": "Markdown parser for Slidev",
   "author": "antfu <[email protected]>",
   "license": "MIT",

packages/slidev/node/cli.ts

@@ -99,16 +99,21 @@ cli.command(
       alias: 'f',
       default: false,
       type: 'boolean',
-      describe: 'force the optimizer to ignore the cache and re-bundle  ',
+      describe: 'force the optimizer to ignore the cache and re-bundle',
     })
     .option('bind', {
       type: 'string',
       default: '0.0.0.0',
       describe: 'specify which IP addresses the server should listen on in remote mode',
     })
+    .option('base', {
+      type: 'string',
+      describe: 'base URL. Example: /demo/',
+      default: '/',
+    })
     .strict()
     .help(),
-  async ({ entry, theme, port: userPort, open, log, remote, tunnel, force, inspect, bind }) => {
+  async ({ entry, theme, port: userPort, open, log, remote, tunnel, force, inspect, bind, base }) => {
     let server: ViteDevServer | undefined
     let port = 3030
 
@@ -126,7 +131,7 @@ cli.command(
     async function initServer() {
       if (server)
         await server.close()
-      const options = await resolveOptions({ entry, remote, theme, inspect }, 'dev')
+      const options = await resolveOptions({ entry, remote, theme, inspect, base }, 'dev')
       const host = remote !== undefined ? bind : 'localhost'
       port = userPort || await getPort({
         port: 3030,
@@ -150,6 +155,7 @@ cli.command(
             force,
           },
           logLevel: log as LogLevel,
+          base,
         },
         {
           async loadData(loadedSource) {
@@ -201,7 +207,7 @@ cli.command(
       if (remote)
         publicIp = await import('public-ip').then(r => r.publicIpv4())
 
-      lastRemoteUrl = printInfo(options, port, remote, tunnelUrl, publicIp)
+      lastRemoteUrl = printInfo(options, port, base, remote, tunnelUrl, publicIp)
     }
 
     async function openTunnel(port: number) {
@@ -225,7 +231,7 @@ cli.command(
         name: 'o',
         fullname: 'open',
         action() {
-          openBrowser(`http://localhost:${port}`)
+          openBrowser(`http://localhost:${port}${base}`)
         },
       },
       {
@@ -334,7 +340,7 @@ cli.command(
     })
     .option('base', {
       type: 'string',
-      describe: 'output base',
+      describe: 'output base. Example: /demo/',
     })
     .option('download', {
       alias: 'd',
@@ -353,7 +359,7 @@ cli.command(
     const { build } = await import('./commands/build')
 
     for (const entryFile of entry as unknown as string[]) {
-      const options = await resolveOptions({ entry: entryFile, theme, inspect, download }, 'build')
+      const options = await resolveOptions({ entry: entryFile, theme, inspect, download, base }, 'build')
 
       printInfo(options)
       await build(
@@ -621,10 +627,13 @@ function exportOptions<T>(args: Argv<T>) {
 function printInfo(
   options: ResolvedSlidevOptions,
   port?: number,
+  base?: string,
   remote?: string,
   tunnelUrl?: string,
   publicIp?: string,
 ) {
+  const baseUrl = port && `http://localhost:${bold(port + (base?.slice(0, -1) || ''))}`
+
   console.log()
   console.log()
   console.log(`  ${cyan('●') + blue('■') + yellow('▲')}`)
@@ -637,22 +646,22 @@ function printInfo(
   console.log(dim('  css engine  ') + blue('unocss'))
   console.log(dim('  entry       ') + dim(path.normalize(path.dirname(options.entry)) + path.sep) + path.basename(options.entry))
 
-  if (port) {
+  if (baseUrl) {
     const query = remote ? `?password=${remote}` : ''
     const presenterPath = `${options.data.config.routerMode === 'hash' ? '/#/' : '/'}presenter/${query}`
     const entryPath = `${options.data.config.routerMode === 'hash' ? '/#/' : '/'}entry${query}/`
     const overviewPath = `${options.data.config.routerMode === 'hash' ? '/#/' : '/'}overview${query}/`
     console.log()
-    console.log(`${dim('  public slide show ')}  > ${cyan(`http://localhost:${bold(port)}/`)}`)
+    console.log(`${dim('  public slide show ')}  > ${cyan(`${baseUrl}/`)}`)
     if (query)
-      console.log(`${dim('  private slide show ')} > ${cyan(`http://localhost:${bold(port)}/${query}`)}`)
+      console.log(`${dim('  private slide show ')} > ${cyan(`${baseUrl}/${query}`)}`)
     if (options.utils.define.__SLIDEV_FEATURE_PRESENTER__)
-      console.log(`${dim('  presenter mode ')}     > ${blue(`http://localhost:${bold(port)}${presenterPath}`)}`)
-    console.log(`${dim('  slides overview ')}    > ${blue(`http://localhost:${bold(port)}${overviewPath}`)}`)
+      console.log(`${dim('  presenter mode ')}     > ${blue(`${baseUrl}${presenterPath}`)}`)
+    console.log(`${dim('  slides overview ')}    > ${blue(`${baseUrl}${overviewPath}`)}`)
     if (options.utils.define.__SLIDEV_FEATURE_BROWSER_EXPORTER__)
-      console.log(`${dim('  export slides')}       > ${blue(`http://localhost:${bold(port)}/export/`)}`)
+      console.log(`${dim('  export slides')}       > ${blue(`${baseUrl}/export/`)}`)
     if (options.inspect)
-      console.log(`${dim('  vite inspector')}      > ${yellow(`http://localhost:${bold(port)}/__inspect/`)}`)
+      console.log(`${dim('  vite inspector')}      > ${yellow(`${baseUrl}/__inspect/`)}`)
 
     let lastRemoteUrl = ''
 

packages/slidev/node/options.ts

@@ -9,6 +9,7 @@ import { getThemeMeta, resolveTheme } from './integrations/themes'
 import { parser } from './parser'
 import { getRoots, resolveEntry, toAtFS } from './resolver'
 import setupIndexHtml from './setups/indexHtml'
+import setupKatex from './setups/katex'
 import setupShiki from './setups/shiki'
 
 const debug = Debug('slidev:options')
@@ -82,6 +83,7 @@ export async function createDataUtils(resolved: Omit<ResolvedSlidevOptions, 'uti
 
   return {
     ...await setupShiki(resolved.roots),
+    katexOptions: await setupKatex(resolved.roots),
     indexHtml: setupIndexHtml(resolved),
     define: getDefine(resolved),
     iconsResolvePath: [resolved.clientRoot, ...resolved.roots].reverse(),