Giter Club home page Giter Club logo

slidev-vscode's Introduction

The source code of VS Code extension is now moved to the main repo. This repo is archived.



Slidev

Presentation slides for developers
who use VS Code 🤣

Visual Studio Marketplace Version Visual Studio Marketplace Downloads


Status: Preview

Features

  • View slides in the side panel
  • Go to next / prev buttons
  • Re-ordering slides
  • Folding for slide blocks
  • Convert Markdown to HTML

Installation

  1. Open VS Code
  2. Select Extensions in the left vertical toolbar
  3. Search for slidev
  4. Click on Install

Usage

  1. Open Command Palette
  2. Search for slidev
  3. Select View: Show Slidev
  4. Open a Slidev Markdown file

Sponsors

License

MIT License © 2021 Anthony Fu

slidev-vscode's People

Contributors

antfu avatar gy-mate avatar malcolmyu avatar owlnai avatar rainsia avatar rottenpen avatar wey-gu avatar ycjcl868 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

slidev-vscode's Issues

Allow specifying a subdir for slidev

Currently slidev expects a package.json in the root of the repository. However, some projects which might not be js-based and use sli.dev for slides in a subfolder, won't have this. It would be very convenient to be able to tell the extension where to find the slides.

I have tried forcing "slidev.enabled": true in the workspace settings, but this has no effect.

Of course, opening that folder instead of the project root in vscode solves the problem.

Thanks for the extension!

Question: No Slidev icon in activity bar

Hello everyone, I installed this from VS Code extensions, but saw no Slidev icon in the activity bar. May I ask how can I use this extension?

Extension version: 0.2.0
VS Code version: 1.56.2

Extension inactive if the Slidev project is in a sub-folder

Describe

The Slidev folder must be opened in VSCode as the root workspace folder. If the project is in a sub-folder, the extension is not activated, resulting in:

  • A missing extension side panel.
  • All commands returning an error. See #7 for an image (same error for every command).

Reproduce

  • With the extension installed, open a folder that contains a sub-folder with a Slidev project.
  • Verify that the Slidev side panel is missing.
  • Attempt to run any Slidev command.

Notes

This might be the expected behavior. If so, perhaps there is a way to warn the user about this?

Command not found

  • I installed Slidev Plugin in Vscode, I got the following error.
    image
  • I force enabled the entension. Also, I cannot find the extension icon on the left side bar as shown in the demo.

I am using windows. And I have upgraded to the latest version

bug: Focus side panel resulted in an error

Describe the bug
Focus side panel results in an error.

To Reproduce
Steps to reproduce the behavior:

  1. Install Slidev extension
  2. Open command pallete
  3. Select: Slidev: Focus side panel
  4. See error

Expected behavior
Focus side panel.

Media
image

Cannot find the button on the sidebar

Hi, this is a good alternative to Reveal.js. It works well in the external browser. However, I cannot find the button on the sidebar. I have no clue of the cause.

image

Besides, there is an alert.

image

Slidev server not found on `http://localhost:3030/`

I get the following message on VSCode :
image

However my server is up and running on http://localhost:3030/
If I hit reload in the top right corner of the preview pannel, it does nothing.
I am using VSCode 1.58.0 on windows on slidev-vscode 0.3.2

--- Edit :
It seems that if I start my server, then I start VSCode it works. Maybe it is just a reload problem.

Page breaks (---) barely visible in VSCode, e.g. with Dracula, but also any other theme

Hi and thank you very much for this wonderful VSCode extension and the great Slidev in general!

One problem I'm running into with VSCode and Slidev again and again is that the page breaks (---) are barely visible in the IDE using any common VSCode theme.

I already tried overriding the setting in VSCode settings.json, but it simply doesn't work. Doesn't have any effect:

"editor.tokenColorCustomizations": {
    "[Dracula]": {
      "textMateRules": [
        {
          "scope": "meta.separator.markdown",
          "settings": {
            "foreground": "#aaff00",
          }
        },
        {
            "scope": "text.html.markdown",
            "settings": {
              "foreground": "#FFFFFF",
            }
          }
      ]
    }
  },

This is what it currently looks like (note the #2 and #3) are the breaks:
grafik

Would it be possible through this intention (or for now add it to the Slidev docs) to make these breaks more visible by default?

I hope, I'm not the only one struggling with this, using Slidev for the first time...

Preview does not work

I update @slidev/cli to v0.35.5, installed globally and slidev-vscode is 0.4.0.

The .md file is in the project root, I also have @slidev/cli dep in project root pakcage.json. The slide could be open in browser. Slidev extension icon also appears in the activity bar. Convert current selection to HTML works fine, Show slidev and Go to previous slide works fine.

However, The preview panel did not show up and Command 'Slidev: Focus side panel' resulted in an error (command 'slidev.focus-side-panel' not found) and Command 'Slidev: Move slide up resulted in an error (Cannot read properties of undefined (reading 'info')), Move slide down results in the same error as Move slide up.

How to start the extension?

(Sorry, My English isn't very well)
After I downloaded this extension, I found I couldn't find the way to start it. the side panel only gave me the markdown mode document.
I have downloaded the Node.js and slidev.
屏幕截图 2022-01-28 115958
屏幕截图 2022-01-28 120801

Slidev server not found

Hi there, I use npx slidev to run a slidev server in terminal but the plugin still shows slidev server is not found.
How to fix this problem?
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.