First of all, sorry for my poor english.

As title, I made a tool to provide this feature!

I've test to packed the demo slides spa into executable outputs for macos-x64 and win-x64

# Assume the current path is in the slidev repo's root
# With dependency 'serve-something' installed (assume that we installed as a global dependency)

# Execute the command (Checkout the serve-something repo for the options' detail)
$ serve-something ./demo/dist --spa --build --targets node14-macos-x64,node14-win-x64

# There would be a folder named as 'executable-outputs' by default, and the executable outputs would finally be inside the folder!

It works just fine, but the disadvantage is that the output size may be over 4X MB because of the packed node runtime.

I think this could be an option for build into spa, it might be a convenient way for using anywhere!

I would like to have a discussion with everyone who loves this awesome project!

npm init slidev That's the performance、。

Error: Cannot find module '@slidev/parser/fs'
Require stack:

• /Users/lizheguang/zheGuangCode/slidev/node_modules/@slidev/cli/dist/chunk-AMXRPYUL.js
• /Users/lizheguang/zheGuangCode/slidev/node_modules/@slidev/cli/dist/chunk-I6I6DDEX.js
• /Users/lizheguang/zheGuangCode/slidev/node_modules/@slidev/cli/dist/cli.js
• /Users/lizheguang/zheGuangCode/slidev/node_modules/@slidev/cli/bin/slidev.js
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:957:15)
  at Function.Module._load (internal/modules/cjs/loader.js:840:27)
  at Module.require (internal/modules/cjs/loader.js:1019:19)
  at require (internal/modules/cjs/helpers.js:77:18)
  at Object. (/Users/lizheguang/zheGuangCode/slidev/node_modules/@slidev/cli/dist/chunk-AMXRPYUL.js:217:12)
  at Module._compile (internal/modules/cjs/loader.js:1133:30)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
  at Module.load (internal/modules/cjs/loader.js:977:32)
  at Function.Module._load (internal/modules/cjs/loader.js:877:14)
  at Module.require (internal/modules/cjs/loader.js:1019:19) {
  code: 'MODULE_NOT_FOUND',

node: v12.16.3

Hi 👋
Layout is broken when I use Monaco Editor.
Is this bug?

Environment

• OS: macOS Catalina ver. 10.15.7
• Browser: Chrome

Hey @antfu,
First of all the project is awesome.
Unfortunately, I tested locally today,
GIF: https://drive.google.com/file/d/1FLMF4moUHs8SWGgEijEf9zXgDkDXO3tQ/view

Maybe this is intentional as https://sli.dev/guide/syntax.html has no mention of numbered lists.

So I made a list like in this screenshot.

When running npm run dev I see this in Chrome:

Is there's some other way I can use numbered lists? I am willing to try it.

Hello @antfu !

Thank you for making slidev. Can you add a shortcut for the move back like left and up arrow?
slidev already uses space bar to move next slide. So please add shift + space to move previous slide.

I tried mermaid , but this error pops out.

what I did

yarn add mermaid
yarn dev

in the slides.md

sequenceDiagram
  Alice->John: Hello John, how are you?
  Note over Alice,John: A typical interaction

what am I missing?

Screenshot

Explanation

After following the steps on start guide in official website: yarn create slidev and then yarn dev, the url - http:localhost:3030/1 open in browser and the above message immediately appear. BTW, this is just an annoying bug, since it can be hidden.

Possible solution

On Vite documentation, they say to add a folder "public" to add static files, after testing it, the message doesn't show up, apparently fixing the bug. If this is a right approach, I'll be glad to open a pull request. ;)

❤️ Great project, I really loved this.

Is there any way to remove the gradient above the background image?

First of all, great project. For further, I hope it can be used like this:

npm i -g @slidev/cli
vim index.md
slidev index.md
# Then, start to performance.

Didn't know if this was already done, but currently, if I use @slidev/cli like this, it will report lack of dependencies.

In this way, it can make user more focus on the content (only a single markdown file) than now (vscode, node_modules, package.json, etc).

Thanks.

LaTeX support will make writing math equations easier.

It could be nice to save the state of the previous slides. For instance, on Composable Vuew example, when going back on https://talks.antfu.me/2021/composable-vue/9 takes you to https://talks.antfu.me/2021/composable-vue/8 , even then the last view plus state was https://talks.antfu.me/2021/composable-vue/8?clicks=3 .

Hi! Thanks a lot for this awesome lib!

Do you think it will be possible to add a icon path in the slides header that can be use as the favicon?

---
title: 'My slides'
favicon: ./icon.png | ./icon.svg
---

Thank you!

https://mhchem.github.io/MathJax-mhchem/

https://github.com/KaTeX/KaTeX/blob/master/contrib/mhchem/README.md

Hello! Great project. I've been using markdown to write beamer slides for years (with pandoc) and this is a really nice addition to that space.

One small issue I've been having is that when I open the web app, my slides seem to be all shifted to the right.

Steps to reproduce

These are the steps I used:

1. On MacBook pro, open terminal, choose folder, and type npm init slidev and follow all standard options. Wait for all packages to be installed.
2. Open Google Chrome and navigate to http://localhost:3030.

The slides open like this:

First of all congrats for the amazing work that you did. It is inspiring. I just got to know about it, I would interested actually in using it for my own presentations, I was just wondering how to publish to the web? I only find exporting to pdf. I understand slidev build produces a SPA? So I would only need a web server post build to run it right? Well I guess it is just about trying it out but I thought you could quickly dispell the doubts in my mind.

In the base element, there is a class that should be toggled: class="light" | class="dark".

However, what currently happens is: class | class="dark". Essentially, the "light" class is not assigned.

I looked through the source code and it may be possible that this is a Vue issue, not a Slidev one, but I wanted to put this out there just in case.

When I run "npm init slidev" I failed to find the module "Error: Cannot find module '@slidev/parser/fs'

Currently, Slidev only supports a single Markdown entry for all your slides. I believe this way is simply and easier to focus on the slides content for getting started. But when the slides goes bigger can more complex, sometime you might found it hard to find the right slides to edit. We do have editor supports could solve this problem to some extent.

But eventually, we might still need to have multi-entries support for better organizations and reusability in some scenarios. So, this issue brings two proposals for the interface of this feature.

Proposal A

Using frontmatter option src to specify the sub-entry:

---
src: ./welcome.md
---

<!-- when `src` is used, the inline content will be ignored -->

---
src: ./intro.md
---

---

# Inline Slide

---
src: ./intro.md
layout: custom
---

<!-- resuse same slide content, but with different layout -->

The if the subentry contains frontmatter as well, it will be merged with the inline ones (inline frontmatter has high priority).

We could also make our editor support read / write to the correct sub-entries with this approach.

Proposal B

"Magic Component" - use sub-entires as components, so you can also extend the content (will be replaced compile time)

<SlideFragment src="./welcome.md" />

---

<SlideFragment src="./intro.md" />

---

# Inline Title

Inline Content

<!-- blend with inline content -->
<SlideFragment src="./page-3.md" />

---

This is more flexible but it's also saying we are not likely to have good editor support for sub-entries.

Proposal C

Provide by @bramceulemans

Having each slide as a file, under './slides' folder and follow some naming conversion. For example

├── slides
|   ├── 01.md
|   ├── 02.md
    └── ...

Ideally, we could also provide a CLI component to split into "multiple files style" and re-compose them back to a single entry when need.

The downside of this approach is losing the ability to "reuse" sections and make the re-ordering harder without additional tools.

I can't tell if this is a router misconfiguration or server misconfiguration, but when sharing the link on a specific slide / clicks, the page remains black.

Willing to contribute if this is code related

https://sli.dev/demo/composable-vue/7.html

代码块生成 html 后还会保留 {{}}，此时将 html 插入 <template> 作为内容，{{}} 就作为语法被处理所以不展示了。

示例
https://codesandbox.io/s/fancy-dawn-j344h?file=/src/README.md

Hello, I was so curious about slidev that I jumped in immediately! (✧ω✧)

I have a problem with "npm run dev"
When I execute it I got:

(node:9240) UnhandledPromiseRejectionWarning: Error: Path contains invalid characters: D:\Ramen\Projects\slidev-test/D:/Ramen/Projects/slidev-test/node_modules/.remote-assets
    at checkPath (D:\Ramen\Projects\slidev-test\node_modules\fs-extra\lib\mkdirs\make-dir.js:20:21)
    at module.exports.makeDir (D:\Ramen\Projects\slidev-test\node_modules\fs-extra\lib\mkdirs\make-dir.js:45:3)
    at Object.defineProperty.value (D:\Ramen\Projects\slidev-test\node_modules\universalify\index.js:21:45)
    at Object.configResolved (D:\Ramen\Projects\slidev-test\node_modules\vite-plugin-remote-assets\dist\index.js:351:32)
    at D:\Ramen\Projects\slidev-test\node_modules\vite\dist\node\chunks\dep-2c03f3f9.js:46156:127
    at Array.map (<anonymous>)
    at resolveConfig (D:\Ramen\Projects\slidev-test\node_modules\vite\dist\node\chunks\dep-2c03f3f9.js:46156:35)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async createServer (D:\Ramen\Projects\slidev-test\node_modules\vite\dist\node\chunks\dep-2c03f3f9.js:69168:20)
    at async createServer (D:\Ramen\Projects\slidev-test\node_modules\@slidev\cli\dist\chunk-2DUYQIA7.js:13:18)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:9240) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:9240) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

System: Windows10
Node: v14.16.1
Npm: v7.0.5

What I did:

• npm init slidev
• choose "slidev-test" as name
• cd slidev-test
• npm install

added 225 packages, and audited 225 packages in 22s

30 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

• npm run dev (and here I got the issue)

It is something that could be on my side to check?
Thanks in advance, kind regards

Hi!

First of all: thank you for the great project! I want to make a short presentation on my work about a big refactor, and I always hated making presentations. But now I really enjoy, especially the line highlight feature.

Steps to reproduce:

npm run build
npx serve -s dist/

Go to http://localhost:5000/, make sure routing is working after page reload
Go to http://localhost:5000/presenter - it redirects to the first slide.

I know that I can start a dev server for presenter mode, but it's over 5 megabytes without images. Looks like there is no compression?

My initial idea was to start a presenter mode on localhost, forward the local web server with ngrok, and give my team member links, so they could open on their screens without me sharing my screen.

[Integration] Plugin for Visual Studio Code with live preview.
There is a similar plugin for Marp with a preview right inside Visual Studio Code and command integration.
Marp for VS Code

[Feature request] obsidian.md plugin.

That would be so cool.

Thank you for your consideration.

Environment

slidev 0.4.0, Windows 10, Google Chrome Stable (90.0.4430.93)

Description

The insertion caret remains black after the theme is switched to dark-mode, thus it's hardly visible.

Preview

There's an insertion caret in the area where it's stroked in red.

Hi. Thanks for develop awesome tools.

With the editor panel open, I noticed that when I opened the slides overview, the code overlapped.

The cause of this bug seems to be that "codemirror-line" is set to "z-index: 2".
codemirror/codemirror5#3770

I meet an issues about: Command failed with exit code 1: npm install
but I do not know why Error: Command failed with exit code 1: npm install
at makeError (C:\Users\Yohager\AppData\Local\npm-cache_npx\c00c242a51a5200e\node_modules\execa\lib\error.js:59:11)

Great job, I want to translate this repo into Chinese, how can I help with it?

When I want to modify this part of the content, I don't want it to be emptied。 ：）

The SPA points to the assets-folder in the root dir.
href="/assets/..."
I think a relative path would be much better

On chrome stable and canary wasn't able to see the screen or the camera recording :

On FF, it was better and but the audio wasn't recorded.

P.S: Browser dev console has not errors.

In the create-slidev source code, the version is "version": "0.5.0" and that value seems to be referenced in the setup script:

const { version } = require('./package.json')

...

console.log(`${bold('  Slidev') + dim(' Creator')}  ${blue(`v${version}`)}`)

However, the version number when running npm init slidev is v0.1.6:

Problem:

Clicking any buttons in the navigation bar, then press the spacebar. It will trigger the "next animation" event and the event associated with the button together.

For example, I change to the dark mode at first:

Then I press the spacebar:

Reason:

I believe it is because the button gets focused after clicked, then pressing the spacebar can trigger the button. If I click somewhere to make it lose focus, the problem will not happen.

Solution:

I am not sure if it is a problem that needs to be solved, but I think it may ruin the user experience since they have to click somewhere else after clicking the navigator buttons.

I have solved it by blur(). If you think it is worthwhile to do so, I can submit a PR later.

Finally, thanks for this awesome project again! 👍

Hi @antfu
Just want to share Tamasha. It is based on Tiddlywiki
and supports both Markdown and wikitext! Only 34kB.

Demo: https://kookma.github.io/TW-Tamasha
Code: https://github.com/kookma/TW-Tamasha

What do you think?

I added this index.html to my project root like guide page (tested in public/index.html either)

<!-- ./index.html -->
<head>
  <link rel="icon" type="image/png" href="/favicon.png" />
</head>

But favicon still not changing
I think this is overwrited by slidev favicon. Is there correct way to change favicon by changing index.html or vite.config.js?

Hi! Thanks for this amazing project!

I was wondering if there was an easy way to display slides number? Or does it have to be implemented via a custom theme? (maybe I missed it in the online guide)

Thanks,

CN

When attempting to use the apple-basic theme I receive the following message in the terminal.
The theme "slidev-theme-apple-basic" was not found in your project, do you want to install it now?

I choose y to install and receive the following error.

npm ERR! code ENOVERSIONS
npm ERR! No valid versions available for slidev-theme-apple-basic

(node:25672) UnhandledPromiseRejectionWarning: Error: Command failed with exit code 1: npm i slidev-theme-apple-basic
    at makeError (/Users/username/Code/github/test-slidev/node_modules/@slidev/cli/dist/chunk-JO7C4JO4.js:5935:17)
    at handlePromise (/Users/username/Code/github/test-slidev/node_modules/@slidev/cli/dist/chunk-JO7C4JO4.js:6577:33)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async run2 (/Users/username/Code/github/test-slidev/node_modules/@slidev/cli/dist/chunk-JO7C4JO4.js:7501:5)
    at async promptForThemeInstallation (/Users/username/Code/github/test-slidev/node_modules/@slidev/cli/dist/chunk-JO7C4JO4.js:7648:3)
    at async resolveOptions (/Users/username/Code/github/test-slidev/node_modules/@slidev/cli/dist/chunk-JO7C4JO4.js:7584:9)
    at async initServer (/Users/username/Code/github/test-slidev/node_modules/@slidev/cli/dist/cli.js:68:21)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:25672) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:25672) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I have tried the following command as well, npm install @slidev/theme-apple-basic.

I can confirm that the package does exist in my npm_modules.

I continue to receive the following message each time I try to run dev.
The theme "slidev-theme-apple-basic" was not found in your project, do you want to install it now?

Running Windows 10

I'd be interested to hear your take on how Slidev compares to Marp

To open the showcase, it took me a few seconds to understand i have to click the showcase icon which is not very obvious. perhaps make the entire showcase image clickable?

Hey there, thanks a lot for creating this program.

Is there has any plan to support mermaid.js?

Is great to write code to gernate diagram with mermaid rather than paste a image to slide.

Demo: https://github.com/lhjt/slidev-animations-demo

Using the v-clicks component as per here does not work in production builds.

Expected behaviour

• Dot points should appear after each click

Actual behaviour

• Dot points are all visible upon moving to next slide

Demo

Prerequisites

• pnpm
• serve (pnpm i -g serve)

Steps to reproduce:

1. Clone the repository
2. run pnpm build
3. run serve -s dist
4. Navigate to localhost:5000 (or whatever port you are running on)
5. Initially, v-clicks works on the title slide
6. Navigate to the next slide, and all the dot points will be visible, even when wrapped with v-clicks

Tested on Edge Chromium, Google Chrome, and Firefox

Other notes

• Navigating from slide 2 back to slide 1 will prevent the items on slide 1 from appearing again

---
title: Hello
layout: grid
gap: 4
---

# One

# Two

# Three

I found layouts/*.vue couldn't support multiple slots, so how to implement it?

Is it possible to export a template in a dark theme?

this url should use assets link like ../assets/logo.png

it may crash at dev mode in my country

love slidev so mush and thank you for your hard work ❤️

Don't see it anywhere in the docs, but maybe we could have support for theming mermaid via https://mermaid-js.github.io/mermaid/#/theming in slidev custom themes.

I haven't looked to much into how difficult it would be to add support, but I think visually the diagrams would benefit a lot from being able to theme them

Bug report

Hello I found these things which are little annoying but there is still some workarounds.

First problem (Changing heading content)

If I change first heading content in demo slides.md. Nothing changes in the browser.

For example:

1. change
   # Welcome to Slidev
   to
   # Welcome to Slidevs

Browser refreshes but the heading is not changed. I still see Welcome to Slidev as heading

If I duplicate the line:

# Welcome to Slidevs
# Welcome to Slidevs

Then the browser responds and updates the content and I see two headings.

Changing heading do nothing, but if I add some text as paragraph it updates correctly.

If I change the heading size (# to ##) it updates correctly as well. ¯\_(ツ)_/¯

Second problem (Presentation notes content)

If I change presentation notes for slide with presentation mode active in the browser, it does nothing.

Again if I change something that responds to change, that again changes the notes for presenter as well.

Conclusion

This two phenomenons happens only on first slide for some reason
I was able to change heading or notes on other pages, even in presentation mode. Everything works. Looks like first slide of the demo page is the problem.

Hope this helps as a bug report